@wealthfolio/addon-dev-tools 1.0.0

package/README.md

@@ -0,0 +1,80 @@
+# @wealthfolio/addon-dev-tools
+
+Development tools for Wealthfolio addons including hot reload server and CLI.
+
+## Installation
+
+```bash
+npm install -g @wealthfolio/addon-dev-tools
+```
+
+## CLI Commands
+
+### Create New Addon
+```bash
+wealthfolio create my-awesome-addon
+```
+
+### Start Development Server
+```bash
+# In your addon directory
+wealthfolio dev
+```
+
+### Build Addon
+```bash
+wealthfolio build
+```
+
+### Package for Distribution
+```bash
+wealthfolio package
+```
+
+### Test Setup
+```bash
+wealthfolio test
+```
+
+## Development Server
+
+The development server provides:
+- Hot reload functionality
+- File watching
+- Auto-building
+- Health check endpoints
+
+### API Endpoints
+
+- `GET /health` - Health check
+- `GET /status` - Addon status and last modified time
+- `GET /manifest.json` - Addon manifest
+- `GET /addon.js` - Built addon code
+- `GET /files` - List of built files
+- `GET /test` - Test connectivity
+
+## Usage in Addon Projects
+
+Add to your addon's `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev:server": "wealthfolio dev"
+  },
+  "devDependencies": {
+    "@wealthfolio/addon-dev-tools": "^1.0.0"
+  }
+}
+```
+
+## Architecture
+
+This package is separate from `@wealthfolio/addon-sdk` to:
+- Keep the SDK lightweight for production
+- Avoid unnecessary dependencies in addon bundles  
+- Provide optional development tooling
+
+## License
+
+MIT

package/cli.js

@@ -0,0 +1,318 @@
+#!/usr/bin/env node
+
+/**
+ * Wealthfolio Addon CLI
+ * 
+ * Command-line tool for developing, building, and managing addons
+ */
+
+const { program } = require('commander');
+const fs = require('fs');
+const path = require('path');
+const { exec, spawn } = require('child_process');
+const { promisify } = require('util');
+const readline = require('node:readline/promises');
+const { stdin, stdout } = require('node:process');
+const { AddonScaffold } = require('./scaffold');
+
+const execAsync = promisify(exec);
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m'
+};
+
+function log(message, color = colors.reset) {
+  console.log(`${color}${message}${colors.reset}`);
+}
+
+function error(message) {
+  log(`❌ ${message}`, colors.red);
+}
+
+function success(message) {
+  log(`✅ ${message}`, colors.green);
+}
+
+function info(message) {
+  log(`ℹ️  ${message}`, colors.blue);
+}
+
+function warn(message) {
+  log(`⚠️  ${message}`, colors.yellow);
+}
+
+// Initialize scaffold service
+const scaffold = new AddonScaffold();
+
+// Command: create
+async function createAddon(name, options) {
+  try {
+    info(`Creating new addon: ${name}`);
+    
+    // Prepare configuration
+    const config = {
+      name,
+      description: options.description,
+      author: options.author
+    };
+
+    // Validate configuration
+    const validationErrors = scaffold.validateConfig(config);
+    if (validationErrors.length > 0) {
+      error('Configuration errors:');
+      validationErrors.forEach(err => error(`  - ${err}`));
+      return;
+    }
+
+    // Interactive prompts for missing information
+    const interactive = process.stdin.isTTY && process.stdout.isTTY;
+    if (interactive && (!config.description || !config.author)) {
+      const rl = readline.createInterface({ input: stdin, output: stdout });
+      try {
+        if (!config.description) {
+          const defaultDesc = `A Wealthfolio addon for ${name}`;
+          const answer = (await rl.question(`Description [${defaultDesc}]: `)).trim();
+          config.description = answer.length > 0 ? answer : defaultDesc;
+        }
+        if (!config.author) {
+          const defaultAuthor = 'Anonymous';
+          const answer = (await rl.question(`Author [${defaultAuthor}]: `)).trim();
+          config.author = answer.length > 0 ? answer : defaultAuthor;
+        }
+      } finally {
+        rl.close();
+      }
+    }
+
+    // Set defaults for non-interactive mode
+    if (!config.description) {
+      config.description = `A Wealthfolio addon for ${name}`;
+    }
+    if (!config.author) {
+      config.author = 'Anonymous';
+    }
+    
+    const addonId = name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+    const addonDir = path.resolve(process.cwd(), addonId);
+    
+    // Check if directory already exists
+    if (fs.existsSync(addonDir)) {
+      error(`Directory ${addonId} already exists`);
+      return;
+    }
+    
+    // Add current date for changelog
+    const currentDate = new Date().toISOString().split('T')[0];
+    config.currentDate = currentDate;
+    
+    // Create addon using scaffold service
+    const result = await scaffold.createAddon(config, addonDir);
+    
+    success(`Addon ${name} created successfully!`);
+    info(`Directory: ${result.addonDir}`);
+    info(`Addon ID: ${result.addonId}`);
+    info(`Package name: ${result.packageName}`);
+    info(`Structure created:`);
+    info(`  ├── src/`);
+    info(`  │   ├── addon.tsx           # Main addon entry point`);
+    info(`  │   ├── components/         # React components`);
+    info(`  │   ├── hooks/              # React hooks`);
+    info(`  │   ├── pages/              # Addon pages`);
+    info(`  │   ├── lib/                # Utility functions and shared logic`);
+    info(`  │   └── types/              # Type definitions`);
+    info(`  ├── dist/                   # Built files (generated)`);
+    info(`  ├── manifest.json           # Addon metadata and permissions`);
+    info(`  ├── package.json            # NPM package configuration`);
+    info(`  ├── vite.config.ts          # Build configuration`);
+    info(`  ├── tsconfig.json           # TypeScript configuration`);
+    info(`  ├── CHANGELOG.md            # Version history and release notes`);
+    info(`  └── README.md               # Documentation`);
+    info(`Next steps:`);
+    info(`  1. cd ${addonId}`);
+    info(`  2. pnpm install`);
+    info(`  3. pnpm run dev:server`);
+    
+  } catch (err) {
+    error(`Failed to create addon: ${err.message}`);
+  }
+}
+
+// Command: dev
+async function startDev(port = 3001) {
+  try {
+    const manifestPath = path.resolve(process.cwd(), 'manifest.json');
+    
+    if (!fs.existsSync(manifestPath)) {
+      error('No manifest.json found. Are you in an addon directory?');
+      return;
+    }
+    
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+    
+    info(`Starting development server for ${manifest.name}`);
+    info(`Server will run on http://localhost:${port}`);
+    
+    // Start the development server
+    const devServerPath = path.resolve(__dirname, 'dev-server.js');
+    const child = spawn('node', [devServerPath, process.cwd(), port.toString()], {
+      stdio: 'inherit'
+    });
+    
+    // Handle cleanup on exit
+    process.on('SIGINT', () => {
+      child.kill('SIGINT');
+      process.exit(0);
+    });
+    
+    child.on('exit', (code) => {
+      process.exit(code);
+    });
+    
+  } catch (err) {
+    error(`Failed to start development server: ${err.message}`);
+  }
+}
+
+// Command: build
+async function buildAddon() {
+  try {
+    info('Building addon...');
+    
+    const packageJsonPath = path.resolve(process.cwd(), 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+      error('No package.json found. Are you in an addon directory?');
+      return;
+    }
+    
+    await execAsync('pnpm run build');
+    success('Addon built successfully!');
+    
+  } catch (err) {
+    error(`Build failed: ${err.message}`);
+  }
+}
+
+// Command: package
+async function packageAddon() {
+  try {
+    info('Packaging addon...');
+    
+    // Build first
+    await buildAddon();
+    
+    // Create package
+    await execAsync('pnpm run package');
+    success('Addon packaged successfully!');
+    
+  } catch (err) {
+    error(`Packaging failed: ${err.message}`);
+  }
+}
+
+// Command: test
+async function testSetup() {
+  try {
+    info('Testing addon development setup...');
+    
+    // Check if manifest exists
+    const manifestPath = path.resolve(process.cwd(), 'manifest.json');
+    if (!fs.existsSync(manifestPath)) {
+      error('❌ No manifest.json found. Are you in an addon directory?');
+      return;
+    }
+    
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+    success(`✅ Found manifest for: ${manifest.name}`);
+    
+    // Check if dist exists
+    const distPath = path.resolve(process.cwd(), 'dist');
+    if (!fs.existsSync(distPath)) {
+      warn('⚠️  No dist directory found. Run `pnpm run build` first.');
+    } else {
+      success('✅ Dist directory exists');
+    }
+    
+    // Check if dev server is running
+    try {
+      const response = await fetch('http://localhost:3001/test');
+      if (response.ok) {
+        const data = await response.json();
+        success('✅ Development server is running');
+        info(`   Server message: ${data.message}`);
+      }
+    } catch (error) {
+      warn('⚠️  Development server not running on port 3001');
+      info('   Start it with: pnpm run dev:server');
+    }
+    
+    info('\nNext steps:');
+    info('1. Start dev server: pnpm run dev:server');
+    info('2. Start main app in dev mode');
+    info('3. Check console: discoverAddons()');
+    
+  } catch (err) {
+    error(`Test failed: ${err.message}`);
+  }
+}
+
+// Command: install
+async function installAddon(zipPath) {
+  try {
+    info(`Installing addon from ${zipPath}`);
+    
+    // This would integrate with the main app's addon installation
+    warn('Install command not yet implemented. Use the main app to install.');
+    
+  } catch (err) {
+    error(`Installation failed: ${err.message}`);
+  }
+}
+
+// CLI Setup
+program
+  .name('wealthfolio')
+  .description('Wealthfolio Addon Development CLI')
+  .version('1.0.0');
+
+program
+  .command('create <name>')
+  .description('Create a new addon')
+  .option('-d, --description <desc>', 'Addon description')
+  .option('-a, --author <author>', 'Addon author')
+  .action(createAddon);
+
+program
+  .command('dev')
+  .description('Start development server')
+  .option('-p, --port <port>', 'Port number', '3001')
+  .action((options) => startDev(parseInt(options.port)));
+
+program
+  .command('build')
+  .description('Build the addon')
+  .action(buildAddon);
+
+program
+  .command('package')
+  .description('Package the addon for distribution')
+  .action(packageAddon);
+
+program
+  .command('test')
+  .description('Test addon development setup')
+  .action(testSetup);
+
+program
+  .command('install <zip>')
+  .description('Install an addon from zip file')
+  .action(installAddon);
+
+program.parse();

package/dev-server.js

@@ -0,0 +1,370 @@
+#!/usr/bin/env node
+// @ts-nocheck
+
+/**
+ * Addon Development Server
+ * 
+ * A simple development server for hot reloading addons during development.
+ * This server watches for file changes and provides a hot reload endpoint.
+ */
+
+const express = require('express');
+const cors = require('cors');
+const chokidar = require('chokidar');
+const path = require('path');
+const fs = require('fs');
+const { exec } = require('child_process');
+const { promisify } = require('util');
+
+const execAsync = promisify(exec);
+
+class AddonDevServer {
+  constructor(config) {
+    this.config = config;
+    this.app = express();
+    this.lastModified = new Date();
+    this.buildInProgress = false;
+    this.viteWatcher = null;
+    
+    this.setupMiddleware();
+    this.setupRoutes();
+    this.setupFileWatcher();
+    this.startViteWatcher();
+  }
+
+  setupMiddleware() {
+    this.app.use(cors({
+      origin: ['http://localhost:1420', 'http://localhost:3000'],
+      credentials: true
+    }));
+    this.app.use(express.static(this.config.addonPath));
+  }
+
+  setupRoutes() {
+    // Health check endpoint
+    this.app.get('/health', (req, res) => {
+      res.json({
+        status: 'ok',
+        timestamp: new Date().toISOString(),
+        addonPath: this.config.addonPath
+      });
+    });
+
+    // Addon status endpoint
+    this.app.get('/status', (req, res) => {
+      res.json({
+        lastModified: this.lastModified.toISOString(),
+        buildInProgress: this.buildInProgress,
+        files: this.getFileList()
+      });
+    });
+
+    // Serve addon manifest
+    this.app.get('/manifest.json', (req, res) => {
+      try {
+        const manifestPath = path.resolve(this.config.manifestPath);
+        if (fs.existsSync(manifestPath)) {
+          const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+          res.json(manifest);
+        } else {
+          res.status(404).json({ error: 'Manifest not found' });
+        }
+      } catch (error) {
+        res.status(500).json({ error: 'Failed to read manifest' });
+      }
+    });
+
+    // Serve addon code
+    this.app.get('/addon.js', async (req, res) => {
+      try {
+        const addonFile = path.resolve(this.config.addonPath, 'dist/addon.js');
+        console.log(`📦 Serving addon.js from: ${addonFile}`);
+        
+        // Wait for file to exist (with timeout)
+        const fileExists = await this.waitForFile(addonFile, 3000);
+        
+        if (fileExists) {
+          const code = fs.readFileSync(addonFile, 'utf-8');
+          res.type('application/javascript').send(code);
+        } else {
+          console.error(`❌ Addon file not found at: ${addonFile}`);
+          res.status(404).json({ error: 'Addon file not found. Run build first.', path: addonFile });
+        }
+      } catch (error) {
+        console.error(`❌ Error serving addon.js:`, error);
+        res.status(500).json({ error: 'Failed to read addon file', details: error.message });
+      }
+    });
+
+    // Hot reload endpoint
+    this.app.get('/reload', (req, res) => {
+      res.json({
+        message: 'Reload triggered',
+        timestamp: new Date().toISOString()
+      });
+      
+      // Trigger rebuild if configured
+      if (this.config.buildCommand) {
+        this.triggerBuild();
+      }
+    });
+
+    // File listing for debugging
+    this.app.get('/files', (req, res) => {
+      res.json({
+        files: this.getFileList(),
+        watchPaths: this.config.watchPaths
+      });
+    });
+
+    // Test endpoint for connectivity
+    this.app.get('/test', (req, res) => {
+      res.json({
+        message: 'Addon development server is working!',
+        addonPath: this.config.addonPath,
+        timestamp: new Date().toISOString(),
+        manifest: this.getManifestInfo()
+      });
+    });
+
+    // Debug endpoint for troubleshooting
+    this.app.get('/debug', (req, res) => {
+      const addonFile = path.resolve(this.config.addonPath, 'dist/addon.js');
+      res.json({
+        lastModified: this.lastModified.toISOString(),
+        buildInProgress: this.buildInProgress,
+        files: this.getFileList(),
+        watchPaths: this.config.watchPaths,
+        viteWatcherRunning: this.viteWatcher !== null,
+        addonFile: {
+          path: addonFile,
+          exists: fs.existsSync(addonFile),
+          size: fs.existsSync(addonFile) ? fs.statSync(addonFile).size : 0
+        },
+        config: {
+          port: this.config.port,
+          buildCommand: this.config.buildCommand
+        }
+      });
+    });
+
+    // Simple ping endpoint
+    this.app.get('/ping', (req, res) => {
+      res.json({ message: 'pong', timestamp: new Date().toISOString() });
+    });
+  }
+
+  setupFileWatcher() {
+    const watcher = chokidar.watch(this.config.watchPaths, {
+      ignored: /node_modules|\.git/,
+      persistent: true,
+      ignoreInitial: true
+    });
+
+    watcher.on('change', (filePath) => {
+      console.log(`📝 File changed: ${filePath}`);
+      // Don't trigger manual build since Vite is already watching
+      // Just update the timestamp for status endpoint
+      this.lastModified = new Date();
+    });
+
+    watcher.on('add', (filePath) => {
+      console.log(`➕ File added: ${filePath}`);
+      this.lastModified = new Date();
+    });
+
+    watcher.on('unlink', (filePath) => {
+      console.log(`➖ File removed: ${filePath}`);
+      this.lastModified = new Date();
+    });
+
+    console.log(`👀 Watching files: ${this.config.watchPaths.join(', ')}`);
+  }
+
+  async triggerBuild() {
+    if (this.buildInProgress || !this.config.buildCommand) return;
+    
+    this.buildInProgress = true;
+    console.log(`🔨 Building addon with: ${this.config.buildCommand}`);
+    
+    try {
+      await execAsync(this.config.buildCommand, {
+        cwd: this.config.addonPath
+      });
+      
+      console.log('✅ Build completed successfully');
+      this.lastModified = new Date();
+    } catch (error) {
+      console.error('❌ Build failed:', error);
+    } finally {
+      this.buildInProgress = false;
+    }
+  }
+
+  getFileList() {
+    try {
+      const distPath = path.resolve(this.config.addonPath, 'dist');
+      if (fs.existsSync(distPath)) {
+        return fs.readdirSync(distPath).map(file => `dist/${file}`);
+      }
+      return [];
+    } catch (error) {
+      return [];
+    }
+  }
+
+  getManifestInfo() {
+    try {
+      const manifestPath = path.resolve(this.config.manifestPath);
+      if (fs.existsSync(manifestPath)) {
+        return JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Wait for a file to exist with timeout
+   */
+  async waitForFile(filePath, timeout = 3000) {
+    const startTime = Date.now();
+    const checkInterval = 100;
+    
+    while (Date.now() - startTime < timeout) {
+      if (fs.existsSync(filePath)) {
+        // Additional check to ensure file is fully written
+        try {
+          const stats = fs.statSync(filePath);
+          if (stats.size > 0) {
+            return true;
+          }
+        } catch (err) {
+          // File might be in the process of being written
+        }
+      }
+      
+      await new Promise(resolve => setTimeout(resolve, checkInterval));
+    }
+    
+    return false;
+  }
+
+  startViteWatcher() {
+    if (!this.config.buildCommand) return;
+    
+    console.log('🔨 Starting Vite in watch mode...');
+    
+    // Start vite build in watch mode
+    const { spawn } = require('child_process');
+    this.viteWatcher = spawn('npm', ['run', 'dev'], {
+      cwd: this.config.addonPath,
+      stdio: ['ignore', 'pipe', 'pipe']
+    });
+    
+    this.viteWatcher.stdout.on('data', (data) => {
+      const output = data.toString();
+      console.log(`Vite output: ${output.trim()}`);
+      
+      if (output.includes('build started')) {
+        this.buildInProgress = true;
+      }
+      
+      if (output.includes('built in')) {
+        console.log(`✅ Vite rebuild completed`);
+        this.lastModified = new Date();
+        this.buildInProgress = false;
+      }
+      
+      if (output.includes('watching for file changes')) {
+        console.log(`✅ Vite watcher ready`);
+        this.buildInProgress = false;
+      }
+    });
+    
+    this.viteWatcher.stderr.on('data', (data) => {
+      console.error(`Vite error: ${data}`);
+    });
+    
+    this.viteWatcher.on('close', (code) => {
+      if (code !== 0) {
+        console.error(`Vite watcher exited with code ${code}`);
+      }
+    });
+  }
+
+  start() {
+    this.app.listen(this.config.port, () => {
+      console.log(`🚀 Addon dev server running on http://localhost:${this.config.port}`);
+      console.log(`📁 Serving from: ${this.config.addonPath}`);
+      console.log(`📋 Manifest: ${this.config.manifestPath}`);
+      console.log(`👀 Watching files: ${this.config.watchPaths.join(', ')}`);
+      
+      if (this.config.buildCommand) {
+        console.log(`🔨 Build command: ${this.config.buildCommand}`);
+      }
+    });
+
+    // Handle graceful shutdown
+    process.on('SIGINT', () => {
+      this.stop();
+      process.exit(0);
+    });
+
+    process.on('SIGTERM', () => {
+      this.stop();
+      process.exit(0);
+    });
+  }
+
+  stop() {
+    console.log('🛑 Shutting down dev server...');
+    
+    if (this.viteWatcher) {
+      this.viteWatcher.kill('SIGTERM');
+      this.viteWatcher = null;
+    }
+  }
+}
+
+// CLI interface
+function main() {
+  const args = process.argv.slice(2);
+  const addonPath = args[0] || process.cwd();
+  const port = parseInt(args[1]) || 3001;
+  
+  const config = {
+    port,
+    addonPath: path.resolve(addonPath),
+    manifestPath: path.resolve(addonPath, 'manifest.json'),
+    buildCommand: 'npm run build',
+    watchPaths: [
+      path.resolve(addonPath, 'src'),
+      path.resolve(addonPath, 'manifest.json')
+    ]
+  };
+
+  // Check if addon directory exists
+  if (!fs.existsSync(config.addonPath)) {
+    console.error(`❌ Addon directory not found: ${config.addonPath}`);
+    process.exit(1);
+  }
+
+  // Check if manifest exists
+  if (!fs.existsSync(config.manifestPath)) {
+    console.error(`❌ Manifest not found: ${config.manifestPath}`);
+    process.exit(1);
+  }
+
+  const server = new AddonDevServer(config);
+  server.start();
+}
+
+// Export for use as a module
+module.exports = { AddonDevServer };
+
+// Run if called directly
+if (require.main === module) {
+  main();
+}

package/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  AddonDevServer: require('./dev-server').AddonDevServer
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@wealthfolio/addon-dev-tools",
+  "version": "1.0.0",
+  "description": "Development tools for Wealthfolio addons - hot reload server and CLI",
+  "main": "index.js",
+  "bin": {
+    "wealthfolio": "cli.js"
+  },
+  "keywords": [
+    "wealthfolio",
+    "addon",
+    "development",
+    "cli",
+    "hot-reload"
+  ],
+  "author": "Wealthfolio Team",
+
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/afadil/wealthfolio.git",
+    "directory": "packages/addon-dev-tools"
+  },
+  "bugs": {
+    "url": "https://github.com/afadil/wealthfolio/issues"
+  },
+  "homepage": "https://github.com/afadil/wealthfolio/tree/main/packages/addon-dev-tools#readme",
+  "files": [
+    "cli.js",
+    "dev-server.js",
+    "index.js",
+    "scaffold.js",
+    "templates/",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "dependencies": {
+    "commander": "^14.0.0",
+    "express": "^4.21.2",
+    "cors": "^2.8.5",
+    "chokidar": "^4.0.3"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/scaffold.js

@@ -0,0 +1,163 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Scaffold service for creating new addons from templates
+ */
+class AddonScaffold {
+  constructor() {
+    this.templatesDir = path.join(__dirname, 'templates');
+  }
+
+  /**
+   * Get all available templates
+   */
+  getAvailableTemplates() {
+    if (!fs.existsSync(this.templatesDir)) {
+      throw new Error('Templates directory not found');
+    }
+
+    return fs.readdirSync(this.templatesDir)
+      .filter(file => file.endsWith('.template'))
+      .map(file => file.replace('.template', ''));
+  }
+
+  /**
+   * Load a template file
+   */
+  loadTemplate(templateName) {
+    const templatePath = path.join(this.templatesDir, `${templateName}.template`);
+    
+    if (!fs.existsSync(templatePath)) {
+      throw new Error(`Template ${templateName} not found`);
+    }
+
+    return fs.readFileSync(templatePath, 'utf-8');
+  }
+
+  /**
+   * Replace template variables with actual values
+   */
+  processTemplate(content, replacements) {
+    let result = content;
+    for (const [key, value] of Object.entries(replacements)) {
+      const pattern = new RegExp(`{{${key}}}`, 'g');
+      result = result.replace(pattern, value);
+    }
+    return result;
+  }
+
+  /**
+   * Generate replacements object from addon config
+   */
+  generateReplacements(config) {
+    const addonId = config.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+    const packageName = `wealthfolio-${addonId}-addon`;
+    const componentName = config.name.replace(/[^a-zA-Z0-9]/g, '');
+
+    return {
+      addonId,
+      addonName: config.name,
+      packageName,
+      componentName,
+      description: config.description || `A Wealthfolio addon for ${config.name}`,
+      author: config.author || 'Anonymous'
+    };
+  }
+
+  /**
+   * Create addon structure
+   */
+  async createAddon(config, targetDir) {
+    const replacements = this.generateReplacements(config);
+    
+    // Create directory structure
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+    }
+    
+    // Create src directory and subdirectories
+    const srcDir = path.join(targetDir, 'src');
+    const srcSubDirs = ['components', 'hooks', 'pages', 'lib', 'types'];
+    
+    if (!fs.existsSync(srcDir)) {
+      fs.mkdirSync(srcDir);
+    }
+    
+    // Create all subdirectories
+    srcSubDirs.forEach(subDir => {
+      const subDirPath = path.join(srcDir, subDir);
+      if (!fs.existsSync(subDirPath)) {
+        fs.mkdirSync(subDirPath, { recursive: true });
+      }
+    });
+
+    // Template file mappings
+    const fileTemplates = [
+      { template: 'manifest.json', output: 'manifest.json' },
+      { template: 'package.json', output: 'package.json' },
+      { template: 'vite.config.ts', output: 'vite.config.ts' },
+      { template: 'tsconfig.json', output: 'tsconfig.json' },
+      { template: 'README.md', output: 'README.md' },
+      { template: 'CHANGELOG.md', output: 'CHANGELOG.md' },
+      { template: 'addon.tsx', output: 'src/addon.tsx' },
+      { template: 'components-index.ts', output: 'src/components/index.ts' },
+      { template: 'hooks-index.ts', output: 'src/hooks/index.ts' },
+      { template: 'pages-index.ts', output: 'src/pages/index.ts' },
+      { template: 'lib-index.ts', output: 'src/lib/index.ts' },
+      { template: 'types-index.ts', output: 'src/types/index.ts' }
+    ];
+
+    // Process and write each template
+    for (const { template, output } of fileTemplates) {
+      try {
+        const templateContent = this.loadTemplate(template);
+        const processedContent = this.processTemplate(templateContent, replacements);
+        const outputPath = path.join(targetDir, output);
+        
+        // Ensure directory exists
+        const outputDir = path.dirname(outputPath);
+        if (!fs.existsSync(outputDir)) {
+          fs.mkdirSync(outputDir, { recursive: true });
+        }
+        
+        fs.writeFileSync(outputPath, processedContent);
+      } catch (error) {
+        throw new Error(`Failed to process template ${template}: ${error.message}`);
+      }
+    }
+
+    return {
+      addonDir: targetDir,
+      addonId: replacements.addonId,
+      packageName: replacements.packageName
+    };
+  }
+
+  /**
+   * Validate addon configuration
+   */
+  validateConfig(config) {
+    const errors = [];
+
+    if (!config.name || typeof config.name !== 'string') {
+      errors.push('Addon name is required and must be a string');
+    }
+
+    if (config.name && config.name.trim().length === 0) {
+      errors.push('Addon name cannot be empty');
+    }
+
+    if (config.description && typeof config.description !== 'string') {
+      errors.push('Description must be a string');
+    }
+
+    if (config.author && typeof config.author !== 'string') {
+      errors.push('Author must be a string');
+    }
+
+    return errors;
+  }
+}
+
+module.exports = { AddonScaffold };

package/templates/CHANGELOG.md.template

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to the {{name}} addon will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- Initial addon structure and setup
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
+## [1.0.0] - {{currentDate}}
+
+### Added
+- Initial release of {{name}} addon
+- Basic addon functionality and core features
+- Integration with Wealthfolio addon SDK v1.0.0
+- Sidebar navigation integration for easy access
+- Responsive design for all screen sizes
+
+### Features
+- {{description}}
+- User-friendly interface
+- Compatible with Wealthfolio platform
+
+### Permissions
+- UI components access for sidebar and routing

package/templates/README.md.template

@@ -0,0 +1,27 @@
+# {{addonName}}
+
+{{description}}
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev:server
+
+# Build for production
+npm run build
+
+# Package addon
+npm run bundle
+```
+
+## Features
+
+- Add your features here
+
+## License
+
+MIT

package/templates/addon.tsx.template

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { AddonContext } from '@wealthfolio/addon-sdk';
+import { Card, CardContent, Icons } from '@wealthfolio/ui';
+
+function AddonExample({ ctx }: { ctx: AddonContext }) {
+  return (
+    <div className="p-6">
+      <Card>
+        <CardContent className="p-6">
+          <h1 className="text-2xl font-semibold mb-2">{{addonName}}</h1>
+          <p className="text-muted-foreground">
+            Welcome to your new Wealthfolio addon! Start building amazing features.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function enable(ctx: AddonContext) {
+  // Add a sidebar item
+  const sidebarItem = ctx.sidebar.addItem({
+    id: '{{addonId}}',
+    label: '{{addonName}}',
+    icon: <Icons.Blocks className="h-5 w-5" />,
+    route: '/addon/{{addonId}}',
+    order: 100,
+  });
+
+  // Add a route
+  const Wrapper = () => <AddonExample ctx={ctx} />;
+  ctx.router.add({
+    path: '/addon/{{addonId}}',
+    component: React.lazy(() => Promise.resolve({ default: Wrapper })),
+  });
+
+  // Cleanup on disable
+  ctx.onDisable(() => {
+    try {
+      sidebarItem.remove();
+    } catch (err) {
+      ctx.api.logger.error('Failed to remove sidebar item:', err);
+    }
+  });
+}

package/templates/components-index.ts.template

@@ -0,0 +1,3 @@
+// Export your components here
+// Example:
+// export { default as MyComponent } from './MyComponent';

package/templates/hooks-index.ts.template

@@ -0,0 +1,3 @@
+// Export your custom hooks here
+// Example:
+// export { useMyHook } from './useMyHook';

package/templates/lib-index.ts.template

@@ -0,0 +1,5 @@
+// Export your utility functions and shared logic here
+// Example:
+// export { formatCurrency } from './currency';
+// export { calculateReturns } from './calculations';
+// export { validateInput } from './validation';

package/templates/manifest.json.template

@@ -0,0 +1,19 @@
+{
+  "id": "{{addonId}}",
+  "name": "{{addonName}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "author": "{{author}}",
+  "main": "dist/addon.js",
+  "sdkVersion": "1.0.0",
+  "enabled": true,
+  "permissions": [
+    {
+      "category": "ui",
+      "functions": ["sidebar.addItem"],
+      "purpose": "Add navigation items to the sidebar"
+    }
+  ],
+  "keywords": ["wealthfolio", "addon"],
+  "license": "MIT"
+}

package/templates/package.json.template

@@ -0,0 +1,35 @@
+{
+  "name": "{{packageName}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "type": "module",
+  "main": "dist/addon.js",
+  "keywords": ["wealthfolio", "addon"],
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "dev:server": "wealthfolio dev",
+    "clean": "rm -rf dist",
+    "package": "mkdir -p dist && zip -r dist/$npm_package_name-$npm_package_version.zip manifest.json dist/ assets/ README.md",
+    "bundle": "pnpm clean && pnpm build && pnpm package",
+    "lint": "tsc --noEmit",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@wealthfolio/addon-sdk": "^1.0.0",
+    "@wealthfolio/ui": "^1.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@wealthfolio/addon-dev-tools": "^1.0.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "rollup-plugin-external-globals": "^0.13.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.7"
+  }
+}

package/templates/pages-index.ts.template

@@ -0,0 +1,4 @@
+// Export your addon pages here
+// Example:
+// export { default as SettingsPage } from './SettingsPage';
+// export { default as DashboardPage } from './DashboardPage';

package/templates/tsconfig.json.template

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["node", "react", "react-dom"]
+  },
+  "include": ["src"]
+}

package/templates/types-index.ts.template

@@ -0,0 +1,10 @@
+// Export your type definitions here
+// Example:
+// export interface AddonConfig {
+//   enabled: boolean;
+//   settings: Record<string, any>;
+// }
+//
+// export type AddonPageProps = {
+//   onSettingsChange: (settings: Record<string, any>) => void;
+// };

package/templates/vite.config.ts.template

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import externalGlobals from 'rollup-plugin-external-globals';
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  build: {
+    lib: {
+      entry: 'src/addon.tsx',
+      fileName: () => 'addon.js',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      plugins: [
+        externalGlobals({
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        })
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    outDir: 'dist',
+    minify: false,
+    sourcemap: false,
+    watch: {
+      // Watch mode options for better hot reloading
+      include: ['src/**'],
+      exclude: ['node_modules/**', 'dist/**']
+    }
+  },
+});