@alliance-droid/status-feedback-system 2.3.2 → 3.1.0

package/dist/components/DevFeedback.svelte

@@ -1,585 +1,589 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { createStatusClient, type StatusClient } from '../api.js';
-	import PasteImageInput from './shared/PasteImageInput.svelte';
-	import {
-		Card,
-		Button,
-		Input,
-		Textarea,
-		Badge,
-		Spinner,
-	} from '@alliance-droid/svelte-component-library';
-	import DevContextMenu from './dev/DevContextMenu.svelte';
-	import DevOnboardingToast from './dev/DevOnboardingToast.svelte';
-	import {
-		detectEnvironment,
-		getEnvironmentName,
-		getEnvVar,
-		getElementSelector,
-		getElementHtml,
-	} from './dev/environment.js';
-
-	interface Props {
-		apiUrl: string;
-		apiKey: string;
-		/** Explicit enable/disable — overrides auto-detection */
-		enabled?: boolean | undefined;
-		/** Max console errors to capture */
-		maxConsoleErrors?: number;
-		/** Show onboarding toast on first visit */
-		showOnboarding?: boolean;
-		/** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
-		boardUrl?: string;
-		/**
-		 * Authenticated user email. Required.
-		 *
-		 * Pass an empty string when the user is not signed in — the widget will
-		 * render nothing (no floating bubble, no menu, no form). Anonymous
-		 * feedback is not supported.
-		 */
-		userEmail: string;
-		/**
-		 * Endpoint on the consumer app that issues render tokens.
-		 * Default: '/svc/internal/issue-render-token'
-		 */
-		renderTokenEndpoint?: string;
-	}
-
-	let {
-		apiUrl,
-		apiKey,
-		enabled = undefined,
-		maxConsoleErrors = 20,
-		showOnboarding = true,
-		boardUrl,
-		userEmail,
-		renderTokenEndpoint = '/svc/internal/issue-render-token',
-	}: Props = $props();
-
-	// Dev-mode warning when userEmail is empty
-	$effect(() => {
-		if (!userEmail && typeof console !== 'undefined') {
-			// eslint-disable-next-line no-restricted-globals -- safe typeof guard for universal code
-			const proc = typeof globalThis !== 'undefined' ? (globalThis as Record<string, unknown>).process as { env?: Record<string, string> } | undefined : undefined;
-			const env = proc?.env?.NODE_ENV || 'development';
-			if (env !== 'production') {
-				console.warn(
-					'[status-feedback-system] <DevFeedback> was rendered with an empty userEmail. ' +
-					"The widget will not appear. Pass the authenticated user's email, or do not render <DevFeedback> when no user is signed in.",
-				);
-			}
-		}
-	});
-
-	// --- Client (lazy, stable) ---
-	let client: StatusClient | null = $state(null);
-	let lastApiUrl = '';
-	let lastApiKey = '';
-
-	function getClient(): StatusClient {
-		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
-			client = createStatusClient({ apiUrl, apiKey });
-			lastApiUrl = apiUrl;
-			lastApiKey = apiKey;
-		}
-		return client;
-	}
-
-	// --- Environment gate ---
-	let isEnabled = $state(false);
-	let hasUserEmail = $derived(!!userEmail);
-	const isMac = $derived(
-		typeof navigator !== 'undefined' &&
-			/Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent || '')
-	);
-
-	// --- State ---
-	let menuOpen = $state(false);
-	let menuX = $state(0);
-	let menuY = $state(0);
-	let clickedElement = $state<HTMLElement | null>(null);
-
-	let formOpen = $state(false);
-	let formPopoverEl: HTMLDivElement | undefined = $state();
-	let formOriginalParent: HTMLElement | null = null;
-	let formPortalTarget: HTMLElement | null = null;
-
-	/**
-	 * Find the topmost open modal dialog.
-	 * showModal() makes everything outside the dialog inert — including
-	 * top-layer popovers that aren't descendants of the dialog.
-	 */
-	function findOpenModalDialog(): HTMLDialogElement | null {
-		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
-		for (const d of dialogs) {
-			if (d.open) return d;
-		}
-		return null;
-	}
-
-	// Promote form modal to the browser's top layer when opened
-	// Portal into any open modal dialog to escape inertness
-	$effect(() => {
-		if (formOpen && formPopoverEl) {
-			// Portal into modal dialog if one is open
-			const modalDialog = findOpenModalDialog();
-			if (modalDialog && formPopoverEl.parentElement !== modalDialog) {
-				formOriginalParent = formPopoverEl.parentElement;
-				formPortalTarget = modalDialog;
-				modalDialog.appendChild(formPopoverEl);
-			}
-
-			if (typeof formPopoverEl.showPopover === 'function') {
-				try { formPopoverEl.showPopover(); } catch { /* fallback to z-index */ }
-			}
-		} else if (!formOpen && formPopoverEl) {
-			if (typeof formPopoverEl.hidePopover === 'function') {
-				try { formPopoverEl.hidePopover(); } catch { /* already hidden */ }
-			}
-			// Move back to original parent
-			if (formPortalTarget && formOriginalParent) {
-				try { formOriginalParent.appendChild(formPopoverEl); } catch { /* already moved */ }
-				formPortalTarget = null;
-			}
-		}
-	});
-	let formType = $state<'bug' | 'feature'>('bug');
-	let formTitle = $state('');
-	let formMessage = $state('');
-	let pastedScreenshot = $state<string | null>(null);
-	let pastedFilename = $state('');
-	let messageTextareaWrapperEl: HTMLDivElement | undefined = $state();
-	let messageTextareaEl: HTMLTextAreaElement | undefined = $state();
-
-
-	let submitting = $state(false);
-	let submitResult = $state<'success' | 'error' | null>(null);
-
-	let renderContext = $state<{ url: string; scrollX: number; scrollY: number; renderToken: string; issuer: string } | null>(null);
-	let fetchingRenderToken = $state(false);
-	let renderTokenFailed = $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;
-
-	// Onboarding
-	let showToast = $state(false);
-	const ONBOARDING_KEY = 'sf-devfeedback-onboarded';
-
-	onMount(() => {
-		isEnabled = detectEnvironment(enabled) && !!userEmail;
-		if (!isEnabled) return;
-
-		// Hook console.error
-		originalConsoleError = console.error;
-		console.error = (...args: unknown[]) => {
-			consoleErrors.push(args.map(String).join(' '));
-			if (consoleErrors.length > maxConsoleErrors) consoleErrors.shift();
-			originalConsoleError.apply(console, args);
-		};
-
-		// Ctrl+Right-click handler
-		document.addEventListener('contextmenu', handleContextMenu);
-		document.addEventListener('click', closeMenu);
-		document.addEventListener('keydown', handleKeydown);
-		document.addEventListener('mousemove', handleDragMove);
-		document.addEventListener('mouseup', handleDragEnd);
-
-		// Onboarding toast
-		if (showOnboarding && !localStorage.getItem(ONBOARDING_KEY)) {
-			showToast = true;
-			localStorage.setItem(ONBOARDING_KEY, 'true');
-			setTimeout(() => (showToast = false), 6000);
-		}
-	});
-
-	onDestroy(() => {
-		if (!isEnabled) return;
-		if (originalConsoleError) console.error = originalConsoleError;
-		document.removeEventListener('contextmenu', handleContextMenu);
-		document.removeEventListener('click', closeMenu);
-		document.removeEventListener('keydown', handleKeydown);
-		document.removeEventListener('mousemove', handleDragMove);
-		document.removeEventListener('mouseup', handleDragEnd);
-	});
-
-	function handleContextMenu(e: MouseEvent) {
-		if (!e.ctrlKey) return;
-		e.preventDefault();
-		e.stopPropagation();
-
-		clickedElement = e.target as HTMLElement;
-		menuX = e.clientX;
-		menuY = e.clientY;
-		menuOpen = true;
-		formOpen = false;
-	}
-
-	function closeMenu() {
-		if (menuOpen) menuOpen = false;
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			menuOpen = false;
-			formOpen = false;
-			renderContext = null;
-			pastedScreenshot = null;
-			pastedFilename = '';
-		}
-	}
-
-	async function fetchRenderToken() {
-		fetchingRenderToken = true;
-		renderTokenFailed = false;
-		try {
-			const url = window.location.href;
-			const scrollX = Math.round(window.scrollX);
-			const scrollY = Math.round(window.scrollY);
-			const res = await fetch(renderTokenEndpoint, {
-				method: 'POST',
-				credentials: 'include',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ url, scrollX, scrollY }),
-			});
-			if (!res.ok) {
-				renderTokenFailed = true;
-				console.warn('[DevFeedback] Render token fetch failed:', res.status);
-				return;
-			}
-			const { token } = (await res.json()) as { token: string };
-			renderContext = { url, scrollX, scrollY, renderToken: token, issuer: new URL(url).origin };
-		} catch (err) {
-			renderTokenFailed = true;
-			console.warn('[DevFeedback] Render token fetch error:', err);
-		} finally {
-			fetchingRenderToken = false;
-		}
-	}
-
-	$effect(() => {
-		if (messageTextareaWrapperEl) {
-			messageTextareaEl = messageTextareaWrapperEl.querySelector('textarea') ?? undefined;
-		}
-	});
-
-	function openForm(type: 'bug' | 'feature') {
-		formType = type;
-		formTitle = '';
-		formMessage = '';
-		pastedScreenshot = null;
-		pastedFilename = '';
-		submitResult = null;
-		menuOpen = false;
-		formOpen = true;
-		modalPositioned = false;
-		modalX = 0;
-		modalY = 0;
-
-		if (type === 'bug') {
-			fetchRenderToken();
-		} else {
-			renderContext = null;
-		}
-	}
-
-	async function handleSubmit() {
-		if (!formMessage.trim() || !hasUserEmail) return;
-		submitting = true;
-		submitResult = null;
-
-		try {
-			const metadata: Record<string, unknown> = {
-				type: formType,
-				environment: getEnvironmentName(),
-				route: window.location.pathname,
-				viewport: { width: window.innerWidth, height: window.innerHeight },
-				userAgent: navigator.userAgent,
-			};
-
-			if (clickedElement) {
-				metadata.elementSelector = getElementSelector(clickedElement);
-				metadata.elementHtml = getElementHtml(clickedElement);
-			}
-
-			if (consoleErrors.length > 0) {
-				metadata.consoleErrors = [...consoleErrors];
-			}
-
-			if (pastedScreenshot) {
-				metadata.pastedScreenshot = pastedScreenshot;
-				metadata.pastedScreenshotFilename = pastedFilename;
-			}
-
-			if (renderContext) {
-				metadata.renderToken = renderContext.renderToken;
-				metadata.issuer = renderContext.issuer;
-				metadata.scrollX = renderContext.scrollX;
-				metadata.scrollY = renderContext.scrollY;
-			}
-
-			const gitCommit = getEnvVar('VERCEL_GIT_COMMIT_SHA');
-			const gitBranch = getEnvVar('VERCEL_GIT_COMMIT_REF');
-			const deployUrl = getEnvVar('VERCEL_URL');
-			if (gitCommit) metadata.gitCommit = gitCommit;
-			if (gitBranch) metadata.gitBranch = gitBranch;
-			if (deployUrl) metadata.deploymentUrl = deployUrl;
-
-			await getClient().submitFeedback({
-				title: formTitle.trim() || undefined,
-				message: formMessage.trim(),
-				category: formType === 'bug' ? 'bug' : 'feature',
-				email: userEmail,
-				pageUrl: window.location.href,
-				metadata,
-			});
-
-			submitResult = 'success';
-			setTimeout(() => {
-				formOpen = false;
-				submitResult = null;
-				renderContext = null;
-				pastedScreenshot = null;
-				pastedFilename = '';
-			}, 2000);
-		} catch {
-			submitResult = 'error';
-		} finally {
-			submitting = false;
-		}
-	}
-
-	function openBoard() {
-		if (!boardUrl) return;
-		menuOpen = false;
-		window.open(boardUrl, '_blank');
-	}
-</script>
-
-{#if isEnabled}
-	<!-- Context menu -->
-	{#if menuOpen}
-		<DevContextMenu
-			x={menuX}
-			y={menuY}
-			{boardUrl}
-			onReportBug={() => openForm('bug')}
-			onRequestFeature={() => openForm('feature')}
-			onViewBoard={boardUrl ? openBoard : undefined}
-		/>
-	{/if}
-
-	<!-- Form modal -->
-	{#if formOpen}
-		<div
-			bind:this={formPopoverEl}
-			popover="manual"
-			class="sf-modal sf-feedback-popover 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 (draggable) -->
-				<div
-					role="presentation"
-					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 (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>
-							<p class="mt-2 font-semibold">Submitted!</p>
-							<p class="text-sm text-foreground-secondary">
-								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
-							</p>
-						</div>
-					{:else}
-						<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
-							<i class="fa-solid fa-user" aria-hidden="true"></i>
-							<span>Submitting as <span class="font-medium text-foreground-secondary">{userEmail}</span></span>
-						</div>
-
-						<Input
-							bind:value={formTitle}
-							placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
-							label="Title"
-						/>
-
-						<div bind:this={messageTextareaWrapperEl}>
-							<Textarea
-								value={formMessage} oninput={(e) => (formMessage = (e.currentTarget as HTMLTextAreaElement).value)}
-								placeholder={formType === 'bug'
-									? 'What happened? What did you expect?'
-									: 'Describe the feature you\'d like...'}
-								label={formType === 'bug' ? 'Description' : 'Details'}
-								rows={4}
-							/>
-						</div>
-						<PasteImageInput
-							textareaEl={messageTextareaEl}
-							bind:image={pastedScreenshot}
-							bind:filename={pastedFilename}
-							previewClass="mt-2"
-						/>
-
-						<!-- Auto-captured context (bugs only) -->
-						{#if formType === 'bug'}
-							<div class="space-y-2">
-								<p class="text-xs font-semibold text-foreground-tertiary uppercase tracking-wide">Auto-captured</p>
-								<div class="flex flex-wrap gap-1.5">
-									<Badge variant="info" size="sm">
-										<i class="fa-solid fa-route mr-1"></i>
-										{window.location.pathname}
-									</Badge>
-									<Badge variant="info" size="sm">
-										<i class="fa-solid fa-display mr-1"></i>
-										{window.innerWidth}×{window.innerHeight}
-									</Badge>
-									{#if consoleErrors.length > 0}
-										<Badge variant="danger" size="sm">
-											<i class="fa-solid fa-triangle-exclamation mr-1"></i>
-											{consoleErrors.length} console error{consoleErrors.length !== 1 ? 's' : ''}
-										</Badge>
-									{/if}
-									{#if clickedElement}
-										<Badge variant="neutral" size="sm">
-											<i class="fa-solid fa-crosshairs mr-1"></i>
-											{getElementSelector(clickedElement).slice(-40)}
-										</Badge>
-									{/if}
-								</div>
-
-								<!-- Render token status -->
-								{#if fetchingRenderToken}
-									<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
-										<Spinner /> Preparing screenshot...
-									</div>
-								{:else if renderTokenFailed && !pastedScreenshot}
-									<div class="rounded-md border border-border bg-surface p-3">
-										<div class="flex items-center gap-2 text-sm text-foreground-secondary mb-1">
-											<i class="fa-solid fa-paste" aria-hidden="true"></i>
-											<span>Paste a screenshot to attach one</span>
-										</div>
-										<p class="text-xs text-foreground-tertiary">
-											Capture a screenshot (<kbd class="px-1 py-0.5 rounded bg-surface-secondary border border-border text-[10px] font-mono">{isMac ? '⌘⇧4' : 'Win+Shift+S'}</kbd>),
-											then paste it into the description above with
-											<kbd class="px-1 py-0.5 rounded bg-surface-secondary border border-border text-[10px] font-mono">{isMac ? '⌘V' : 'Ctrl+V'}</kbd>.
-										</p>
-									</div>
-								{:else if renderContext && !pastedScreenshot}
-									<div class="rounded-md border border-border bg-surface-secondary p-2 flex items-center gap-2 text-sm text-foreground-secondary">
-										<i class="fa-solid fa-camera" aria-hidden="true"></i>
-										<span>Screenshot will be captured server-side on submit</span>
-									</div>
-								{/if}
-							</div>
-						{/if}
-
-						{#if submitResult === 'error'}
-							<p class="text-sm text-red-400">
-								<i class="fa-solid fa-exclamation-circle mr-1"></i>
-								Failed to submit. Please try again.
-							</p>
-						{/if}
-					{/if}
-				</div>
-
-				<!-- Footer -->
-				{#if submitResult !== 'success' && hasUserEmail}
-					<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>
-	{/if}
-
-	<!-- Onboarding toast -->
-	{#if showToast}
-		<DevOnboardingToast onDismiss={() => (showToast = false)} />
-	{/if}
-{/if}
-
-<style>
-	/* Override popover defaults — remove browser default styles */
-	.sf-feedback-popover {
-		position: fixed;
-		margin: 0;
-		padding: 0;
-		border: none;
-		background: transparent;
-		overflow: visible;
-		/* Fallback for browsers without popover support */
-		z-index: 99998;
-	}
-
-	/* 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>
+<script lang="ts">
+	import { createStatusClient, type StatusClient } from '../api.js';
+	import PasteImageInput from './shared/PasteImageInput.svelte';
+	import {
+		Card,
+		Button,
+		Input,
+		Textarea,
+		Badge,
+		Spinner,
+	} from '@alliance-droid/svelte-component-library';
+	import DevContextMenu from './dev/DevContextMenu.svelte';
+	import DevOnboardingToast from './dev/DevOnboardingToast.svelte';
+	import {
+		getEnvironmentName,
+		getEnvVar,
+		getElementSelector,
+		getElementHtml,
+	} from './dev/environment.js';
+
+	interface Props {
+		apiUrl: string;
+		apiKey: string;
+		/**
+		 * The sole gate for the widget — wire it to your role/permission check
+		 * (e.g. `enabled={userHasFeedbackRole}`). When false, nothing renders and
+		 * no listeners attach. A non-empty `userEmail` is also required. There is
+		 * no environment auto-detection.
+		 */
+		enabled: boolean;
+		/** Max console errors to capture */
+		maxConsoleErrors?: number;
+		/** Show onboarding toast on first visit */
+		showOnboarding?: boolean;
+		/** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
+		boardUrl?: string;
+		/**
+		 * Authenticated user email. Required.
+		 *
+		 * Pass an empty string when the user is not signed in — the widget will
+		 * render nothing (no floating bubble, no menu, no form). Anonymous
+		 * feedback is not supported.
+		 */
+		userEmail: string;
+		/**
+		 * Endpoint on the consumer app that issues render tokens.
+		 * Default: '/svc/internal/issue-render-token'
+		 */
+		renderTokenEndpoint?: string;
+	}
+
+	let {
+		apiUrl,
+		apiKey,
+		enabled,
+		maxConsoleErrors = 20,
+		showOnboarding = true,
+		boardUrl,
+		userEmail,
+		renderTokenEndpoint = '/svc/internal/issue-render-token',
+	}: Props = $props();
+
+	// Dev-mode warning when userEmail is empty
+	$effect(() => {
+		if (!userEmail && typeof console !== 'undefined') {
+			// eslint-disable-next-line no-restricted-globals -- safe typeof guard for universal code
+			const proc = typeof globalThis !== 'undefined' ? (globalThis as Record<string, unknown>).process as { env?: Record<string, string> } | undefined : undefined;
+			const env = proc?.env?.NODE_ENV || 'development';
+			if (env !== 'production') {
+				console.warn(
+					'[status-feedback-system] <DevFeedback> was rendered with an empty userEmail. ' +
+					"The widget will not appear. Pass the authenticated user's email, or do not render <DevFeedback> when no user is signed in.",
+				);
+			}
+		}
+	});
+
+	// --- Client (lazy, stable) ---
+	let client: StatusClient | null = $state(null);
+	let lastApiUrl = '';
+	let lastApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
+			client = createStatusClient({ apiUrl, apiKey });
+			lastApiUrl = apiUrl;
+			lastApiKey = apiKey;
+		}
+		return client;
+	}
+
+	// --- Activation gate ---
+	// `enabled` is the sole gate — wire it to your role/permission check.
+	// Combined with a signed-in user. No environment heuristics.
+	const hasUserEmail = $derived(!!userEmail);
+	const isEnabled = $derived(enabled && hasUserEmail);
+	const isMac = $derived(
+		typeof navigator !== 'undefined' &&
+			/Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent || '')
+	);
+
+	// --- State ---
+	let menuOpen = $state(false);
+	let menuX = $state(0);
+	let menuY = $state(0);
+	let clickedElement = $state<HTMLElement | null>(null);
+
+	let formOpen = $state(false);
+	let formPopoverEl: HTMLDivElement | undefined = $state();
+	let formOriginalParent: HTMLElement | null = null;
+	let formPortalTarget: HTMLElement | null = null;
+
+	/**
+	 * Find the topmost open modal dialog.
+	 * showModal() makes everything outside the dialog inert — including
+	 * top-layer popovers that aren't descendants of the dialog.
+	 */
+	function findOpenModalDialog(): HTMLDialogElement | null {
+		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
+		for (const d of dialogs) {
+			if (d.open) return d;
+		}
+		return null;
+	}
+
+	// Promote form modal to the browser's top layer when opened
+	// Portal into any open modal dialog to escape inertness
+	$effect(() => {
+		if (formOpen && formPopoverEl) {
+			// Portal into modal dialog if one is open
+			const modalDialog = findOpenModalDialog();
+			if (modalDialog && formPopoverEl.parentElement !== modalDialog) {
+				formOriginalParent = formPopoverEl.parentElement;
+				formPortalTarget = modalDialog;
+				modalDialog.appendChild(formPopoverEl);
+			}
+
+			if (typeof formPopoverEl.showPopover === 'function') {
+				try { formPopoverEl.showPopover(); } catch { /* fallback to z-index */ }
+			}
+		} else if (!formOpen && formPopoverEl) {
+			if (typeof formPopoverEl.hidePopover === 'function') {
+				try { formPopoverEl.hidePopover(); } catch { /* already hidden */ }
+			}
+			// Move back to original parent
+			if (formPortalTarget && formOriginalParent) {
+				try { formOriginalParent.appendChild(formPopoverEl); } catch { /* already moved */ }
+				formPortalTarget = null;
+			}
+		}
+	});
+	let formType = $state<'bug' | 'feature'>('bug');
+	let formTitle = $state('');
+	let formMessage = $state('');
+	let pastedScreenshot = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let messageTextareaWrapperEl: HTMLDivElement | undefined = $state();
+	let messageTextareaEl: HTMLTextAreaElement | undefined = $state();
+
+
+	let submitting = $state(false);
+	let submitResult = $state<'success' | 'error' | null>(null);
+
+	let renderContext = $state<{ url: string; scrollX: number; scrollY: number; renderToken: string; issuer: string } | null>(null);
+	let fetchingRenderToken = $state(false);
+	let renderTokenFailed = $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[] = [];
+
+	// Onboarding
+	let showToast = $state(false);
+	const ONBOARDING_KEY = 'sf-devfeedback-onboarded';
+
+	// Activate only when enabled — reactive, so a role check that resolves after
+	// mount arms the widget. The returned cleanup runs when disabled or destroyed.
+	$effect(() => {
+		if (!isEnabled) return;
+
+		// Capture recent console errors to attach to bug reports.
+		const originalConsoleError = console.error;
+		console.error = (...args: unknown[]) => {
+			consoleErrors.push(args.map(String).join(' '));
+			if (consoleErrors.length > maxConsoleErrors) consoleErrors.shift();
+			originalConsoleError.apply(console, args);
+		};
+
+		// Ctrl/Cmd + Right-click handler + menu/drag listeners.
+		document.addEventListener('contextmenu', handleContextMenu);
+		document.addEventListener('click', closeMenu);
+		document.addEventListener('keydown', handleKeydown);
+		document.addEventListener('mousemove', handleDragMove);
+		document.addEventListener('mouseup', handleDragEnd);
+
+		// Onboarding toast on first visit.
+		if (showOnboarding && !localStorage.getItem(ONBOARDING_KEY)) {
+			showToast = true;
+			localStorage.setItem(ONBOARDING_KEY, 'true');
+			setTimeout(() => (showToast = false), 6000);
+		}
+
+		return () => {
+			console.error = originalConsoleError;
+			document.removeEventListener('contextmenu', handleContextMenu);
+			document.removeEventListener('click', closeMenu);
+			document.removeEventListener('keydown', handleKeydown);
+			document.removeEventListener('mousemove', handleDragMove);
+			document.removeEventListener('mouseup', handleDragEnd);
+		};
+	});
+
+	function handleContextMenu(e: MouseEvent) {
+		if (!e.ctrlKey) return;
+		e.preventDefault();
+		e.stopPropagation();
+
+		clickedElement = e.target as HTMLElement;
+		menuX = e.clientX;
+		menuY = e.clientY;
+		menuOpen = true;
+		formOpen = false;
+	}
+
+	function closeMenu() {
+		if (menuOpen) menuOpen = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			menuOpen = false;
+			formOpen = false;
+			renderContext = null;
+			pastedScreenshot = null;
+			pastedFilename = '';
+		}
+	}
+
+	async function fetchRenderToken() {
+		fetchingRenderToken = true;
+		renderTokenFailed = false;
+		try {
+			const url = window.location.href;
+			const scrollX = Math.round(window.scrollX);
+			const scrollY = Math.round(window.scrollY);
+			const res = await fetch(renderTokenEndpoint, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ url, scrollX, scrollY }),
+			});
+			if (!res.ok) {
+				renderTokenFailed = true;
+				console.warn('[DevFeedback] Render token fetch failed:', res.status);
+				return;
+			}
+			const { token } = (await res.json()) as { token: string };
+			renderContext = { url, scrollX, scrollY, renderToken: token, issuer: new URL(url).origin };
+		} catch (err) {
+			renderTokenFailed = true;
+			console.warn('[DevFeedback] Render token fetch error:', err);
+		} finally {
+			fetchingRenderToken = false;
+		}
+	}
+
+	$effect(() => {
+		if (messageTextareaWrapperEl) {
+			messageTextareaEl = messageTextareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
+
+	function openForm(type: 'bug' | 'feature') {
+		formType = type;
+		formTitle = '';
+		formMessage = '';
+		pastedScreenshot = null;
+		pastedFilename = '';
+		submitResult = null;
+		menuOpen = false;
+		formOpen = true;
+		modalPositioned = false;
+		modalX = 0;
+		modalY = 0;
+
+		if (type === 'bug') {
+			fetchRenderToken();
+		} else {
+			renderContext = null;
+		}
+	}
+
+	async function handleSubmit() {
+		if (!formMessage.trim() || !hasUserEmail) return;
+		submitting = true;
+		submitResult = null;
+
+		try {
+			const metadata: Record<string, unknown> = {
+				type: formType,
+				environment: getEnvironmentName(),
+				route: window.location.pathname,
+				viewport: { width: window.innerWidth, height: window.innerHeight },
+				userAgent: navigator.userAgent,
+			};
+
+			if (clickedElement) {
+				metadata.elementSelector = getElementSelector(clickedElement);
+				metadata.elementHtml = getElementHtml(clickedElement);
+			}
+
+			if (consoleErrors.length > 0) {
+				metadata.consoleErrors = [...consoleErrors];
+			}
+
+			if (pastedScreenshot) {
+				metadata.pastedScreenshot = pastedScreenshot;
+				metadata.pastedScreenshotFilename = pastedFilename;
+			}
+
+			if (renderContext) {
+				metadata.renderToken = renderContext.renderToken;
+				metadata.issuer = renderContext.issuer;
+				metadata.scrollX = renderContext.scrollX;
+				metadata.scrollY = renderContext.scrollY;
+			}
+
+			const gitCommit = getEnvVar('VERCEL_GIT_COMMIT_SHA');
+			const gitBranch = getEnvVar('VERCEL_GIT_COMMIT_REF');
+			const deployUrl = getEnvVar('VERCEL_URL');
+			if (gitCommit) metadata.gitCommit = gitCommit;
+			if (gitBranch) metadata.gitBranch = gitBranch;
+			if (deployUrl) metadata.deploymentUrl = deployUrl;
+
+			await getClient().submitFeedback({
+				title: formTitle.trim() || undefined,
+				message: formMessage.trim(),
+				category: formType === 'bug' ? 'bug' : 'feature',
+				email: userEmail,
+				pageUrl: window.location.href,
+				metadata,
+			});
+
+			submitResult = 'success';
+			setTimeout(() => {
+				formOpen = false;
+				submitResult = null;
+				renderContext = null;
+				pastedScreenshot = null;
+				pastedFilename = '';
+			}, 2000);
+		} catch {
+			submitResult = 'error';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function openBoard() {
+		if (!boardUrl) return;
+		menuOpen = false;
+		window.open(boardUrl, '_blank');
+	}
+</script>
+
+{#if isEnabled}
+	<!-- Context menu -->
+	{#if menuOpen}
+		<DevContextMenu
+			x={menuX}
+			y={menuY}
+			{boardUrl}
+			onReportBug={() => openForm('bug')}
+			onRequestFeature={() => openForm('feature')}
+			onViewBoard={boardUrl ? openBoard : undefined}
+		/>
+	{/if}
+
+	<!-- Form modal -->
+	{#if formOpen}
+		<div
+			bind:this={formPopoverEl}
+			popover="manual"
+			class="sf-modal sf-feedback-popover 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 (draggable) -->
+				<div
+					role="presentation"
+					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 (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>
+							<p class="mt-2 font-semibold">Submitted!</p>
+							<p class="text-sm text-foreground-secondary">
+								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
+							</p>
+						</div>
+					{:else}
+						<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+							<i class="fa-solid fa-user" aria-hidden="true"></i>
+							<span>Submitting as <span class="font-medium text-foreground-secondary">{userEmail}</span></span>
+						</div>
+
+						<Input
+							bind:value={formTitle}
+							placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
+							label="Title"
+						/>
+
+						<div bind:this={messageTextareaWrapperEl}>
+							<Textarea
+								value={formMessage} oninput={(e) => (formMessage = (e.currentTarget as HTMLTextAreaElement).value)}
+								placeholder={formType === 'bug'
+									? 'What happened? What did you expect?'
+									: 'Describe the feature you\'d like...'}
+								label={formType === 'bug' ? 'Description' : 'Details'}
+								rows={4}
+							/>
+						</div>
+						<PasteImageInput
+							textareaEl={messageTextareaEl}
+							bind:image={pastedScreenshot}
+							bind:filename={pastedFilename}
+							previewClass="mt-2"
+						/>
+
+						<!-- Auto-captured context (bugs only) -->
+						{#if formType === 'bug'}
+							<div class="space-y-2">
+								<p class="text-xs font-semibold text-foreground-tertiary uppercase tracking-wide">Auto-captured</p>
+								<div class="flex flex-wrap gap-1.5">
+									<Badge variant="info" size="sm">
+										<i class="fa-solid fa-route mr-1"></i>
+										{window.location.pathname}
+									</Badge>
+									<Badge variant="info" size="sm">
+										<i class="fa-solid fa-display mr-1"></i>
+										{window.innerWidth}×{window.innerHeight}
+									</Badge>
+									{#if consoleErrors.length > 0}
+										<Badge variant="danger" size="sm">
+											<i class="fa-solid fa-triangle-exclamation mr-1"></i>
+											{consoleErrors.length} console error{consoleErrors.length !== 1 ? 's' : ''}
+										</Badge>
+									{/if}
+									{#if clickedElement}
+										<Badge variant="neutral" size="sm">
+											<i class="fa-solid fa-crosshairs mr-1"></i>
+											{getElementSelector(clickedElement).slice(-40)}
+										</Badge>
+									{/if}
+								</div>
+
+								<!-- Render token status -->
+								{#if fetchingRenderToken}
+									<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
+										<Spinner /> Preparing screenshot...
+									</div>
+								{:else if renderTokenFailed && !pastedScreenshot}
+									<div class="rounded-md border border-border bg-surface p-3">
+										<div class="flex items-center gap-2 text-sm text-foreground-secondary mb-1">
+											<i class="fa-solid fa-paste" aria-hidden="true"></i>
+											<span>Paste a screenshot to attach one</span>
+										</div>
+										<p class="text-xs text-foreground-tertiary">
+											Capture a screenshot (<kbd class="px-1 py-0.5 rounded bg-surface-secondary border border-border text-[10px] font-mono">{isMac ? '⌘⇧4' : 'Win+Shift+S'}</kbd>),
+											then paste it into the description above with
+											<kbd class="px-1 py-0.5 rounded bg-surface-secondary border border-border text-[10px] font-mono">{isMac ? '⌘V' : 'Ctrl+V'}</kbd>.
+										</p>
+									</div>
+								{:else if renderContext && !pastedScreenshot}
+									<div class="rounded-md border border-border bg-surface-secondary p-2 flex items-center gap-2 text-sm text-foreground-secondary">
+										<i class="fa-solid fa-camera" aria-hidden="true"></i>
+										<span>Screenshot will be captured server-side on submit</span>
+									</div>
+								{/if}
+							</div>
+						{/if}
+
+						{#if submitResult === 'error'}
+							<p class="text-sm text-red-400">
+								<i class="fa-solid fa-exclamation-circle mr-1"></i>
+								Failed to submit. Please try again.
+							</p>
+						{/if}
+					{/if}
+				</div>
+
+				<!-- Footer -->
+				{#if submitResult !== 'success' && hasUserEmail}
+					<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>
+	{/if}
+
+	<!-- Onboarding toast -->
+	{#if showToast}
+		<DevOnboardingToast onDismiss={() => (showToast = false)} />
+	{/if}
+{/if}
+
+<style>
+	/* Override popover defaults — remove browser default styles */
+	.sf-feedback-popover {
+		position: fixed;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		overflow: visible;
+		/* Fallback for browsers without popover support */
+		z-index: 99998;
+	}
+
+	/* 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>