@alliance-droid/status-feedback-system 0.3.1 → 0.3.3

package/dist/components/DevFeedback.svelte

@@ -106,11 +106,10 @@
 			originalConsoleError.apply(console, args);
 		};
 
-		// Middle-click handler
-		document.addEventListener('auxclick', handleAuxClick);
+		// Ctrl+Right-click handler
+		document.addEventListener('contextmenu', handleContextMenu);
 		// Close menu on any other click
 		document.addEventListener('click', closeMenu);
-		document.addEventListener('contextmenu', closeMenu);
 		// Escape closes everything
 		document.addEventListener('keydown', handleKeydown);
 
@@ -125,15 +124,14 @@
 	onDestroy(() => {
 		if (!isEnabled) return;
 		if (originalConsoleError) console.error = originalConsoleError;
-		document.removeEventListener('auxclick', handleAuxClick);
+		document.removeEventListener('contextmenu', handleContextMenu);
 		document.removeEventListener('click', closeMenu);
-		document.removeEventListener('contextmenu', closeMenu);
 		document.removeEventListener('keydown', handleKeydown);
 	});
 
-	function handleAuxClick(e: MouseEvent) {
-		// Button 1 = middle click
-		if (e.button !== 1) return;
+	function handleContextMenu(e: MouseEvent) {
+		// Only trigger on Ctrl+Right-click
+		if (!e.ctrlKey) return;
 		e.preventDefault();
 		e.stopPropagation();
 
@@ -306,26 +304,17 @@
 			style="left: {adjustedX}px; top: {adjustedY}px;"
 			onmousedown={(e) => e.stopPropagation()}
 		>
-			<div class="bg-surface-secondary border border-border rounded-lg shadow-xl overflow-hidden min-w-[180px]">
-				<button
-					class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground hover:bg-surface-hover transition-colors text-left"
-					onclick={() => openForm('bug')}
-				>
+			<div class="sf-ctx-menu">
+				<button class="sf-ctx-item" onclick={() => openForm('bug')}>
 					<i class="fa-solid fa-bug text-red-400"></i>
 					Report Bug
 				</button>
-				<button
-					class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground hover:bg-surface-hover transition-colors text-left"
-					onclick={() => openForm('feature')}
-				>
+				<button class="sf-ctx-item" onclick={() => openForm('feature')}>
 					<i class="fa-solid fa-lightbulb text-amber-400"></i>
 					Request Feature
 				</button>
-				<div class="border-t border-border">
-					<button
-						class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground-secondary hover:bg-surface-hover transition-colors text-left"
-						onclick={openBoard}
-					>
+				<div class="sf-ctx-divider">
+					<button class="sf-ctx-item sf-ctx-item-secondary" onclick={openBoard}>
 						<i class="fa-solid fa-clipboard-list"></i>
 						View Open Issues
 					</button>
@@ -475,16 +464,13 @@
 	<!-- Onboarding toast -->
 	{#if showToast}
 		<div class="fixed bottom-4 right-4 z-[99997] animate-fade-in">
-			<div class="bg-surface-secondary border border-border rounded-lg shadow-lg px-4 py-3 flex items-center gap-3 max-w-sm">
-				<i class="fa-solid fa-computer-mouse text-primary text-lg"></i>
+			<div class="sf-toast">
+				<i class="fa-solid fa-computer-mouse" style="color: var(--color-primary, #3b82f6); font-size: 1.125rem;"></i>
 				<div>
-					<p class="text-sm font-semibold">Middle-click anywhere</p>
-					<p class="text-xs text-foreground-secondary">to report bugs or request features</p>
+					<p style="font-size: 0.875rem; font-weight: 600; margin: 0;">Ctrl + Right-click anywhere</p>
+					<p style="font-size: 0.75rem; color: #94a3b8; margin: 0;">to report bugs or request features</p>
 				</div>
-				<button
-					class="text-foreground-tertiary hover:text-foreground transition-colors bg-transparent border-none cursor-pointer ml-2"
-					onclick={() => (showToast = false)}
-				>
+				<button class="sf-toast-close" onclick={() => (showToast = false)}>
 					<i class="fa-solid fa-xmark"></i>
 				</button>
 			</div>
@@ -500,4 +486,68 @@
 	.animate-fade-in {
 		animation: fade-in 0.3s ease-out;
 	}
+
+	/* Context menu — hardcoded colors for guaranteed visibility */
+	.sf-ctx-menu {
+		background: #1e293b;
+		border: 1px solid #334155;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+		overflow: hidden;
+		min-width: 180px;
+	}
+
+	.sf-ctx-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		font-size: 0.875rem;
+		color: #e2e8f0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.sf-ctx-item:hover {
+		background: #334155;
+	}
+
+	.sf-ctx-item-secondary {
+		color: #94a3b8;
+	}
+
+	.sf-ctx-divider {
+		border-top: 1px solid #334155;
+	}
+
+	/* Toast */
+	.sf-toast {
+		background: #1e293b;
+		border: 1px solid #334155;
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		padding: 0.75rem 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		max-width: 20rem;
+		color: #e2e8f0;
+	}
+
+	.sf-toast-close {
+		color: #64748b;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		margin-left: 0.5rem;
+		transition: color 0.15s;
+	}
+
+	.sf-toast-close:hover {
+		color: #e2e8f0;
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",
@@ -36,6 +36,9 @@
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@tailwindcss/vite": "^4.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "jsdom": "^29.0.0",
     "publint": "^0.3.0",
     "svelte": "^5.48.0",
     "svelte-check": "^4.3.0",