plusui-native 0.2.0

package/templates/base/Justfile

@@ -0,0 +1,115 @@
+# PlusUI Project Justfile
+# Cross-platform build automation
+
+# Use PowerShell on Windows, bash on Unix
+set windows-shell := ["powershell.exe", "-NoLogo", "-Command"]
+set shell := ["bash", "-cu"]
+
+# Project name (from directory)
+project_name := file_stem(justfile_directory())
+
+# Default recipe
+default: dev
+
+# ============================================================
+# DEVELOPMENT
+# ============================================================
+
+# Start development mode (frontend HMR + C++ app)
+dev:
+    npm run dev
+
+# Start only frontend dev server (Vite with HMR)
+dev-frontend:
+    npm run dev:frontend
+
+# Start only backend in watch mode
+dev-backend:
+    npm run dev:backend
+
+# ============================================================
+# BUILD
+# ============================================================
+
+# Build for current platform (dev mode, connects to Vite)
+build:
+    npm run build
+
+# Build frontend only
+build-frontend:
+    npm run build:frontend
+
+# Build backend only (production mode)
+build-backend:
+    npm run build:backend
+
+# Build for all platforms
+build-all:
+    npm run build:all
+
+# ============================================================
+# PLATFORM-SPECIFIC BUILDS
+# ============================================================
+
+# Build for Windows
+build-windows:
+    @echo "Building for Windows..."
+    cmake -S . -B build/Windows -DCMAKE_BUILD_TYPE=Release
+    cmake --build build/Windows --config Release
+
+# Build for macOS
+build-macos:
+    @echo "Building for macOS..."
+    cmake -S . -B build/MacOS -G Xcode -DCMAKE_BUILD_TYPE=Release
+    cmake --build build/MacOS --config Release
+
+# Build for Linux
+build-linux:
+    @echo "Building for Linux..."
+    cmake -S . -B build/Linux -DCMAKE_BUILD_TYPE=Release
+    cmake --build build/Linux --config Release
+
+# ============================================================
+# RUN
+# ============================================================
+
+# Run the built application
+run:
+    npm run start
+
+# ============================================================
+# UTILITIES
+# ============================================================
+
+# Clean build artifacts
+clean:
+    @echo "Cleaning build artifacts..."
+    rm -rf build
+    rm -rf frontend/dist
+    @echo "Done!"
+
+# Clean everything including node_modules
+clean-all: clean
+    rm -rf node_modules
+    rm -rf frontend/node_modules
+
+# Install dependencies
+install:
+    npm install
+    cd frontend && npm install
+
+# Check development environment
+doctor:
+    plusui doctor
+
+# Fix development environment
+doctor-fix:
+    plusui doctor --fix
+
+# ============================================================
+# HELP
+# ============================================================
+
+# Show available commands
+help:
+    @just --list

package/templates/base/README.md.template

@@ -0,0 +1,168 @@
+# {{PROJECT_NAME}}
+
+A desktop application built with the PlusUI framework.
+
+## Prerequisites
+
+Check your development environment:
+```bash
+plusui doctor
+```
+
+If any tools are missing, run:
+```bash
+plusui doctor --fix
+```
+
+## Development
+
+Start development server with hot reload:
+```bash
+npm run dev
+```
+
+This will:
+- Start the Vite dev server with HMR on http://localhost:5173
+- Build and launch the C++ app pointing to the dev server
+- Changes to frontend code reflect instantly
+- Auto-refresh app bindings when `src/features` exists
+
+Note: You can still run `npm run bind` manually anytime.
+
+## Bindings (App-level)
+
+Generate bindings for your app feature headers:
+```bash
+npm run bind
+```
+
+Default bindgen paths:
+- Input headers: `src/features`
+- Output: `src/Bindings_Generated`
+
+You can also pass custom paths:
+```bash
+plusui bindgen <featuresDir> <outputDir>
+```
+
+## Assets & Icons
+
+### App Icon
+
+Place your app icon at `assets/icon.png` (512x512+ recommended). Generate platform-specific icons:
+
+```bash
+plusui icons
+```
+
+This creates:
+- **Windows**: `app.ico` for title bar, taskbar, task manager
+- **macOS**: `app.icns` for dock, finder, about dialog  
+- **Linux**: Multiple PNG sizes for window managers
+- **Tray**: Small icons for system tray (all platforms)
+
+### Embedded Assets
+
+All files in `assets/` are embedded into the final executable. Access them in C++:
+
+```cpp
+#include <plusui/resources.hpp>
+std::string data = plusui::resources::getResource("path/to/file.png");
+```
+
+See `assets/README.md` for details.
+
+## Build
+
+### Build for current platform
+```bash
+npm run build
+```
+
+Build also auto-refreshes app bindings when `src/features` exists.
+
+### Build for all platforms
+```bash
+npm run build:all
+```
+
+This creates platform-specific builds in:
+```
+build/
+├── Windows/    # Windows executable
+├── MacOS/      # macOS app bundle
+└── Linux/      # Linux binary
+```
+
+### Platform-specific builds
+```bash
+plusui build:windows
+plusui build:macos
+plusui build:linux
+```
+
+## Run
+
+Run the built application:
+```bash
+npm run start
+```
+
+## Using Just (Optional)
+
+If you have [`just`](https://github.com/casey/just) installed:
+
+```bash
+just dev          # Start development mode
+just build        # Build for current platform
+just build-all    # Build for all platforms
+just run          # Run the built application
+just clean        # Clean build artifacts
+just help         # Show all commands
+```
+
+## Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/                  # C++ backend code
+│   └── main.cpp          # Application entry point
+├── frontend/             # Frontend web code (React + Vite)
+│   ├── src/
+│   │   ├── main.tsx      # React entry point
+│   │   ├── App.tsx       # Main app component
+│   │   └── styles/       # CSS styles
+│   ├── index.html
+│   └── vite.config.ts
+├── build/                # Build output (generated)
+├── CMakeLists.txt        # CMake build configuration
+├── package.json          # npm dependencies and scripts
+└── Justfile              # Build automation (optional)
+```
+
+## Calling C++ from TypeScript
+
+Use the `plusui-native-core` SDK to interact with the native backend:
+
+```tsx
+import { createPlusUI } from 'plusui-native-core';
+
+const plusui = createPlusUI();
+
+// Window controls
+await plusui.window.minimize();
+await plusui.window.maximize();
+await plusui.window.close();
+
+// Get window info
+const size = await plusui.window.getSize();
+console.log(`Window size: ${size.width}x${size.height}`);
+```
+
+## Learn More
+
+- [PlusUI Documentation](https://github.com/yourorg/plusui)
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)
+
+

package/templates/base/assets/README.md

@@ -0,0 +1,88 @@
+# Assets Directory
+
+## Icon File
+
+Place your app icon as **`icon.png`** (512x512 or larger recommended).
+
+This single icon will be automatically converted to all platform-specific formats:
+
+### Windows
+- `icons/windows/app.ico` - Multi-resolution .ico file
+- Used in: Title bar, taskbar, task manager, system tray
+
+### macOS  
+- `icons/macos/app.icns` - Apple icon format
+- Used in: Dock, Finder, About dialog, system tray
+
+### Linux
+- `icons/linux/icon_*.png` - Multiple PNG sizes
+- Used in: Window manager, system tray, desktop files
+
+### Tray Icons
+- `icons/tray/tray_16x16.png` - Small tray icon
+- `icons/tray/tray_32x32.png` - Large tray icon  
+- Used in: System tray/notification area (all platforms)
+
+## Automatic Generation
+
+Run this command to generate all platform icons:
+
+```bash
+plusui icons
+```
+
+Or specify a different source icon:
+
+```bash
+plusui icons path/to/my-icon.png
+```
+
+## Icon Guidelines
+
+- **Format**: PNG with transparency
+- **Size**: 512x512 pixels minimum (1024x1024 recommended)
+- **Design**: Simple, recognizable at small sizes
+- **Colors**: High contrast for visibility
+
+## Other Assets
+
+Any other files in this directory will be embedded into your application binary:
+
+```cpp
+#include "generated/assets.h"
+
+// Access embedded assets
+const char* data = ASSET_MY_FILE_PNG;
+size_t size = ASSET_MY_FILE_PNG_LEN;
+```
+
+## Build Integration
+
+Assets are automatically processed during build:
+
+1. `plusui icons` - Generates platform-specific icons (manual or in build)
+2. `plusui build` - Embeds all assets into the binary
+3. Production binary includes all resources (single executable!)
+
+## Usage in Code
+
+### C++ Backend
+```cpp
+#include <plusui/resources.hpp>
+
+// Load embedded resource
+std::string html = plusui::resources::getResource("index.html");
+std::string icon = plusui::resources::getResource("icons/tray/tray_32x32.png");
+```
+
+### TypeScript Frontend
+```typescript
+// Vite handles assets during dev
+import icon from '../assets/icon.png';
+
+// In production, assets are served from embedded resources
+```
+
+---
+
+**Note**: The `icons/` subdirectory is auto-generated. Don't edit those files manually!

package/templates/manager.js

@@ -0,0 +1,217 @@
+import { mkdir, readdir, readFile, writeFile, copyFile, stat } from 'fs/promises';
+import { join, dirname, resolve } from 'path';
+import { existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { EnvironmentDoctor } from '../src/doctor/index.js';
+import chalk from 'chalk';
+import { execSync, spawn } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export class TemplateManager {
+  constructor() {
+    this.templatesDir = __dirname;
+  }
+
+  async create(projectName, options = {}) {
+    const template = options.template || 'react';
+    const templatePath = join(this.templatesDir, template);
+
+    console.log(chalk.bold(`\nCreating PlusUI project: ${projectName}\n`));
+
+    // 1. Check environment first
+    console.log(chalk.blue('Checking environment...'));
+    const doctor = new EnvironmentDoctor();
+    const quickCheck = await doctor.quickCheck();
+
+    if (!quickCheck.ready) {
+      console.log(chalk.red('\n✗ Environment not ready!\n'));
+      console.log(chalk.yellow('Run: plusui doctor --fix\n'));
+      throw new Error('Environment check failed');
+    }
+
+    console.log(chalk.green('✓ Environment ready\n'));
+
+    // 2. Create project directory
+    console.log(chalk.blue('Creating project structure...'));
+    const projectPath = resolve(projectName);
+
+    if (existsSync(projectPath)) {
+      throw new Error(`Directory ${projectName} already exists`);
+    }
+
+    await mkdir(projectPath, { recursive: true });
+
+    // 3. Prepare template variables
+    const variables = {
+      PROJECT_NAME: projectName,
+      PROJECT_NAME_LOWER: projectName.toLowerCase(),
+      PROJECT_VERSION: '0.1.0',
+      PLUSUI_CORE_PATH: this.resolvePlusUIPath()
+    };
+
+    // 4. Copy template files
+    await this.copyTemplate(templatePath, projectPath, variables);
+
+    // 5. Copy base files
+    const basePath = join(this.templatesDir, 'base');
+    await this.copyTemplate(basePath, projectPath, variables, true);
+
+    console.log(chalk.green('✓ Project structure created\n'));
+
+    // 6. Install npm dependencies
+    console.log(chalk.blue('Installing dependencies...'));
+    await this.runNpmInstall(projectPath);
+    console.log(chalk.green('✓ Dependencies installed\n'));
+
+    // 7. Print success message
+    this.printSuccessMessage(projectName);
+
+    return { success: true, path: projectPath };
+  }
+
+  async copyTemplate(templatePath, destPath, variables, skipSubdirs = false) {
+    if (!existsSync(templatePath)) {
+      return;
+    }
+
+    const entries = await readdir(templatePath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(templatePath, entry.name);
+      const destName = entry.name.replace('.template', '');
+      const destFilePath = join(destPath, destName);
+
+      if (entry.isDirectory()) {
+        if (!skipSubdirs) {
+          await mkdir(destFilePath, { recursive: true });
+          await this.copyTemplate(srcPath, destFilePath, variables, false);
+        }
+      } else {
+        // Ensure parent directory exists
+        await mkdir(dirname(destFilePath), { recursive: true });
+
+        // Read file content
+        let content = await readFile(srcPath, 'utf8');
+
+        // Replace variables
+        content = this.replaceVariables(content, variables);
+
+        // Write to destination
+        await writeFile(destFilePath, content, 'utf8');
+      }
+    }
+  }
+
+  replaceVariables(content, variables) {
+    let result = content;
+
+    for (const [key, value] of Object.entries(variables)) {
+      const placeholder = `{{${key}}}`;
+      result = result.split(placeholder).join(value);
+    }
+
+    return result;
+  }
+
+  resolvePlusUIPath() {
+    // Strategy:
+    // 1. Check for global plusui-native-core installation
+    // 2. Check for local development version
+    // 3. Fall back to npm registry
+
+    try {
+      // Check if running in development (from PlusUI repo)
+      const localCorePath = resolve(__dirname, '../../plusui-sdk/packages/core');
+      if (existsSync(localCorePath)) {
+        // Convert Windows backslashes to forward slashes for JSON compatibility
+        return `file:${localCorePath.replace(/\\/g, '/')}`;
+      }
+
+      // Check global installation
+      const globalPath = this.resolveGlobalPackage('plusui-native-core');
+      if (globalPath) {
+        return globalPath;
+      }
+    } catch (e) {
+      // Ignore errors, fall back to npm
+    }
+
+    // Fall back to npm registry (when published)
+    return 'plusui-native-core';
+  }
+
+  resolveGlobalPackage(packageName) {
+    try {
+      const result = execSync(`npm root -g`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] });
+      const globalRoot = result.trim();
+      const packagePath = join(globalRoot, packageName);
+
+      if (existsSync(packagePath)) {
+        return packagePath;
+      }
+    } catch (e) {
+      // npm not available or package not found
+    }
+
+    return null;
+  }
+
+  async runNpmInstall(projectPath) {
+    return new Promise((resolve, reject) => {
+      const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+      
+      // Install root dependencies
+      const rootProc = spawn(npm, ['install'], {
+        cwd: projectPath,
+        stdio: 'inherit',
+        shell: true
+      });
+
+      rootProc.on('close', (code) => {
+        if (code !== 0) {
+          reject(new Error(`npm install failed with code ${code}`));
+          return;
+        }
+
+        // Install frontend dependencies
+        const frontendPath = join(projectPath, 'frontend');
+        if (existsSync(join(frontendPath, 'package.json'))) {
+          const frontendProc = spawn(npm, ['install'], {
+            cwd: frontendPath,
+            stdio: 'inherit',
+            shell: true
+          });
+
+          frontendProc.on('close', (feCode) => {
+            if (feCode === 0) {
+              resolve();
+            } else {
+              reject(new Error(`frontend npm install failed with code ${feCode}`));
+            }
+          });
+
+          frontendProc.on('error', reject);
+        } else {
+          resolve();
+        }
+      });
+
+      rootProc.on('error', reject);
+    });
+  }
+
+  printSuccessMessage(projectName) {
+    console.log(chalk.green.bold('\n✓ Project created successfully!\n'));
+    console.log(chalk.bold('Next steps:\n'));
+    console.log(chalk.cyan(`  cd ${projectName}`));
+    console.log(chalk.cyan(`  npm run dev`));
+    console.log();
+    console.log(chalk.gray('This will start the development server with hot reload.'));
+    console.log(chalk.gray('Edit frontend/src/App.tsx and main.cpp to get started!'));
+    console.log();
+  }
+}
+
+

package/templates/react/.vscode/c_cpp_properties.json

@@ -0,0 +1,24 @@
+{
+    "configurations": [
+        {
+            "name": "Windows",
+            "includePath": [
+                "${workspaceFolder}/src",
+                "${workspaceFolder}/../Core/include",
+                "${workspaceFolder}/build/dev/_deps/webview2/build/native/include",
+                "C:/Users/${env:USERNAME}/.nuget/packages/microsoft.web.webview2/1.0.2903.40/build/native/include"
+            ],
+            "defines": [
+                "PLUSUI_DEV_MODE",
+                "_WIN32",
+                "NDEBUG"
+            ],
+            "compilerPath": "C:/Program Files/Microsoft Visual Studio/2022/Community/VC/Tools/MSVC/14.43.34808/bin/Hostx64/x64/cl.exe",
+            "cStandard": "c17",
+            "cppStandard": "c++20",
+            "intelliSenseMode": "windows-msvc-x64",
+            "compileCommands": "${workspaceFolder}/build/dev/compile_commands.json"
+        }
+    ],
+    "version": 4
+}