npm - @gxp-dev/tools - Versions diffs - 2.0.5 - Mend

@gxp-dev/tools 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/.github/workflows/npm-publish.yml +48 -0
package/CLAUDE.md +400 -0
package/README.md +247 -0
package/REFACTOR_PLAN.md +194 -0
package/bin/gx-devtools.js +87 -0
package/bin/lib/cli.js +251 -0
package/bin/lib/commands/assets.js +337 -0
package/bin/lib/commands/build.js +259 -0
package/bin/lib/commands/datastore.js +433 -0
package/bin/lib/commands/dev.js +328 -0
package/bin/lib/commands/extensions.js +298 -0
package/bin/lib/commands/index.js +35 -0
package/bin/lib/commands/init.js +307 -0
package/bin/lib/commands/publish.js +189 -0
package/bin/lib/commands/socket.js +158 -0
package/bin/lib/commands/ssl.js +47 -0
package/bin/lib/constants.js +120 -0
package/bin/lib/tui/App.tsx +600 -0
package/bin/lib/tui/components/CommandInput.tsx +278 -0
package/bin/lib/tui/components/GeminiPanel.tsx +161 -0
package/bin/lib/tui/components/Header.tsx +27 -0
package/bin/lib/tui/components/LogPanel.tsx +122 -0
package/bin/lib/tui/components/TabBar.tsx +56 -0
package/bin/lib/tui/components/WelcomeScreen.tsx +80 -0
package/bin/lib/tui/index.tsx +63 -0
package/bin/lib/tui/services/ExtensionService.ts +122 -0
package/bin/lib/tui/services/GeminiService.ts +395 -0
package/bin/lib/tui/services/ServiceManager.ts +336 -0
package/bin/lib/tui/services/SocketService.ts +204 -0
package/bin/lib/tui/services/ViteService.ts +107 -0
package/bin/lib/tui/services/index.ts +13 -0
package/bin/lib/utils/files.js +180 -0
package/bin/lib/utils/index.js +17 -0
package/bin/lib/utils/paths.js +138 -0
package/bin/lib/utils/prompts.js +71 -0
package/bin/lib/utils/ssl.js +233 -0
package/browser-extensions/README.md +1 -0
package/browser-extensions/chrome/background.js +857 -0
package/browser-extensions/chrome/content.js +51 -0
package/browser-extensions/chrome/devtools.html +9 -0
package/browser-extensions/chrome/devtools.js +23 -0
package/browser-extensions/chrome/icons/gx_off_128.png +0 -0
package/browser-extensions/chrome/icons/gx_off_16.png +0 -0
package/browser-extensions/chrome/icons/gx_off_32.png +0 -0
package/browser-extensions/chrome/icons/gx_off_64.png +0 -0
package/browser-extensions/chrome/icons/gx_on_128.png +0 -0
package/browser-extensions/chrome/icons/gx_on_16.png +0 -0
package/browser-extensions/chrome/icons/gx_on_32.png +0 -0
package/browser-extensions/chrome/icons/gx_on_64.png +0 -0
package/browser-extensions/chrome/inspector.js +1087 -0
package/browser-extensions/chrome/manifest.json +70 -0
package/browser-extensions/chrome/panel.html +638 -0
package/browser-extensions/chrome/panel.js +862 -0
package/browser-extensions/chrome/popup.html +399 -0
package/browser-extensions/chrome/popup.js +515 -0
package/browser-extensions/chrome/rules.json +1 -0
package/browser-extensions/chrome/test-chrome.html +145 -0
package/browser-extensions/chrome/test-mixed-content.html +190 -0
package/browser-extensions/chrome/test-uri-pattern.html +199 -0
package/browser-extensions/firefox/README.md +134 -0
package/browser-extensions/firefox/background.js +804 -0
package/browser-extensions/firefox/content.js +120 -0
package/browser-extensions/firefox/debug-errors.html +229 -0
package/browser-extensions/firefox/debug-https.html +113 -0
package/browser-extensions/firefox/devtools.html +9 -0
package/browser-extensions/firefox/devtools.js +24 -0
package/browser-extensions/firefox/icons/gx_off_128.png +0 -0
package/browser-extensions/firefox/icons/gx_off_16.png +0 -0
package/browser-extensions/firefox/icons/gx_off_32.png +0 -0
package/browser-extensions/firefox/icons/gx_off_64.png +0 -0
package/browser-extensions/firefox/icons/gx_on_128.png +0 -0
package/browser-extensions/firefox/icons/gx_on_16.png +0 -0
package/browser-extensions/firefox/icons/gx_on_32.png +0 -0
package/browser-extensions/firefox/icons/gx_on_64.png +0 -0
package/browser-extensions/firefox/inspector.js +1087 -0
package/browser-extensions/firefox/manifest.json +67 -0
package/browser-extensions/firefox/panel.html +638 -0
package/browser-extensions/firefox/panel.js +862 -0
package/browser-extensions/firefox/popup.html +525 -0
package/browser-extensions/firefox/popup.js +536 -0
package/browser-extensions/firefox/test-gramercy.html +126 -0
package/browser-extensions/firefox/test-imports.html +58 -0
package/browser-extensions/firefox/test-masking.html +147 -0
package/browser-extensions/firefox/test-uri-pattern.html +199 -0
package/docs/DOCUSAURUS_IMPORT.md +378 -0
package/docs/_category_.json +8 -0
package/docs/app-manifest.md +272 -0
package/docs/building-for-platform.md +315 -0
package/docs/dev-tools.md +291 -0
package/docs/getting-started.md +180 -0
package/docs/gxp-store.md +305 -0
package/docs/index.md +44 -0
package/package.json +77 -0
package/runtime/PortalContainer.vue +326 -0
package/runtime/dev-tools/DevToolsModal.vue +217 -0
package/runtime/dev-tools/LayoutSwitcher.vue +221 -0
package/runtime/dev-tools/MockDataEditor.vue +621 -0
package/runtime/dev-tools/SocketSimulator.vue +562 -0
package/runtime/dev-tools/StoreInspector.vue +644 -0
package/runtime/dev-tools/index.js +6 -0
package/runtime/gxpStringsPlugin.js +428 -0
package/runtime/index.html +22 -0
package/runtime/main.js +32 -0
package/runtime/mock-api/auth-middleware.js +97 -0
package/runtime/mock-api/image-generator.js +221 -0
package/runtime/mock-api/index.js +197 -0
package/runtime/mock-api/response-generator.js +394 -0
package/runtime/mock-api/route-generator.js +323 -0
package/runtime/mock-api/socket-triggers.js +371 -0
package/runtime/mock-api/spec-loader.js +300 -0
package/runtime/server.js +180 -0
package/runtime/stores/gxpPortalConfigStore.js +554 -0
package/runtime/stores/index.js +6 -0
package/runtime/vite-inspector-plugin.js +749 -0
package/runtime/vite-source-tracker-plugin.js +232 -0
package/runtime/vite.config.js +402 -0
package/scripts/launch-chrome.js +90 -0
package/scripts/pack-chrome.js +91 -0
package/socket-events/AiSessionMessageCreated.json +18 -0
package/socket-events/SocialStreamPostCreated.json +24 -0
package/socket-events/SocialStreamPostVariantCompleted.json +23 -0
package/template/README.md +332 -0
package/template/app-manifest.json +32 -0
package/template/dev-assets/images/avatar-placeholder.png +0 -0
package/template/dev-assets/images/background-placeholder.jpg +0 -0
package/template/dev-assets/images/banner-placeholder.jpg +0 -0
package/template/dev-assets/images/icon-placeholder.png +0 -0
package/template/dev-assets/images/logo-placeholder.png +0 -0
package/template/dev-assets/images/product-placeholder.jpg +0 -0
package/template/dev-assets/images/thumbnail-placeholder.jpg +0 -0
package/template/env.example +51 -0
package/template/gitignore +53 -0
package/template/index.html +22 -0
package/template/main.js +28 -0
package/template/src/DemoPage.vue +459 -0
package/template/src/Plugin.vue +38 -0
package/template/src/stores/index.js +9 -0
package/template/src/stores/test-data.json +173 -0
package/template/theme-layouts/AdditionalStyling.css +0 -0
package/template/theme-layouts/PrivateLayout.vue +39 -0
package/template/theme-layouts/PublicLayout.vue +39 -0
package/template/theme-layouts/SystemLayout.vue +39 -0
package/template/vite.config.js +333 -0
package/tsconfig.tui.json +21 -0
package/vite.config.js +164 -0

package/template/gitignore ADDED Viewed

@@ -0,0 +1,53 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+# Build output
+dist/
+dist-ssr/
+*.local
+# Environment files
+.env
+.env.local
+.env.*.local
+# SSL certificates
+.certs/
+# Development assets (optional - uncomment to ignore)
+# dev-assets/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.swp
+*~
+# OS files
+.DS_Store
+Thumbs.db
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+# Testing
+coverage/
+.nyc_output/
+# Temporary files
+tmp/
+temp/
+*.tmp

package/template/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GxP Plugin Builder</title>
+    <script type="module">
+        import * as Vue from '/node_modules/vue/dist/vue.esm-bundler.js';
+        window.Vue = Vue;
+        import * as Pinia from '/node_modules/pinia/dist/pinia.esm-browser.js';
+        window.Pinia = Pinia;
+    </script>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/template/main.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { createApp } from "vue";
+import * as Vue from "vue";
+import * as Pinia from "pinia";
+// Expose Vue, Pinia, and store to window for browser console access and platform compatibility
+// This allows dynamically loaded plugins to use the same Vue/Pinia instances
+window.Vue = Vue;
+window.Pinia = Pinia;
+// Import PortalContainer from the toolkit's runtime
+import App from "@gx-runtime/PortalContainer.vue";
+const app = createApp(App);
+app.use(pinia);
+import { useGxpStore, pinia } from "@/stores/index.js";
+import { createGxpStringsPlugin } from "@gx-runtime/gxpStringsPlugin.js";
+// window.pinia = pinia; // The active pinia instance
+window.useGxpStore = { useGxpStore };
+// Initialize the GxP store and register the strings plugin
+const gxpStore = useGxpStore();
+app.use(createGxpStringsPlugin(gxpStore));
+app.mount("#app");

package/template/src/DemoPage.vue ADDED Viewed

@@ -0,0 +1,459 @@
+<template>
+	<div class="plugin-container">
+	  <!-- Example usage of the GxP Datastore -->
+	  <div class="content-wrapper">
+		<h1 gxp-string="welcome_text">Welcome!</h1>
+		<div class="info-section">
+		  <h2>Plugin Information</h2>
+		  <p><strong>Primary Color:</strong> <span gxp-string="primary_color"></span></p>
+		  <p><strong>Project ID:</strong> <span gxp-settings gxp-string="projectId"></span></p>
+		  <p><strong>Environment:</strong> <span gxp-settings gxp-string="environment"></span></p>
+		</div>
+		<div class="assets-section">
+		  <h2>Assets</h2>
+		  <img
+			v-if="gxpStore.getAsset('main_logo')"
+			:src="gxpStore.getAsset('main_logo')"
+			alt="Main Logo"
+			class="logo"
+		  />
+		  <div class="asset-controls">
+			<button @click="addDevAssets" class="action-btn secondary small">
+			  Add Dev Assets
+			</button>
+			<button @click="listAllAssets" class="action-btn secondary small">
+			  List Assets
+			</button>
+			<button @click="updateLogo" class="action-btn secondary small">
+			  Update Logo
+			</button>
+		  </div>
+		  <div v-if="currentAssets" class="asset-preview">
+			<h3>Current Assets:</h3>
+			<div v-for="(url, key) in currentAssets" :key="key" class="asset-item">
+			  <strong>{{ key }}:</strong>
+			  <a :href="url" target="_blank" class="asset-link">{{ url }}</a>
+			</div>
+		  </div>
+		</div>
+		<div class="actions-section">
+		  <button
+			@click="handleApiCall"
+			class="action-btn"
+			:style="{ backgroundColor: gxpStore.getSetting('primary_color') }"
+		  >
+			{{ gxpStore.getString('continue_button', 'Continue') }}
+		  </button>
+		  <button
+			@click="handleSocketTest"
+			class="action-btn secondary"
+		  >
+			Test Socket
+		  </button>
+		  <button
+			@click="props.router?.visit('/start')"
+			class="action-btn secondary"
+		  >
+			{{ gxpStore.getString('back_button', 'Back') }}
+		  </button>
+		</div>
+		<div class="permissions-section">
+		  <h2>Permissions</h2>
+		  <ul>
+			<li v-for="permission in ['can_access_camera', 'can_save_data', 'can_share_content']" :key="permission">
+			  {{ permission }}:
+			  <span :class="gxpStore.hasPermission(permission) ? 'granted' : 'denied'">
+				{{ gxpStore.hasPermission(permission) ? 'Granted' : 'Denied' }}
+			  </span>
+			</li>
+		  </ul>
+		</div>
+		<div class="dependencies-section">
+		  <h2>Available Dependencies</h2>
+		  <div v-if="Array.isArray(gxpStore.dependencyList)">
+			<div v-for="dependency in gxpStore.dependencyList" :key="dependency.identifier" class="dependency-item">
+			  <h3>{{ dependency.identifier }}</h3>
+			  <p><strong>Model:</strong> {{ dependency.model }}</p>
+			  <p><strong>Events:</strong> {{ Object.keys(dependency.events || {}).join(', ') || 'None' }}</p>
+			  <button
+				@click="testDependencyAPI(dependency.identifier)"
+				class="action-btn secondary small"
+			  >
+				Test API
+			  </button>
+			  <button
+				v-if="dependency.events && Object.keys(dependency.events).length > 0"
+				@click="setupDependencyListeners(dependency)"
+				class="action-btn secondary small"
+			  >
+				Listen for Events
+			  </button>
+			</div>
+		  </div>
+		  <div v-else>
+			<ul>
+			  <li v-for="(id, key) in gxpStore.dependencyList" :key="key">
+				{{ key }}: {{ id }}
+			  </li>
+			</ul>
+		  </div>
+		</div>
+		<!-- Example of how to use socket listeners -->
+		<div class="socket-section">
+		  <h2>Socket Events</h2>
+		  <button @click="emitTestEvent" class="action-btn secondary">
+			Emit Test Event
+		  </button>
+		  <div v-if="socketMessages.length > 0" class="socket-messages">
+			<h3>Received Messages:</h3>
+			<ul>
+			  <li v-for="(message, index) in socketMessages" :key="index">
+				{{ message }}
+			  </li>
+			</ul>
+		  </div>
+		</div>
+		<!-- Complete button -->
+		<div class="complete-section">
+		  <button
+			@click="props.router?.visit('/final')"
+			class="action-btn complete"
+			:style="{ backgroundColor: gxpStore.getSetting('final_background_color') }"
+		  >
+			Complete Experience
+		  </button>
+		</div>
+	  </div>
+	</div>
+  </template>
+  <style scoped>
+  .plugin-container {
+	padding: 20px;
+	max-width: 800px;
+	margin: 0 auto;
+	font-family: Arial, sans-serif;
+  }
+  .content-wrapper {
+	background: white;
+	border-radius: 8px;
+	padding: 30px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  h1 {
+	color: v-bind('gxpStore.getSetting("primary_color")');
+	text-align: center;
+	margin-bottom: 30px;
+  }
+  h2 {
+	color: #333;
+	border-bottom: 2px solid #eee;
+	padding-bottom: 10px;
+	margin: 20px 0 15px 0;
+  }
+  .info-section,
+  .assets-section,
+  .actions-section,
+  .permissions-section,
+  .dependencies-section,
+  .socket-section,
+  .complete-section {
+	margin: 20px 0;
+  }
+  .logo {
+	max-width: 200px;
+	height: auto;
+	display: block;
+	margin: 10px 0;
+  }
+  .action-btn {
+	background-color: #007bff;
+	color: white;
+	border: none;
+	padding: 12px 24px;
+	margin: 5px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 16px;
+	transition: background-color 0.3s;
+  }
+  .action-btn:hover {
+	opacity: 0.9;
+  }
+  .action-btn.secondary {
+	background-color: #6c757d;
+  }
+  .action-btn.complete {
+	background-color: #28a745;
+	font-size: 18px;
+	padding: 15px 30px;
+	display: block;
+	margin: 20px auto 0;
+  }
+  .granted {
+	color: #28a745;
+	font-weight: bold;
+  }
+  .denied {
+	color: #dc3545;
+	font-weight: bold;
+  }
+  .socket-messages {
+	background: #f8f9fa;
+	padding: 15px;
+	border-radius: 4px;
+	margin-top: 10px;
+  }
+  .dependency-item {
+	background: #f8f9fa;
+	padding: 15px;
+	margin: 10px 0;
+	border-radius: 4px;
+	border-left: 4px solid #007bff;
+  }
+  .dependency-item h3 {
+	margin: 0 0 10px 0;
+	color: #007bff;
+  }
+  .action-btn.small {
+	padding: 8px 16px;
+	font-size: 14px;
+	margin: 2px;
+  }
+  ul {
+	list-style-type: none;
+	padding: 0;
+  }
+  li {
+	padding: 5px 0;
+	border-bottom: 1px solid #eee;
+  }
+  li:last-child {
+	border-bottom: none;
+  }
+  .asset-controls {
+	margin: 15px 0;
+  }
+  .asset-preview {
+	background: #f8f9fa;
+	padding: 15px;
+	border-radius: 4px;
+	margin-top: 15px;
+  }
+  .asset-preview h3 {
+	margin: 0 0 10px 0;
+	color: #333;
+  }
+  .asset-item {
+	margin: 8px 0;
+	padding: 8px;
+	background: white;
+	border-radius: 4px;
+	border-left: 3px solid #007bff;
+  }
+  .asset-link {
+	color: #007bff;
+	text-decoration: none;
+	word-break: break-all;
+  }
+  .asset-link:hover {
+	text-decoration: underline;
+  }
+  </style>
+  <script setup>
+  defineOptions({
+	inheritAttrs: false,
+  });
+  import { ref, onMounted, onUnmounted } from 'vue';
+  // Initialize the GxP store
+  import { useGxpStore } from "@/stores/gxpPortalConfigStore";
+  const gxpStore = useGxpStore();
+  // Define props (router will be passed from platform)
+  const props = defineProps({
+	router: {
+	  type: Object,
+	  required: false,
+	  default: () => ({
+		visit: (url, options) => console.log('Router not available:', url, options)
+	  }),
+	},
+  });
+  // Router is now available as props.router for navigation
+  // Local state
+  const socketMessages = ref([]);
+  const socketUnsubscribers = ref([]);
+  const currentAssets = ref(null);
+  // Example API call using the store
+  async function handleApiCall() {
+	try {
+	  console.log('Making API call...');
+	  // Example API call - this would work with your actual API
+	  // const result = await gxpStore.apiGet('/some-endpoint');
+	  // console.log('API Result:', result);
+	  // For demo purposes, simulate API call
+	  setTimeout(() => {
+		console.log('Simulated API call completed');
+	  }, 1000);
+	} catch (error) {
+	  console.error('API call failed:', error);
+	}
+  }
+  // Example dependency API call using new methods
+  async function testDependencyAPI(identifier) {
+	try {
+	  console.log(`Testing API for dependency: ${identifier}`);
+	  // Example of the new getList method
+	  // const result = await gxpStore.getList(identifier, { page: 1, limit: 10 });
+	  // console.log(`API Result for ${identifier}:`, result);
+	  // For demo purposes, simulate API call
+	  socketMessages.value.unshift(`API call simulated for ${identifier}`);
+	} catch (error) {
+	  console.error(`API call failed for ${identifier}:`, error);
+	  socketMessages.value.unshift(`API call failed for ${identifier}: ${error.message}`);
+	}
+  }
+  // Set up socket listeners for a specific dependency
+  function setupDependencyListeners(dependency) {
+	console.log(`Setting up listeners for ${dependency.identifier}`);
+	// Set up listeners for each event type
+	Object.keys(dependency.events || {}).forEach(eventType => {
+	  const eventName = dependency.events[eventType];
+	  if (gxpStore.sockets[dependency.identifier] && gxpStore.sockets[dependency.identifier][eventType]) {
+		const unsubscribe = gxpStore.sockets[dependency.identifier][eventType].listen((data) => {
+		  console.log(`Received ${eventType} event for ${dependency.identifier}:`, data);
+		  socketMessages.value.unshift(
+			`${dependency.identifier}.${eventType}: ${data.message || JSON.stringify(data).substring(0, 50)}...`
+		  );
+		});
+		socketUnsubscribers.value.push(unsubscribe);
+	  }
+	});
+	socketMessages.value.unshift(`Listening for events on ${dependency.identifier}`);
+  }
+  // Example socket functionality
+  function handleSocketTest() {
+	// Emit a test event
+	gxpStore.emitSocket('primary', 'test-event', { message: 'Hello from plugin!' });
+	console.log('Emitted test event via socket');
+  }
+  function emitTestEvent() {
+	const timestamp = new Date().toLocaleTimeString();
+	gxpStore.emitSocket('primary', 'plugin-message', {
+	  message: `Test message at ${timestamp}`,
+	  timestamp: Date.now()
+	});
+	socketMessages.value.unshift(`Sent: Test message at ${timestamp}`);
+  }
+  // Asset management methods
+  function addDevAssets() {
+	// Add some development assets using the convenience method
+	gxpStore.addDevAsset('main_logo', 'logo-placeholder.png');
+	gxpStore.addDevAsset('background_image', 'background-placeholder.jpg');
+	gxpStore.addDevAsset('product_image', 'product-placeholder.jpg');
+	gxpStore.addDevAsset('avatar_placeholder', 'avatar-placeholder.png');
+	console.log('Added development assets');
+	listAllAssets();
+  }
+  function listAllAssets() {
+	currentAssets.value = gxpStore.listAssets();
+	console.log('Listed all assets');
+  }
+  function updateLogo() {
+	// Example of updating a specific asset
+	const appPort = window.location.port || 3000;
+	const appProtocol = window.location.protocol || 'http';
+	const newLogoUrl = `${appProtocol}://localhost:${appPort}/dev-assets/images/logo-placeholder.png`;
+	gxpStore.updateAsset('main_logo', newLogoUrl);
+	console.log('Updated logo asset');
+	listAllAssets();
+  }
+  // Set up socket listeners when component mounts
+  onMounted(() => {
+	// Listen for test events
+	const unsubscribe1 = gxpStore.useSocketListener('primary', 'test-response', (data) => {
+	  console.log('Received test response:', data);
+	  socketMessages.value.unshift(`Received: ${JSON.stringify(data)}`);
+	});
+	// Listen for any incoming messages
+	const unsubscribe2 = gxpStore.useSocketListener('primary', 'incoming-message', (data) => {
+	  console.log('Received incoming message:', data);
+	  socketMessages.value.unshift(`Incoming: ${data.message || JSON.stringify(data)}`);
+	});
+	// Store unsubscribers for cleanup
+	socketUnsubscribers.value = [unsubscribe1, unsubscribe2];
+	console.log('Plugin component mounted with GxP Datastore');
+	console.log('Available store methods:', Object.keys(gxpStore));
+  });
+  // Clean up socket listeners when component unmounts
+  onUnmounted(() => {
+	socketUnsubscribers.value.forEach(unsubscribe => {
+	  if (typeof unsubscribe === 'function') {
+		unsubscribe();
+	  }
+	});
+  });
+  </script>

package/template/src/Plugin.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+    <!-- Your Custom Plugin Content -->
+    <DemoPage
+        :router="mockRouter"
+    />
+  </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) => {
+    console.log('🔗 GXP Store: State change event received', event);
+  })
+  </script>

package/template/src/stores/index.js ADDED Viewed

@@ -0,0 +1,9 @@
+// Import from package runtime directory by default
+// To customize, run: gxdev publish gxpPortalConfigStore.js
+// Then update this import to: import { useGxpStore } from './gxpPortalConfigStore.js';
+import { useGxpStore } from "@gramercytech/gx-devtools/runtime/stores/gxpPortalConfigStore";
+// Expose to window for platform compatibility and externalized imports
+window.useGxpStore = useGxpStore;
+export { useGxpStore };