baraqex 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baraqex",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "A powerful server-side framework built on Frontend Hamroun",
   "type": "module",
   "main": "./dist/index.js",

package/templates/basic-app/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+*.config.js
+*.config.ts

package/templates/basic-app/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "react-refresh"
+  ],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}

package/templates/basic-app/README.md

@@ -0,0 +1,166 @@
+# Baraqex Basic App Template
+
+A comprehensive demonstration of the Baraqex framework featuring all major capabilities and beautiful Tailwind CSS styling.
+
+## 🚀 What's Included
+
+This template showcases:
+
+- **State Management**: useState, useEffect, useMemo, useRef hooks
+- **Error Boundaries**: useErrorBoundary for graceful error handling  
+- **Context API**: createContext and useContext for state sharing
+- **Interactive Components**: Counter, Todo List, Error Testing
+- **Responsive Design**: Tailwind CSS with dark/light mode
+- **Performance Optimizations**: Memoization and efficient re-rendering
+
+## 🎯 Features Demo
+
+### Counter Component
+- State management with useState
+- Effect tracking with useEffect  
+- Performance optimization with useMemo
+- Render counting with useRef
+
+### Todo List Component
+- Complex state operations (add, toggle, delete)
+- Form handling and validation
+- Progress tracking
+- List rendering optimization
+
+### Error Boundary Test
+- Error boundary implementation
+- Graceful error recovery
+- User-friendly error messages
+
+### Context API Demo
+- Theme switching across components
+- Global state management
+- Provider/Consumer pattern
+
+## 🎨 Styling
+
+- **Tailwind CSS**: Utility-first CSS framework
+- **Custom Components**: Reusable button, card, and input styles
+- **Responsive Design**: Mobile-first approach
+- **Dark Mode**: Full theme switching support
+- **Animations**: Smooth transitions and hover effects
+
+## 📁 Project Structure
+
+```
+src/
+├── main.tsx         # Main application component
+├── main.css         # Tailwind CSS imports and custom styles
+└── App.jsx          # Alternative app component structure
+
+public/
+├── logo.png         # Baraqex logo (add your own)
+└── index.html       # HTML template
+
+dist/
+├── bundle.js        # Compiled JavaScript
+└── main.css         # Compiled CSS
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with hot reload
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## 📖 About Baraqex
+
+Baraqex is a powerful full-stack framework built on Frontend Hamroun that provides:
+
+- ⚡ **Reactive State Management**: Intuitive hooks API
+- 🌐 **Server-Side Rendering**: SEO-friendly and fast loading
+- 🔄 **WebAssembly Support**: High-performance computing
+- 🛡️ **Built-in Security**: Authentication and validation
+- 📦 **Zero Configuration**: Works out of the box
+- 🎯 **TypeScript Ready**: Full type safety support
+
+## 🔧 Customization
+
+### Adding Components
+
+Create new components following the established pattern:
+
+```tsx
+import { jsx, useState } from 'baraqex';
+
+function MyComponent() {
+  const [state, setState] = useState('initial');
+  
+  return (
+    <div className="card">
+      <h3>My Component</h3>
+      <p>State: {state}</p>
+    </div>
+  );
+}
+```
+
+### Styling Guidelines
+
+Use the established Tailwind classes and custom components:
+
+```tsx
+// Buttons
+<button className="btn btn-primary">Primary Action</button>
+<button className="btn btn-secondary">Secondary Action</button>
+
+// Cards
+<div className="card">Content here</div>
+
+// Inputs
+<input className="input" placeholder="Enter text..." />
+```
+
+### Adding New Features
+
+1. Create component in `src/`
+2. Import and use in `main.tsx`
+3. Add to navigation if needed
+4. Test error boundaries
+5. Ensure responsive design
+
+## 🚀 Deployment
+
+The built application can be deployed to any static hosting service:
+
+```bash
+# Build production files
+npm run build
+
+# Deploy the dist/ folder contents
+```
+
+**Deployment Options:**
+- Vercel: `vercel --prod`
+- Netlify: Drag & drop the project folder
+- GitHub Pages: Push to `gh-pages` branch
+- Any static host: Upload `dist/` contents
+
+## 📚 Learn More
+
+- [Baraqex Documentation](https://www.baraqex.tech/docs)
+- [Frontend Hamroun Hooks](https://frontend-hamroun.com/hooks)  
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)
+
+## 🤝 Contributing
+
+This template is part of the Baraqex framework. Contributions welcome!
+
+---
+
+**Happy coding with Baraqex! 🚀**

package/templates/basic-app/esbuild.config.js

@@ -0,0 +1,37 @@
+import * as esbuild from 'esbuild';
+
+const isWatch = process.argv.includes('--watch');
+
+const config = {
+  entryPoints: ['src/main.tsx'],
+  bundle: true,
+  outfile: 'dist/bundle.js',
+  format: 'esm',
+  platform: 'browser',
+  target: 'es2020',
+  minify: !isWatch,
+  sourcemap: isWatch,
+  define: {
+    'process.env.NODE_ENV': isWatch ? '"development"' : '"production"'
+  },
+  external: [],
+  loader: {
+    '.tsx': 'tsx',
+    '.ts': 'tsx',
+    '.jsx': 'jsx',
+    '.js': 'jsx',
+    '.css': 'css'
+  },
+  // Don't transform JSX since we're using jsx() function calls
+  jsx: 'preserve'
+};
+
+if (isWatch) {
+  const ctx = await esbuild.context(config);
+  await ctx.watch();
+  console.log('👀 Watching for changes...');
+  console.log('📦 Bundle will be rebuilt automatically');
+} else {
+  await esbuild.build(config);
+  console.log('✅ Build complete');
+}

package/templates/basic-app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <title>My Frontend App</title>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/basic-app/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/basic-app/package.json

@@ -1,20 +1,29 @@
-{
-  "name": "baraqex-basic-app",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "Basic Baraqex application",
-  "main": "src/index.js",
-  "scripts": {
-    "dev": "node server.js",
-    "build": "npm run build:client",
-    "build:client": "echo 'Building client...'",
-    "start": "node server.js",
-    "test": "node test.js"
-  },
-  "dependencies": {
-    "baraqex": "^1.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0"
-  }
-}
+{
+  "name": "finall",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext ts,tsx --fix"
+  },
+  "dependencies": {
+    "baraqex": "^1.0.50",
+    "frontend-hamroun": "latest"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.9"
+  }
+}

package/templates/basic-app/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/basic-app/src/main.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* Custom component styles */
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-md transition-colors font-medium inline-flex items-center justify-center cursor-pointer border-none outline-none;
+  }
+  
+  .btn:focus {
+    @apply ring-2 ring-offset-2 ring-primary-500;
+  }
+  
+  .btn-primary {
+    @apply bg-primary-500 hover:bg-primary-600 text-white;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-500 hover:bg-gray-600 text-white;
+  }
+  
+  .btn-danger {
+    @apply bg-red-500 hover:bg-red-600 text-white;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-lg p-6;
+  }
+  
+  .input {
+    @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 w-full;
+  }
+}
+
+/* Additional utility classes */
+@layer utilities {
+  .text-primary-600 {
+    color: theme('colors.primary.600');
+  }
+  
+  .bg-primary-500 {
+    background-color: theme('colors.primary.500');
+  }
+  
+  .bg-primary-600 {
+    background-color: theme('colors.primary.600');
+  }
+  
+  .hover\:bg-primary-600:hover {
+    background-color: theme('colors.primary.600');
+  }
+  
+  .ring-primary-500 {
+    --tw-ring-color: theme('colors.primary.500');
+  }
+  
+  .border-primary-500 {
+    border-color: theme('colors.primary.500');
+  }
+}

package/templates/basic-app/src/main.tsx

@@ -0,0 +1,465 @@
+import { jsx, render, useState, useEffect, useMemo, useRef, useErrorBoundary, createContext, useContext } from 'baraqex';
+import './main.css';
+
+// JSX type declarations
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
+
+// Create a theme context
+const ThemeContext = createContext<'light' | 'dark'>('light');
+
+// Simple Counter Component with Tailwind styles
+function Counter() {
+  const [count, setCount] = useState(0);
+  const renderCount = useRef(0);
+
+  useEffect(() => {
+    renderCount.current += 1;
+  }, [count]);
+
+  const doubled = useMemo(() => count * 2, [count]);
+
+  return (
+    <div className="card max-w-sm mx-auto">
+      <h2 className="text-2xl font-bold text-gray-800 mb-4 text-center">
+        Counter Example
+      </h2>
+      <div className="text-center">
+        <div className="text-4xl font-bold text-primary-600 mb-6">
+          {count}
+        </div>
+        <div className="mb-4">
+          <p className="text-sm text-gray-600 mb-2">Doubled: {doubled}</p>
+          <p className="text-sm text-gray-600">Renders: {renderCount.current}</p>
+        </div>
+        <div className="space-x-2">
+          <button
+            onClick={() => setCount(count + 1)}
+            className="btn btn-primary"
+          >
+            Increment
+          </button>
+          <button
+            onClick={() => setCount(count - 1)}
+            className="btn btn-secondary"
+          >
+            Decrement
+          </button>
+          <button
+            onClick={() => setCount(0)}
+            className="btn btn-danger"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Todo Item Component
+function TodoItem({ todo, onToggle, onDelete }: { 
+  todo: { id: number; text: string; completed: boolean }; 
+  onToggle: (id: number) => void; 
+  onDelete: (id: number) => void; 
+}) {
+  return (
+    <div className={`flex items-center justify-between p-3 rounded-md border transition-colors ${
+      todo.completed ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'
+    }`}>
+      <div className="flex items-center space-x-3">
+        <button
+          onClick={() => onToggle(todo.id)}
+          className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+            todo.completed 
+              ? 'bg-green-500 border-green-500 text-white' 
+              : 'border-gray-300 hover:border-green-500'
+          }`}
+        >
+          {todo.completed && '✓'}
+        </button>
+        <span className={`transition-colors ${todo.completed ? 'line-through text-gray-500' : 'text-gray-800'}`}>
+          {todo.text}
+        </span>
+      </div>
+      <button
+        onClick={() => onDelete(todo.id)}
+        className="text-red-500 hover:text-red-700 px-2 py-1 rounded transition-colors"
+      >
+        Delete
+      </button>
+    </div>
+  );
+}
+
+// Todo List Component
+function TodoList() {
+  const [todos, setTodos] = useState<{ id: number; text: string; completed: boolean }[]>([
+    { id: 1, text: 'Learn Baraqex Framework', completed: false },
+    { id: 2, text: 'Build something awesome', completed: false },
+    { id: 3, text: 'Deploy to production', completed: false }
+  ]);
+  const [newTodo, setNewTodo] = useState('');
+
+  const addTodo = () => {
+    if (newTodo.trim()) {
+      setTodos([...todos, {
+        id: Date.now(),
+        text: newTodo.trim(),
+        completed: false
+      }]);
+      setNewTodo('');
+    }
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(todos.map((todo: { id: number; completed: any; }) =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter((todo: { id: number; }) => todo.id !== id));
+  };
+
+  const completedCount = todos.filter((todo: { completed: any; }) => todo.completed).length;
+  const totalCount = todos.length;
+
+  return (
+    <div className="card max-w-md mx-auto">
+      <h2 className="text-2xl font-bold text-gray-800 mb-4 text-center">
+        Todo List
+      </h2>
+      
+      <div className="mb-4">
+        <div className="flex space-x-2 mb-2">
+          <input
+            type="text"
+            value={newTodo}
+            onChange={(e: { target: { value: any; }; }) => setNewTodo(e.target.value)}
+            onKeyPress={(e: { key: string; }) => e.key === 'Enter' && addTodo()}
+            placeholder="Add a new todo..."
+            className="input flex-1"
+          />
+          <button
+            onClick={addTodo}
+            className="btn btn-primary"
+          >
+            Add
+          </button>
+        </div>
+        <div className="text-sm text-gray-600 text-center">
+          {completedCount} of {totalCount} completed
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {todos.map((todo: { id: Number; text?: string; completed?: boolean; }) => (
+          <TodoItem
+            key={todo.id}
+            todo={todo}
+            onToggle={toggleTodo}
+            onDelete={deleteTodo}
+          />
+        ))}
+      </div>
+
+      {todos.length === 0 && (
+        <p className="text-gray-500 text-center py-4">
+          No todos yet. Add one above!
+        </p>
+      )}
+    </div>
+  );
+}
+
+// Error boundary test component
+function BuggyComponent() {
+  const [shouldError, setShouldError] = useState(false);
+  
+  if (shouldError) {
+    throw new Error("Test error from BuggyComponent");
+  }
+  
+  return (
+    <div className="card max-w-sm mx-auto">
+      <h3 className="text-lg font-semibold text-gray-800 mb-4 text-center">
+        Error Boundary Test
+      </h3>
+      <p className="text-sm text-gray-600 mb-4 text-center">
+        Click the button below to test error handling
+      </p>
+      <div className="text-center">
+        <button 
+          onClick={() => setShouldError(true)}
+          className="btn btn-danger"
+        >
+          Trigger Error
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Context test component
+function ContextConsumer() {
+  const theme = useContext(ThemeContext);
+  
+  return (
+    <div className="card max-w-sm mx-auto">
+      <h3 className="text-lg font-semibold text-gray-800 mb-4 text-center">
+        Context API Test
+      </h3>
+      <div className={`p-4 rounded-md border text-center ${
+        theme === 'dark' ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-300 bg-gray-50'
+      }`}>
+        <p className="text-sm mb-2">Current theme: <strong>{theme}</strong></p>
+        <p className="text-xs text-gray-500">
+          Theme is provided by Context API
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// Main App Component
+function App() {
+  const [activeTab, setActiveTab] = useState('counter');
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [error, resetError] = useErrorBoundary();
+
+  useEffect(() => {
+    document.title = `Baraqex Demo - ${activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}`;
+  }, [activeTab]);
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-red-50 to-red-100 flex items-center justify-center">
+        <div className="card max-w-md mx-auto text-center">
+          <div className="text-6xl mb-4">🚨</div>
+          <h1 className="text-2xl font-bold text-red-600 mb-4">Oops! Something went wrong</h1>
+          <p className="text-gray-600 mb-4">
+            {error.message || 'An unexpected error occurred'}
+          </p>
+          <button 
+            onClick={resetError}
+            className="btn btn-primary"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <div className={`min-h-screen transition-colors ${
+        theme === 'dark' 
+          ? 'bg-gradient-to-br from-gray-900 to-gray-800' 
+          : 'bg-gradient-to-br from-blue-50 to-indigo-100'
+      }`}>
+        <div className="container mx-auto px-4 py-8">
+          
+          {/* Header with Logo */}
+          <header className="text-center mb-12">
+            <div className="flex items-center justify-center mb-6">
+              <img 
+                src="/logo.png" 
+                alt="Baraqex Logo" 
+                className="w-16 h-16 mr-4 rounded-lg shadow-lg"
+                onError={(e: { target: { style: { display: string; }; nextElementSibling: { style: { display: string; }; }; }; }) => {
+                  // Fallback to emoji if logo doesn't exist
+                  e.target.style.display = 'none';
+                  e.target.nextElementSibling.style.display = 'block';
+                }}
+              />
+              <div className="text-6xl" style={{display: 'none'}}>🚀</div>
+              <div>
+                <h1 className={`text-5xl font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-800'}`}>
+                  Baraqex
+                </h1>
+                <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                  Powered by Frontend Hamroun
+                </p>
+              </div>
+            </div>
+            
+            {/* About Baraqex */}
+            <div className="card max-w-4xl mx-auto mb-8">
+              <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">
+                Welcome to Baraqex Framework! 🎉
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
+                <div>
+                  <h3 className="text-lg font-semibold text-primary-600 mb-3">🚀 What is Baraqex?</h3>
+                  <p className="text-gray-700 leading-relaxed mb-4">
+                    Baraqex is a powerful, modern full-stack framework built on top of the Frontend Hamroun library. 
+                    It provides everything you need to build high-performance web applications with ease.
+                  </p>
+                  <p className="text-gray-700 leading-relaxed">
+                    From simple SPAs to complex server-side rendered applications with WebAssembly integration, 
+                    Baraqex has you covered with a developer-friendly API and excellent performance.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-primary-600 mb-3">✨ Key Features</h3>
+                  <ul className="space-y-2 text-gray-700">
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      Reactive state management with hooks
+                    </li>
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      Server-side rendering (SSR) support
+                    </li>
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      WebAssembly (WASM) integration
+                    </li>
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      Built-in authentication & database support
+                    </li>
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      TypeScript support out of the box
+                    </li>
+                    <li className="flex items-center">
+                      <span className="text-green-500 mr-2">✓</span>
+                      Production-ready with optimized builds
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div className="mt-8 text-center">
+                <button 
+                  onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                  className={`btn ${theme === 'dark' ? 'bg-yellow-400 text-gray-900 hover:bg-yellow-300' : 'bg-gray-800 text-white hover:bg-gray-700'}`}
+                >
+                  🌙 Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
+                </button>
+              </div>
+            </div>
+          </header>
+
+          {/* Tab Navigation */}
+          <div className="flex justify-center mb-8">
+            <div className="bg-white rounded-lg shadow-sm p-1 flex space-x-1 overflow-x-auto">
+              {[
+                { id: 'counter', label: 'Counter', icon: '🔢' },
+                { id: 'todos', label: 'Todo List', icon: '✅' },
+                { id: 'error', label: 'Error Test', icon: '🚨' },
+                { id: 'context', label: 'Context', icon: '🔄' }
+              ].map(tab => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`px-4 py-2 rounded-md transition-colors whitespace-nowrap ${
+                    activeTab === tab.id
+                      ? 'bg-primary-500 text-white'
+                      : 'text-gray-600 hover:text-gray-800 hover:bg-gray-100'
+                  }`}
+                >
+                  <span className="mr-2">{tab.icon}</span>
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Tab Content */}
+          <div className="flex justify-center mb-12">
+            {activeTab === 'counter' && <Counter />}
+            {activeTab === 'todos' && <TodoList />}
+            {activeTab === 'error' && <BuggyComponent />}
+            {activeTab === 'context' && <ContextConsumer />}
+          </div>
+
+          {/* Footer */}
+          <footer className="text-center">
+            <div className="card max-w-4xl mx-auto">
+              <h3 className="text-xl font-semibold text-gray-800 mb-6">
+                🎯 Framework Capabilities Demo
+              </h3>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div className="text-center">
+                  <div className="text-3xl mb-2">⚡</div>
+                  <h4 className="font-semibold text-gray-800 mb-2">State Management</h4>
+                  <p className="text-sm text-gray-600">
+                    useState, useEffect, useMemo, and useRef hooks working seamlessly
+                  </p>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl mb-2">🎨</div>
+                  <h4 className="font-semibold text-gray-800 mb-2">Tailwind CSS</h4>
+                  <p className="text-sm text-gray-600">
+                    Utility-first CSS framework integrated for rapid UI development
+                  </p>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl mb-2">🛡️</div>
+                  <h4 className="font-semibold text-gray-800 mb-2">Error Boundaries</h4>
+                  <p className="text-sm text-gray-600">
+                    Graceful error handling with useErrorBoundary hook
+                  </p>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl mb-2">🔄</div>
+                  <h4 className="font-semibold text-gray-800 mb-2">Context API</h4>
+                  <p className="text-sm text-gray-600">
+                    Share state across components with createContext and useContext
+                  </p>
+                </div>
+              </div>
+
+              <div className="border-t pt-6">
+                <h4 className="font-semibold text-gray-800 mb-4">🚀 Ready to build something amazing?</h4>
+                <p className="text-gray-600 mb-4">
+                  Edit <code className="bg-gray-100 px-2 py-1 rounded text-sm">src/main.tsx</code> to customize this app, 
+                  or create new components to expand your application.
+                </p>
+                <div className="flex justify-center space-x-4">
+                  <a 
+                    href="https://www.baraqex.tech/docs" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-primary-600 hover:text-primary-800 font-medium"
+                  >
+                    📚 Documentation
+                  </a>
+                  <a 
+                    href="https://github.com/mohamedx2/baraqex" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-primary-600 hover:text-primary-800 font-medium"
+                  >
+                    🐙 GitHub
+                  </a>
+                  <a 
+                    href="https://www.baraqex.tech/examples" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-primary-600 hover:text-primary-800 font-medium"
+                  >
+                    🎯 Examples
+                  </a>
+                </div>
+              </div>
+            </div>
+          </footer>
+        </div>
+      </div>
+    </ThemeContext.Provider>
+  );
+}
+
+// Mount the app
+render(<App />, document.getElementById('root'));

package/templates/basic-app/tailwind.config.js

@@ -0,0 +1,38 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+      },
+      container: {
+        center: true,
+        padding: '1rem',
+        screens: {
+          sm: '640px',
+          md: '768px',
+          lg: '1024px',
+          xl: '1280px',
+          '2xl': '1400px',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/templates/basic-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/templates/basic-app/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment'
+  }
+});

package/templates/wasm/src/App.tsx

@@ -151,7 +151,7 @@ export default function App() {
               <input 
                 type="text" 
                 value={name} 
-                onChange={(e) => setName(e.target.value)}
+                onChange={(e: { target: { value: string | ((prev: string) => string); }; }) => setName(e.target.value)}
                 placeholder="Enter your name"
               />
               <button onClick={handleHello}>Say Hello</button>
@@ -166,13 +166,13 @@ export default function App() {
               <input 
                 type="number" 
                 value={inputA} 
-                onChange={(e) => setInputA(Number(e.target.value))}
+                onChange={(e: { target: { value: any; }; }) => setInputA(Number(e.target.value))}
                 placeholder="First number"
               />
               <input 
                 type="number" 
                 value={inputB} 
-                onChange={(e) => setInputB(Number(e.target.value))}
+                onChange={(e: { target: { value: any; }; }) => setInputB(Number(e.target.value))}
                 placeholder="Second number"
               />
             </div>
@@ -190,7 +190,7 @@ export default function App() {
               <input 
                 type="number" 
                 value={fibInput} 
-                onChange={(e) => setFibInput(Number(e.target.value))}
+                onChange={(e: { target: { value: any; }; }) => setFibInput(Number(e.target.value))}
                 placeholder="Fibonacci number"
                 min="0"
                 max="40"
@@ -207,7 +207,7 @@ export default function App() {
               <input 
                 type="number" 
                 value={primeInput} 
-                onChange={(e) => setPrimeInput(Number(e.target.value))}
+                onChange={(e: { target: { value: any; }; }) => setPrimeInput(Number(e.target.value))}
                 placeholder="Number to check"
                 min="1"
               />

package/templates/basic-app/public/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Baraqex Basic App</title>
-  <link rel="stylesheet" href="/styles.css">
-</head>
-<body>
-  <div id="app-root"></div>
-  <script src="/src/App.jsx" type="module"></script>
-</body>
-</html>

package/templates/basic-app/public/styles.css

@@ -1,158 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-}
-
-.app {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  background: white;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.app-header {
-  text-align: center;
-  margin-bottom: 40px;
-  padding-bottom: 20px;
-  border-bottom: 2px solid #f0f0f0;
-}
-
-.app-header h1 {
-  color: #667eea;
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-}
-
-.counter-section {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.counter-display {
-  margin: 30px 0;
-}
-
-.count-value {
-  font-size: 4rem;
-  font-weight: bold;
-  color: #667eea;
-  display: inline-block;
-  padding: 20px 40px;
-  border: 3px solid #667eea;
-  border-radius: 50px;
-  background: linear-gradient(45deg, #f8f9ff, #ffffff);
-}
-
-.counter-controls {
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.btn {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 6px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 600;
-}
-
-.btn-primary {
-  background: #667eea;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #5a6fd8;
-  transform: translateY(-2px);
-}
-
-.btn-secondary {
-  background: #6c757d;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #5a6268;
-  transform: translateY(-2px);
-}
-
-.btn-danger {
-  background: #dc3545;
-  color: white;
-}
-
-.btn-danger:hover {
-  background: #c82333;
-  transform: translateY(-2px);
-}
-
-.info-section {
-  background: #f8f9fa;
-  padding: 30px;
-  border-radius: 8px;
-  margin-bottom: 30px;
-}
-
-.info-section h3 {
-  color: #667eea;
-  margin-bottom: 15px;
-}
-
-.info-section ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-.info-section li {
-  margin-bottom: 8px;
-  font-size: 1.1rem;
-}
-
-.app-footer {
-  text-align: center;
-  padding-top: 20px;
-  border-top: 1px solid #f0f0f0;
-  color: #666;
-}
-
-@media (max-width: 768px) {
-  .app {
-    margin: 10px;
-    padding: 15px;
-  }
-  
-  .app-header h1 {
-    font-size: 2rem;
-  }
-  
-  .count-value {
-    font-size: 3rem;
-    padding: 15px 30px;
-  }
-  
-  .counter-controls {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .btn {
-    width: 200px;
-  }
-}

package/templates/basic-app/server.js

@@ -1,15 +0,0 @@
-import { createServer } from '../../dist/server/index.js';
-
-const server = createServer({
-  port: process.env.PORT || 3000,
-  staticDir: './public',
-  enableCors: true
-});
-
-server.start().then(() => {
-  console.log('🚀 Baraqex Basic App server started successfully!');
-  console.log('📱 Visit http://localhost:3000 to see your app');
-}).catch(error => {
-  console.error('❌ Failed to start server:', error);
-  process.exit(1);
-});

package/templates/basic-app/src/App.jsx

@@ -1,68 +0,0 @@
-import { jsx, useState, useEffect } from 'baraqex';
-
-export default function App() {
-  const [count, setCount] = useState(0);
-  const [message, setMessage] = useState('Welcome to Baraqex!');
-
-  useEffect(() => {
-    console.log('App component mounted');
-  }, []);
-
-  const increment = () => {
-    setCount(prev => prev + 1);
-  };
-
-  const decrement = () => {
-    setCount(prev => prev - 1);
-  };
-
-  const resetCount = () => {
-    setCount(0);
-    setMessage('Counter reset!');
-  };
-
-  return (
-    <div className="app">
-      <header className="app-header">
-        <h1>{message}</h1>
-        <p>This is a basic Baraqex application template.</p>
-      </header>
-      
-      <main className="app-main">
-        <div className="counter-section">
-          <h2>Interactive Counter</h2>
-          <div className="counter-display">
-            <span className="count-value">{count}</span>
-          </div>
-          
-          <div className="counter-controls">
-            <button onClick={decrement} className="btn btn-secondary">
-              - Decrease
-            </button>
-            <button onClick={increment} className="btn btn-primary">
-              + Increase
-            </button>
-            <button onClick={resetCount} className="btn btn-danger">
-              Reset
-            </button>
-          </div>
-        </div>
-        
-        <div className="info-section">
-          <h3>Features Included:</h3>
-          <ul>
-            <li>✅ Modern JSX components</li>
-            <li>✅ State management with hooks</li>
-            <li>✅ Event handling</li>
-            <li>✅ Component lifecycle</li>
-            <li>✅ Responsive design</li>
-          </ul>
-        </div>
-      </main>
-      
-      <footer className="app-footer">
-        <p>Built with ❤️ using Baraqex Framework</p>
-      </footer>
-    </div>
-  );
-}