@gxp-dev/tools 2.0.63 → 2.0.64

package/runtime/stores/gxpPortalConfigStore.js

@@ -1,7 +1,7 @@
-import { defineStore } from "pinia";
-import { ref, computed, reactive } from "vue";
-import axios from "axios";
-import { io } from "socket.io-client";
+import { defineStore } from "pinia"
+import { ref, computed, reactive } from "vue"
+import axios from "axios"
+import { io } from "socket.io-client"
 
 // Environment URL configuration (matches constants.js ENVIRONMENT_URLS)
 const ENVIRONMENT_URLS = {
@@ -20,19 +20,18 @@ const ENVIRONMENT_URLS = {
 	local: {
 		apiBaseUrl: "https://dashboard.eventfinity.test",
 	},
-};
+}
 
 /**
  * Generate a random bearer token for mock API
  */
 function generateMockToken() {
-	const chars =
-		"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-	let token = "";
+	const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+	let token = ""
 	for (let i = 0; i < 32; i++) {
-		token += chars.charAt(Math.floor(Math.random() * chars.length));
+		token += chars.charAt(Math.floor(Math.random() * chars.length))
 	}
-	return token;
+	return token
 }
 
 /**
@@ -43,55 +42,55 @@ function generateMockToken() {
  * @returns {{ apiBaseUrl: string, authToken: string, projectId: string }}
  */
 function getApiConfig() {
-	const apiEnv = import.meta.env.VITE_API_ENV || "mock";
-	const apiKey = import.meta.env.VITE_API_KEY || "";
-	const projectId = import.meta.env.VITE_API_PROJECT_ID || "";
-	const useHttps = import.meta.env.VITE_USE_HTTPS !== "false";
-	const nodePort = import.meta.env.VITE_NODE_PORT || "3060";
-	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3061";
+	const apiEnv = import.meta.env.VITE_API_ENV || "mock"
+	const apiKey = import.meta.env.VITE_API_KEY || ""
+	const projectId = import.meta.env.VITE_API_PROJECT_ID || ""
+	const useHttps = import.meta.env.VITE_USE_HTTPS !== "false"
+	const nodePort = import.meta.env.VITE_NODE_PORT || "3060"
+	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3061"
 
 	// Check if we're in development mode (Vite dev server)
-	const isDev = import.meta.env.DEV;
+	const isDev = import.meta.env.DEV
 
 	if (apiEnv === "mock") {
 		// Mock API: use local dev server with random token
-		const protocol = useHttps ? "https" : "http";
+		const protocol = useHttps ? "https" : "http"
 		return {
 			apiBaseUrl: `${protocol}://localhost:${mockPort}/mock-api`,
 			authToken: generateMockToken(),
 			projectId: "team/project",
-		};
+		}
 	}
 
 	// For non-mock environments in development, use the local Vite proxy
 	// The proxy handles CORS and injects the Authorization header
 	if (isDev) {
-		const protocol = useHttps ? "https" : "http";
+		const protocol = useHttps ? "https" : "http"
 		return {
 			apiBaseUrl: `${protocol}://localhost:${nodePort}/api-proxy`,
 			authToken: "", // Proxy injects the token server-side
 			projectId: projectId,
-		};
+		}
 	}
 
 	// Production build: use the actual API URL directly
-	const envConfig = ENVIRONMENT_URLS[apiEnv];
+	const envConfig = ENVIRONMENT_URLS[apiEnv]
 	if (!envConfig) {
 		console.warn(
-			`[GxP Store] Unknown API_ENV "${apiEnv}", falling back to production`
-		);
+			`[GxP Store] Unknown API_ENV "${apiEnv}", falling back to production`,
+		)
 		return {
 			apiBaseUrl: ENVIRONMENT_URLS.production.apiBaseUrl,
 			authToken: apiKey,
 			projectId: projectId,
-		};
+		}
 	}
 
 	return {
 		apiBaseUrl: envConfig.apiBaseUrl,
 		authToken: apiKey,
 		projectId: projectId,
-	};
+	}
 }
 
 // Default values used when app-manifest.json doesn't exist or is missing keys
@@ -111,48 +110,48 @@ const defaultData = {
 	pluginData: {},
 	portalAssets: {},
 	portal: null,
-};
+}
 
 export const useGxpStore = defineStore("gxp-portal-app", () => {
 	// Core configuration - these will be injected by the platform in production
-	const pluginVars = ref({ ...defaultData.pluginVars });
-	const stringsList = ref({ ...defaultData.stringsList });
-	const assetList = ref({ ...defaultData.assetList });
-	const dependencyList = ref({ ...defaultData.dependencyList });
-	const dependencies = ref([]); // Store full dependency objects for socket initialization
-	const permissionFlags = ref([...defaultData.permissionFlags]);
-	const triggerState = ref({ ...defaultData.triggerState });
+	const pluginVars = ref({ ...defaultData.pluginVars })
+	const stringsList = ref({ ...defaultData.stringsList })
+	const assetList = ref({ ...defaultData.assetList })
+	const dependencyList = ref({ ...defaultData.dependencyList })
+	const dependencies = ref([]) // Store full dependency objects for socket initialization
+	const permissionFlags = ref([...defaultData.permissionFlags])
+	const triggerState = ref({ ...defaultData.triggerState })
 
 	// User session data (injected by platform in production)
-	const auth = ref(defaultData.auth);
-	const userSession = ref(defaultData.userSession);
-	const pluginData = ref({ ...defaultData.pluginData });
-	const portalAssets = ref({ ...defaultData.portalAssets });
-	const portal = ref(defaultData.portal);
+	const auth = ref(defaultData.auth)
+	const userSession = ref(defaultData.userSession)
+	const pluginData = ref({ ...defaultData.pluginData })
+	const portalAssets = ref({ ...defaultData.portalAssets })
+	const portal = ref(defaultData.portal)
 
-	const apiOperations = ref({});
+	const apiOperations = ref({})
 
 	// Loading state for manifest
-	const manifestLoaded = ref(false);
-	const manifestError = ref(null);
+	const manifestLoaded = ref(false)
+	const manifestError = ref(null)
 
 	// API configuration - initialized from environment
-	const apiConfig = getApiConfig();
-	const apiBaseUrl = ref(apiConfig.apiBaseUrl);
-	const authToken = ref(apiConfig.authToken);
-	pluginVars.value.projectId = apiConfig.projectId;
-	pluginVars.value.apiPageAuthId = apiConfig.authToken;
-	pluginVars.value.apiBaseUrl = apiConfig.apiBaseUrl;
+	const apiConfig = getApiConfig()
+	const apiBaseUrl = ref(apiConfig.apiBaseUrl)
+	const authToken = ref(apiConfig.authToken)
+	pluginVars.value.projectId = apiConfig.projectId
+	pluginVars.value.apiPageAuthId = apiConfig.authToken
+	pluginVars.value.apiBaseUrl = apiConfig.apiBaseUrl
 
 	// Log API configuration for debugging
 	console.log(
-		`[GxP Store] API Environment: ${import.meta.env.VITE_API_ENV || "mock"}`
-	);
-	console.log(`[GxP Store] API Base URL: ${apiConfig.apiBaseUrl}`);
+		`[GxP Store] API Environment: ${import.meta.env.VITE_API_ENV || "mock"}`,
+	)
+	console.log(`[GxP Store] API Base URL: ${apiConfig.apiBaseUrl}`)
 
 	// WebSocket configuration - initialized as reactive objects immediately
-	const sockets = reactive({});
-	const socketConnections = reactive({});
+	const sockets = reactive({})
+	const socketConnections = reactive({})
 
 	// API client setup
 	const apiClient = axios.create({
@@ -160,25 +159,25 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		headers: {
 			"Content-Type": "application/json",
 		},
-	});
+	})
 
 	// Add auth token to requests
 	apiClient.interceptors.request.use((config) => {
 		if (authToken.value) {
-			config.headers.Authorization = `Bearer ${authToken.value}`;
+			config.headers.Authorization = `Bearer ${authToken.value}`
 		}
-		config.baseURL = apiBaseUrl.value;
-		return config;
-	});
+		config.baseURL = apiBaseUrl.value
+		return config
+	})
 
 	// Response interceptor for error handling
 	apiClient.interceptors.response.use(
 		(response) => response,
 		(error) => {
-			console.error("API Error:", error.response?.data || error.message);
-			throw error;
-		}
-	);
+			console.error("API Error:", error.response?.data || error.message)
+			throw error
+		},
+	)
 
 	/**
 	 * Load configuration from app-manifest.json
@@ -189,31 +188,31 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 	 */
 	async function loadManifest() {
 		try {
-			const response = await fetch("/app-manifest.json");
+			const response = await fetch("/app-manifest.json")
 			if (!response.ok) {
 				if (response.status === 404) {
-					console.log("[GxP Store] No app-manifest.json found, using defaults");
-					manifestLoaded.value = true;
-					return;
+					console.log("[GxP Store] No app-manifest.json found, using defaults")
+					manifestLoaded.value = true
+					return
 				}
-				throw new Error(`HTTP ${response.status}`);
+				throw new Error(`HTTP ${response.status}`)
 			}
 
-			const manifest = await response.json();
-			applyManifest(manifest);
-			manifestLoaded.value = true;
-			manifestError.value = null;
-			console.log("[GxP Store] Loaded configuration from app-manifest.json");
+			const manifest = await response.json()
+			applyManifest(manifest)
+			manifestLoaded.value = true
+			manifestError.value = null
+			console.log("[GxP Store] Loaded configuration from app-manifest.json")
 
 			// Re-initialize dependency sockets after manifest loads
-			initializeDependencySockets();
+			initializeDependencySockets()
 		} catch (error) {
 			console.warn(
 				"[GxP Store] Could not load app-manifest.json:",
-				error.message
-			);
-			manifestError.value = error.message;
-			manifestLoaded.value = true;
+				error.message,
+			)
+			manifestError.value = error.message
+			manifestLoaded.value = true
 		}
 	}
 
@@ -222,7 +221,7 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 	 */
 	function applyManifest(manifest) {
 		if (manifest.settings && typeof manifest.settings === "object") {
-			pluginVars.value = { ...defaultData.pluginVars, ...manifest.settings };
+			pluginVars.value = { ...defaultData.pluginVars, ...manifest.settings }
 		}
 
 		// Handle strings - can be { default: {...} } or flat object
@@ -231,31 +230,31 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 				manifest.strings.default &&
 				typeof manifest.strings.default === "object"
 			) {
-				stringsList.value = { ...manifest.strings.default };
+				stringsList.value = { ...manifest.strings.default }
 			} else if (typeof manifest.strings === "object") {
-				stringsList.value = { ...manifest.strings };
+				stringsList.value = { ...manifest.strings }
 			}
 		}
 
 		if (manifest.assets && typeof manifest.assets === "object") {
-			assetList.value = { ...manifest.assets };
+			assetList.value = { ...manifest.assets }
 		}
 
 		if (manifest.dependencies && Array.isArray(manifest.dependencies)) {
-			dependencies.value = manifest.dependencies; // Store full dependency objects
+			dependencies.value = manifest.dependencies // Store full dependency objects
 			dependencyList.value = manifest.dependencies.reduce((acc, dependency) => {
-				acc[dependency.identifier] = "1";
-				return acc;
-			}, {});
-			console.log("[GxP Store] Dependency List:", dependencyList.value);
+				acc[dependency.identifier] = "1"
+				return acc
+			}, {})
+			console.log("[GxP Store] Dependency List:", dependencyList.value)
 		}
 
 		if (manifest.permissions && Array.isArray(manifest.permissions)) {
-			permissionFlags.value = [...manifest.permissions];
+			permissionFlags.value = [...manifest.permissions]
 		}
 
 		if (manifest.triggerState && typeof manifest.triggerState === "object") {
-			triggerState.value = { ...manifest.triggerState };
+			triggerState.value = { ...manifest.triggerState }
 		}
 	}
 
@@ -268,49 +267,55 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 	 *   SOCKET_URL    = explicit socket server URL (overrides auto-detected default)
 	 */
 	function initializeSockets() {
-		const socketDriver = import.meta.env.SOCKET_DRIVER || "io";
+		const socketDriver = import.meta.env.SOCKET_DRIVER || "io"
 
 		if (socketDriver !== "io") {
-			console.log(`[GxP Store] Sockets disabled (SOCKET_DRIVER=${socketDriver})`);
-			return;
+			console.log(
+				`[GxP Store] Sockets disabled (SOCKET_DRIVER=${socketDriver})`,
+			)
+			return
 		}
 
 		// Resolve socket URL — explicit env var takes priority over auto-detected default
 		const socketUrl = (() => {
 			if (import.meta.env.SOCKET_URL) {
-				return import.meta.env.SOCKET_URL;
+				return import.meta.env.SOCKET_URL
 			}
 			const protocol =
 				typeof window !== "undefined" && window.location.protocol === "https:"
 					? "https"
-					: "http";
-			const port = import.meta.env.VITE_SOCKET_IO_PORT || 3069;
-			return `${protocol}://localhost:${port}`;
-		})();
+					: "http"
+			const port = import.meta.env.VITE_SOCKET_IO_PORT || 3069
+			return `${protocol}://localhost:${port}`
+		})()
 
 		if (socketDriver === "io") {
-			console.log(`[GxP Store] Connecting via Socket.IO to ${socketUrl}`);
-			const primarySocket = io(socketUrl);
+			console.log(`[GxP Store] Connecting via Socket.IO to ${socketUrl}`)
+			const primarySocket = io(socketUrl)
 
 			sockets.primary = {
 				broadcast: function (event, data) {
-					primarySocket.emit(event, data);
+					primarySocket.emit(event, data)
 				},
 				listen: function (event, callback) {
-					return primarySocket.on(event, callback);
+					return primarySocket.on(event, callback)
 				},
 				listenForStateChange: function (callback) {
-					return primarySocket.on("state-change", callback);
+					return primarySocket.on("state-change", callback)
 				},
-			};
+			}
 
-			socketConnections.primary = primarySocket;
+			socketConnections.primary = primarySocket
 		} else if (socketDriver === "echo") {
-			console.log(`[GxP Store] Connecting via Laravel Echo to ${socketUrl}`);
+			console.log(`[GxP Store] Connecting via Laravel Echo to ${socketUrl}`)
 			// Echo driver — consumers can extend this via socketConnections.primary
-			console.warn("[GxP Store] Echo driver selected — configure Echo externally via socketConnections.primary");
+			console.warn(
+				"[GxP Store] Echo driver selected — configure Echo externally via socketConnections.primary",
+			)
 		} else {
-			console.warn(`[GxP Store] Unknown SOCKET_DRIVER "${socketDriver}", sockets not initialized`);
+			console.warn(
+				`[GxP Store] Unknown SOCKET_DRIVER "${socketDriver}", sockets not initialized`,
+			)
 		}
 	}
 	/**
@@ -320,7 +325,9 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		// Operations are built from OpenAPI spec paths
 		// Structure: { [operationId]: { method, path, parameters } }
 		try {
-			const specUrl = `${apiBaseUrl.value}/api-specs/openapi.json`
+			const apiDocsBaseUrl =
+				apiEnv === "mock" ? "https://api.gramercy.cloud" : apiBaseUrl.value
+			const specUrl = `${apiDocsBaseUrl}/api-specs/openapi.json`
 			const response = await axios.get(specUrl)
 			const spec = response.data
 
@@ -367,8 +374,8 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 	 * Called after manifest loads to set up dependency-specific listeners
 	 */
 	function initializeDependencySockets() {
-		const primarySocket = socketConnections.primary;
-		if (!primarySocket) return;
+		const primarySocket = socketConnections.primary
+		if (!primarySocket) return
 
 		// Initialize dependency-based sockets based on the new structure
 		if (Array.isArray(dependencies.value)) {
@@ -417,11 +424,11 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 				}
 				if (dependency.events && Object.keys(dependency.events).length > 0) {
 					// Create socket listeners for each event type
-					sockets[dependency.identifier] = {};
+					sockets[dependency.identifier] = {}
 
 					Object.keys(dependency.events).forEach((eventType) => {
-						const eventName = dependency.events[eventType];
-						const channel = `private.${dependency.model}.${dependency.identifier}`;
+						const eventName = dependency.events[eventType]
+						const channel = `private.${dependency.model}.${dependency.identifier}`
 
 						sockets[dependency.identifier][eventType] = {
 							listen: function (callback) {
@@ -429,68 +436,68 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 								return primarySocket.on(eventName, (data) => {
 									console.log(
 										`Socket event received: ${eventName} on ${channel}`,
-										data
-									);
-									callback(data);
-								});
+										data,
+									)
+									callback(data)
+								})
 							},
-						};
-					});
+						}
+					})
 				} else {
 					// For dependencies without events, create empty listeners
 					sockets[dependency.identifier] = {
 						created: { listen: () => () => {} },
 						updated: { listen: () => () => {} },
 						deleted: { listen: () => () => {} },
-					};
+					}
 				}
-			});
+			})
 		}
 	}
 
 	// API methods for common operations
 	async function apiGet(endpoint, params = {}) {
 		try {
-			const response = await apiClient.get(endpoint, { params });
-			return response.data;
+			const response = await apiClient.get(endpoint, { params })
+			return response.data
 		} catch (error) {
-			throw new Error(`GET ${endpoint}: ${error.message}`);
+			throw new Error(`GET ${endpoint}: ${error.message}`)
 		}
 	}
 
 	async function apiPost(endpoint, data = {}) {
 		try {
-			const response = await apiClient.post(endpoint, data);
-			return response.data;
+			const response = await apiClient.post(endpoint, data)
+			return response.data
 		} catch (error) {
-			throw new Error(`POST ${endpoint}: ${error.message}`);
+			throw new Error(`POST ${endpoint}: ${error.message}`)
 		}
 	}
 
 	async function apiPut(endpoint, data = {}) {
 		try {
-			const response = await apiClient.put(endpoint, data);
-			return response.data;
+			const response = await apiClient.put(endpoint, data)
+			return response.data
 		} catch (error) {
-			throw new Error(`PUT ${endpoint}: ${error.message}`);
+			throw new Error(`PUT ${endpoint}: ${error.message}`)
 		}
 	}
 
 	async function apiPatch(endpoint, data = {}) {
 		try {
-			const response = await apiClient.patch(endpoint, data);
-			return response.data;
+			const response = await apiClient.patch(endpoint, data)
+			return response.data
 		} catch (error) {
-			throw new Error(`PATCH ${endpoint}: ${error.message}`);
+			throw new Error(`PATCH ${endpoint}: ${error.message}`)
 		}
 	}
 
 	async function apiDelete(endpoint) {
 		try {
-			const response = await apiClient.delete(endpoint);
-			return response.data;
+			const response = await apiClient.delete(endpoint)
+			return response.data
 		} catch (error) {
-			throw new Error(`DELETE ${endpoint}: ${error.message}`);
+			throw new Error(`DELETE ${endpoint}: ${error.message}`)
 		}
 	}
 	async function callApi(operationId, identifier, data = {}) {
@@ -500,8 +507,7 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		}
 		let operationConfig = apiOperations.value[operationId]
 		if (!operationConfig) {
-			operationConfig =
-				apiOperations.value["portal.v1.project." + operationId]
+			operationConfig = apiOperations.value["portal.v1.project." + operationId]
 			if (!operationConfig) {
 				throw new Error(`Operation not found: portal.v1.${operationId}`)
 			}
@@ -580,7 +586,7 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		if (identifier && bodyData[identifier] !== undefined) {
 			delete bodyData[identifier]
 		}
-		
+
 		try {
 			let response
 			if (method === "get" || method === "delete") {
@@ -606,7 +612,6 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 			throw new Error(`${method.toUpperCase()} ${resolvedPath}: ${message}`)
 		}
 
-
 		// try {
 		// 	const operationConfig = apiOperations.value[identifier][operation];
 		// 	if (!operationConfig) {
@@ -624,79 +629,90 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 
 	// Utility methods
 	function getString(key, fallback = "") {
-		return stringsList.value[key] || fallback;
+		return stringsList.value[key] || fallback
 	}
 
 	function getSetting(key, fallback = null) {
-		return pluginVars.value[key] || fallback;
+		return pluginVars.value[key] || fallback
 	}
 
 	function getAsset(key, fallback = "") {
-		return assetList.value[key] || fallback;
+		return assetList.value[key] || fallback
 	}
 
 	function getState(key, fallback = null) {
-		return triggerState.value[key] || fallback;
+		return triggerState.value[key] || fallback
 	}
 	function findDependency(identifier) {
-		if (Array.isArray(dependencyList.value)) {
-			return dependencyList.value.find((dep) => dep.identifier === identifier);
-		}
-		return null;
+		return dependencyList.value[identifier]
 	}
 	function hasPermission(flag) {
-		return permissionFlags.value.includes(flag);
+		return permissionFlags.value.includes(flag)
 	}
 
 	// Update methods - these replace the entire object to ensure Vue reactivity triggers
 	// Used by DevTools and for programmatic updates
 	function updateString(key, value) {
-		stringsList.value = { ...stringsList.value, [key]: value };
+		stringsList.value = { ...stringsList.value, [key]: value }
 	}
 
 	function updateSetting(key, value) {
-		pluginVars.value = { ...pluginVars.value, [key]: value };
+		pluginVars.value = { ...pluginVars.value, [key]: value }
 	}
 
 	function updateAsset(key, value) {
-		assetList.value = { ...assetList.value, [key]: value };
+		assetList.value = { ...assetList.value, [key]: value }
 	}
 
 	function updateState(key, value) {
-		triggerState.value = { ...triggerState.value, [key]: value };
+		triggerState.value = { ...triggerState.value, [key]: value }
 	}
 
 	// Convenience method to add dev assets with proper URL
 	function addDevAsset(key, filename) {
 		const appPort =
-			typeof window !== "undefined" ? window.location.port || 3000 : 3000;
+			typeof window !== "undefined" ? window.location.port || 3000 : 3000
 		const appProtocol =
-			typeof window !== "undefined" ? window.location.protocol : "http:";
-		const assetUrl = `${appProtocol}//localhost:${appPort}/dev-assets/images/${filename}`;
-		updateAsset(key, assetUrl);
+			typeof window !== "undefined" ? window.location.protocol : "http:"
+		const assetUrl = `${appProtocol}//localhost:${appPort}/dev-assets/images/${filename}`
+		updateAsset(key, assetUrl)
 	}
 
-	// Socket helper methods
-	function emitSocket(socketName, event, data) {
-		if (sockets[socketName] && sockets[socketName].broadcast) {
-			sockets[socketName].broadcast(event, data);
+	// Standard Socket helper methods
+	function listen(socketName, event, callback) {
+		if (sockets[socketName] && sockets[socketName].listen) {
+			return sockets[socketName].listen(event, callback)
 		} else {
-			console.warn(`Socket not found: ${socketName}`);
+			console.warn(`Socket not found: ${socketName}`)
+			return () => {}
 		}
 	}
 
-	function listenSocket(socketName, event, callback) {
-		if (sockets[socketName] && sockets[socketName].listen) {
-			return sockets[socketName].listen(event, callback);
-		} else {
-			console.warn(`Socket not found: ${socketName}`);
-			return () => {};
+	function broadcast(socketName, event, data) {
+		try {
+			if (sockets[socketName] && sockets[socketName].broadcast) {
+				sockets[socketName].broadcast(event, data)
+			} else {
+				console.warn(`Socket not found: ${socketName}`)
+			}
+			return true
+		} catch (error) {
+			console.error(`Error broadcasting on socket ${socketName}:`, error)
+			return false
 		}
 	}
 
-	// Component helper - allows components to register socket listeners easily
+	// deprecated helpers: maintain legacy support
+	function emitSocket(socketName, event, data) {
+		return broadcast(socketName, event, data)
+	}
+
+	function listenSocket(socketName, event, callback) {
+		return listen(socketName, event, callback)
+	}
+
 	function useSocketListener(socketName, event, callback) {
-		return listenSocket(socketName, event, callback);
+		return listenSocket(socketName, event, callback)
 	}
 
 	// Theme configuration
@@ -706,43 +722,43 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		primary_color: getSetting("primary_color", "#FFD600"),
 		start_background_color: getSetting(
 			"start_background_color",
-			"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+			"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
 		),
 		start_text_color: getSetting("start_text_color", "#ffffff"),
 		final_background_color: getSetting("final_background_color", "#4CAF50"),
 		final_text_color: getSetting("final_text_color", "#ffffff"),
-	}));
+	}))
 
 	function listAssets() {
-		console.log("📁 Current Assets:");
+		console.log("📁 Current Assets:")
 		Object.entries(assetList.value).forEach(([key, url]) => {
-			console.log(`   ${key}: ${url}`);
-		});
-		return assetList.value;
+			console.log(`   ${key}: ${url}`)
+		})
+		return assetList.value
 	}
 
 	// Initialize sockets SYNCHRONOUSLY when store is created
 	// This ensures sockets is available immediately
-	initializeSockets();
+	initializeSockets()
 	initializeApiOperations()
 	// Load manifest ASYNCHRONOUSLY in the background
 	// This allows the store to be used immediately while manifest loads
-	loadManifest();
+	loadManifest()
 
 	// Setup Vite HMR for app-manifest.json hot-reload
 	if (import.meta.hot) {
 		// Listen for custom HMR event from Vite plugin
 		import.meta.hot.on("gxp:manifest-update", (data) => {
-			console.log("[GxP Store] Hot-reloading app-manifest.json");
-			applyManifest(data);
-			initializeDependencySockets();
-		});
+			console.log("[GxP Store] Hot-reloading app-manifest.json")
+			applyManifest(data)
+			initializeDependencySockets()
+		})
 
 		// Also support full-reload trigger if needed
 		import.meta.hot.on("gxp:manifest-reload", () => {
-			console.log("[GxP Store] Reloading app-manifest.json");
-			loadManifest();
-		});
+			console.log("[GxP Store] Reloading app-manifest.json")
+			loadManifest()
+		})
 	}
 
 	return {
@@ -789,6 +805,8 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 		// Socket methods
 		emitSocket,
 		listenSocket,
+		listen,
+		broadcast,
 		useSocketListener,
 
 		// Manifest methods
@@ -797,5 +815,5 @@ export const useGxpStore = defineStore("gxp-portal-app", () => {
 
 		// Development methods
 		listAssets,
-	};
-});
+	}
+})