gea-lib 1.0.0

package/templates/js/src/components/Button.jsx

@@ -0,0 +1,20 @@
+import { Component } from '@geajs/core';
+import './Button.css';
+
+export default class Button extends Component {
+  template() {
+    const variant = this.props?.variant || 'primary';
+    const disabled = this.props?.disabled || false;
+    const click = this.props?.click;
+
+    return (
+      <button 
+        class={`gea-btn gea-btn-${variant}`} 
+        disabled={disabled}
+        click={click}
+      >
+        {this.props?.children}
+      </button>
+    );
+  }
+}

package/templates/js/src/components/Card.css

@@ -0,0 +1,44 @@
+.gea-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  padding: 2rem;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gea-card:hover {
+  border-color: rgba(124, 58, 237, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.08);
+}
+
+.gea-card-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: 1rem;
+}
+
+.gea-card-title {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gea-card-body {
+  color: var(--text-secondary, #9ca3af);
+  line-height: 1.6;
+}
+
+.gea-card-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}

package/templates/js/src/components/Card.jsx

@@ -0,0 +1,27 @@
+import { Component } from '@geajs/core';
+import './Card.css';
+
+export default class Card extends Component {
+  template() {
+    const title = this.props?.title;
+    const footer = this.props?.footer;
+
+    return (
+      <div class="gea-card">
+        {title && (
+          <div class="gea-card-header">
+            <h3 class="gea-card-title">{title}</h3>
+          </div>
+        )}
+        <div class="gea-card-body">
+          {this.props?.children}
+        </div>
+        {footer && (
+          <div class="gea-card-footer">
+            {footer}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/templates/js/src/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as counterStore } from './stores/counter';

package/templates/js/src/stores/counter.js

@@ -0,0 +1,21 @@
+import { Store } from '@geajs/core';
+
+class CounterStore extends Store {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    if (this.count > 0) {
+      this.count--;
+    }
+  }
+
+  reset() {
+    this.count = 0;
+  }
+}
+
+export default new CounterStore();

package/templates/js/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { geaPlugin } from '@geajs/vite-plugin';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [geaPlugin()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: '<% libraryName %>',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['@geajs/core'],
+      output: {
+        globals: {
+          '@geajs/core': 'Gea'
+        }
+      }
+    }
+  }
+});

package/templates/ts/README.md

@@ -0,0 +1,40 @@
+# <% projectName %>
+
+A modern, high-performance, and reactive component library for **GeaJS**.
+
+Built with compiler-first reactivity, proxy-based state management, and modern glassmorphic designs.
+
+## Features
+
+- ⚡ **No Virtual DOM**: Built on GeaJS, compile-time JSX transformations for surgical DOM patching.
+- 🎨 **Premium Styling**: Pre-configured responsive styles, micro-animations, and glassmorphic designs.
+- 🛠️ **Playground Included**: An interactive visual sandbox to test and showcase your components in real-time.
+- ⚙️ **TypeScript Ready**: Full type checking, autocompletions, and type declarations bundle.
+
+## Development
+
+To start the interactive playground:
+
+```bash
+npm install
+npm run dev
+```
+
+## Production Build
+
+To build your library for distribution:
+
+```bash
+npm run build
+```
+
+The build process bundles your components into `dist/index.js` (ES Modules) and generates type declarations in `dist/index.d.ts`.
+
+## Usage
+
+Register components in your main application:
+
+```javascript
+import { Button, Card, counterStore } from '<% projectName %>';
+import '<% projectName %>/style.css';
+```

package/templates/ts/_gitignore

@@ -0,0 +1,42 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Compiler outputs
+dist/
+tmp/
+out/
+.docusaurus/
+
+# IDEs and editors
+.idea/
+.vscode/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# Build environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

package/templates/ts/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "<% projectName %>",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@geajs/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@geajs/core": "^1.0.0",
+    "@geajs/vite-plugin": "^1.0.0",
+    "typescript": "^5.4.5",
+    "vite": "^8.0.0",
+    "vitest": "^2.0.0",
+    "jsdom": "^24.1.0"
+  }
+}

package/templates/ts/playground/app.tsx

@@ -0,0 +1,80 @@
+import { Component } from '@geajs/core';
+import { Button, Card, counterStore } from '../src';
+
+export default class App extends Component {
+  template() {
+    return (
+      <div style="max-width: 800px; width: 100%; padding: 2rem;">
+        <div style="text-align: center; margin-bottom: 3rem;">
+          <h1 style="font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; letter-spacing: -0.05em;">
+            GeaJS Library Playground
+          </h1>
+          <p style="color: var(--text-secondary); font-size: 1.1rem;">
+            Interactive sandbox demonstrating your reactive components
+          </p>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
+          
+          {/* Reactive Counter Card */}
+          <Card 
+            title="Reactive State Demo" 
+            footer={
+              <Button variant="glass" click={() => counterStore.reset()}>
+                Reset Counter
+              </Button>
+            }
+          >
+            <p style="margin-bottom: 1.5rem;">
+              GeaJS utilizes deep proxies to surgically update the DOM. Click the buttons below to see the reactivity in action.
+            </p>
+            
+            <div style="display: flex; align-items: center; justify-content: center; gap: 2rem; margin: 2rem 0; padding: 1.5rem; background: rgba(255,255,255,0.02); border-radius: 16px; border: 1px dashed rgba(255,255,255,0.08);">
+              <Button variant="secondary" click={() => counterStore.decrement()}>-</Button>
+              <span style="font-family: var(--font-mono); font-size: 3rem; font-weight: bold; min-width: 80px; text-align: center; color: #ffffff;">
+                {counterStore.count}
+              </span>
+              <Button variant="primary" click={() => counterStore.increment()}>+</Button>
+            </div>
+          </Card>
+
+          {/* Button Variant Showcase */}
+          <Card title="Button Variants">
+            <p style="margin-bottom: 1.5rem;">
+              Beautiful styled buttons with hover glows and tap micro-animations.
+            </p>
+            
+            <div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
+              <Button variant="primary" click={() => alert('Primary clicked!')}>
+                Primary Glow
+              </Button>
+              <Button variant="secondary" click={() => alert('Secondary clicked!')}>
+                Secondary Glow
+              </Button>
+              <Button variant="glass" click={() => alert('Glass clicked!')}>
+                Glassmorphic
+              </Button>
+              <Button variant="primary" disabled={true}>
+                Disabled
+              </Button>
+            </div>
+          </Card>
+
+          {/* Integration Guide */}
+          <Card title="How to Import">
+            <p style="margin-bottom: 1rem;">Import components directly into your GeaJS project:</p>
+            <pre style="background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); font-family: var(--font-mono); font-size: 0.9rem; color: #a78bfa; overflow-x: auto; white-space: pre-wrap;">
+{`import { Button, Card } from 'your-library-name';
+
+// In template:
+<Card title="My Card">
+  <Button click={() => doSomething()}>Click Me</Button>
+</Card>`}
+            </pre>
+          </Card>
+          
+        </div>
+      </div>
+    );
+  }
+}

package/templates/ts/playground/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><% projectName %> - Component Library Playground</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/playground/main.ts"></script>
+  </body>
+</html>

package/templates/ts/playground/main.ts

@@ -0,0 +1,5 @@
+import App from './app';
+import './style.css';
+
+const app = new App();
+app.render(document.getElementById('app'));

package/templates/ts/playground/style.css

@@ -0,0 +1,49 @@
+:root {
+  --bg-color: #030014;
+  --panel-bg: rgba(255, 255, 255, 0.03);
+  --panel-border: rgba(255, 255, 255, 0.08);
+  --primary-color: #7c3aed;
+  --primary-glow: rgba(124, 58, 237, 0.3);
+  --secondary-color: #06b6d4;
+  --secondary-glow: rgba(6, 182, 212, 0.3);
+  --accent-color: #ec4899;
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --font-sans: 'Outfit', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-x: hidden;
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%);
+}
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-color);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--panel-border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-color);
+}

package/templates/ts/src/components/Button.css

@@ -0,0 +1,74 @@
+.gea-btn {
+  font-family: var(--font-sans, 'Outfit', sans-serif);
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  position: relative;
+  overflow: hidden;
+  color: #ffffff;
+}
+
+.gea-btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.1);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.gea-btn:hover::after {
+  opacity: 1;
+}
+
+.gea-btn:active {
+  transform: scale(0.97);
+}
+
+.gea-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Variants */
+.gea-btn-primary {
+  background: linear-gradient(135deg, var(--primary-color, #7c3aed) 0%, #6d28d9 100%);
+  box-shadow: 0 4px 15px var(--primary-glow, rgba(124, 58, 237, 0.3));
+}
+
+.gea-btn-primary:hover {
+  box-shadow: 0 6px 20px var(--primary-glow, rgba(124, 58, 237, 0.5));
+  transform: translateY(-1px);
+}
+
+.gea-btn-secondary {
+  background: linear-gradient(135deg, var(--secondary-color, #06b6d4) 0%, #0891b2 100%);
+  box-shadow: 0 4px 15px var(--secondary-glow, rgba(6, 182, 212, 0.3));
+}
+
+.gea-btn-secondary:hover {
+  box-shadow: 0 6px 20px var(--secondary-glow, rgba(6, 182, 212, 0.5));
+  transform: translateY(-1px);
+}
+
+.gea-btn-glass {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.gea-btn-glass:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}

package/templates/ts/src/components/Button.tsx

@@ -0,0 +1,26 @@
+import { Component } from '@geajs/core';
+import './Button.css';
+
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'glass';
+  disabled?: boolean;
+  click?: (e: MouseEvent) => void;
+}
+
+export default class Button extends Component {
+  template() {
+    const variant = this.props?.variant || 'primary';
+    const disabled = this.props?.disabled || false;
+    const click = this.props?.click;
+
+    return (
+      <button 
+        class={`gea-btn gea-btn-${variant}`} 
+        disabled={disabled}
+        click={click}
+      >
+        {this.props?.children}
+      </button>
+    );
+  }
+}

package/templates/ts/src/components/Card.css

@@ -0,0 +1,44 @@
+.gea-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  padding: 2rem;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gea-card:hover {
+  border-color: rgba(124, 58, 237, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.08);
+}
+
+.gea-card-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: 1rem;
+}
+
+.gea-card-title {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gea-card-body {
+  color: var(--text-secondary, #9ca3af);
+  line-height: 1.6;
+}
+
+.gea-card-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}

package/templates/ts/src/components/Card.tsx

@@ -0,0 +1,32 @@
+import { Component } from '@geajs/core';
+import './Card.css';
+
+export interface CardProps {
+  title?: string;
+  footer?: any;
+}
+
+export default class Card extends Component {
+  template() {
+    const title = this.props?.title;
+    const footer = this.props?.footer;
+
+    return (
+      <div class="gea-card">
+        {title && (
+          <div class="gea-card-header">
+            <h3 class="gea-card-title">{title}</h3>
+          </div>
+        )}
+        <div class="gea-card-body">
+          {this.props?.children}
+        </div>
+        {footer && (
+          <div class="gea-card-footer">
+            {footer}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/templates/ts/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as counterStore } from './stores/counter';

package/templates/ts/src/stores/counter.ts

@@ -0,0 +1,21 @@
+import { Store } from '@geajs/core';
+
+class CounterStore extends Store {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    if (this.count > 0) {
+      this.count--;
+    }
+  }
+
+  reset() {
+    this.count = 0;
+  }
+}
+
+export default new CounterStore();

package/templates/ts/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}

package/templates/ts/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@geajs/core",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "playground"]
+}

package/templates/ts/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { geaPlugin } from '@geajs/vite-plugin';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [geaPlugin()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: '<% libraryName %>',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['@geajs/core'],
+      output: {
+        globals: {
+          '@geajs/core': 'Gea'
+        }
+      }
+    }
+  }
+});