@clubz/cli 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,82 @@
+# @clubz/cli
+
+The official Command Line Interface for building widgets and pages for the **Clubz Community Builder**.
+
+## Installation
+
+```bash
+npm install -g @clubz/cli
+```
+
+## Usage
+
+### 1. Create a new Widget
+
+Scaffold a new widget project with the official React + Vite + TypeScript template.
+
+```bash
+clubz init my-awesome-widget
+cd my-awesome-widget
+npm install
+```
+
+### 2. Develop Locally (Simulator)
+
+Start the local development server. This launches a **Local Simulator** that mimics the Clubz mobile environment (IFrame, SDK communication, etc.), allowing you to test your widget in isolation.
+
+```bash
+npm run dev
+# OR
+clubz dev
+```
+
+The simulator will open at `http://localhost:3000` (or the next available port).
+
+### 3. Deploy
+
+Package your widget and deploy it to the Clubz platform.
+
+```bash
+npm run deploy
+# OR
+clubz deploy
+```
+
+## Project Structure
+
+A standard Clubz widget project looks like this:
+
+```
+my-widget/
+├── src/
+│   ├── App.tsx       # Your main widget code
+│   └── main.tsx      # Entry point
+├── clubz.json        # Widget metadata (name, version, permissions)
+├── package.json
+└── vite.config.ts    # Vite configuration
+```
+
+## SDK Integration
+
+The CLI templates come pre-configured with `@clubz/sdk`. Use it to interact with the host application:
+
+```ts
+import { bridge } from '@clubz/sdk';
+
+// Get user info
+const user = await bridge.getUser();
+
+// Show a native toast
+await bridge.showToast({ message: 'Hello from Widget!', type: 'success' });
+```
+
+## Contributing
+
+This CLI is part of the Clubz monorepo.
+
+### Local Setup
+
+1.  Clone the repository.
+2.  Install dependencies: `npm install`
+3.  Build the CLI: `npm run build`
+4.  Link globally for testing: `npm link`

package/dist/commands/deploy.js

@@ -9,6 +9,8 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const chalk_1 = __importDefault(require("chalk"));
 const child_process_1 = require("child_process");
 const archiver_1 = __importDefault(require("archiver"));
+const axios_1 = __importDefault(require("axios"));
+const form_data_1 = __importDefault(require("form-data"));
 async function deployCommand() {
     console.log(chalk_1.default.blue('🚀 Deploying Widget to Clubz...'));
     const cwd = process.cwd();
@@ -39,36 +41,38 @@ async function deployCommand() {
     }
     await zipDirectory(distDir, zipPath);
     console.log(chalk_1.default.green(`   Bundle created: ${getSize(zipPath)}`));
-    // 4. Upload (Mock for now, replacing previous simple push)
+    // 4. Upload to Clubz Registry
     console.log(chalk_1.default.yellow('\n☁️  Uploading to Clubz Registry...'));
     try {
+        // Load .env if present
+        const userEnvPath = path_1.default.join(cwd, '.env');
+        if (fs_extra_1.default.existsSync(userEnvPath)) {
+            require('dotenv').config({ path: userEnvPath });
+        }
         const apiKey = process.env.CLUBZ_API_KEY;
+        const apiUrl = process.env.CLUBZ_API_URL || 'http://localhost:3000'; // Default to Community Builder for now
         if (!apiKey) {
-            console.warn(chalk_1.default.yellow('⚠️  No CLUBZ_API_KEY found in env. simulating upload...'));
+            console.error(chalk_1.default.red('❌ Authentication required.'));
+            console.error(chalk_1.default.yellow('   Please add CLUBZ_API_KEY to your .env file.'));
+            process.exit(1);
         }
         const isSubmission = process.argv.includes('--submit');
         const status = isSubmission ? 'pending' : 'draft';
-        // Real implementation would look like this:
-        /*
-        const form = new FormData();
-        form.append('file', fs.createReadStream(zipPath));
+        const form = new form_data_1.default();
+        form.append('file', fs_extra_1.default.createReadStream(zipPath));
         form.append('manifest', JSON.stringify({ ...config, status }));
-        
-        await axios.post('http://localhost:3000/api/registry/deploy', form, {
+        const response = await axios_1.default.post(`${apiUrl}/api/registry/deploy`, form, {
             headers: {
                 ...form.getHeaders(),
                 'Authorization': `Bearer ${apiKey}`
-            }
+            },
+            maxContentLength: Infinity,
+            maxBodyLength: Infinity
         });
-        */
-        // Simulating network delay
-        await new Promise(r => setTimeout(r, 1500));
         console.log(chalk_1.default.green('\n✅ Deployment Successful!'));
-        console.log(chalk_1.default.cyan(`   Widget ID: ${config.type}-${Date.now().toString().slice(-4)}`));
-        console.log(chalk_1.default.cyan(`   Version: ${config.version}`));
-        if (config.tags && config.tags.length > 0) {
-            console.log(chalk_1.default.cyan(`   Tags: ${config.tags.join(', ')}`));
-        }
+        console.log(chalk_1.default.cyan(`   Widget ID: ${response.data.widgetId}`));
+        console.log(chalk_1.default.cyan(`   Version: ${response.data.version}`));
+        console.log(chalk_1.default.dim(`   Download URL: ${response.data.url}`));
         if (isSubmission) {
             console.log(chalk_1.default.magenta('   🚀 Submitted for validation (Status: Pending)'));
             console.log(chalk_1.default.dim('   An admin will review your widget shortly.'));
@@ -81,7 +85,14 @@ async function deployCommand() {
         await fs_extra_1.default.remove(zipPath);
     }
     catch (error) {
-        console.error(chalk_1.default.red('❌ Upload failed'), error.message);
+        console.error(chalk_1.default.red('❌ Upload failed'));
+        if (error.response) {
+            console.error(chalk_1.default.red(`   Server Error: ${error.response.status} ${error.response.statusText}`));
+            console.error(chalk_1.default.red(`   ${JSON.stringify(error.response.data)}`));
+        }
+        else {
+            console.error(chalk_1.default.red(`   ${error.message}`));
+        }
         process.exit(1);
     }
 }

package/dist/commands/dev.js

@@ -9,11 +9,19 @@ const express_1 = __importDefault(require("express"));
 const cross_spawn_1 = __importDefault(require("cross-spawn"));
 const chalk_1 = __importDefault(require("chalk"));
 const fs_1 = __importDefault(require("fs"));
-// In CommonJS (which we compile to), __dirname is available globally
-// const __filename = fileURLToPath(import.meta.url); // Not needed
-// const __dirname = path.dirname(__filename); // Not needed
+const dotenv_1 = __importDefault(require("dotenv"));
+const axios_1 = __importDefault(require("axios"));
 async function devCommand() {
     console.log(chalk_1.default.blue('🚀 Starting Clubz Development Environment...'));
+    // 0. Load Environment Variables from the User's Project
+    const userEnvPath = path_1.default.join(process.cwd(), '.env');
+    if (fs_1.default.existsSync(userEnvPath)) {
+        dotenv_1.default.config({ path: userEnvPath });
+        console.log(chalk_1.default.green('✅ Loaded .env file'));
+    }
+    else {
+        console.log(chalk_1.default.yellow('⚠️  No .env file found. API Key integration will be disabled.'));
+    }
     // 1. Start User's Widget Server (Vite)
     const widgetPort = 3001;
     console.log(chalk_1.default.dim(`   Starting widget server on port ${widgetPort}...`));
@@ -26,24 +34,45 @@ async function devCommand() {
     });
     // 2. Start Simulator Server
     const app = (0, express_1.default)();
-    const simulatorPort = 3000;
+    const simulatorPort = 3002; // Changed from 3000 to avoid conflict with API
+    const realApiUrl = process.env.CLUBZ_API_URL || 'http://localhost:3000';
+    // API Route for Simulator to get Configuration
+    app.get('/simulator/api/config', async (req, res) => {
+        const apiKey = process.env.CLUBZ_API_KEY;
+        let user = null;
+        if (apiKey) {
+            try {
+                // Determine if apiKey is a JWT or a special key. 
+                // For now, assuming it's a Bearer Token (Personal Access Token)
+                const response = await axios_1.default.get(`${realApiUrl}/api/auth/me`, {
+                    headers: { Authorization: `Bearer ${apiKey}` }
+                });
+                user = response.data;
+                // Add role/permissions if needed
+            }
+            catch (error) {
+                console.error(chalk_1.default.red('❌ Failed to validate API Key:'), error.message);
+                // Don't fail the request, just return guest mode with error
+            }
+        }
+        res.json({
+            user: user || { id: 'guest', name: 'Guest Developer', role: 'guest' },
+            mode: apiKey ? 'authenticated' : 'guest',
+            apiUrl: realApiUrl
+        });
+    });
     // Resolve path to built simulator client assets
-    // In dist structure: dist/src/commands/dev.js -> dist/simulator/client
-    // adjustable based on actual build output structure
     let simulatorDist = path_1.default.join(__dirname, '../../simulator/client');
-    // Fallback for dev execution (ts-node)
     if (!fs_1.default.existsSync(simulatorDist) || !fs_1.default.existsSync(path_1.default.join(simulatorDist, 'index.html'))) {
-        // If not built, maybe we can warn or try source (but source needs building)
-        // Check relative to src: src/commands/dev.ts -> src/simulator/client (source)
-        // For now, let's assume we need to build it.
-        // We can point to a mocked path or ensure build happens.
         console.warn(chalk_1.default.yellow('⚠️  Simulator build not found. Ensure CLI is built.'));
-        // Try pointing to package root dist if structure is flattened
         simulatorDist = path_1.default.join(__dirname, '../../../dist/simulator/client');
     }
     app.use(express_1.default.static(simulatorDist));
-    // Fallback to index.html for SPA routing
     app.get('*', (req, res) => {
+        // handle api routes not found
+        if (req.path.startsWith('/simulator/api')) {
+            return res.status(404).json({ error: 'Not Found' });
+        }
         res.sendFile(path_1.default.join(simulatorDist, 'index.html'));
     });
     app.listen(simulatorPort, () => {
@@ -51,7 +80,6 @@ async function devCommand() {
         console.log(chalk_1.default.cyan(`   Widget running at http://localhost:${widgetPort}`));
         console.log(chalk_1.default.dim('   Press Ctrl+C to stop.'));
     });
-    // Handle cleanup
     process.on('SIGINT', () => {
         widgetProcess.kill();
         process.exit();

package/dist/commands/init.js

@@ -31,8 +31,8 @@ async function initCommand(name) {
     let templateDir = path_1.default.join(__dirname, '../../templates', templateName); // from dist/commands or src/commands
     // Fallback if structure is different (e.g. src vs dist) - explicit check
     if (!fs_extra_1.default.existsSync(templateDir)) {
-        // Try source path if we are running ts-node directly? 
-        templateDir = path_1.default.join(__dirname, '../../../src/templates', templateName);
+        // Try source path if we are running from dist but templates are in src (common in local dev)
+        templateDir = path_1.default.join(__dirname, '../../src/templates', templateName);
     }
     if (!fs_extra_1.default.existsSync(templateDir)) {
         console.error(chalk_1.default.red(`❌ Template not found at ${templateDir}`));

package/dist/templates/templates/react-vite-ts/clubz.json

@@ -0,0 +1,21 @@
+{
+    "name": "My Amazing Widget",
+    "description": "A widget built for Clubz",
+    "version": "0.0.1",
+    "type": "widget",
+    "config": {
+        "props": [
+            {
+                "name": "title",
+                "type": "string",
+                "label": "Titre du widget",
+                "default": "Hello World"
+            }
+        ]
+    },
+    "permissions": [],
+    "tags": [
+        "beta",
+        "react"
+    ]
+}

package/dist/templates/templates/react-vite-ts/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" />
+    <title>Clubz Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </body>
+</html>

package/dist/templates/templates/react-vite-ts/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "my-clubz-widget",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "deploy": "clubz deploy --submit",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@clubz/sdk": "latest"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@vitejs/plugin-react": "^4.2.1",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    }
+}

package/dist/templates/templates/react-vite-ts/src/App.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { bridge } from '@clubz/sdk'
+
+function App() {
+    const [user, setUser] = useState<{ name: string } | null>(null)
+
+    useEffect(() => {
+        // Determine user context via Bridge
+        bridge.getUser().then((u: any) => setUser(u)).catch(() => console.log('Guest mode'))
+    }, [])
+
+    const handleVibrate = () => {
+        bridge.vibrate();
+    }
+
+    return (
+        <div className="w-full h-full min-h-[200px] bg-white rounded-xl p-6 border border-slate-200 flex flex-col items-center justify-center">
+            <h1 className="text-xl font-bold text-slate-800 mb-2">
+                Hello {user ? user.name : 'Guest'}!
+            </h1>
+            <p className="text-slate-500 text-center mb-4">
+                Welcome to your new Clubz Widget.
+            </p>
+
+            <button
+                onClick={handleVibrate}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg active:bg-blue-700 transition"
+            >
+                Test Vibration
+            </button>
+        </div>
+    )
+}
+
+export default App

package/dist/templates/templates/react-vite-ts/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)

package/dist/templates/templates/react-vite-ts/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "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
+    },
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/dist/templates/templates/react-vite-ts/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

package/dist/templates/templates/react-vite-ts/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        rollupOptions: {
+            output: {
+                // Ensure we get a single recognizable entry point if possible, 
+                // though standard vite build is fine for the platform zipper.
+                entryFileNames: 'assets/[name].js',
+                chunkFileNames: 'assets/[name].js',
+                assetFileNames: 'assets/[name].[ext]'
+            }
+        }
+    }
+})

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@clubz/cli",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "bin": {
         "clubz": "bin/clubz.js"
     },
     "main": "dist/index.js",
     "scripts": {
-        "build": "tsc",
+        "build": "tsc && cp -r src/templates dist/templates",
         "dev": "tsc -w"
     },
     "publishConfig": {
@@ -22,6 +22,7 @@
         "chalk": "^4.1.2",
         "commander": "^11.0.0",
         "cross-spawn": "^7.0.6",
+        "dotenv": "^17.2.4",
         "express": "^5.2.1",
         "form-data": "^4.0.5",
         "fs-extra": "^11.3.3",

package/src/commands/deploy.ts

@@ -42,41 +42,45 @@ export async function deployCommand() {
     await zipDirectory(distDir, zipPath);
     console.log(chalk.green(`   Bundle created: ${getSize(zipPath)}`));
 
-    // 4. Upload (Mock for now, replacing previous simple push)
+    // 4. Upload to Clubz Registry
     console.log(chalk.yellow('\n☁️  Uploading to Clubz Registry...'));
 
     try {
+        // Load .env if present
+        const userEnvPath = path.join(cwd, '.env');
+        if (fs.existsSync(userEnvPath)) {
+            require('dotenv').config({ path: userEnvPath });
+        }
+
         const apiKey = process.env.CLUBZ_API_KEY;
+        const apiUrl = process.env.CLUBZ_API_URL || 'http://localhost:3000'; // Default to Community Builder for now
+
         if (!apiKey) {
-            console.warn(chalk.yellow('⚠️  No CLUBZ_API_KEY found in env. simulating upload...'));
+            console.error(chalk.red('❌ Authentication required.'));
+            console.error(chalk.yellow('   Please add CLUBZ_API_KEY to your .env file.'));
+            process.exit(1);
         }
 
         const isSubmission = process.argv.includes('--submit');
         const status = isSubmission ? 'pending' : 'draft';
 
-        // Real implementation would look like this:
-        /*
         const form = new FormData();
         form.append('file', fs.createReadStream(zipPath));
         form.append('manifest', JSON.stringify({ ...config, status }));
-        
-        await axios.post('http://localhost:3000/api/registry/deploy', form, {
-            headers: { 
+
+        const response = await axios.post(`${apiUrl}/api/registry/deploy`, form, {
+            headers: {
                 ...form.getHeaders(),
                 'Authorization': `Bearer ${apiKey}`
-            }
+            },
+            maxContentLength: Infinity,
+            maxBodyLength: Infinity
         });
-        */
-
-        // Simulating network delay
-        await new Promise(r => setTimeout(r, 1500));
 
         console.log(chalk.green('\n✅ Deployment Successful!'));
-        console.log(chalk.cyan(`   Widget ID: ${config.type}-${Date.now().toString().slice(-4)}`));
-        console.log(chalk.cyan(`   Version: ${config.version}`));
-        if (config.tags && config.tags.length > 0) {
-            console.log(chalk.cyan(`   Tags: ${config.tags.join(', ')}`));
-        }
+        console.log(chalk.cyan(`   Widget ID: ${response.data.widgetId}`));
+        console.log(chalk.cyan(`   Version: ${response.data.version}`));
+        console.log(chalk.dim(`   Download URL: ${response.data.url}`));
 
         if (isSubmission) {
             console.log(chalk.magenta('   🚀 Submitted for validation (Status: Pending)'));
@@ -91,7 +95,13 @@ export async function deployCommand() {
         await fs.remove(zipPath);
 
     } catch (error: any) {
-        console.error(chalk.red('❌ Upload failed'), error.message);
+        console.error(chalk.red('❌ Upload failed'));
+        if (error.response) {
+            console.error(chalk.red(`   Server Error: ${error.response.status} ${error.response.statusText}`));
+            console.error(chalk.red(`   ${JSON.stringify(error.response.data)}`));
+        } else {
+            console.error(chalk.red(`   ${error.message}`));
+        }
         process.exit(1);
     }
 }

package/src/commands/dev.ts

@@ -3,14 +3,21 @@ import express from 'express';
 import spawn from 'cross-spawn';
 import chalk from 'chalk';
 import fs from 'fs';
-
-// In CommonJS (which we compile to), __dirname is available globally
-// const __filename = fileURLToPath(import.meta.url); // Not needed
-// const __dirname = path.dirname(__filename); // Not needed
+import dotenv from 'dotenv';
+import axios from 'axios';
 
 export async function devCommand() {
     console.log(chalk.blue('🚀 Starting Clubz Development Environment...'));
 
+    // 0. Load Environment Variables from the User's Project
+    const userEnvPath = path.join(process.cwd(), '.env');
+    if (fs.existsSync(userEnvPath)) {
+        dotenv.config({ path: userEnvPath });
+        console.log(chalk.green('✅ Loaded .env file'));
+    } else {
+        console.log(chalk.yellow('⚠️  No .env file found. API Key integration will be disabled.'));
+    }
+
     // 1. Start User's Widget Server (Vite)
     const widgetPort = 3001;
     console.log(chalk.dim(`   Starting widget server on port ${widgetPort}...`));
@@ -26,28 +33,51 @@ export async function devCommand() {
 
     // 2. Start Simulator Server
     const app = express();
-    const simulatorPort = 3000;
+    const simulatorPort = 3002; // Changed from 3000 to avoid conflict with API
+    const realApiUrl = process.env.CLUBZ_API_URL || 'http://localhost:3000';
+
+    // API Route for Simulator to get Configuration
+    app.get('/simulator/api/config', async (req, res) => {
+        const apiKey = process.env.CLUBZ_API_KEY;
+        let user = null;
+
+        if (apiKey) {
+            try {
+                // Determine if apiKey is a JWT or a special key. 
+                // For now, assuming it's a Bearer Token (Personal Access Token)
+                const response = await axios.get(`${realApiUrl}/api/auth/me`, {
+                    headers: { Authorization: `Bearer ${apiKey}` }
+                });
+                user = response.data;
+                // Add role/permissions if needed
+            } catch (error: any) {
+                console.error(chalk.red('❌ Failed to validate API Key:'), error.message);
+                // Don't fail the request, just return guest mode with error
+            }
+        }
+
+        res.json({
+            user: user || { id: 'guest', name: 'Guest Developer', role: 'guest' },
+            mode: apiKey ? 'authenticated' : 'guest',
+            apiUrl: realApiUrl
+        });
+    });
 
     // Resolve path to built simulator client assets
-    // In dist structure: dist/src/commands/dev.js -> dist/simulator/client
-    // adjustable based on actual build output structure
     let simulatorDist = path.join(__dirname, '../../simulator/client');
 
-    // Fallback for dev execution (ts-node)
     if (!fs.existsSync(simulatorDist) || !fs.existsSync(path.join(simulatorDist, 'index.html'))) {
-        // If not built, maybe we can warn or try source (but source needs building)
-        // Check relative to src: src/commands/dev.ts -> src/simulator/client (source)
-        // For now, let's assume we need to build it.
-        // We can point to a mocked path or ensure build happens.
         console.warn(chalk.yellow('⚠️  Simulator build not found. Ensure CLI is built.'));
-        // Try pointing to package root dist if structure is flattened
         simulatorDist = path.join(__dirname, '../../../dist/simulator/client');
     }
 
     app.use(express.static(simulatorDist));
 
-    // Fallback to index.html for SPA routing
     app.get('*', (req, res) => {
+        // handle api routes not found
+        if (req.path.startsWith('/simulator/api')) {
+            return res.status(404).json({ error: 'Not Found' });
+        }
         res.sendFile(path.join(simulatorDist, 'index.html'));
     });
 
@@ -57,7 +87,6 @@ export async function devCommand() {
         console.log(chalk.dim('   Press Ctrl+C to stop.'));
     });
 
-    // Handle cleanup
     process.on('SIGINT', () => {
         widgetProcess.kill();
         process.exit();

package/src/commands/init.ts

@@ -33,8 +33,8 @@ export async function initCommand(name: string) {
 
     // Fallback if structure is different (e.g. src vs dist) - explicit check
     if (!fs.existsSync(templateDir)) {
-        // Try source path if we are running ts-node directly? 
-        templateDir = path.join(__dirname, '../../../src/templates', templateName);
+        // Try source path if we are running from dist but templates are in src (common in local dev)
+        templateDir = path.join(__dirname, '../../src/templates', templateName);
     }
 
     if (!fs.existsSync(templateDir)) {

package/src/simulator/client/src/SimulatorApp.tsx

@@ -9,12 +9,29 @@ export default function SimulatorApp() {
     // State
     const [widgetUrl, setWidgetUrl] = useState('http://localhost:3001'); // Default widget port
     const [logs, setLogs] = useState<{ time: string, type: 'req' | 'res', msg: string }[]>([]);
+    const [userContext, setUserContext] = useState<any>({ id: 'sim-user-1', name: 'Simulator User (Guest)', role: 'guest' });
+    const [authStatus, setAuthStatus] = useState<'loading' | 'authenticated' | 'guest'>('loading');
 
     // Iframe ref to send responses back
     const iframeRef = useRef<HTMLIFrameElement>(null);
 
-    // Initial load
+    // Initial load & Config Fetch
     useEffect(() => {
+        // Fetch Simulator Config
+        fetch('/simulator/api/config')
+            .then(res => res.json())
+            .then(data => {
+                if (data.user) {
+                    setUserContext(data.user);
+                }
+                setAuthStatus(data.mode);
+                log('sys', `Loaded configuration: ${data.mode}`);
+            })
+            .catch(err => {
+                console.error('Failed to load simulator config', err);
+                setAuthStatus('guest');
+            });
+
         const handleMessage = (event: MessageEvent) => {
             const data = event.data as BridgeRequest;
 
@@ -31,7 +48,15 @@ export default function SimulatorApp() {
         return () => window.removeEventListener('message', handleMessage);
     }, []);
 
-    const log = (type: 'req' | 'res', msg: string) => {
+    // Update handler to use current state (via ref or dependency)
+    // Actually we need to be careful with stale closures in event listeners.
+    // The easiest way is to use a ref for userContext or pass it to the handler if it was stable.
+    // But since the listener is added once, it will see stale userContext.
+    // Let's use a ref for userContext.
+    const userContextRef = useRef(userContext);
+    useEffect(() => { userContextRef.current = userContext; }, [userContext]);
+
+    const log = (type: 'req' | 'res' | 'sys', msg: string) => {
         setLogs(prev => [{
             time: new Date().toLocaleTimeString().split(' ')[0],
             type,
@@ -45,7 +70,8 @@ export default function SimulatorApp() {
 
         switch (req.action) {
             case 'GET_USER':
-                responseData = { id: 'sim-user-1', name: 'Simulator User', role: 'admin' };
+                // Use the ref to get the latest user context
+                responseData = userContextRef.current;
                 break;
             case 'VIBRATE':
                 // Visual feedback
@@ -90,7 +116,14 @@ export default function SimulatorApp() {
                         />
                     </div>
                 </div>
-                <p className="mt-4 text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+                <div className="mt-4 text-center">
+                    <p className="text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+                    <div className="mt-2 text-xs">
+                        Status: <span className={authStatus === 'authenticated' ? 'text-green-600 font-bold' : 'text-orange-500'}>
+                            {authStatus === 'authenticated' ? 'Logged In' : 'Guest Mode'}
+                        </span>
+                    </div>
+                </div>
             </div>
 
             {/* Right: Debug Console */}
@@ -114,8 +147,11 @@ export default function SimulatorApp() {
                     {logs.map((l, i) => (
                         <div key={i} className="flex gap-2">
                             <span className="text-slate-500">[{l.time}]</span>
-                            <span className={l.type === 'req' ? 'text-blue-400' : 'text-green-400'}>
-                                {l.type === 'req' ? '→' : '←'}
+                            <span className={
+                                l.type === 'req' ? 'text-blue-400' :
+                                    l.type === 'res' ? 'text-green-400' : 'text-yellow-400'
+                            }>
+                                {l.type === 'req' ? '→' : l.type === 'res' ? '←' : '•'}
                             </span>
                             <span className="text-slate-300 break-all">{l.msg}</span>
                         </div>

package/src/templates/react-vite-ts/clubz.json

@@ -1,7 +1,7 @@
 {
     "name": "My Amazing Widget",
     "description": "A widget built for Clubz",
-    "version": "1.0.0",
+    "version": "0.0.1",
     "type": "widget",
     "config": {
         "props": [

package/src/templates/react-vite-ts/package.json

@@ -1,11 +1,12 @@
 {
     "name": "my-clubz-widget",
     "private": true,
-    "version": "0.0.0",
+    "version": "0.0.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
+        "deploy": "clubz deploy --submit",
         "preview": "vite preview"
     },
     "dependencies": {

package/src/templates/react-vite-ts/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "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
+    },
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/src/templates/react-vite-ts/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}