@gxp-dev/tools 2.0.5 → 2.0.6

package/scripts/launch-chrome.js

@@ -1,90 +0,0 @@
-#!/usr/bin/env node
-
-const path = require("path");
-const fs = require("fs");
-
-/**
- * Get the dev server URL from environment variables
- * @returns {string} The URL to open in the browser
- */
-function getDevServerUrl() {
-	// Check for explicit START_URL first
-	if (process.env.START_URL) {
-		return process.env.START_URL;
-	}
-
-	// Build URL from environment variables
-	const useHttps = process.env.USE_HTTPS !== "false";
-	const protocol = useHttps ? "https" : "http";
-	const port = process.env.NODE_PORT || 3060;
-
-	return `${protocol}://localhost:${port}`;
-}
-
-/**
- * Launches Chrome with the browser extension loaded
- */
-async function launchChromeWithExtension() {
-	// Dynamic import for chrome-launcher (ES module)
-	const { launch } = await import("chrome-launcher");
-	// Use environment variable if set (from CLI), otherwise use default path
-	const extensionPath =
-		process.env.CHROME_EXTENSION_PATH ||
-		path.resolve(__dirname, "../browser-extensions/chrome");
-
-	// Verify extension directory exists
-	if (!fs.existsSync(extensionPath)) {
-		console.error("❌ Chrome extension directory not found:", extensionPath);
-		process.exit(1);
-	}
-
-	// Verify manifest.json exists
-	const manifestPath = path.join(extensionPath, "manifest.json");
-	if (!fs.existsSync(manifestPath)) {
-		console.error("❌ Chrome extension manifest.json not found");
-		process.exit(1);
-	}
-
-	// Get the starting URL
-	const startingUrl = getDevServerUrl();
-
-	console.log("🚀 Launching Chrome with extension...");
-	console.log("📁 Extension path:", extensionPath);
-	console.log("🌐 Opening URL:", startingUrl);
-
-	try {
-		const chrome = await launch({
-			chromeFlags: [
-				`--load-extension=${extensionPath}`,
-				"--disable-extensions-except=" + extensionPath,
-				"--disable-extensions-file-access-check",
-				"--user-data-dir=/tmp/chrome-extension-test",
-				"--new-window",
-				"--no-first-run",
-				"--no-default-browser-check",
-			],
-			startingUrl: startingUrl,
-		});
-
-		console.log("✅ Chrome launched successfully!");
-		console.log("🔧 Chrome debugging port:", chrome.port);
-		console.log("📋 Extension should be loaded in developer mode");
-		console.log("🌐 Navigate to chrome://extensions/ to see your extension");
-
-		// Keep the process alive
-		process.on("SIGINT", async () => {
-			console.log("\n🛑 Shutting down Chrome...");
-			await chrome.kill();
-			process.exit(0);
-		});
-	} catch (error) {
-		console.error("❌ Failed to launch Chrome:", error.message);
-		process.exit(1);
-	}
-}
-
-if (require.main === module) {
-	launchChromeWithExtension();
-}
-
-module.exports = launchChromeWithExtension;

package/scripts/pack-chrome.js

@@ -1,91 +0,0 @@
-#!/usr/bin/env node
-
-const path = require("path");
-const fs = require("fs");
-const shell = require("shelljs");
-
-/**
- * Packages Chrome extension into a distributable format
- */
-function packChromeExtension() {
-	const extensionPath =
-		process.env.CHROME_EXTENSION_PATH ||
-		path.resolve(__dirname, "../browser-extensions/chrome");
-	const distPath =
-		process.env.CHROME_BUILD_OUTPUT ||
-		path.resolve(__dirname, "../dist/chrome");
-
-	console.log("📦 Packaging Chrome extension...");
-
-	// Verify extension directory exists
-	if (!fs.existsSync(extensionPath)) {
-		console.error("❌ Chrome extension directory not found:", extensionPath);
-		process.exit(1);
-	}
-
-	// Create dist directory
-	if (!fs.existsSync(distPath)) {
-		fs.mkdirSync(distPath, { recursive: true });
-	}
-
-	// Read manifest to get version
-	const manifestPath = path.join(extensionPath, "manifest.json");
-	let version = "1.0.0";
-
-	try {
-		const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
-		version = manifest.version || "1.0.0";
-		console.log(`📋 Extension version: ${version}`);
-	} catch (error) {
-		console.warn("⚠️ Could not read manifest version, using default");
-	}
-
-	// Create zip file
-	const zipName = `gx-chrome-extension-v${version}.zip`;
-	const zipPath = path.join(distPath, zipName);
-
-	console.log("🗜️ Creating zip archive...");
-
-	// Change to extension directory and create zip
-	const currentDir = process.cwd();
-
-	try {
-		process.chdir(extensionPath);
-
-		// Remove existing zip if it exists
-		if (fs.existsSync(zipPath)) {
-			fs.unlinkSync(zipPath);
-		}
-
-		// Create zip using native zip command (works on macOS/Linux)
-		const result = shell.exec(
-			`zip -r "${zipPath}" . -x "*.DS_Store" "*.git*" "node_modules/*"`,
-			{ silent: true }
-		);
-
-		if (result.code === 0) {
-			console.log("✅ Chrome extension packaged successfully!");
-			console.log("📁 Package location:", zipPath);
-			console.log("");
-			console.log("📋 Manual installation instructions:");
-			console.log("1. Open Chrome and go to chrome://extensions/");
-			console.log('2. Enable "Developer mode" (toggle in top right)');
-			console.log('3. Click "Load unpacked" and select:', extensionPath);
-			console.log("4. Or drag and drop the zip file to install");
-		} else {
-			console.error("❌ Failed to create zip archive");
-			process.exit(1);
-		}
-	} catch (error) {
-		console.error("❌ Error packaging extension:", error.message);
-		process.exit(1);
-	} finally {
-		process.chdir(currentDir);
-	}
-}
-
-if (require.main === module) {
-	packChromeExtension();
-}
-
-module.exports = packChromeExtension;

package/socket-events/AiSessionMessageCreated.json

@@ -1,18 +0,0 @@
-{
-  "event": "AiSessionMessageCreated",
-  "channel": "private.AiInterface.ai_interface_background_remover",
-  "data": {
-    "id": 1234,
-    "ai_session_id": 567,
-    "message": "Background removal process completed successfully",
-    "type": "completion",
-    "metadata": {
-      "processing_time": 2.3,
-      "input_image": "/dev-assets/images/product-placeholder.jpg",
-      "output_image": "/dev-assets/images/background-placeholder.jpg",
-      "confidence": 0.95
-    },
-    "created_at": "2024-01-15T10:30:00Z",
-    "updated_at": "2024-01-15T10:30:00Z"
-  }
-} 

package/socket-events/SocialStreamPostCreated.json

@@ -1,24 +0,0 @@
-{
-  "event": "SocialStreamPostCreated", 
-  "channel": "private.SocialStream.social_stream",
-  "data": {
-    "id": 789,
-    "social_stream_id": 123,
-    "content": "Check out this amazing photo from our event!",
-    "author": {
-      "id": 456,
-      "name": "John Doe",
-      "avatar": "/dev-assets/images/avatar-placeholder.png"
-    },
-    "media": {
-      "type": "image",
-      "url": "/dev-assets/images/product-placeholder.jpg",
-      "thumbnail": "/dev-assets/images/thumbnail-placeholder.jpg"
-    },
-    "hashtags": ["#event", "#photography", "#memories"],
-    "likes_count": 0,
-    "comments_count": 0,
-    "created_at": "2024-01-15T10:35:00Z",
-    "updated_at": "2024-01-15T10:35:00Z"
-  }
-} 

package/socket-events/SocialStreamPostVariantCompleted.json

@@ -1,23 +0,0 @@
-{
-  "event": "SocialStreamPostVariantCompleted",
-  "channel": "private.SocialStream.social_stream", 
-  "data": {
-    "id": 789,
-    "social_stream_post_id": 789,
-    "variant_type": "ai_generated_style",
-    "variant_data": {
-      "style": "vintage",
-      "filter": "sepia_tone",
-      "processed_image": "http://localhost:3069/dev-assets/images/banner-placeholder.jpg",
-      "processing_details": {
-        "ai_model": "StyleTransfer-v2.1",
-        "processing_time": 4.7,
-        "quality_score": 0.89
-      }
-    },
-    "status": "completed",
-    "completed_at": "2024-01-15T10:37:30Z",
-    "created_at": "2024-01-15T10:35:15Z",
-    "updated_at": "2024-01-15T10:37:30Z"
-  }
-} 

package/template/README.md

@@ -1,332 +0,0 @@
-# GxP Plugin Project
-
-This project was created with `@gramercytech/gx-devtools` and includes the `@gramercytech/gx-componentkit` component library for rapid kiosk development.
-
-## Quick Start
-
-```bash
-# Start HTTP development server
-npm run dev-http
-
-# Start HTTPS development server with Socket.IO
-npm run dev
-
-# Build for production
-npm run build
-```
-
-## Project Structure
-
-```
-your-project/
-├── src/
-│   ├── Plugin.vue           # Your app entry point (customize this!)
-│   ├── DemoPage.vue         # Example component
-│   ├── components/          # Your custom components
-│   ├── composables/         # Your custom logic
-│   ├── stores/              # Pinia stores
-│   │   └── index.js         # Store setup
-│   └── socket-events/       # Socket event templates
-├── theme-layouts/           # Layout templates (System, Private, Public)
-│   ├── SystemLayout.vue
-│   ├── PrivateLayout.vue
-│   ├── PublicLayout.vue
-│   └── AdditionalStyling.css
-├── dev-assets/              # Development placeholder images
-├── socket-events/           # Socket event JSON files for simulation
-├── main.js                  # Development entry point
-├── vite.config.js           # Vite build configuration
-├── app-manifest.json        # Plugin manifest
-├── index.html               # Development HTML template
-└── .env                     # Environment configuration
-```
-
-## How It Works
-
-### Plugin.vue - Your App Entry Point
-
-`src/Plugin.vue` is the root component of your application. During development, it's wrapped by the toolkit's PortalContainer (which emulates the GxP platform). In production, the platform loads your Plugin.vue directly.
-
-```vue
-<template>
-  <div class="my-plugin">
-    <h1>{{ stringsList?.welcome_text || 'Welcome!' }}</h1>
-    <!-- Your custom content here -->
-  </div>
-</template>
-
-<script setup>
-// Props injected by the platform
-const props = defineProps({
-  pluginVars: Object,      // Custom variables from admin panel
-  dependencyList: Object,  // Selected dependencies
-  assetUrls: Object,       // Asset URLs (signed URLs for images, etc.)
-  stringsList: Object,     // Localized strings
-  permissionFlags: Array,  // Permission flags
-  theme: Object,           // Theme configuration
-  router: Object           // Platform router for navigation
-});
-</script>
-```
-
-### Theme Layouts
-
-The `theme-layouts/` directory contains layout templates that wrap your Plugin component. The platform uses these to provide consistent UI structure:
-
-- **SystemLayout.vue** - System-level pages (errors, maintenance)
-- **PrivateLayout.vue** - Authenticated user pages
-- **PublicLayout.vue** - Public-facing pages
-
-You can customize these layouts to match your kiosk's design.
-
-## Development
-
-### Available Scripts
-
-| Script | Description |
-|--------|-------------|
-| `npm run dev` | Start HTTPS dev server with Socket.IO |
-| `npm run dev-app` | Start HTTPS dev server only |
-| `npm run dev-http` | Start HTTP dev server (no SSL) |
-| `npm run build` | Build for production |
-| `npm run setup-ssl` | Generate SSL certificates |
-| `npm run socket:list` | List available socket events |
-| `npm run socket:send` | Send test socket events |
-| `npm run assets:list` | List development assets |
-| `npm run assets:init` | Initialize asset directories |
-| `npm run assets:generate` | Generate placeholder images |
-
-### Dev Tools Modal
-
-During development, press **Ctrl+Shift+D** (or **Cmd+Shift+D** on Mac) to open the Dev Tools Modal. You can also click the gear icon in the bottom-right corner.
-
-The Dev Tools Modal provides:
-
-1. **Store Inspector** - View and edit store state:
-   - `pluginVars` - Custom variables
-   - `stringsList` - Localized strings
-   - `assetList` - Asset URLs
-   - `triggerState` - Trigger states
-   - `dependencyList` - Dependencies
-
-2. **Layout Switcher** - Toggle between System, Private, and Public layouts
-
-3. **Socket Simulator** - Send test socket events to your app
-
-4. **Mock Data Editor** - Edit theme colors, navigation items, user session, and permissions
-
-You can also control dev tools from the browser console:
-```javascript
-window.gxDevTools.open()   // Open modal
-window.gxDevTools.close()  // Close modal
-window.gxDevTools.toggle() // Toggle modal
-```
-
-### Environment Variables
-
-Configure your development environment in `.env`:
-
-```bash
-# Development server port
-VITE_DEV_PORT=3060
-
-# Socket.IO server port
-VITE_SOCKET_PORT=3069
-
-# SSL certificates (if using HTTPS)
-VITE_SSL_CERT=.certs/localhost.pem
-VITE_SSL_KEY=.certs/localhost-key.pem
-```
-
-## Platform Props
-
-Your Plugin.vue component receives these props from the platform:
-
-### pluginVars
-Custom variables configured in the admin panel:
-```javascript
-const { pluginVars } = props;
-console.log(pluginVars.primary_color);  // "#FFD600"
-console.log(pluginVars.projectId);       // 39
-```
-
-### assetUrls
-URLs for configured assets:
-```vue
-<img :src="assetUrls.main_logo" alt="Logo" />
-<img :src="assetUrls.background_image" alt="Background" />
-```
-
-### stringsList
-Localized strings:
-```vue
-<h1>{{ stringsList.welcome_text }}</h1>
-<p>{{ stringsList.instruction_text }}</p>
-```
-
-### theme
-Theme configuration (colors, fonts, etc.):
-```vue
-<GxThemeWrapper :theme="theme">
-  <!-- Your content inherits theme variables -->
-</GxThemeWrapper>
-```
-
-### router
-Platform router for navigation (Inertia.js-style):
-```javascript
-// Basic navigation
-router.visit('/camera');
-
-// POST data to a route
-router.visit('/share', {
-  method: 'post',
-  data: { image: photoUrl, caption: 'My photo!' }
-});
-
-// Navigation with options
-router.visit('/results', {
-  preserveScroll: true,
-  preserveState: true,
-  replace: true,
-  onStart: () => {},
-  onFinish: () => {},
-  onError: (errors) => {}
-});
-```
-
-## GX ComponentKit
-
-This project includes `@gramercytech/gx-componentkit` with pre-built components:
-
-### Page Components
-- `GxPageStart` - Welcome/start screen with idle timeout
-- `GxPageInstructions` - Instruction display page
-- `GxPageCamera` - Camera capture interface
-- `GxPageResults` - Results display page
-- `GxPageShare` - Social sharing interface
-- `GxPageFinal` - Thank you/completion page
-- `GxPageLoading` - Loading overlay
-
-### UI Components
-- `GxModal` - Customizable modal dialogs
-- `GxCountdown` - Timer/countdown component
-- `GxVideoPlayer` - Video player with custom controls
-- `GxThemeWrapper` - Theme provider component
-
-### Composables
-- `useMedia()` - Camera, video, and audio utilities
-- `useAnimations()` - Animation helpers
-- `useScanning()` - Barcode/QR scanning
-- `useErrors()` - Error state management
-
-### Usage Example
-```vue
-<script setup>
-import {
-  GxModal,
-  GxCountdown,
-  GxVideoPlayer,
-  useMedia
-} from '@gramercytech/gx-componentkit';
-
-const { startCamera, takePhoto } = useMedia();
-</script>
-
-<template>
-  <GxCountdown :duration="30" @finished="handleFinished" />
-  <GxVideoPlayer :src="videoUrl" @play="handlePlay" />
-</template>
-```
-
-## Custom Styling
-
-Theme CSS variables are automatically available:
-
-```css
-.my-component {
-  background: var(--gx-primary-color);
-  color: var(--gx-text-color);
-  border: 2px solid var(--gx-primary-color);
-}
-```
-
-## Socket Events
-
-Test real-time features with socket simulation:
-
-```bash
-# List available socket events
-npm run socket:list
-
-# Send a socket event
-npm run socket:send
-
-# Send to specific channel
-gxdev socket send --event SocialStreamPostCreated --identifier "stream_123"
-```
-
-Socket event templates are in `socket-events/` directory. Add your own JSON files to simulate custom events.
-
-## Asset Management
-
-```bash
-# List all development assets
-npm run assets:list
-
-# Initialize asset directories
-npm run assets:init
-
-# Generate placeholder images (requires ImageMagick)
-npm run assets:generate
-gxdev assets generate --size 800x600 --name product-image
-gxdev assets generate --name logo --size 200x200 --color "#FF5722" --text "My Logo"
-```
-
-### ImageMagick Installation
-```bash
-# macOS
-brew install imagemagick
-
-# Ubuntu/Debian
-sudo apt-get install imagemagick
-
-# Windows - download from https://imagemagick.org/script/download.php
-```
-
-## Building for Production
-
-```bash
-npm run build
-```
-
-This creates a `dist/` folder with:
-- `plugin.es.js` - Your compiled plugin (ES module)
-- `style.css` - Compiled styles
-
-The build excludes development files (main.js, index.html) and externalizes Vue (the platform provides it).
-
-## Project Architecture
-
-```
-Plugin.vue (your entry point)
-├── imports YourHeader.vue
-├── imports YourContent.vue
-│   ├── imports ProductList.vue
-│   ├── imports ShoppingCart.vue
-│   └── imports YourModal.vue
-└── imports YourFooter.vue
-```
-
-Everything imported into Plugin.vue (directly or indirectly) is included in the build. The platform loads your Plugin.vue and injects the necessary props.
-
-## Learn More
-
-- [GX ComponentKit Documentation](https://github.com/gramercytech/gx-componentkit)
-- [GxP Platform Documentation](https://www.gramercytech.com/gxp)
-- [Vue 3 Documentation](https://vuejs.org/)
-- [Vite Documentation](https://vitejs.dev/)
-
-## Support
-
-For questions about this template or gx-componentkit integration, please contact the development team or check the documentation links above.

package/template/app-manifest.json

@@ -1,32 +0,0 @@
-{
-	"name": "GxToolkit",
-	"version": "1.0.0",
-	"description": "GxToolkit Plugin",
-	"manifest_version": 3,
-	"asset_dir": "/src/assets/",
-	"settings": {
-		"primary_color": "#FFD600",
-		"background_color": "#ffffff",
-		"text_color": "#333333",
-		"start_background_color": "#000596",
-		"start_text_color": "#FFFFFF",
-		"final_background_color": "#4CAF50",
-		"final_text_color": "#ffffff"
-	},
-	"strings": {
-		"default": {
-			"welcome_text": "Hello World",
-			"loading_text": "Loading...",
-			"error_title": "Oops!",
-			"error_message": "Something went wrong. Please try again.",
-			"continue_button": "Continue",
-			"back_button": "Back"
-		}
-	},
-	"assets": {
-		"main_logo": "/dev-assets/images/logo-placeholder.png",
-		"background_image": "/dev-assets/images/background-placeholder.jpg"
-	},
-	"dependencies": [],
-	"permissions": []
-}

package/template/env.example

@@ -1,51 +0,0 @@
-# GxToolkit Environment Configuration
-# Copy this file to .env and customize the values for your project
-
-# GxP Environment to determine API endpoints and documentation
-# Options: production, staging, testing, development, local, mock
-#
-# - mock: Uses local mock API server at http(s)://localhost:{NODE_PORT}/mock-api
-#         Generates a random bearer token for each session
-#
-# - production: https://api.gramercy.cloud
-# - staging: https://api.efz-staging.env.eventfinity.app
-# - testing: https://api.zenith-develop-testing.env.eventfinity.app
-# - development: https://api.zenith-develop.env.eventfinity.app
-# - local: https://dashboard.eventfinity.test
-#
-API_ENV=mock
-
-# API Key for authentication (required for non-mock environments)
-# Used as the Bearer token for API requests
-#API_KEY=your-api-key-here
-
-#API_PROJECT_ID=
-
-# Development server configuration
-NODE_PORT=3060
-CLIENT_PORT=3060
-SOCKET_IO_PORT=3061
-
-# Logging configuration
-NODE_LOG_LEVEL=info
-TUNNEL_LOG_LEVEL=error
-
-# Component configuration
-COMPONENT_PATH=./src/Plugin.vue
-
-# HTTPS configuration (automatically set by gxdev dev command)
-USE_HTTPS=true
-CERT_PATH=.certs/localhost.pem
-KEY_PATH=.certs/localhost-key.pem
-
-# Development features
-NODE_DEBUG=false
-SOCKET_IO_ENABLED=true
-
-# Mock API Configuration
-# Enable to generate mock API responses from OpenAPI/AsyncAPI specs
-MOCK_API_ENABLED=false
-# Global response delay in milliseconds (simulates network latency)
-MOCK_API_DELAY=0
-# Spec cache TTL in milliseconds (default: 5 minutes)
-MOCK_API_CACHE_TTL=300000