@alliance-droid/status-feedback-system 1.2.0 → 1.3.0

package/dist/components/DevFeedback.svelte

@@ -92,6 +92,35 @@
 	let screenshotData = $state<string | null>(null);
 	let capturingScreenshot = $state(false);
 
+	// Drag state
+	let isDragging = $state(false);
+	let dragOffsetX = 0;
+	let dragOffsetY = 0;
+	let modalX = $state(0);
+	let modalY = $state(0);
+	let modalPositioned = $state(false);
+
+	function handleDragStart(e: MouseEvent) {
+		isDragging = true;
+		const modalEl = (e.currentTarget as HTMLElement).closest('.sf-modal') as HTMLElement;
+		if (!modalEl) return;
+		const rect = modalEl.getBoundingClientRect();
+		dragOffsetX = e.clientX - rect.left;
+		dragOffsetY = e.clientY - rect.top;
+		e.preventDefault();
+	}
+
+	function handleDragMove(e: MouseEvent) {
+		if (!isDragging) return;
+		modalX = e.clientX - dragOffsetX;
+		modalY = e.clientY - dragOffsetY;
+		modalPositioned = true;
+	}
+
+	function handleDragEnd() {
+		isDragging = false;
+	}
+
 	// Console error capture
 	let consoleErrors: string[] = [];
 	let originalConsoleError: typeof console.error;
@@ -118,6 +147,9 @@
 		document.addEventListener('click', closeMenu);
 		// Escape closes everything
 		document.addEventListener('keydown', handleKeydown);
+		// Drag listeners (on document so drag continues outside modal)
+		document.addEventListener('mousemove', handleDragMove);
+		document.addEventListener('mouseup', handleDragEnd);
 
 		// Onboarding toast
 		if (showOnboarding && !localStorage.getItem(ONBOARDING_KEY)) {
@@ -133,6 +165,8 @@
 		document.removeEventListener('contextmenu', handleContextMenu);
 		document.removeEventListener('click', closeMenu);
 		document.removeEventListener('keydown', handleKeydown);
+		document.removeEventListener('mousemove', handleDragMove);
+		document.removeEventListener('mouseup', handleDragEnd);
 	});
 
 	function handleContextMenu(e: MouseEvent) {
@@ -218,6 +252,10 @@
 		submitResult = null;
 		menuOpen = false;
 		formOpen = true;
+		// Reset drag position (center on screen)
+		modalPositioned = false;
+		modalX = 0;
+		modalY = 0;
 
 		// Auto-capture screenshot for bugs
 		if (type === 'bug') {
@@ -334,34 +372,43 @@
 
 	<!-- Form modal -->
 	{#if formOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions — modal backdrop needs mousedown for click-outside-to-close -->
-		<div class="fixed inset-0 z-[99998] flex items-center justify-center bg-black/50" onmousedown={(e) => { if (e.target === e.currentTarget) formOpen = false; }}>
-			<!-- svelte-ignore a11y_no_static_element_interactions — prevents modal close when clicking inside form -->
-			<div class="w-full max-w-lg mx-4" onmousedown={(e) => e.stopPropagation()}>
-				<Card variant="elevated" padding="none">
-					<!-- Header -->
-					<div class="flex items-center justify-between px-5 py-4 border-b border-border">
-						<div class="flex items-center gap-2">
-							{#if formType === 'bug'}
-								<i class="fa-solid fa-bug text-red-400"></i>
-								<h3 class="text-base font-semibold">Report Bug</h3>
-							{:else}
-								<i class="fa-solid fa-lightbulb text-amber-400"></i>
-								<h3 class="text-base font-semibold">Request Feature</h3>
-							{/if}
-							<Badge variant="neutral" size="sm">{getEnvironmentName()}</Badge>
-						</div>
-						<button
-							class="text-foreground-tertiary hover:text-foreground transition-colors bg-transparent border-none cursor-pointer text-lg"
-							onclick={() => (formOpen = false)}
-							aria-label="Close feedback form"
-						>
-							<i class="fa-solid fa-xmark"></i>
-						</button>
+		<!-- No backdrop — modal floats freely over the page -->
+		<div
+			class="sf-modal fixed z-[99998] w-full max-w-lg flex flex-col"
+			style={modalPositioned
+				? `left: ${modalX}px; top: ${modalY}px;`
+				: 'left: 50%; top: 50%; transform: translate(-50%, -50%);'
+			}
+		>
+			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">
+				<!-- Header (fixed) -->
+				<!-- svelte-ignore a11y_no_static_element_interactions — drag handle needs mousedown -->
+				<div
+					class="flex items-center justify-between px-5 py-4 border-b border-border shrink-0 select-none"
+					style="cursor: {isDragging ? 'grabbing' : 'grab'};"
+					onmousedown={handleDragStart}
+				>
+					<div class="flex items-center gap-2">
+						{#if formType === 'bug'}
+							<i class="fa-solid fa-bug text-red-400"></i>
+							<h3 class="text-base font-semibold">Report Bug</h3>
+						{:else}
+							<i class="fa-solid fa-lightbulb text-amber-400"></i>
+							<h3 class="text-base font-semibold">Request Feature</h3>
+						{/if}
+						<Badge variant="neutral" size="sm">{getEnvironmentName()}</Badge>
 					</div>
+					<button
+						class="text-foreground-tertiary hover:text-foreground transition-colors bg-transparent border-none cursor-pointer text-lg"
+						onclick={() => (formOpen = false)}
+						aria-label="Close feedback form"
+					>
+						<i class="fa-solid fa-xmark"></i>
+					</button>
+				</div>
 
-					<!-- Body -->
-					<div class="p-5 space-y-4">
+				<!-- Body (scrollable) -->
+				<div class="p-5 space-y-4 overflow-y-auto">
 						{#if submitResult === 'success'}
 							<div class="text-center py-6">
 								<i class="fa-solid fa-check-circle text-3xl text-green-400"></i>
@@ -451,24 +498,27 @@
 								</p>
 							{/if}
 
-							<div class="flex justify-end gap-2 pt-1">
-								<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
-									Cancel
-								</Button>
-								<Button
-									variant={formType === 'bug' ? 'danger' : 'primary'}
-									disabled={submitting || !formMessage.trim()}
-									loading={submitting}
-									onclick={handleSubmit}
-								>
-									{formType === 'bug' ? 'Report Bug' : 'Submit Request'}
-								</Button>
-							</div>
-						{/if}
+							{/if}
 					</div>
+
+					<!-- Footer (fixed) -->
+					{#if submitResult !== 'success'}
+						<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
+							<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
+								Cancel
+							</Button>
+							<Button
+								variant={formType === 'bug' ? 'danger' : 'primary'}
+								disabled={submitting || !formMessage.trim()}
+								loading={submitting}
+								onclick={handleSubmit}
+							>
+								{formType === 'bug' ? 'Report Bug' : 'Submit Request'}
+							</Button>
+						</div>
+					{/if}
 				</Card>
 			</div>
-		</div>
 	{/if}
 
 	<!-- Onboarding toast -->
@@ -560,4 +610,9 @@
 	.sf-toast-close:hover {
 		color: #e2e8f0;
 	}
+
+	/* Floating modal shadow — no backdrop so needs strong depth cue */
+	.sf-modal :global(.card) {
+		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+	}
 </style>

package/dist/components/FeedbackBoard.svelte

@@ -241,16 +241,16 @@
 	<main class="flex-1 min-w-0">
 		<div class="flex items-start justify-between mb-4">
 			<div>
-				<h2 class="text-xl font-bold flex items-center gap-2">
-					{#if activeCategory}
+				{#if activeCategory}
+					<h2 class="text-xl font-bold flex items-center gap-2">
 						<i class={getCategoryIcon(activeCategory)}></i>
 						{getCategoryLabel(activeCategory)}
-					{:else}
-						{title}
+					</h2>
+					{#if getCategoryDescription(activeCategory)}
+						<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
 					{/if}
-				</h2>
-				{#if activeCategory && getCategoryDescription(activeCategory)}
-					<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
+				{:else if title}
+					<h2 class="text-xl font-bold">{title}</h2>
 				{/if}
 			</div>
 			{#if showSubmit}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",