@mundogamernetwork/shared-ui 1.2.5 → 1.2.7

package/nuxt.config.ts

@@ -61,6 +61,36 @@ export default defineNuxtConfig({
 			priority: SHARED_UI_COMPONENT_PRIORITY,
 		},
 	],
+	// @pinia/nuxt only auto-scans the top-level app's own storesDirs by
+	// default — it does NOT pick up an extended layer's stores/ directory on
+	// its own. Every consuming app previously had to hand-list these specific
+	// files in its own nuxt.config.ts pinia.storesDirs (see tv-frontend/
+	// community-frontend/agency-frontend history) — easy to forget for new
+	// apps and a real cause of a production 500 (useAnnouncementStore /
+	// useAppInstallBannerStore "is not defined") when tv-frontend's list
+	// went stale relative to shared-ui.
+	//
+	// Nuxt/c12 merges extended-layer config via defu, which concatenates
+	// arrays, so declaring these here gets picked up by every consumer
+	// automatically without they having to list them — consumers can still
+	// add their own storesDirs entries and this list just gets appended.
+	//
+	// Deliberately an explicit file list, NOT "${packageRoot}/stores/**" —
+	// shared-ui also ships auth/chat/contact/institutional/index stores that
+	// collide by name with consuming apps' own, more full-featured local
+	// versions; a full glob would silently override them.
+	//
+	// Absolute paths (via packageRoot), same reasoning as the components dir
+	// above: a relative path here resolves against the *consuming app's*
+	// srcDir when this file is loaded as an extended layer, not shared-ui's
+	// own directory.
+	pinia: {
+		storesDirs: [
+			`${packageRoot}/stores/announcement.ts`,
+			`${packageRoot}/stores/appInstallBanner.ts`,
+			`${packageRoot}/stores/promotion.ts`,
+		],
+	},
 	css: [
 		"@mundogamernetwork/shared-ui/assets/kit/kit-base.css",
 		"@mundogamernetwork/shared-ui/assets/kit/kit-theme.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -1427,62 +1427,6 @@ onMounted(async () => {
 						}
 					}
 
-					.users-modal {
-						position: fixed;
-						inset: 0;
-						z-index: 1000;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
-
-						.users-modal-content {
-							width: 100%;
-							max-width: 360px;
-							max-height: 70vh;
-							background: var(--button-secondary-default-bg);
-							display: flex;
-							flex-direction: column;
-						}
-
-						.users-modal-header {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							padding: 16px;
-							font-size: 14px;
-							font-weight: 600;
-							color: var(--card-article-title);
-							border-bottom: 1px solid var(--bg-app-badge);
-
-							.close-button { background: transparent; border: none; color: var(--secondary-info-fg); cursor: pointer; }
-						}
-
-						.users-modal-body {
-							overflow-y: auto;
-							padding: 8px 16px;
-						}
-
-						.users-modal-empty {
-							padding: 24px 0;
-							text-align: center;
-							font-size: 13px;
-							color: var(--secondary-info-fg);
-						}
-
-						.users-modal-row {
-							display: flex;
-							align-items: center;
-							gap: 10px;
-							padding: 10px 0;
-							border-bottom: 1px solid var(--bg-app-badge);
-							&:last-child { border-bottom: none; }
-
-							img { width: 36px; height: 36px; border-radius: 0; }
-							span { font-size: 13px; color: var(--card-article-title); }
-						}
-					}
-
 					.company {
 						display: flex;
 						gap: 12px;
@@ -1524,4 +1468,65 @@ onMounted(async () => {
 		}
 	}
 }
+
+// Top-level (not nested under #shared-campaign-detail's inner selectors) —
+// this is a fixed full-screen overlay rendered as a sibling of .actions in
+// the template, not a descendant, so it can't be scoped under .actions/
+// .side-border/.cards like the rest of this file without the compiled
+// descendant selector silently never matching (which is what broke it).
+.users-modal {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
+
+	.users-modal-content {
+		width: 100%;
+		max-width: 360px;
+		max-height: 70vh;
+		background: var(--button-secondary-default-bg);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.users-modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px;
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--card-article-title);
+		border-bottom: 1px solid var(--bg-app-badge);
+
+		.close-button { background: transparent; border: none; color: var(--secondary-info-fg); cursor: pointer; }
+	}
+
+	.users-modal-body {
+		overflow-y: auto;
+		padding: 8px 16px;
+	}
+
+	.users-modal-empty {
+		padding: 24px 0;
+		text-align: center;
+		font-size: 13px;
+		color: var(--secondary-info-fg);
+	}
+
+	.users-modal-row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 0;
+		border-bottom: 1px solid var(--bg-app-badge);
+		&:last-child { border-bottom: none; }
+
+		img { width: 36px; height: 36px; border-radius: 100%; object-fit: cover; }
+		span { font-size: 13px; color: var(--card-article-title); }
+	}
+}
 </style>