@clubz/cli 0.1.0

package/bin/clubz.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// This will require the built source code
+require('../dist/index.js');

package/dist/commands/deploy.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deployCommand = deployCommand;
+const path_1 = __importDefault(require("path"));
+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"));
+async function deployCommand() {
+    console.log(chalk_1.default.blue('🚀 Deploying Widget to Clubz...'));
+    const cwd = process.cwd();
+    const configPath = path_1.default.join(cwd, 'clubz.json');
+    // 1. Validation
+    if (!fs_extra_1.default.existsSync(configPath)) {
+        console.error(chalk_1.default.red('❌ clubz.json not found. Are you in a Clubz project?'));
+        process.exit(1);
+    }
+    const config = await fs_extra_1.default.readJson(configPath);
+    console.log(chalk_1.default.dim(`   Project: ${config.name} v${config.version}`));
+    // 2. Build
+    console.log(chalk_1.default.yellow('\n📦 Building project...'));
+    try {
+        (0, child_process_1.execSync)('npm run build', { stdio: 'inherit' });
+    }
+    catch (e) {
+        console.error(chalk_1.default.red('❌ Build failed. Fix errors and try again.'));
+        process.exit(1);
+    }
+    // 3. Zip Dist Folder
+    console.log(chalk_1.default.yellow('\n🤐 Zipping assets...'));
+    const distDir = path_1.default.join(cwd, 'dist');
+    const zipPath = path_1.default.join(cwd, 'bundle.zip');
+    if (!fs_extra_1.default.existsSync(distDir)) {
+        console.error(chalk_1.default.red('❌ dist/ directory not found after build.'));
+        process.exit(1);
+    }
+    await zipDirectory(distDir, zipPath);
+    console.log(chalk_1.default.green(`   Bundle created: ${getSize(zipPath)}`));
+    // 4. Upload (Mock for now, replacing previous simple push)
+    console.log(chalk_1.default.yellow('\n☁️  Uploading to Clubz Registry...'));
+    try {
+        const apiKey = process.env.CLUBZ_API_KEY;
+        if (!apiKey) {
+            console.warn(chalk_1.default.yellow('⚠️  No CLUBZ_API_KEY found in env. simulating upload...'));
+        }
+        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: {
+                ...form.getHeaders(),
+                'Authorization': `Bearer ${apiKey}`
+            }
+        });
+        */
+        // 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(', ')}`));
+        }
+        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.'));
+        }
+        else {
+            console.log(chalk_1.default.dim('   Saved as Draft. PRO TIP: Use --submit to send for validation.'));
+        }
+        console.log(chalk_1.default.dim('   Available in your "Submissions" tab.'));
+        // Cleanup
+        await fs_extra_1.default.remove(zipPath);
+    }
+    catch (error) {
+        console.error(chalk_1.default.red('❌ Upload failed'), error.message);
+        process.exit(1);
+    }
+}
+function zipDirectory(source, out) {
+    const archive = (0, archiver_1.default)('zip', { zlib: { level: 9 } });
+    const stream = fs_extra_1.default.createWriteStream(out);
+    return new Promise((resolve, reject) => {
+        archive
+            .directory(source, false)
+            .on('error', err => reject(err))
+            .pipe(stream);
+        stream.on('close', () => resolve());
+        archive.finalize();
+    });
+}
+function getSize(filePath) {
+    const stats = fs_extra_1.default.statSync(filePath);
+    const bytes = stats.size;
+    if (bytes < 1024)
+        return bytes + ' B';
+    return (bytes / 1024).toFixed(2) + ' KB';
+}

package/dist/commands/dev.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devCommand = devCommand;
+const path_1 = __importDefault(require("path"));
+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
+async function devCommand() {
+    console.log(chalk_1.default.blue('🚀 Starting Clubz Development Environment...'));
+    // 1. Start User's Widget Server (Vite)
+    const widgetPort = 3001;
+    console.log(chalk_1.default.dim(`   Starting widget server on port ${widgetPort}...`));
+    const widgetProcess = (0, cross_spawn_1.default)('npm', ['run', 'dev', '--', '--port', widgetPort.toString()], {
+        stdio: 'inherit',
+        env: { ...process.env, FORCE_COLOR: 'true' }
+    });
+    widgetProcess.on('error', (err) => {
+        console.error(chalk_1.default.red('❌ Failed to start widget server'), err);
+    });
+    // 2. Start Simulator Server
+    const app = (0, express_1.default)();
+    const simulatorPort = 3000;
+    // 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) => {
+        res.sendFile(path_1.default.join(simulatorDist, 'index.html'));
+    });
+    app.listen(simulatorPort, () => {
+        console.log(chalk_1.default.green(`\n📱 Simulator running at http://localhost:${simulatorPort}`));
+        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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCommand = initCommand;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const chalk_1 = __importDefault(require("chalk"));
+const child_process_1 = require("child_process");
+// In CommonJS, __dirname is available globally
+async function initCommand(name) {
+    const targetDir = path_1.default.resolve(process.cwd(), name);
+    if (fs_extra_1.default.existsSync(targetDir)) {
+        console.error(chalk_1.default.red(`❌ Directory ${name} already exists.`));
+        process.exit(1);
+    }
+    console.log(chalk_1.default.blue(`🚀 Creating new Clubz widget project: ${name}`));
+    // 1. Copy Template
+    // In dev (ts-node/src), template is in src/templates
+    // In prod (dist), template is in dist/templates (need to ensure build copies it)
+    // For now we assume we are running from src or built dist where structure is preserved.
+    // Adjust path based on where we are executing.
+    // We need to resolve the template path relative to this file.
+    // If we are in dist/commands/init.js, template should be in ../templates/react-vite-ts relative to this file? 
+    // No, standard is usually to keep templates as assets.
+    // Let's assume we are in src/commands/init.ts for dev flow or dist/commands/init.js
+    // Quick fix for path resolution in both envs: look for templates dir up the tree
+    const templateName = 'react-vite-ts';
+    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);
+    }
+    if (!fs_extra_1.default.existsSync(templateDir)) {
+        console.error(chalk_1.default.red(`❌ Template not found at ${templateDir}`));
+        process.exit(1);
+    }
+    try {
+        await fs_extra_1.default.copy(templateDir, targetDir);
+        // 2. Customize package.json
+        const pkgPath = path_1.default.join(targetDir, 'package.json');
+        const pkg = await fs_extra_1.default.readJson(pkgPath);
+        pkg.name = name;
+        await fs_extra_1.default.writeJson(pkgPath, pkg, { spaces: 2 });
+        // 3. Rename .gitignore if needed (npm often renames it to .npmignore on publish)
+        const gitignorePath = path_1.default.join(targetDir, '_gitignore');
+        if (fs_extra_1.default.existsSync(gitignorePath)) {
+            await fs_extra_1.default.move(gitignorePath, path_1.default.join(targetDir, '.gitignore'));
+        }
+        console.log(chalk_1.default.green(`✅ Project created in ${targetDir}`));
+        // 4. Prompt for install
+        const { install } = await inquirer_1.default.prompt([{
+                type: 'confirm',
+                name: 'install',
+                message: 'Install dependencies now?',
+                default: true
+            }]);
+        if (install) {
+            console.log(chalk_1.default.yellow('📦 Installing dependencies...'));
+            (0, child_process_1.execSync)('npm install', { cwd: targetDir, stdio: 'inherit' });
+            console.log(chalk_1.default.green('✅ Dependencies installed'));
+        }
+        console.log('\nNext steps:');
+        console.log(chalk_1.default.cyan(`  cd ${name}`));
+        console.log(chalk_1.default.cyan('  npm run dev'));
+    }
+    catch (e) {
+        console.error(chalk_1.default.red('❌ Failed to create project'), e);
+    }
+}

package/dist/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const init_1 = require("./commands/init");
+const dev_1 = require("./commands/dev");
+const deploy_1 = require("./commands/deploy");
+const program = new commander_1.Command();
+program
+    .name('clubz')
+    .description('Clubz Developer CLI')
+    .version('0.1.0');
+program
+    .command('init')
+    .description('Initialize a new Clubz widget project')
+    .argument('<name>', 'Project name')
+    .action(init_1.initCommand);
+program
+    .command('dev')
+    .description('Start development server with Simulator')
+    .action(dev_1.devCommand);
+program
+    .command('deploy')
+    .description('Build and deploy widget to Clubz')
+    .option('--submit', 'Submit for validation immediately')
+    .action(deploy_1.deployCommand);
+program.parse();

package/dist/simulator/client/src/SimulatorApp.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SimulatorApp;
+const react_1 = __importStar(require("react"));
+function SimulatorApp() {
+    // State
+    const [widgetUrl, setWidgetUrl] = (0, react_1.useState)('http://localhost:3001'); // Default widget port
+    const [logs, setLogs] = (0, react_1.useState)([]);
+    // Iframe ref to send responses back
+    const iframeRef = (0, react_1.useRef)(null);
+    // Initial load
+    (0, react_1.useEffect)(() => {
+        const handleMessage = (event) => {
+            const data = event.data;
+            // Filter only widget messages
+            if (data?.source !== 'clubz-widget')
+                return;
+            log('req', `${data.action} ${data.payload ? JSON.stringify(data.payload) : ''}`);
+            // Process Request
+            processBridgeRequest(data, event.source);
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+    const log = (type, msg) => {
+        setLogs(prev => [{
+                time: new Date().toLocaleTimeString().split(' ')[0],
+                type,
+                msg
+            }, ...prev]);
+    };
+    const processBridgeRequest = (req, sourceWindow) => {
+        let responseData = null;
+        let success = true;
+        switch (req.action) {
+            case 'GET_USER':
+                responseData = { id: 'sim-user-1', name: 'Simulator User', role: 'admin' };
+                break;
+            case 'VIBRATE':
+                // Visual feedback
+                if (navigator.vibrate)
+                    navigator.vibrate(200);
+                alert('📳 VIBRATION TRIGGERED');
+                break;
+            case 'NAVIGATE':
+                alert(`🧭 Navigating to: ${req.payload?.route}`);
+                break;
+            default:
+                console.warn('Unknown action', req.action);
+        }
+        // Send Response
+        const response = {
+            id: req.id,
+            success,
+            data: responseData
+        };
+        sourceWindow.postMessage(response, '*');
+        log('res', `Sent data for ${req.id}`);
+    };
+    return (<div className="flex h-screen w-full">
+            {/* Left: Device Simulator */}
+            <div className="flex-1 flex flex-col items-center justify-center bg-slate-100 p-8">
+                <div className="relative border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl">
+                    <div className="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
+                    <div className="h-[32px] w-[3px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[124px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[178px] rounded-s-lg"></div>
+                    <div className="h-[64px] w-[3px] bg-gray-800 absolute -end-[17px] top-[142px] rounded-e-lg"></div>
+                    <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white relative">
+                        {/* Iframe Content */}
+                        <iframe ref={iframeRef} src={widgetUrl} className="w-full h-full border-0" title="Widget Simulator"/>
+                    </div>
+                </div>
+                <p className="mt-4 text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+            </div>
+
+            {/* Right: Debug Console */}
+            <div className="w-96 bg-white border-l border-slate-200 flex flex-col">
+                <div className="p-4 border-b border-slate-200 bg-slate-50">
+                    <h2 className="font-bold text-slate-700">Bridge Debugger</h2>
+                </div>
+
+                <div className="p-4 border-b border-slate-200">
+                    <label className="text-xs font-bold text-slate-500 uppercase">Widget URL</label>
+                    <input type="text" value={widgetUrl} onChange={e => setWidgetUrl(e.target.value)} className="w-full mt-1 px-3 py-2 border rounded text-sm font-mono"/>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 space-y-2 bg-slate-900 font-mono text-xs">
+                    {logs.length === 0 && <p className="text-slate-500 italic">Waiting for events...</p>}
+                    {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>
+                            <span className="text-slate-300 break-all">{l.msg}</span>
+                        </div>))}
+                </div>
+            </div>
+        </div>);
+}

package/dist/simulator/client/src/main.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const SimulatorApp_1 = __importDefault(require("./SimulatorApp"));
+client_1.default.createRoot(document.getElementById('root')).render(<react_1.default.StrictMode>
+        <SimulatorApp_1.default />
+    </react_1.default.StrictMode>);

package/dist/simulator/client/vite.config.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+exports.default = (0, vite_1.defineConfig)({
+    plugins: [(0, plugin_react_1.default)()],
+    root: __dirname, // Ensure root is set to this directory
+    build: {
+        outDir: '../../../dist/simulator/client', // Build into the CLI dist folder
+        emptyOutDir: true
+    }
+});

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const sdk_1 = require("@clubz/sdk");
+function App() {
+    const [user, setUser] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        // Determine user context via Bridge
+        sdk_1.bridge.getUser().then((u) => setUser(u)).catch(() => console.log('Guest mode'));
+    }, []);
+    const handleVibrate = () => {
+        sdk_1.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>);
+}
+exports.default = App;

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const App_tsx_1 = __importDefault(require("./App.tsx"));
+client_1.default.createRoot(document.getElementById('root')).render(<react_1.default.StrictMode>
+        <App_tsx_1.default />
+    </react_1.default.StrictMode>);

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+// https://vitejs.dev/config/
+exports.default = (0, vite_1.defineConfig)({
+    plugins: [(0, plugin_react_1.default)()],
+    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

@@ -0,0 +1,35 @@
+{
+    "name": "@clubz/cli",
+    "version": "0.1.0",
+    "bin": {
+        "clubz": "bin/clubz.js"
+    },
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc -w"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@types/archiver": "^7.0.0",
+        "@types/cross-spawn": "^6.0.6",
+        "@types/express": "^5.0.6",
+        "@types/fs-extra": "^11.0.4",
+        "archiver": "^7.0.1",
+        "axios": "^1.13.4",
+        "chalk": "^4.1.2",
+        "commander": "^11.0.0",
+        "cross-spawn": "^7.0.6",
+        "express": "^5.2.1",
+        "form-data": "^4.0.5",
+        "fs-extra": "^11.3.3",
+        "inquirer": "^8.0.0"
+    },
+    "devDependencies": {
+        "@types/inquirer": "^9.0.9",
+        "@types/node": "^20.0.0",
+        "typescript": "^5.0.0"
+    }
+}

package/src/commands/deploy.ts

@@ -0,0 +1,119 @@
+import path from 'path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import archiver from 'archiver';
+import axios from 'axios';
+import FormData from 'form-data';
+
+export async function deployCommand() {
+    console.log(chalk.blue('🚀 Deploying Widget to Clubz...'));
+
+    const cwd = process.cwd();
+    const configPath = path.join(cwd, 'clubz.json');
+
+    // 1. Validation
+    if (!fs.existsSync(configPath)) {
+        console.error(chalk.red('❌ clubz.json not found. Are you in a Clubz project?'));
+        process.exit(1);
+    }
+    const config = await fs.readJson(configPath);
+    console.log(chalk.dim(`   Project: ${config.name} v${config.version}`));
+
+    // 2. Build
+    console.log(chalk.yellow('\n📦 Building project...'));
+    try {
+        execSync('npm run build', { stdio: 'inherit' });
+    } catch (e) {
+        console.error(chalk.red('❌ Build failed. Fix errors and try again.'));
+        process.exit(1);
+    }
+
+    // 3. Zip Dist Folder
+    console.log(chalk.yellow('\n🤐 Zipping assets...'));
+    const distDir = path.join(cwd, 'dist');
+    const zipPath = path.join(cwd, 'bundle.zip');
+
+    if (!fs.existsSync(distDir)) {
+        console.error(chalk.red('❌ dist/ directory not found after build.'));
+        process.exit(1);
+    }
+
+    await zipDirectory(distDir, zipPath);
+    console.log(chalk.green(`   Bundle created: ${getSize(zipPath)}`));
+
+    // 4. Upload (Mock for now, replacing previous simple push)
+    console.log(chalk.yellow('\n☁️  Uploading to Clubz Registry...'));
+
+    try {
+        const apiKey = process.env.CLUBZ_API_KEY;
+        if (!apiKey) {
+            console.warn(chalk.yellow('⚠️  No CLUBZ_API_KEY found in env. simulating upload...'));
+        }
+
+        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: { 
+                ...form.getHeaders(),
+                'Authorization': `Bearer ${apiKey}`
+            }
+        });
+        */
+
+        // 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(', ')}`));
+        }
+
+        if (isSubmission) {
+            console.log(chalk.magenta('   🚀 Submitted for validation (Status: Pending)'));
+            console.log(chalk.dim('   An admin will review your widget shortly.'));
+        } else {
+            console.log(chalk.dim('   Saved as Draft. PRO TIP: Use --submit to send for validation.'));
+        }
+
+        console.log(chalk.dim('   Available in your "Submissions" tab.'));
+
+        // Cleanup
+        await fs.remove(zipPath);
+
+    } catch (error: any) {
+        console.error(chalk.red('❌ Upload failed'), error.message);
+        process.exit(1);
+    }
+}
+
+function zipDirectory(source: string, out: string): Promise<void> {
+    const archive = archiver('zip', { zlib: { level: 9 } });
+    const stream = fs.createWriteStream(out);
+
+    return new Promise((resolve, reject) => {
+        archive
+            .directory(source, false)
+            .on('error', err => reject(err))
+            .pipe(stream);
+
+        stream.on('close', () => resolve());
+        archive.finalize();
+    });
+}
+
+function getSize(filePath: string) {
+    const stats = fs.statSync(filePath);
+    const bytes = stats.size;
+    if (bytes < 1024) return bytes + ' B';
+    return (bytes / 1024).toFixed(2) + ' KB';
+}

package/src/commands/dev.ts

@@ -0,0 +1,65 @@
+import path from 'path';
+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
+
+export async function devCommand() {
+    console.log(chalk.blue('🚀 Starting Clubz Development Environment...'));
+
+    // 1. Start User's Widget Server (Vite)
+    const widgetPort = 3001;
+    console.log(chalk.dim(`   Starting widget server on port ${widgetPort}...`));
+
+    const widgetProcess = spawn('npm', ['run', 'dev', '--', '--port', widgetPort.toString()], {
+        stdio: 'inherit',
+        env: { ...process.env, FORCE_COLOR: 'true' }
+    });
+
+    widgetProcess.on('error', (err) => {
+        console.error(chalk.red('❌ Failed to start widget server'), err);
+    });
+
+    // 2. Start Simulator Server
+    const app = express();
+    const simulatorPort = 3000;
+
+    // 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) => {
+        res.sendFile(path.join(simulatorDist, 'index.html'));
+    });
+
+    app.listen(simulatorPort, () => {
+        console.log(chalk.green(`\n📱 Simulator running at http://localhost:${simulatorPort}`));
+        console.log(chalk.cyan(`   Widget running at http://localhost:${widgetPort}`));
+        console.log(chalk.dim('   Press Ctrl+C to stop.'));
+    });
+
+    // Handle cleanup
+    process.on('SIGINT', () => {
+        widgetProcess.kill();
+        process.exit();
+    });
+}

package/src/commands/init.ts

@@ -0,0 +1,83 @@
+import fs from 'fs-extra';
+import path from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+
+// In CommonJS, __dirname is available globally
+
+export async function initCommand(name: string) {
+    const targetDir = path.resolve(process.cwd(), name);
+
+    if (fs.existsSync(targetDir)) {
+        console.error(chalk.red(`❌ Directory ${name} already exists.`));
+        process.exit(1);
+    }
+
+    console.log(chalk.blue(`🚀 Creating new Clubz widget project: ${name}`));
+
+    // 1. Copy Template
+    // In dev (ts-node/src), template is in src/templates
+    // In prod (dist), template is in dist/templates (need to ensure build copies it)
+    // For now we assume we are running from src or built dist where structure is preserved.
+    // Adjust path based on where we are executing.
+
+    // We need to resolve the template path relative to this file.
+    // If we are in dist/commands/init.js, template should be in ../templates/react-vite-ts relative to this file? 
+    // No, standard is usually to keep templates as assets.
+    // Let's assume we are in src/commands/init.ts for dev flow or dist/commands/init.js
+
+    // Quick fix for path resolution in both envs: look for templates dir up the tree
+    const templateName = 'react-vite-ts';
+    let templateDir = path.join(__dirname, '../../templates', templateName); // from dist/commands or src/commands
+
+    // 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);
+    }
+
+    if (!fs.existsSync(templateDir)) {
+        console.error(chalk.red(`❌ Template not found at ${templateDir}`));
+        process.exit(1);
+    }
+
+    try {
+        await fs.copy(templateDir, targetDir);
+
+        // 2. Customize package.json
+        const pkgPath = path.join(targetDir, 'package.json');
+        const pkg = await fs.readJson(pkgPath);
+        pkg.name = name;
+        await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+        // 3. Rename .gitignore if needed (npm often renames it to .npmignore on publish)
+        const gitignorePath = path.join(targetDir, '_gitignore');
+        if (fs.existsSync(gitignorePath)) {
+            await fs.move(gitignorePath, path.join(targetDir, '.gitignore'));
+        }
+
+        console.log(chalk.green(`✅ Project created in ${targetDir}`));
+
+        // 4. Prompt for install
+        const { install } = await inquirer.prompt([{
+            type: 'confirm',
+            name: 'install',
+            message: 'Install dependencies now?',
+            default: true
+        }]);
+
+        if (install) {
+            console.log(chalk.yellow('📦 Installing dependencies...'));
+            execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
+            console.log(chalk.green('✅ Dependencies installed'));
+        }
+
+        console.log('\nNext steps:');
+        console.log(chalk.cyan(`  cd ${name}`));
+        console.log(chalk.cyan('  npm run dev'));
+
+    } catch (e: any) {
+        console.error(chalk.red('❌ Failed to create project'), e);
+    }
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+import { Command } from 'commander';
+import { initCommand } from './commands/init';
+import { devCommand } from './commands/dev';
+import { deployCommand } from './commands/deploy';
+
+const program = new Command();
+
+program
+    .name('clubz')
+    .description('Clubz Developer CLI')
+    .version('0.1.0');
+
+program
+    .command('init')
+    .description('Initialize a new Clubz widget project')
+    .argument('<name>', 'Project name')
+    .action(initCommand);
+
+program
+    .command('dev')
+    .description('Start development server with Simulator')
+    .action(devCommand);
+
+program
+    .command('deploy')
+    .description('Build and deploy widget to Clubz')
+    .option('--submit', 'Submit for validation immediately')
+    .action(deployCommand);
+
+program.parse();

package/src/simulator/client/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Clubz Simulator</title>
+</head>
+
+<body class="bg-slate-50 h-screen w-screen overflow-hidden">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+// Mock Bridge Types (replicated from SDK for independence)
+type BridgeAction = 'VIBRATE' | 'NAVIGATE' | 'GET_USER' | 'STORAGE_SET' | 'STORAGE_GET';
+interface BridgeRequest { id: string; action: BridgeAction; payload?: any; source?: string; }
+interface BridgeResponse { id: string; success: boolean; data?: any; error?: string; }
+
+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 }[]>([]);
+
+    // Iframe ref to send responses back
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    // Initial load
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            const data = event.data as BridgeRequest;
+
+            // Filter only widget messages
+            if (data?.source !== 'clubz-widget') return;
+
+            log('req', `${data.action} ${data.payload ? JSON.stringify(data.payload) : ''}`);
+
+            // Process Request
+            processBridgeRequest(data, event.source as Window);
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    const log = (type: 'req' | 'res', msg: string) => {
+        setLogs(prev => [{
+            time: new Date().toLocaleTimeString().split(' ')[0],
+            type,
+            msg
+        }, ...prev]);
+    };
+
+    const processBridgeRequest = (req: BridgeRequest, sourceWindow: Window) => {
+        let responseData: any = null;
+        let success = true;
+
+        switch (req.action) {
+            case 'GET_USER':
+                responseData = { id: 'sim-user-1', name: 'Simulator User', role: 'admin' };
+                break;
+            case 'VIBRATE':
+                // Visual feedback
+                if (navigator.vibrate) navigator.vibrate(200);
+                alert('📳 VIBRATION TRIGGERED');
+                break;
+            case 'NAVIGATE':
+                alert(`🧭 Navigating to: ${req.payload?.route}`);
+                break;
+            default:
+                console.warn('Unknown action', req.action);
+        }
+
+        // Send Response
+        const response: BridgeResponse = {
+            id: req.id,
+            success,
+            data: responseData
+        };
+
+        sourceWindow.postMessage(response, '*');
+        log('res', `Sent data for ${req.id}`);
+    };
+
+    return (
+        <div className="flex h-screen w-full">
+            {/* Left: Device Simulator */}
+            <div className="flex-1 flex flex-col items-center justify-center bg-slate-100 p-8">
+                <div className="relative border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl">
+                    <div className="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
+                    <div className="h-[32px] w-[3px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[124px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[178px] rounded-s-lg"></div>
+                    <div className="h-[64px] w-[3px] bg-gray-800 absolute -end-[17px] top-[142px] rounded-e-lg"></div>
+                    <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white relative">
+                        {/* Iframe Content */}
+                        <iframe
+                            ref={iframeRef}
+                            src={widgetUrl}
+                            className="w-full h-full border-0"
+                            title="Widget Simulator"
+                        />
+                    </div>
+                </div>
+                <p className="mt-4 text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+            </div>
+
+            {/* Right: Debug Console */}
+            <div className="w-96 bg-white border-l border-slate-200 flex flex-col">
+                <div className="p-4 border-b border-slate-200 bg-slate-50">
+                    <h2 className="font-bold text-slate-700">Bridge Debugger</h2>
+                </div>
+
+                <div className="p-4 border-b border-slate-200">
+                    <label className="text-xs font-bold text-slate-500 uppercase">Widget URL</label>
+                    <input
+                        type="text"
+                        value={widgetUrl}
+                        onChange={e => setWidgetUrl(e.target.value)}
+                        className="w-full mt-1 px-3 py-2 border rounded text-sm font-mono"
+                    />
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 space-y-2 bg-slate-900 font-mono text-xs">
+                    {logs.length === 0 && <p className="text-slate-500 italic">Waiting for events...</p>}
+                    {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>
+                            <span className="text-slate-300 break-all">{l.msg}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/simulator/client/src/main.tsx

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

package/src/simulator/client/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+    plugins: [react()],
+    root: __dirname, // Ensure root is set to this directory
+    build: {
+        outDir: '../../../dist/simulator/client', // Build into the CLI dist folder
+        emptyOutDir: true
+    }
+})

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

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

package/src/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/src/templates/react-vite-ts/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "my-clubz-widget",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "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/src/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/src/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/src/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/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "commonjs",
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "src/templates/**/*",
+        "src/simulator/client/**/*"
+    ]
+}