plusui-native 0.2.0

package/templates/react/main.cpp.template

@@ -0,0 +1,201 @@
+#include <plusui/app.hpp>
+#include <plusui/window.hpp>
+#include <iostream>
+#include "generated/assets.h"
+
+// ============================================================================
+// {{PROJECT_NAME}} - Configuration
+// ============================================================================
+// Change these values to configure your app. All options are true/false toggles
+// or simple values. Easy to customize without digging through code.
+// ============================================================================
+
+// ----------------------------------------------------------------------------
+// APP CONFIGURATION (Application-level settings)
+// ----------------------------------------------------------------------------
+struct AppConfig {
+    // --- Identity ---
+    std::string name = "{{PROJECT_NAME}}";    // Your app name (used for window title, etc.)
+    std::string version = "0.1.0";
+    
+    // --- App Type ---
+    bool headless = false;        // No window, background app only
+    bool singleInstance = true;   // Only allow one instance of the app
+    
+    // --- Startup ---
+    bool autoStart = false;       // Launch on system startup
+    bool hiddenOnStartup = false; // Start hidden
+    
+    // --- Security ---
+    bool webSecurity = true;      // Enable web security (CORS, etc.)
+    bool allowFileAccess = false; // Allow file:// URLs
+} appConfig;
+
+// ----------------------------------------------------------------------------
+// WINDOW CONFIGURATION (Window appearance and behavior)
+// ----------------------------------------------------------------------------
+struct WindowConfig {
+    // --- Size & Position ---
+    int width = 1200;
+    int height = 800;
+    int minWidth = 400;           // Minimum window width
+    int minHeight = 300;          // Minimum window height
+    int maxWidth = 0;             // 0 = no limit
+    int maxHeight = 0;            // 0 = no limit
+    bool centerOnStartup = true;  // Center window on launch
+    
+    // --- Appearance ---
+    bool showTitlebar = true;     // Show native titlebar (set false for frameless)
+    bool showBorder = true;       // Show window border
+    bool transparent = false;     // Transparent window background
+    double opacity = 1.0;         // Window opacity 0.0 (invisible) to 1.0 (solid)
+    
+    // --- Behavior ---
+    bool resizable = true;        // Allow user to resize window
+    bool minimizable = true;      // Show minimize button
+    bool maximizable = true;      // Show maximize button
+    bool closable = true;         // Show close button
+    bool alwaysOnTop = false;     // Keep window above all others
+    bool showInTaskbar = true;    // Show in taskbar (false = hidden from taskbar)
+    bool fullscreen = false;      // Start in fullscreen mode
+    
+    // --- Dev Tools ---
+    bool devTools = true;         // Enable DevTools (F12, right-click inspect)
+    bool contextMenu = true;      // Enable right-click context menu
+    
+    // --- WebView ---
+    bool scrollbars = false;      // Show scrollbars in webview (false = hidden)
+} windowConfig;
+
+// ----------------------------------------------------------------------------
+// SERVICES CONFIGURATION (Optional features)
+// ----------------------------------------------------------------------------
+struct ServicesConfig {
+    bool enableClipboard = true;  // Enable clipboard read/write from frontend
+    bool enableDisplay = true;    // Enable multi-display detection
+    bool enableKeyboard = true;   // Enable keyboard shortcuts/hotkeys
+    bool enableMenu = true;       // Enable custom menu bar
+} servicesConfig;
+
+// ============================================================================
+// WEBGPU CONFIGURATION (Optional - 3D Graphics & GPU Compute)
+// ============================================================================
+// WebGPU provides native GPU acceleration for rendering and compute shaders.
+// Requires: PLUSUI_ENABLE_WEBGPU build flag
+//
+// Usage in frontend:
+//   const adapter = await navigator.gpu.requestAdapter();
+//   const device = await adapter.requestDevice();
+//   const canvas = document.querySelector('canvas');
+//   const context = canvas.getContext('webgpu');
+//   context.configure({ device, format: 'bgra8unorm' });
+//
+// See: https://www.w3.org/TR/webgpu/ for full API documentation
+// ============================================================================
+struct WebGPUConfig {
+    bool enabled = false;         // Enable WebGPU support
+    bool validateAPI = true;      // Enable validation in debug builds
+    bool verbose = false;         // Enable verbose logging for debugging
+} webgpuConfig;
+
+// ============================================================================
+// MAIN - Application Entry Point
+// ============================================================================
+int main() {
+    // Use your app name as the variable name
+    auto {{PROJECT_NAME_LOWER}} = plusui::createApp()
+        .title(appConfig.name)
+        .width(windowConfig.width)
+        .height(windowConfig.height)
+        .centered(windowConfig.centerOnStartup)
+        .resizable(windowConfig.resizable)
+        .decorations(windowConfig.showTitlebar && windowConfig.showBorder)
+        .transparent(windowConfig.transparent)
+        .devtools(windowConfig.devTools)
+        .alwaysOnTop(windowConfig.alwaysOnTop)
+        .skipTaskbar(!windowConfig.showInTaskbar)
+        .scrollbars(windowConfig.scrollbars);
+    
+    auto mainWindow = {{PROJECT_NAME_LOWER}}.build();
+    
+    // ========================================
+    // ICON SETUP (optional)
+    // ========================================
+    // To set app icons, place icon.png in the assets/ folder
+    // The CLI will generate ASSET_ICON_PNG and ASSET_ICON_PNG_LEN automatically
+    // Then uncomment these lines:
+    // #ifdef ASSET_ICON_PNG
+    //     mainWindow.window().setIconFromMemory(ASSET_ICON_PNG, ASSET_ICON_PNG_LEN);
+    //     mainWindow.tray().setIconFromMemory(ASSET_ICON_PNG, ASSET_ICON_PNG_LEN);
+    // #endif
+    
+    // ========================================
+    // SYSTEM TRAY (optional)
+    // ========================================
+    // mainWindow.tray().setTooltip(appConfig.name);
+    // mainWindow.tray().setVisible(true);
+    
+    // Apply additional settings
+    if (windowConfig.opacity < 1.0) {
+        mainWindow.window().setTransparency(windowConfig.opacity);
+    }
+    if (windowConfig.fullscreen) {
+        mainWindow.window().setFullscreen(true);
+    }
+    
+    // ========================================
+    // SYSTEM TRAY (if enabled)
+    // ========================================
+    // HEADLESS / HIDDEN STARTUP
+    // ========================================
+    if (appConfig.headless || appConfig.hiddenOnStartup) {
+        mainWindow.window().hide();
+    }
+    
+    // ========================================
+    // NAVIGATION - Load Frontend
+    // ========================================
+    #ifdef PLUSUI_DEV_MODE
+        mainWindow.navigate("http://localhost:5173");
+    #else
+        mainWindow.loadFile("frontend/dist/index.html");
+    #endif
+    
+    // ========================================
+    // CUSTOM C++ FUNCTIONS (expose to frontend)
+    // ========================================
+    // {{PROJECT_NAME_LOWER}}.bind("getVersion", [](const std::string& args) {
+    //     return "\"" + appConfig.version + "\"";
+    // });
+    // Call from JS: const version = await app.invoke('getVersion');
+    
+    // ========================================
+    // RUN APPLICATION
+    // ========================================
+    plusui::App runtime;
+    runtime.run();
+    
+    return 0;
+}
+
+// ============================================================================
+// FRONTEND API REFERENCE
+// ============================================================================
+// import { win, browser, router, app, display, clipboard } from 'plusui-native-core';
+//
+// WINDOW: win.minimize(), win.maximize(), win.close(), win.center(),
+//         win.setSize(w, h), win.setPosition(x, y), win.setTitle(str),
+//         win.setFullscreen(bool), win.setAlwaysOnTop(bool),
+//         win.getSize(), win.getPosition(), win.isMaximized(), win.isVisible()
+//
+// BROWSER: browser.navigate(url), browser.goBack(), browser.goForward(),
+//          browser.reload(), browser.getUrl(), browser.canGoBack()
+//
+// ROUTER: router.setRoutes({'/': 'url'}), router.push('/path')
+//
+// APP: app.quit(), app.invoke('customFn', args)
+//
+// DISPLAY: display.getAll(), display.getPrimary(), display.getCurrent()
+//
+// CLIPBOARD: clipboard.writeText(str), clipboard.readText(), clipboard.clear()
+

package/templates/react/package.json.template

@@ -0,0 +1,23 @@
+{
+  "name": "{{PROJECT_NAME_LOWER}}",
+  "version": "{{PROJECT_VERSION}}",
+  "description": "A PlusUI desktop application",
+  "type": "module",
+  "scripts": {
+    "dev": "plusui dev",
+    "dev:frontend": "plusui dev:frontend",
+    "dev:backend": "plusui dev:backend",
+    "bind": "plusui bind",
+    "bindgen": "plusui bindgen",
+    "build": "plusui build",
+    "build:frontend": "plusui build:frontend",
+    "build:backend": "plusui build:backend",
+    "build:all": "plusui build:all",
+    "start": "plusui run",
+    "clean": "plusui clean"
+  },
+  "devDependencies": {
+    "plusui-native": "file:../../Tools/plusui-cli"
+  }
+}
+

package/templates/solid/.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
+}

package/templates/solid/CMakeLists.txt.template

@@ -0,0 +1,151 @@
+cmake_minimum_required(VERSION 3.16)
+project({{PROJECT_NAME}} VERSION {{PROJECT_VERSION}} LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD 20)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
+
+# Platform detection
+if(WIN32)
+    add_definitions(-DPLUSUI_EDGE)
+elseif(APPLE)
+    add_definitions(-DPLUSUI_COCOA)
+else()
+    add_definitions(-DPLUSUI_GTK)
+endif()
+
+# Development mode flag
+option(PLUSUI_DEV_MODE "Enable development mode (connect to Vite dev server)" OFF)
+if(PLUSUI_DEV_MODE)
+    add_definitions(-DPLUSUI_DEV_MODE)
+endif()
+
+# Find PlusUI Core library
+# Strategy: Check multiple locations for the Core library
+set(PLUSUI_FOUND FALSE)
+
+# Location 1: Local development (sibling to project inside PlusUI repo)
+set(PLUSUI_CORE_DEV "${CMAKE_SOURCE_DIR}/../Core")
+if(EXISTS "${PLUSUI_CORE_DEV}/CMakeLists.txt")
+    message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_DEV}")
+    add_subdirectory("${PLUSUI_CORE_DEV}" "${CMAKE_BINARY_DIR}/plusui-core")
+    set(PLUSUI_FOUND TRUE)
+endif()
+
+# Location 2: Installed via npm (node_modules)
+if(NOT PLUSUI_FOUND)
+    set(PLUSUI_CORE_NPM "${CMAKE_SOURCE_DIR}/node_modules/plusui-native-core/Core")
+    if(EXISTS "${PLUSUI_CORE_NPM}/CMakeLists.txt")
+        message(STATUS "Found PlusUI Core in node_modules: ${PLUSUI_CORE_NPM}")
+        add_subdirectory("${PLUSUI_CORE_NPM}" "${CMAKE_BINARY_DIR}/plusui-core")
+        set(PLUSUI_FOUND TRUE)
+    endif()
+endif()
+
+# Location 3: Parent directory development structure
+if(NOT PLUSUI_FOUND)
+    set(PLUSUI_CORE_PARENT "${CMAKE_SOURCE_DIR}/../../Core")
+    if(EXISTS "${PLUSUI_CORE_PARENT}/CMakeLists.txt")
+        message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_PARENT}")
+        add_subdirectory("${PLUSUI_CORE_PARENT}" "${CMAKE_BINARY_DIR}/plusui-core")
+        set(PLUSUI_FOUND TRUE)
+    endif()
+endif()
+
+if(NOT PLUSUI_FOUND)
+    message(FATAL_ERROR "
+    PlusUI Core not found!
+
+    Make sure you have run 'npm install' or that this project is inside the PlusUI repository.
+
+    Searched locations:
+      - ${PLUSUI_CORE_DEV}
+      - ${PLUSUI_CORE_NPM}
+      - ${PLUSUI_CORE_PARENT}
+    ")
+endif()
+
+# Create the executable
+add_executable({{PROJECT_NAME}} main.cpp)
+
+# Optional: Add your own C++ files here
+# file(GLOB_RECURSE MY_SOURCES "features/*.cpp")
+# target_sources({{PROJECT_NAME}} PRIVATE ${MY_SOURCES})
+
+# Link PlusUI library
+target_link_libraries({{PROJECT_NAME}} PRIVATE plusui)
+target_include_directories({{PROJECT_NAME}} PRIVATE ${CMAKE_SOURCE_DIR})
+
+# Platform-specific setup
+if(WIN32)
+    # Windows: WebView2
+    # Try to find WebView2 SDK headers
+    find_path(WEBVIEW2_INCLUDE_DIR
+        NAMES webview2.h
+        PATHS
+            "${CMAKE_SOURCE_DIR}/packages/Microsoft.Web.WebView2/build/native/include"
+            "${CMAKE_BINARY_DIR}/packages/Microsoft.Web.WebView2/build/native/include"
+            "$ENV{USERPROFILE}/.nuget/packages/microsoft.web.webview2/1.0.2903.40/build/native/include"
+            "$ENV{NUGET_PACKAGES}/microsoft.web.webview2/1.0.2903.40/build/native/include"
+            "C:/Program Files (x86)/Microsoft EdgeWebView/runtimes/win-x64/native"
+            "C:/Program Files/Microsoft EdgeWebView/runtimes/win-x64/native"
+    )
+    
+    if(WEBVIEW2_INCLUDE_DIR)
+        message(STATUS "Found WebView2 headers at: ${WEBVIEW2_INCLUDE_DIR}")
+        target_include_directories({{PROJECT_NAME}} PRIVATE ${WEBVIEW2_INCLUDE_DIR})
+    else()
+        message(WARNING "WebView2 headers not found. Building may fail.")
+        message(STATUS "Please install WebView2 SDK via NuGet:")
+        message(STATUS "  nuget install Microsoft.Web.WebView2 -OutputDirectory packages")
+    endif()
+    
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ole32 shell32 shlwapi user32 version)
+
+    # Set subsystem to Windows for release builds (no console window)
+    if(NOT PLUSUI_DEV_MODE)
+        set_target_properties({{PROJECT_NAME}} PROPERTIES
+            WIN32_EXECUTABLE TRUE
+        )
+    endif()
+elseif(APPLE)
+    # macOS: WebKit
+    find_library(WEBKIT_LIBRARY WebKit REQUIRED)
+    find_library(COCOA_LIBRARY Cocoa REQUIRED)
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ${WEBKIT_LIBRARY} ${COCOA_LIBRARY})
+
+    # Create app bundle for production
+    if(NOT PLUSUI_DEV_MODE)
+        set_target_properties({{PROJECT_NAME}} PROPERTIES
+            MACOSX_BUNDLE TRUE
+            MACOSX_BUNDLE_BUNDLE_NAME "{{PROJECT_NAME}}"
+            MACOSX_BUNDLE_BUNDLE_VERSION "{{PROJECT_VERSION}}"
+            MACOSX_BUNDLE_GUI_IDENTIFIER "com.plusui.{{PROJECT_NAME_LOWER}}"
+        )
+    endif()
+else()
+    # Linux: GTK + WebKitGTK
+    find_package(PkgConfig REQUIRED)
+    pkg_check_modules(GTK3 REQUIRED gtk+-3.0)
+    pkg_check_modules(WEBKIT2 REQUIRED webkit2gtk-4.0)
+    target_include_directories({{PROJECT_NAME}} PRIVATE ${GTK3_INCLUDE_DIRS} ${WEBKIT2_INCLUDE_DIRS})
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ${GTK3_LIBRARIES} ${WEBKIT2_LIBRARIES})
+endif()
+
+# Copy frontend dist files to build directory after build
+if(EXISTS "${CMAKE_SOURCE_DIR}/frontend/dist")
+    add_custom_command(TARGET {{PROJECT_NAME}} POST_BUILD
+        COMMAND ${CMAKE_COMMAND} -E make_directory "$<TARGET_FILE_DIR:{{PROJECT_NAME}}>/frontend"
+        COMMAND ${CMAKE_COMMAND} -E copy_directory
+            "${CMAKE_SOURCE_DIR}/frontend/dist"
+            "$<TARGET_FILE_DIR:{{PROJECT_NAME}}>/frontend"
+        COMMENT "Copying frontend files to build directory"
+    )
+endif()
+
+# Set output directories for organized builds
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin")
+set(CMAKE_LIBRARY_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
+set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
+
+

package/templates/solid/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PROJECT_NAME}}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/solid/frontend/package.json.template

@@ -0,0 +1,21 @@
+{
+  "name": "{{PROJECT_NAME_LOWER}}-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.0",
+    "plusui-native-core": "{{PLUSUI_CORE_PATH}}"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-solid": "^2.10.0"
+  }
+}
+

package/templates/solid/frontend/src/App.tsx

@@ -0,0 +1,133 @@
+import { createSignal, onMount } from 'solid-js';
+import { win, browser, router, app } from 'plusui-native-core';
+
+// Define routes for your app (optional - for SPA routing)
+const routes = {
+  '/': 'http://localhost:5173',
+  '/settings': 'http://localhost:5173/settings',
+  '/about': 'http://localhost:5173/about',
+};
+
+function App() {
+  const [windowSize, setWindowSize] = createSignal({ width: 0, height: 0 });
+  const [windowPos, setWindowPos] = createSignal({ x: 0, y: 0 });
+  const [currentUrl, setCurrentUrl] = createSignal('');
+  const [canGoBack, setCanGoBack] = createSignal(false);
+  const [canGoForward, setCanGoForward] = createSignal(false);
+
+  onMount(() => {
+    // Setup routes
+    router.setRoutes(routes);
+    
+    // Listen for navigation changes
+    browser.onNavigate((url) => {
+      setCurrentUrl(url);
+      browser.canGoBack().then(setCanGoBack);
+      browser.canGoForward().then(setCanGoForward);
+    });
+    
+    // Get initial state
+    browser.getUrl().then(setCurrentUrl);
+    browser.canGoBack().then(setCanGoBack);
+    browser.canGoForward().then(setCanGoForward);
+  });
+
+  const handleMinimize = async () => await win.minimize();
+  const handleMaximize = async () => await win.maximize();
+  const handleClose = async () => await win.close();
+  const handleGetSize = async () => {
+    const size = await win.getSize();
+    setWindowSize(size);
+  };
+  const handleGetPosition = async () => {
+    const pos = await win.getPosition();
+    setWindowPos(pos);
+  };
+
+  // Browser navigation
+  const handleGoBack = async () => await browser.goBack();
+  const handleGoForward = async () => await browser.goForward();
+  const handleReload = async () => await browser.reload();
+  const handleNavigate = async (url: string) => await browser.navigate(url);
+
+  // Router navigation
+  const handleGoHome = async () => await router.push('/');
+  const handleGoSettings = async () => await router.push('/settings');
+
+  // App control
+  const handleQuit = async () => await app.quit();
+
+  return (
+    <div class="app">
+      <header class="app-header">
+        <h1>{{PROJECT_NAME}}</h1>
+        <p>Built with PlusUI Framework</p>
+      </header>
+
+      <main class="app-content">
+        <div class="card">
+          <h2>Window Controls</h2>
+          <div class="button-group">
+            <button onClick={handleMinimize} class="button">Minimize</button>
+            <button onClick={handleMaximize} class="button">Maximize</button>
+            <button onClick={handleClose} class="button button-danger">Close</button>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Window Size</h2>
+          <button onClick={handleGetSize} class="button">Get Size</button>
+          <Show when={windowSize().width > 0}>
+            <p class="info-text">Size: {windowSize().width} x {windowSize().height}</p>
+          </Show>
+        </div>
+
+        <div class="card">
+          <h2>Window Position</h2>
+          <div class="button-group">
+            <button onClick={handleGetPosition} class="button">Get Position</button>
+            <button onClick={() => win.setPosition(100, 100)} class="button">Move Left</button>
+            <button onClick={() => win.setPosition(800, 100)} class="button">Move Right</button>
+          </div>
+          <Show when={windowPos().x !== 0}>
+            <p class="info-text">Position: {windowPos().x}, {windowPos().y}</p>
+          </Show>
+        </div>
+
+        <div class="card">
+          <h2>Browser Navigation</h2>
+          <p class="info-text">Current: {currentUrl()}</p>
+          <div class="button-group">
+            <button onClick={handleGoBack} class="button" disabled={!canGoBack()}>Back</button>
+            <button onClick={handleGoForward} class="button" disabled={!canGoForward()}>Forward</button>
+            <button onClick={handleReload} class="button">Reload</button>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Router (SPA Navigation)</h2>
+          <div class="button-group">
+            <button onClick={handleGoHome} class="button">Home /</button>
+            <button onClick={handleGoSettings} class="button">Settings</button>
+          </div>
+          <p style={{ 'font-size': '0.85em', color: '#666', 'margin-top': '10px' }}>
+            Define routes with <code>router.setRoutes({'{ ... }'})</code> then navigate with <code>router.push('/path')</code>
+          </p>
+        </div>
+
+        <div class="card">
+          <h2>App Control</h2>
+          <button onClick={handleQuit} class="button button-danger">Quit App</button>
+        </div>
+
+        <div class="info">
+          <p>Edit <code>frontend/src/App.tsx</code> to modify the UI.</p>
+          <p>Edit <code>main.cpp</code> to add C++ functionality.</p>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;
+

package/templates/solid/frontend/src/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import App from './App';
+import './styles/app.css';
+
+render(() => <App />, document.getElementById('root')!);