@gxp-dev/tools 2.0.33 → 2.0.35

package/bin/lib/cli.js

@@ -57,6 +57,18 @@ yargs
 				alias: "p",
 				choices: ["claude", "codex", "gemini"],
 			},
+			yes: {
+				describe: "Skip interactive prompts and use defaults",
+				type: "boolean",
+				alias: "y",
+				default: false,
+			},
+			local: {
+				describe: "Initialize in current directory instead of creating a new one",
+				type: "boolean",
+				alias: "l",
+				default: false,
+			},
 		},
 		initCommand
 	)

package/bin/lib/commands/init.js

@@ -41,8 +41,9 @@ const {
  * Copy template files to project
  * @param {string} projectPath - Target project path
  * @param {object} paths - Resolved GxP paths
+ * @param {boolean} overwrite - If true, overwrite existing files
  */
-function copyTemplateFiles(projectPath, paths) {
+function copyTemplateFiles(projectPath, paths, overwrite = false) {
 	const filesToCopy = [
 		{
 			src: "theme-layouts/SystemLayout.vue",
@@ -133,7 +134,7 @@ function copyTemplateFiles(projectPath, paths) {
 	filesToCopy.forEach((file) => {
 		const srcPath = path.join(paths.templateDir, file.src);
 		const destPath = path.join(projectPath, file.dest);
-		safeCopyFile(srcPath, destPath, file.desc);
+		safeCopyFile(srcPath, destPath, file.desc, overwrite);
 	});
 }
 
@@ -141,8 +142,9 @@ function copyTemplateFiles(projectPath, paths) {
  * Copy extension scripts to project
  * @param {string} projectPath - Target project path
  * @param {object} paths - Resolved GxP paths
+ * @param {boolean} overwrite - If true, overwrite existing files
  */
-function copyExtensionScripts(projectPath, paths) {
+function copyExtensionScripts(projectPath, paths, overwrite = false) {
 	const scriptsDir = path.join(projectPath, "scripts");
 	if (!fs.existsSync(scriptsDir)) {
 		fs.mkdirSync(scriptsDir, { recursive: true });
@@ -155,7 +157,7 @@ function copyExtensionScripts(projectPath, paths) {
 	);
 	const launchChromeDest = path.join(scriptsDir, "launch-chrome.js");
 	if (fs.existsSync(launchChromeSource)) {
-		safeCopyFile(launchChromeSource, launchChromeDest, "Chrome launcher script");
+		safeCopyFile(launchChromeSource, launchChromeDest, "Chrome launcher script", overwrite);
 	}
 
 	// Copy pack-chrome.js script
@@ -165,7 +167,7 @@ function copyExtensionScripts(projectPath, paths) {
 	);
 	const packChromeDest = path.join(scriptsDir, "pack-chrome.js");
 	if (fs.existsSync(packChromeSource)) {
-		safeCopyFile(packChromeSource, packChromeDest, "Chrome packaging script");
+		safeCopyFile(packChromeSource, packChromeDest, "Chrome packaging script", overwrite);
 	}
 
 	// Copy socket events directory
@@ -182,7 +184,7 @@ function copyExtensionScripts(projectPath, paths) {
 		eventFiles.forEach((file) => {
 			const srcPath = path.join(socketEventsSource, file);
 			const destPath = path.join(socketEventsDest, file);
-			safeCopyFile(srcPath, destPath, `Socket event: ${file}`);
+			safeCopyFile(srcPath, destPath, `Socket event: ${file}`, overwrite);
 		});
 	}
 }
@@ -291,8 +293,9 @@ function launchBrowserExtension(projectPath, browser) {
  * Run interactive configuration after project creation
  * @param {string} projectPath - Path to project directory
  * @param {string} initialName - Initial project name from CLI
+ * @param {boolean} isLocal - Whether initialized in current directory
  */
-async function runInteractiveConfig(projectPath, initialName) {
+async function runInteractiveConfig(projectPath, initialName, isLocal = false) {
 	console.log("");
 	console.log("─".repeat(50));
 	console.log("📝 Configure Your Plugin");
@@ -466,7 +469,7 @@ async function runInteractiveConfig(projectPath, initialName) {
 		devProcess = launchDevServer(projectPath, { withMock: true, noHttps: !sslSetup });
 	} else {
 		// Print final instructions
-		printFinalInstructions(projectPath, appName, sslSetup);
+		printFinalInstructions(projectPath, appName, sslSetup, isLocal);
 	}
 
 	return devProcess;
@@ -477,8 +480,9 @@ async function runInteractiveConfig(projectPath, initialName) {
  * @param {string} projectPath - Project path
  * @param {string} projectName - Project name
  * @param {boolean} sslSetup - Whether SSL was set up
+ * @param {boolean} isLocal - Whether initialized in current directory
  */
-function printFinalInstructions(projectPath, projectName, sslSetup) {
+function printFinalInstructions(projectPath, projectName, sslSetup, isLocal = false) {
 	console.log("");
 	console.log("─".repeat(50));
 	console.log("✅ Project setup complete!");
@@ -496,7 +500,9 @@ function printFinalInstructions(projectPath, projectName, sslSetup) {
 	console.log("   • app-manifest.json - Plugin configuration");
 	console.log("");
 	console.log("🚀 To start development:");
-	console.log(`   cd ${projectName}`);
+	if (!isLocal) {
+		console.log(`   cd ${projectName}`);
+	}
 	if (sslSetup) {
 		console.log("   npm run dev          # HTTPS with TUI");
 		console.log("   npm run dev-http     # HTTP only");
@@ -517,50 +523,75 @@ async function initCommand(argv) {
 	const hasPackageJson = fs.existsSync(path.join(currentDir, "package.json"));
 	let projectPath = currentDir;
 	let projectName;
+	const overwrite = argv.local && argv.yes;
 
-	// Handle existing project update
-	if (hasPackageJson && !argv.name) {
-		console.log("Updating existing project...");
-		updateExistingProject(projectPath);
-		console.log("✅ Project updated!");
-		return;
-	}
+	// Handle --local flag: initialize in current directory
+	if (argv.local) {
+		projectPath = currentDir;
+		projectName = argv.name || path.basename(currentDir);
 
-	// New project - require a name
-	if (!argv.name) {
 		console.log("");
-		console.log("🚀 GxP Plugin Creator");
+		console.log(`📁 Initializing project in current directory: ${projectName}`);
+		if (overwrite) {
+			console.log("⚠️  Overwrite mode enabled - existing files will be replaced");
+		}
 		console.log("─".repeat(40));
-		console.log("");
-		projectName = await promptUser("📝 Project name: ");
-		if (!projectName) {
-			console.error("❌ Project name is required!");
+	} else {
+		// Handle existing project update
+		if (hasPackageJson && !argv.name) {
+			console.log("Updating existing project...");
+			updateExistingProject(projectPath);
+			console.log("✅ Project updated!");
+			return;
+		}
+
+		// New project - require a name
+		if (!argv.name) {
+			// In non-interactive mode, name is required
+			if (argv.yes) {
+				console.error("❌ Project name is required when using --yes flag!");
+				console.error("   Usage: gxdev init <project-name> --yes");
+				process.exit(1);
+			}
+			console.log("");
+			console.log("🚀 GxP Plugin Creator");
+			console.log("─".repeat(40));
+			console.log("");
+			projectName = await promptUser("📝 Project name: ");
+			if (!projectName) {
+				console.error("❌ Project name is required!");
+				process.exit(1);
+			}
+		} else {
+			projectName = argv.name;
+		}
+
+		// Create project directory
+		projectPath = path.join(currentDir, projectName);
+		if (fs.existsSync(projectPath)) {
+			console.error(`\n❌ Directory ${projectName} already exists!`);
 			process.exit(1);
 		}
-	} else {
-		projectName = argv.name;
-	}
 
-	// Create project directory
-	projectPath = path.join(currentDir, projectName);
-	if (fs.existsSync(projectPath)) {
-		console.error(`\n❌ Directory ${projectName} already exists!`);
-		process.exit(1);
+		console.log("");
+		console.log(`📁 Creating project: ${projectName}`);
+		console.log("─".repeat(40));
+		fs.mkdirSync(projectPath, { recursive: true });
 	}
 
-	console.log("");
-	console.log(`📁 Creating project: ${projectName}`);
-	console.log("─".repeat(40));
-	fs.mkdirSync(projectPath, { recursive: true });
-
-	// Create package.json
+	// Create package.json (only if it doesn't exist or overwrite is enabled)
 	const initialDescription = argv.description || "A GxP kiosk plugin";
-	createPackageJson(projectPath, projectName, initialDescription);
+	const packageJsonPath = path.join(projectPath, "package.json");
+	if (!fs.existsSync(packageJsonPath) || overwrite) {
+		createPackageJson(projectPath, projectName, initialDescription);
+	} else {
+		console.log("⏭️  Skipping package.json (already exists)");
+	}
 
 	// Copy template files
 	const paths = resolveGxPaths();
-	copyTemplateFiles(projectPath, paths);
-	copyExtensionScripts(projectPath, paths);
+	copyTemplateFiles(projectPath, paths, overwrite);
+	copyExtensionScripts(projectPath, paths, overwrite);
 	createSupportingFiles(projectPath);
 
 	// Install dependencies
@@ -575,12 +606,19 @@ async function initCommand(argv) {
 		updateAppManifest(projectPath, projectName, initialDescription);
 		const provider = argv.provider || "gemini"; // Default to gemini for backward compatibility
 		await runAIScaffolding(projectPath, projectName, initialDescription, argv.build, provider);
-		printFinalInstructions(projectPath, projectName, false);
+		printFinalInstructions(projectPath, projectName, false, argv.local);
+		return;
+	}
+
+	// If --yes flag provided, skip interactive configuration
+	if (argv.yes) {
+		updateAppManifest(projectPath, projectName, initialDescription);
+		printFinalInstructions(projectPath, projectName, false, argv.local);
 		return;
 	}
 
 	// Run interactive configuration
-	await runInteractiveConfig(projectPath, projectName);
+	await runInteractiveConfig(projectPath, projectName, argv.local);
 }
 
 module.exports = {

package/bin/lib/utils/files.js

@@ -16,10 +16,15 @@ const { loadGlobalConfig } = require("./paths");
 
 /**
  * Copies a file from source to destination, creating directories if needed
+ * @param {string} src - Source file path
+ * @param {string} dest - Destination file path
+ * @param {string} description - Description for logging
+ * @param {boolean} overwrite - If true, overwrite existing files
  */
-function safeCopyFile(src, dest, description) {
-	if (!fs.existsSync(dest)) {
-		console.log(`Creating ${description}`);
+function safeCopyFile(src, dest, description, overwrite = false) {
+	const exists = fs.existsSync(dest);
+	if (!exists || overwrite) {
+		console.log(`${exists ? 'Overwriting' : 'Creating'} ${description}`);
 		const destDir = path.dirname(dest);
 		if (!fs.existsSync(destDir)) {
 			fs.mkdirSync(destDir, { recursive: true });
@@ -124,32 +129,50 @@ function updateExistingProject(projectPath) {
 	}
 
 	try {
+		// Backup existing vite.config.js if present
+		const viteConfigPath = path.join(projectPath, "vite.config.js");
+		if (fs.existsSync(viteConfigPath)) {
+			const backupPath = path.join(projectPath, "vite.config.js.backup");
+			fs.renameSync(viteConfigPath, backupPath);
+			console.log("  → Renamed vite.config.js to vite.config.js.backup");
+		}
+
 		const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
 		let updated = false;
 
-		// Check and add missing dependencies
+		// Check and add/update dependencies
 		if (!packageJson.dependencies) {
 			packageJson.dependencies = {};
 		}
 
 		for (const [dep, version] of Object.entries(REQUIRED_DEPENDENCIES)) {
-			if (!packageJson.dependencies[dep]) {
+			const existingVersion = packageJson.dependencies[dep];
+			if (!existingVersion) {
 				packageJson.dependencies[dep] = version;
 				console.log(`  + Adding dependency: ${dep}@${version}`);
 				updated = true;
+			} else if (existingVersion !== version) {
+				packageJson.dependencies[dep] = version;
+				console.log(`  ↑ Updating dependency: ${dep} (${existingVersion} → ${version})`);
+				updated = true;
 			}
 		}
 
-		// Check and add missing dev dependencies
+		// Check and add/update dev dependencies
 		if (!packageJson.devDependencies) {
 			packageJson.devDependencies = {};
 		}
 
 		for (const [dep, version] of Object.entries(REQUIRED_DEV_DEPENDENCIES)) {
-			if (!packageJson.devDependencies[dep]) {
+			const existingVersion = packageJson.devDependencies[dep];
+			if (!existingVersion) {
 				packageJson.devDependencies[dep] = version;
 				console.log(`  + Adding devDependency: ${dep}@${version}`);
 				updated = true;
+			} else if (existingVersion !== version) {
+				packageJson.devDependencies[dep] = version;
+				console.log(`  ↑ Updating devDependency: ${dep} (${existingVersion} → ${version})`);
+				updated = true;
 			}
 		}
 

package/browser-extensions/firefox/manifest.json

@@ -1,12 +1,21 @@
 {
   "manifest_version": 2,
   "name": "GxP Developer Toolkit",
-  "version": "1.2",
+  "version": "1.2.0",
   "description": "JavaScript proxy and component inspector for GxP plugin development",
+  "homepage_url": "https://github.com/gramercytech/gx-devtools",
+  "developer": {
+    "name": "Gramercy Tech",
+    "url": "https://gramercytech.com"
+  },
 
   "browser_specific_settings": {
     "gecko": {
-      "id": "gxp-toolkit@gx-devtools.dev"
+      "id": "gxp-toolkit@gx-devtools.dev",
+      "strict_min_version": "109.0",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
     }
   },
 
@@ -46,7 +55,7 @@
     "default_icon": {
       "16": "icons/gx_off_16.png",
       "32": "icons/gx_off_32.png",
-      "48": "icons/gx_off_48.png",
+      "64": "icons/gx_off_64.png",
       "128": "icons/gx_off_128.png"
     }
   },
@@ -54,7 +63,7 @@
   "icons": {
     "16": "icons/gx_off_16.png",
     "32": "icons/gx_off_32.png",
-    "48": "icons/gx_off_48.png",
+    "48": "icons/gx_off_64.png",
     "128": "icons/gx_off_128.png"
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxp-dev/tools",
-  "version": "2.0.33",
+  "version": "2.0.35",
   "description": "Dev tools to create platform plugins",
   "type": "commonjs",
   "publishConfig": {

package/template/default-styling.css

@@ -0,0 +1 @@
+/* This file used to pre-populate the the additional styling editor in the GxP app */

package/template/src/Plugin.vue

@@ -5,28 +5,16 @@
     />
   </template>
   
-  <style scoped>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  </style>
+  
   
   <script setup>
   import { ref, shallowRef } from "vue";
   import DemoPage from "@/DemoPage.vue";
-  import {
-    GxPageStart,
-    GxPageFinal,
-    GxPageLoading
-  } from "@gramercytech/gx-componentkit";
 
   // Initialize the GxP store
   // This import is externalized to window.useGxpStore during build for platform compatibility
   import { useGxpStore } from "@/stores/gxpPortalConfigStore";
   
-
   
   const gxpStore = useGxpStore();
   gxpStore.sockets?.primary.listenForStateChange((event) => {
@@ -35,4 +23,78 @@
  
 
 
-  </script> 
+  </script> 
+
+  <style>
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  /* Primary Color */
+  .primary {
+    color: var(--primary, #000000);
+  }
+
+  /* Page Styles */
+  .page {
+    background-color: var(--page_background_color, #000466);
+    color: var(--page_text_color, #FFFFFF);
+  }
+
+  /* Input Field Styles */
+  .input-field {
+    background-color: var(--input_field_background_color, #03054a);
+    color: var(--input_field_text_color, #FFFFFF);
+    border-color: var(--input_field_border_color, #888C92);
+  }
+
+  /* Primary Button Styles */
+  .primary-button {
+    background-color: var(--primary_button_background_color, #FFFFFF);
+    color: var(--primary_button_text_color, #000596);
+    border-color: var(--primary_button_border_color, #FFFFFF);
+  }
+
+  /* Secondary Button Styles */
+  .secondary-button {
+    background-color: var(--secondary_button_background_color, #000466);
+    color: var(--secondary_button_text_color, #FFFFFF);
+    border-color: var(--secondary_button_border_color, #FFFFFF);
+  }
+
+  /* Tertiary Button Styles */
+  .tertiary-button {
+    background-color: var(--tertiary_button_background_color, #FFFFFF00);
+    color: var(--tertiary_button_text_color, #FFFFFF);
+    border-color: var(--tertiary_button_border_color, #FFFFFF00);
+  }
+
+  /* Spinner Styles */
+  .spinner {
+    background-color: var(--spinner_background_color, #03054A);
+    color: var(--spinner_color, #FFFFFF);
+  }
+
+  /* Modal Styles */
+  .modal {
+    background-color: var(--modal_background_color, #FFFFFF);
+    color: var(--modal_text_color, #222222);
+  }
+
+  /* Modal Primary Button Styles */
+  .modal-primary-button {
+    background-color: var(--modal_primary_button_background_color, #000596);
+    color: var(--modal_primary_button_text_color, #FFFFFF);
+    border-color: var(--modal_primary_button_border_color, #000596);
+  }
+
+  /* Modal Secondary Button Styles */
+  .modal-secondary-button {
+    background-color: var(--modal_secondary_button_background_color, #FFFFFF);
+    color: var(--modal_secondary_button_text_color, #000596);
+    border-color: var(--modal_secondary_button_border_color, #000596);
+  }
+
+  </style>

package/template/theme-layouts/AdditionalStyling.css

@@ -0,0 +1,93 @@
+/* Theme CSS Variables */
+:root {
+  --primary: #000000;
+  --page_background_color: #000466;
+  --page_text_color: #FFFFFF;
+  --input_field_background_color: #03054a;
+  --input_field_text_color: #FFFFFF;
+  --input_field_border_color: #888C92;
+  --primary_button_background_color: #FFFFFF;
+  --primary_button_text_color: #000596;
+  --primary_button_border_color: #FFFFFF;
+  --secondary_button_background_color: #000466;
+  --secondary_button_text_color: #FFFFFF;
+  --secondary_button_border_color: #FFFFFF;
+  --tertiary_button_background_color: #FFFFFF00;
+  --tertiary_button_text_color: #FFFFFF;
+  --tertiary_button_border_color: #FFFFFF00;
+  --spinner_background_color: #03054A;
+  --spinner_color: #FFFFFF;
+  --modal_background_color: #FFFFFF;
+  --modal_text_color: #222222;
+  --modal_primary_button_background_color: #000596;
+  --modal_primary_button_text_color: #FFFFFF;
+  --modal_primary_button_border_color: #000596;
+  --modal_secondary_button_background_color: #FFFFFF;
+  --modal_secondary_button_text_color: #000596;
+  --modal_secondary_button_border_color: #000596;
+}
+
+/* Primary Color */
+.primary {
+  color: var(--primary, #000000);
+}
+
+/* Page Styles */
+.page {
+  background-color: var(--page_background_color, #000466);
+  color: var(--page_text_color, #FFFFFF);
+}
+
+/* Input Field Styles */
+.input-field {
+  background-color: var(--input_field_background_color, #03054a);
+  color: var(--input_field_text_color, #FFFFFF);
+  border-color: var(--input_field_border_color, #888C92);
+}
+
+/* Primary Button Styles */
+.primary-button {
+  background-color: var(--primary_button_background_color, #FFFFFF);
+  color: var(--primary_button_text_color, #000596);
+  border-color: var(--primary_button_border_color, #FFFFFF);
+}
+
+/* Secondary Button Styles */
+.secondary-button {
+  background-color: var(--secondary_button_background_color, #000466);
+  color: var(--secondary_button_text_color, #FFFFFF);
+  border-color: var(--secondary_button_border_color, #FFFFFF);
+}
+
+/* Tertiary Button Styles */
+.tertiary-button {
+  background-color: var(--tertiary_button_background_color, #FFFFFF00);
+  color: var(--tertiary_button_text_color, #FFFFFF);
+  border-color: var(--tertiary_button_border_color, #FFFFFF00);
+}
+
+/* Spinner Styles */
+.spinner {
+  background-color: var(--spinner_background_color, #03054A);
+  color: var(--spinner_color, #FFFFFF);
+}
+
+/* Modal Styles */
+.modal {
+  background-color: var(--modal_background_color, #FFFFFF);
+  color: var(--modal_text_color, #222222);
+}
+
+/* Modal Primary Button Styles */
+.modal-primary-button {
+  background-color: var(--modal_primary_button_background_color, #000596);
+  color: var(--modal_primary_button_text_color, #FFFFFF);
+  border-color: var(--modal_primary_button_border_color, #000596);
+}
+
+/* Modal Secondary Button Styles */
+.modal-secondary-button {
+  background-color: var(--modal_secondary_button_background_color, #FFFFFF);
+  color: var(--modal_secondary_button_text_color, #000596);
+  border-color: var(--modal_secondary_button_border_color, #000596);
+}