@imksh/create 1.0.30 → 1.0.32

package/README.md

@@ -58,6 +58,8 @@ imksh create my-app --template next --skip-install
 - `next-ts`: Next.js App Router boilerplate with TypeScript.
 - `react-native`: Expo React Native template with NativeWind, Zustand, and React Navigation.
 - `mern-react-native`: Full-stack Expo React Native client + Express/Node server.
+- `electron`: Electron + React boilerplate.
+- `electron-ts`: Electron + React boilerplate with TypeScript.
 
 ## Adding Templates
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imksh/create",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "A production-ready create for scaffolding modern applications.",
   "type": "module",
   "bin": {

package/src/commands/create.js

@@ -39,6 +39,8 @@ export default async function createCommand(projectName, options) {
     'next-ts',
     'react-native',
     'mern-react-native',
+    'electron',
+    'electron-ts',
     'production-fullstack',
     'fullstack-prisma'
   ];

package/src/index.js

@@ -24,7 +24,7 @@ program
   .argument("<project-name>", "Name of the project")
   .option(
     "-t, --template <template>",
-    "Template to use (react, react-ts, node, node-ts, node-prisma, node-prisma-ts, mern, mern-ts, next, next-ts, react-native, mern-react-native, production-fullstack, fullstack-prisma)",
+    "Template to use (react, react-ts, node, node-ts, node-prisma, node-prisma-ts, mern, mern-ts, next, next-ts, react-native, mern-react-native, electron, electron-ts, production-fullstack, fullstack-prisma)",
   )
   .option("--skip-install", "Skip installing dependencies")
   .option("--no-git", "Skip initializing a git repository")

package/src/utils/askTemplate.js

@@ -8,6 +8,7 @@ export async function askTemplate() {
       message: 'Which framework would you like to use?',
       choices: [
         { name: 'React', value: 'react' },
+        { name: 'Electron', value: 'electron' },
         { name: 'Node.js', value: 'node' },
         { name: 'MERN Stack', value: 'mern' },
         { name: 'React Native', value: 'react-native' },
@@ -19,7 +20,7 @@ export async function askTemplate() {
     },
   ]);
 
-  if (framework === 'react' || framework === 'next' || framework === 'mern') {
+  if (framework === 'react' || framework === 'next' || framework === 'mern' || framework === 'electron') {
     const { language } = await inquirer.prompt([
       {
         type: 'list',

package/templates/layers/electron/base/electron/main.js

@@ -0,0 +1,262 @@
+import { app, BrowserWindow, Menu, Tray, shell, ipcMain, nativeImage } from 'electron';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+const isDev = process.env.NODE_ENV === 'development' || !app.isPackaged;
+const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL'];
+const preloadPath = path.join(__dirname, 'preload.js');
+
+/** @type {BrowserWindow | null} */
+let mainWindow = null;
+/** @type {Tray | null} */
+let tray = null;
+
+// ─── Window ───────────────────────────────────────────────────────────────────
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    minWidth: 800,
+    minHeight: 600,
+    frame: false,           // Custom title bar in renderer
+    titleBarStyle: 'hidden',
+    trafficLightPosition: { x: 16, y: 16 }, // macOS traffic lights position
+    backgroundColor: '#0f172a',
+    show: false,            // Don't show until ready-to-show
+    icon: path.join(__dirname, '../public/icon.png'),
+    webPreferences: {
+      preload: preloadPath,
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: false,
+    },
+  });
+
+  // Show window once ready to avoid white flash
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+    if (isDev) mainWindow.webContents.openDevTools({ mode: 'detach' });
+  });
+
+  // Notify renderer when window maximize state changes
+  mainWindow.on('maximize',   () => mainWindow?.webContents.send('window:maximized-change', true));
+  mainWindow.on('unmaximize', () => mainWindow?.webContents.send('window:maximized-change', false));
+
+  // Open external links in the default browser instead of Electron
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  // Load app
+  if (isDev && VITE_DEV_SERVER_URL) {
+    mainWindow.loadURL(VITE_DEV_SERVER_URL);
+  } else {
+    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
+  }
+}
+
+// ─── Native Application Menu ──────────────────────────────────────────────────
+function buildMenu() {
+  const isMac = process.platform === 'darwin';
+
+  const template = [
+    // App menu (macOS only)
+    ...(isMac
+      ? [{
+          label: app.name,
+          submenu: [
+            { role: 'about' },
+            { type: 'separator' },
+            { label: 'Preferences…', accelerator: 'CmdOrCtrl+,', click: () => mainWindow?.webContents.send('menu:preferences') },
+            { type: 'separator' },
+            { role: 'services' },
+            { type: 'separator' },
+            { role: 'hide' },
+            { role: 'hideOthers' },
+            { role: 'unhide' },
+            { type: 'separator' },
+            { role: 'quit' },
+          ],
+        }]
+      : []),
+
+    // File
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'New Window',
+          accelerator: 'CmdOrCtrl+Shift+N',
+          click: () => createWindow(),
+        },
+        { type: 'separator' },
+        isMac ? { role: 'close' } : { role: 'quit' },
+      ],
+    },
+
+    // Edit
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        ...(isMac
+          ? [{ role: 'pasteAndMatchStyle' }, { role: 'delete' }, { role: 'selectAll' }]
+          : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
+      ],
+    },
+
+    // View
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { role: 'toggleDevTools' },
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+
+    // Window
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' },
+        { role: 'zoom' },
+        ...(isMac
+          ? [{ type: 'separator' }, { role: 'front' }, { type: 'separator' }, { role: 'window' }]
+          : [{ role: 'close' }]),
+      ],
+    },
+
+    // Help
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn More',
+          click: () => shell.openExternal('https://github.com/imksh/create'),
+        },
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: isMac ? 'Alt+Cmd+I' : 'Alt+Shift+I',
+          click: () => mainWindow?.webContents.toggleDevTools(),
+        },
+      ],
+    },
+  ];
+
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+}
+
+// ─── System Tray ──────────────────────────────────────────────────────────────
+function createTray() {
+  // Use a simple nativeImage as placeholder — replace public/tray-icon.png with your 16x16 icon
+  const iconPath = path.join(__dirname, '../public/icon.png');
+  const trayIcon = nativeImage.createFromPath(iconPath).resize({ width: 16, height: 16 });
+  tray = new Tray(trayIcon);
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Show App',
+      click: () => {
+        mainWindow?.show();
+        mainWindow?.focus();
+      },
+    },
+    { type: 'separator' },
+    {
+      label: 'Quit',
+      click: () => {
+        app.isQuiting = true;
+        app.quit();
+      },
+    },
+  ]);
+
+  tray.setToolTip(app.name);
+  tray.setContextMenu(contextMenu);
+
+  // Double-click tray icon to show window
+  tray.on('double-click', () => {
+    mainWindow?.show();
+    mainWindow?.focus();
+  });
+}
+
+// ─── IPC Handlers ─────────────────────────────────────────────────────────────
+function registerIpcHandlers() {
+  // Window controls
+  ipcMain.on('window:minimize', () => mainWindow?.minimize());
+  ipcMain.on('window:maximize', () => {
+    if (mainWindow?.isMaximized()) {
+      mainWindow.unmaximize();
+    } else {
+      mainWindow?.maximize();
+    }
+  });
+  ipcMain.on('window:close', () => mainWindow?.close());
+
+  // Window state queries
+  ipcMain.handle('window:isMaximized', () => mainWindow?.isMaximized() ?? false);
+
+  // App info
+  ipcMain.handle('app:version',  () => app.getVersion());
+  ipcMain.handle('app:platform', () => process.platform);
+
+  // Shell
+  ipcMain.handle('shell:openExternal', (_event, url) => {
+    if (typeof url === 'string' && url.startsWith('http')) {
+      return shell.openExternal(url);
+    }
+  });
+}
+
+// ─── App Lifecycle ────────────────────────────────────────────────────────────
+app.whenReady().then(() => {
+  // macOS About panel
+  if (process.platform === 'darwin') {
+    app.setAboutPanelOptions({
+      applicationName: app.name,
+      applicationVersion: app.getVersion(),
+      copyright: `© ${new Date().getFullYear()} imksh`,
+    });
+  }
+
+  registerIpcHandlers();
+  buildMenu();
+  createWindow();
+  createTray();
+
+  app.on('activate', () => {
+    // On macOS re-create window when dock icon is clicked and no windows are open
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+// Minimize to tray on close (Windows/Linux)
+app.on('before-quit', () => {
+  app.isQuiting = true;
+});

package/templates/layers/electron/base/electron/preload.js

@@ -0,0 +1,37 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+/**
+ * Expose a safe, typed API to the renderer via window.electronAPI.
+ * Never expose ipcRenderer directly — that would allow any renderer code
+ * to send arbitrary IPC messages.
+ */
+contextBridge.exposeInMainWorld('electronAPI', {
+  // ── Window controls ────────────────────────────────────────────────────────
+  minimize: () => ipcRenderer.send('window:minimize'),
+  maximize: () => ipcRenderer.send('window:maximize'),
+  close:    () => ipcRenderer.send('window:close'),
+
+  // ── Window state ───────────────────────────────────────────────────────────
+  isMaximized: () => ipcRenderer.invoke('window:isMaximized'),
+
+  // ── App info ───────────────────────────────────────────────────────────────
+  getVersion:  () => ipcRenderer.invoke('app:version'),
+  getPlatform: () => ipcRenderer.invoke('app:platform'),
+
+  // ── Shell ──────────────────────────────────────────────────────────────────
+  openExternal: (url) => ipcRenderer.invoke('shell:openExternal', url),
+
+  // ── Event subscriptions ────────────────────────────────────────────────────
+  /** @param {(isMaximized: boolean) => void} callback */
+  onMaximizeChange: (callback) => {
+    ipcRenderer.on('window:maximized-change', (_event, value) => callback(value));
+  },
+
+  /** @param {(data: { label: string }) => void} callback */
+  onMenuAction: (callback) => {
+    ipcRenderer.on('menu:preferences', (_event, data) => callback({ label: 'preferences', ...data }));
+  },
+
+  // ── Cleanup ────────────────────────────────────────────────────────────────
+  removeAllListeners: (channel) => ipcRenderer.removeAllListeners(channel),
+});

package/templates/layers/electron/base/electron-builder.json5

@@ -0,0 +1,68 @@
+{
+  // Application ID — change this to your own reverse-domain identifier
+  appId: "com.imksh.electron-app",
+  productName: "Electron App",
+
+  // Directories
+  directories: {
+    output: "release",
+    buildResources: "public"
+  },
+
+  // Files to include in the app bundle
+  files: [
+    "dist/**/*",
+    "dist-electron/**/*",
+    "public/**/*"
+  ],
+
+  // Pack into an asar archive for faster startup
+  asar: true,
+
+  // macOS
+  mac: {
+    target: [{ target: "dmg", arch: ["x64", "arm64"] }],
+    icon: "public/icon.icns",
+    category: "public.app-category.productivity",
+    hardenedRuntime: true,
+    gatekeeperAssess: false,
+    entitlements: "build/entitlements.mac.plist",
+    entitlementsInherit: "build/entitlements.mac.plist"
+  },
+
+  dmg: {
+    contents: [
+      { x: 130, y: 220 },
+      { x: 410, y: 220, type: "link", path: "/Applications" }
+    ]
+  },
+
+  // Windows
+  win: {
+    target: [{ target: "nsis", arch: ["x64"] }],
+    icon: "public/icon.ico"
+  },
+
+  nsis: {
+    oneClick: false,
+    perMachine: false,
+    allowToChangeInstallationDirectory: true,
+    deleteAppDataOnUninstall: false,
+    createDesktopShortcut: true,
+    createStartMenuShortcut: true
+  },
+
+  // Linux
+  linux: {
+    target: ["AppImage", "deb", "snap"],
+    icon: "public/icon.png",
+    category: "Utility"
+  },
+
+  // Publish config (for auto-updates — fill in your GitHub repo)
+  // publish: {
+  //   provider: "github",
+  //   owner: "your-github-username",
+  //   repo: "your-repo-name"
+  // }
+}

package/templates/layers/electron/javascript/_gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist-electron
+*.local
+
+# Electron build output
+release/
+out/
+
+# Electron platform artifacts
+*.dmg
+*.exe
+*.msi
+*.AppImage
+*.deb
+*.snap
+*.rpm
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/templates/layers/electron/javascript/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "electron-app",
+  "private": true,
+  "version": "0.0.0",
+  "description": "An Electron + Vite + React application built with @imksh/create",
+  "author": "imksh",
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && electron-builder",
+    "preview": "electron .",
+    "pack": "vite build && electron-builder --dir",
+    "dist": "vite build && electron-builder",
+    "dist:mac": "vite build && electron-builder --mac",
+    "dist:win": "vite build && electron-builder --win",
+    "dist:linux": "vite build && electron-builder --linux",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.2",
+    "axios": "^1.6.0",
+    "flyonui": "^2.4.1",
+    "framer-motion": "^11.0.0",
+    "lenis": "^1.1.3",
+    "lottie-react": "^2.4.0",
+    "lucide-react": "^0.292.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.18.0",
+    "tailwindcss": "^4.3.2",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "electron": "^31.0.0",
+    "electron-builder": "^24.13.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "vite": "^5.0.0",
+    "vite-plugin-electron": "^0.28.0",
+    "vite-plugin-electron-renderer": "^0.14.0"
+  }
+}

package/templates/layers/electron/javascript/src/components/layout/SidebarLayout.jsx

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import SidebarHeader from "../ui/SidebarHeader";
+import Sidebar from "../ui/sidebar";
+import TitleBar from "../ui/TitleBar";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+
+const SidebarLayout = () => {
+  const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
+    useUiStore();
+  const { pathname } = useLocation();
+
+  // Reset header title and actions whenever the route shifts
+  useEffect(() => {
+    setHeaderTitle(appConfig.app.name);
+    setHeaderActions(null);
+  }, [pathname, setHeaderTitle, setHeaderActions]);
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      {/* Electron custom title bar — only renders inside Electron */}
+      <TitleBar />
+
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar />
+
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <SidebarHeader title={headerTitle} actions={headerActions} />
+
+          <main
+            className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
+            data-lenis-prevent
+          >
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarLayout;

package/templates/layers/electron/javascript/src/components/ui/TitleBar.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { Minus, Square, X, Maximize2, Minimize2 } from "lucide-react";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+
+/**
+ * TitleBar — custom frameless window title bar for Electron.
+ *
+ * Renders a draggable title bar with:
+ *  - App icon + name on the left
+ *  - Window controls (minimize / maximize / close) positioned per platform:
+ *    · macOS: right side (native traffic lights are hidden via frame: false)
+ *    · Windows/Linux: right side (Windows style)
+ *
+ * Only renders when running inside Electron (window.electronAPI is present).
+ */
+const TitleBar = () => {
+  const { windowMaximized, setWindowMaximized, minimizeWindow, maximizeWindow, closeWindow } =
+    useUiStore();
+  const [platform, setPlatform] = useState("win32");
+
+  const isElectron = Boolean(window.electronAPI);
+
+  // Don't render in browser
+  if (!isElectron) return null;
+
+  useEffect(() => {
+    // Get platform for conditional layout
+    window.electronAPI.getPlatform().then(setPlatform);
+
+    // Sync initial maximize state
+    window.electronAPI.isMaximized().then(setWindowMaximized);
+
+    // Listen for window state changes from main process
+    window.electronAPI.onMaximizeChange((isMax) => {
+      setWindowMaximized(isMax);
+    });
+
+    return () => {
+      window.electronAPI.removeAllListeners("window:maximized-change");
+    };
+  }, []);
+
+  const isMac = platform === "darwin";
+
+  const windowControls = (
+    <div className={`flex items-center gap-1.5 ${isMac ? "mr-3" : "ml-auto"}`}>
+      {/* Minimize */}
+      <button
+        id="titlebar-minimize"
+        onClick={minimizeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-warning/20 hover:text-warning
+                   transition-all duration-150 group"
+        title="Minimize"
+      >
+        <Minus size={12} className="group-hover:scale-110 transition-transform" />
+      </button>
+
+      {/* Maximize / Restore */}
+      <button
+        id="titlebar-maximize"
+        onClick={maximizeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-success/20 hover:text-success
+                   transition-all duration-150 group"
+        title={windowMaximized ? "Restore" : "Maximize"}
+      >
+        {windowMaximized ? (
+          <Minimize2 size={11} className="group-hover:scale-110 transition-transform" />
+        ) : (
+          <Maximize2 size={11} className="group-hover:scale-110 transition-transform" />
+        )}
+      </button>
+
+      {/* Close */}
+      <button
+        id="titlebar-close"
+        onClick={closeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-error/20 hover:text-error
+                   transition-all duration-150 group"
+        title="Close"
+      >
+        <X size={12} className="group-hover:scale-110 transition-transform" />
+      </button>
+    </div>
+  );
+
+  return (
+    <div
+      id="electron-titlebar"
+      className="h-10 shrink-0 flex items-center px-3
+                 bg-base-200 border-b border-base-300
+                 select-none"
+      // The entire bar is draggable except the buttons (buttons set no-drag via CSS)
+      style={{ WebkitAppRegion: "drag" }}
+    >
+      {/* macOS: controls on left */}
+      {isMac && (
+        <div style={{ WebkitAppRegion: "no-drag" }}>
+          {windowControls}
+        </div>
+      )}
+
+      {/* App name — centered */}
+      <div className="flex items-center gap-2 mx-auto">
+        {appConfig.app.logo ? (
+          <img src={appConfig.app.logo} alt="" className="w-4 h-4 rounded" />
+        ) : (
+          <div className="w-4 h-4 rounded bg-primary flex items-center justify-center text-primary-content text-[8px] font-bold">
+            {appConfig.app.name.charAt(0)}
+          </div>
+        )}
+        <span className="text-xs font-semibold text-base-content/70">
+          {appConfig.app.name}
+        </span>
+      </div>
+
+      {/* Windows/Linux: controls on right */}
+      {!isMac && (
+        <div style={{ WebkitAppRegion: "no-drag" }}>
+          {windowControls}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TitleBar;