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

package/dist/components/StatusPage.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
-	import { createStatusClient } from '../api.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
+	import { deriveOverallStatus } from '../utils.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
 	import SystemCard from './shared/SystemCard.svelte';
 	import IncidentTimeline from './shared/IncidentTimeline.svelte';
@@ -20,6 +21,8 @@
 		/** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
 		statusHistory?: Record<string, StatusHistoryEntry[]>;
 		showUptime?: boolean;
+		/** Auto-refresh interval in seconds. 0 = disabled. Default: 0 */
+		refreshInterval?: number;
 	}
 
 	let {
@@ -30,6 +33,7 @@
 		incidents: incidentsProp,
 		statusHistory: statusHistoryProp,
 		showUptime = true,
+		refreshInterval = 0,
 	}: Props = $props();
 
 	// ── State ──
@@ -41,12 +45,26 @@
 
 	// ── Self-fetching mode ──
 	const usesApi = $derived(!!apiUrl && !!apiKey && !systemsProp);
+	let refreshTimer: ReturnType<typeof setInterval> | null = null;
 
-	onMount(async () => {
+	let cachedClient: StatusClient | null = null;
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = apiKey!;
+		}
+		return cachedClient;
+	}
+
+	async function fetchData() {
 		if (!usesApi) return;
 
 		try {
-			const client = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+			const client = getClient();
 
 			const [statusData, incidentData, uptimeData] = await Promise.all([
 				client.getStatus(),
@@ -57,11 +75,24 @@
 			systems = statusData.systems;
 			incidents = incidentData.incidents;
 			statusHistory = uptimeData.history;
+			error = '';
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to load status data';
 		} finally {
 			loading = false;
 		}
+	}
+
+	onMount(() => {
+		fetchData();
+
+		if (refreshInterval > 0) {
+			refreshTimer = setInterval(fetchData, refreshInterval * 1000);
+		}
+
+		return () => {
+			if (refreshTimer) clearInterval(refreshTimer);
+		};
 	});
 
 	// ── Sync props when in pass-through mode ──
@@ -77,13 +108,7 @@
 
 	// ── Derived state ──
 
-	let overallStatus = $derived.by((): SystemStatus => {
-		if (systems.length === 0) return 'operational';
-		if (systems.some((s) => s.status === 'outage')) return 'outage';
-		if (systems.some((s) => s.status === 'degraded')) return 'degraded';
-		if (systems.some((s) => s.status === 'maintenance')) return 'maintenance';
-		return 'operational';
-	});
+	let overallStatus = $derived(deriveOverallStatus(systems));
 
 	const overallMessages: Record<SystemStatus, string> = {
 		operational: 'All Systems Operational',
@@ -128,6 +153,14 @@
 		<div class="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center">
 			<i class="fa-solid fa-circle-exclamation mb-2 text-2xl text-red-500"></i>
 			<p class="text-sm text-red-400">{error}</p>
+			{#if usesApi}
+				<button
+					onclick={() => { loading = true; fetchData(); }}
+					class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+				>
+					<i class="fa-solid fa-rotate-right mr-1"></i> Retry
+				</button>
+			{/if}
 		</div>
 	{:else}
 		<!-- Overall Status Banner -->

package/dist/components/StatusPage.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     /** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
     statusHistory?: Record<string, StatusHistoryEntry[]>;
     showUptime?: boolean;
+    /** Auto-refresh interval in seconds. 0 = disabled. Default: 0 */
+    refreshInterval?: number;
 }
 declare const StatusPage: import("svelte").Component<Props, {}, "">;
 type StatusPage = ReturnType<typeof StatusPage>;

package/dist/components/board/FeedbackDetail.svelte

@@ -25,7 +25,7 @@
 	<!-- Header -->
 	<div class="flex items-center gap-2 flex-wrap">
 		{#if item.category}
-			<i class="{board.getCategoryIcon(item.category)} text-foreground-secondary"></i>
+			<i class="{board.getCategoryIcon(item.category)} text-foreground-secondary" aria-hidden="true"></i>
 		{/if}
 		<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
 			{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
@@ -33,7 +33,7 @@
 		<span class="text-xs text-foreground-tertiary">{timeAgo(item.createdAt)}</span>
 		{#if item.responseCount > 0}
 			<span class="text-xs text-foreground-tertiary flex items-center gap-1">
-				<i class="fa-solid fa-comment"></i> {item.responseCount}
+				<i class="fa-solid fa-comment" aria-hidden="true"></i> {item.responseCount}
 			</span>
 		{/if}
 	</div>
@@ -45,8 +45,8 @@
 	<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{item.message}</p>
 
 	<!-- Votes -->
-	<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
-		<i class="fa-solid fa-arrow-up"></i>
+	<div class="flex items-center gap-2 text-sm text-foreground-tertiary" aria-label="{item.votes} votes">
+		<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
 		<span class="font-semibold">{item.votes}</span>
 		<span>votes</span>
 	</div>
@@ -55,7 +55,7 @@
 	{#if item.adminResponse}
 		<div class="rounded-lg bg-primary/5 border border-primary/20 p-3">
 			<p class="text-xs font-semibold text-primary mb-1">
-				<i class="fa-solid fa-shield mr-1"></i> Official Response
+				<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i> Official Response
 			</p>
 			<p class="text-sm text-foreground-secondary">{item.adminResponse}</p>
 		</div>
@@ -69,13 +69,13 @@
 	{:else if responses.length > 0}
 		<div class="space-y-3">
 			<h4 class="text-sm font-semibold text-foreground">
-				<i class="fa-solid fa-comments mr-1"></i> Responses
+				<i class="fa-solid fa-comments mr-1" aria-hidden="true"></i> Responses
 			</h4>
 			{#each responses as resp}
 				<div class="rounded-lg bg-surface-secondary p-3">
 					<div class="flex items-center justify-between mb-1">
 						<span class="text-xs font-semibold text-primary">
-							<i class="fa-solid fa-shield mr-1"></i>{resp.author || 'Team'}
+							<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i>{resp.author || 'Team'}
 						</span>
 						<span class="text-[0.6875rem] text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
 					</div>

package/dist/components/board/FeedbackItem.svelte

@@ -13,17 +13,26 @@
 	let { board, item, onclick }: Props = $props();
 
 	let isClickable = $derived(!!onclick);
+	let voteLabel = $derived.by(() => {
+		const current = board.votedItems[item.id];
+		if (current === 'up') return 'Remove upvote';
+		if (current === 'down') return 'Remove downvote';
+		return undefined;
+	});
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions — clickable variant uses onclick for item selection, keyboard handled manually -->
-<div
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<article
 	class="rounded-xl border border-border bg-surface transition-colors {isClickable ? 'cursor-pointer hover:bg-surface-hover' : ''}"
+	role={isClickable ? 'button' : undefined}
+	tabindex={isClickable ? 0 : undefined}
+	aria-label={isClickable ? (item.title || item.message.slice(0, 80)) : undefined}
 	onclick={() => onclick?.(item)}
 	onkeydown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onclick?.(item); } }}
 >
 	<div class="flex gap-3 p-4">
 		<!-- Vote column -->
-		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]">
+		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]" role="group" aria-label="Vote on this feedback">
 			<!-- svelte-ignore a11y_click_events_have_key_events — IconButton handles keyboard -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div onclick={(e) => e.stopPropagation()}>
@@ -31,12 +40,17 @@
 					size="sm"
 					variant={board.votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
 					onclick={() => board.vote(item.id, 'up')}
-					label="Upvote"
+					label={board.votedItems[item.id] === 'up' ? 'Remove upvote' : 'Upvote'}
 				>
 					<i class="fa-solid fa-chevron-up text-xs"></i>
 				</IconButton>
 			</div>
-			<span class="text-sm font-bold tabular-nums">{item.votes}</span>
+			<span class="text-sm font-bold tabular-nums" aria-label="{item.votes} votes">{item.votes}</span>
+			{#if board.voteErrors[item.id]}
+				<span class="text-[0.625rem] text-red-400" role="alert">
+					<i class="fa-solid fa-exclamation-circle" aria-hidden="true"></i>
+				</span>
+			{/if}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div onclick={(e) => e.stopPropagation()}>
@@ -44,7 +58,7 @@
 					size="sm"
 					variant={board.votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
 					onclick={() => board.vote(item.id, 'down')}
-					label="Downvote"
+					label={board.votedItems[item.id] === 'down' ? 'Remove downvote' : 'Downvote'}
 				>
 					<i class="fa-solid fa-chevron-down text-xs"></i>
 				</IconButton>
@@ -55,7 +69,7 @@
 		<div class="flex-1 min-w-0">
 			<div class="flex items-center gap-2 flex-wrap">
 				{#if item.category}
-					<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-secondary"></i>
+					<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-secondary" aria-hidden="true"></i>
 				{/if}
 				<h3 class="text-[0.9375rem] font-semibold flex-1 leading-snug">
 					{item.title || item.message.slice(0, 80)}
@@ -72,20 +86,20 @@
 			<div class="flex items-center gap-3 mt-2 text-[0.8125rem] text-foreground-tertiary">
 				<span>{timeAgo(item.createdAt)}</span>
 				{#if item.responseCount > 0}
-					<span class="flex items-center gap-1">
-						<i class="fa-solid fa-comment"></i>
-						{item.responseCount}
+					<span class="flex items-center gap-1" aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}">
+						<i class="fa-solid fa-comment" aria-hidden="true"></i>
+						{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}
 					</span>
 				{/if}
 				{#if item.adminResponse}
 					<span class="text-xs text-primary">
-						<i class="fa-solid fa-shield"></i> Official response
+						<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
 					</span>
 				{/if}
 			</div>
 		</div>
 	</div>
-</div>
+</article>
 
 <style>
 	.line-clamp-2 {

package/dist/components/board/FeedbackList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Spinner } from '@alliance-droid/svelte-component-library';
+	import { Button, Spinner } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
 	import FeedbackItem from './FeedbackItem.svelte';
@@ -22,6 +22,12 @@
 	<div class="text-center py-12 text-foreground-tertiary">
 		<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
 		<p class="mt-2">{board.error}</p>
+		<button
+			onclick={() => board.reload()}
+			class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+		>
+			<i class="fa-solid fa-rotate-right mr-1"></i> Retry
+		</button>
 	</div>
 {:else if board.items.length === 0}
 	<div class="text-center py-12 text-foreground-tertiary">
@@ -35,4 +41,18 @@
 			<FeedbackItem {board} {item} onclick={onSelect ? () => onSelect(item) : undefined} />
 		{/each}
 	</div>
+
+	{#if board.hasMore}
+		<div class="mt-4 text-center">
+			<Button
+				variant="neutral"
+				style="outline"
+				disabled={board.loadingMore}
+				loading={board.loadingMore}
+				onclick={() => board.loadMore()}
+			>
+				Load More ({board.items.length} of {board.total})
+			</Button>
+		</div>
+	{/if}
 {/if}

package/dist/components/board/FeedbackSidebar.svelte

@@ -20,13 +20,13 @@
 	];
 </script>
 
-<aside class="flex flex-col gap-1">
+<aside class="flex flex-col gap-1" aria-label="Filter feedback">
 	<button
 		class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
 			{board.activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
 		onclick={() => (board.activeCategory = null)}
 	>
-		<i class="fa-solid fa-layer-group"></i>
+		<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
 		<span>All</span>
 		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
 	</button>
@@ -37,7 +37,7 @@
 				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
 			onclick={() => (board.activeCategory = board.activeCategory === cat.name ? null : cat.name)}
 		>
-			<i class={board.getCategoryIcon(cat.name)}></i>
+			<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"></i>
 			<span>{board.getCategoryLabel(cat.name)}</span>
 			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{cat.count}</span>
 		</button>

package/dist/components/board/state.svelte.d.ts

@@ -16,6 +16,8 @@ export interface FeedbackBoardOptions {
     apiUrl: string;
     apiKey: string;
     categoryConfig?: Record<string, CategoryConfig>;
+    /** Items per page. Default: 50 */
+    pageSize?: number;
 }
 export interface FeedbackBoardState {
     readonly client: StatusClient;
@@ -24,12 +26,16 @@ export interface FeedbackBoardState {
     readonly categories: BoardCategory[];
     readonly total: number;
     readonly loading: boolean;
+    readonly loadingMore: boolean;
     readonly error: string;
+    readonly hasMore: boolean;
     activeCategory: string | null;
     statusFilter: string;
     sortBy: string;
     readonly votedItems: Record<string, 'up' | 'down'>;
+    readonly voteErrors: Record<string, string>;
     reload(): Promise<void>;
+    loadMore(): Promise<void>;
     vote(itemId: string, direction: 'up' | 'down'): Promise<void>;
     getResponses(itemId: string): Promise<{
         message: string;

package/dist/components/board/state.svelte.js

@@ -8,18 +8,20 @@
  */
 import { createStatusClient } from '../../api.js';
 export function createFeedbackBoard(options) {
-    const { apiUrl, apiKey, categoryConfig = {} } = options;
+    const { apiUrl, apiKey, categoryConfig = {}, pageSize = 50 } = options;
     const client = createStatusClient({ apiUrl, apiKey });
     // Reactive state
     let items = $state([]);
     let categories = $state([]);
     let total = $state(0);
     let loading = $state(true);
+    let loadingMore = $state(false);
     let error = $state('');
     let activeCategory = $state(null);
     let statusFilter = $state('open');
     let sortBy = $state('votes');
     let votedItems = $state({});
+    let voteErrors = $state({});
     // Response cache
     const responseCache = {};
     async function load() {
@@ -30,6 +32,8 @@ export function createFeedbackBoard(options) {
                 category: activeCategory || undefined,
                 status: statusFilter,
                 sort: sortBy,
+                limit: pageSize,
+                offset: 0,
             });
             items = data.items;
             total = data.total;
@@ -42,6 +46,28 @@ export function createFeedbackBoard(options) {
             loading = false;
         }
     }
+    async function loadMore() {
+        if (loadingMore || items.length >= total)
+            return;
+        loadingMore = true;
+        try {
+            const data = await client.getBoard({
+                category: activeCategory || undefined,
+                status: statusFilter,
+                sort: sortBy,
+                limit: pageSize,
+                offset: items.length,
+            });
+            items = [...items, ...data.items];
+            total = data.total;
+        }
+        catch {
+            // Silently fail — user can retry
+        }
+        finally {
+            loadingMore = false;
+        }
+    }
     // Auto-reload when filters change
     $effect(() => {
         void activeCategory;
@@ -51,6 +77,11 @@ export function createFeedbackBoard(options) {
     });
     async function vote(itemId, direction) {
         const prev = votedItems[itemId];
+        // Clear any prior error for this item
+        if (voteErrors[itemId]) {
+            const { [itemId]: _, ...rest } = voteErrors;
+            voteErrors = rest;
+        }
         try {
             const result = await client.vote(itemId, direction);
             const item = items.find((i) => i.id === itemId);
@@ -65,7 +96,12 @@ export function createFeedbackBoard(options) {
             }
         }
         catch {
-            // Vote failures are silent — optimistic UI
+            voteErrors = { ...voteErrors, [itemId]: 'Vote failed' };
+            // Auto-dismiss after 3 seconds
+            setTimeout(() => {
+                const { [itemId]: _, ...rest } = voteErrors;
+                voteErrors = rest;
+            }, 3000);
         }
     }
     async function getResponses(itemId) {
@@ -94,7 +130,9 @@ export function createFeedbackBoard(options) {
         get categories() { return categories; },
         get total() { return total; },
         get loading() { return loading; },
+        get loadingMore() { return loadingMore; },
         get error() { return error; },
+        get hasMore() { return items.length < total; },
         get activeCategory() { return activeCategory; },
         set activeCategory(v) { activeCategory = v; },
         get statusFilter() { return statusFilter; },
@@ -102,7 +140,9 @@ export function createFeedbackBoard(options) {
         get sortBy() { return sortBy; },
         set sortBy(v) { sortBy = v; },
         get votedItems() { return votedItems; },
+        get voteErrors() { return voteErrors; },
         reload: load,
+        loadMore,
         vote,
         getResponses,
         submitFeedback,

package/dist/components/dev/DevContextMenu.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	interface Props {
+		x: number;
+		y: number;
+		boardUrl?: string;
+		onReportBug: () => void;
+		onRequestFeature: () => void;
+		onViewBoard?: () => void;
+	}
+
+	let { x, y, boardUrl, onReportBug, onRequestFeature, onViewBoard }: Props = $props();
+
+	let adjustedX = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 800) - 200));
+	let adjustedY = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 600) - 160));
+
+	function handleKeydown(e: KeyboardEvent) {
+		const menu = (e.currentTarget as HTMLElement);
+		const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+		const currentIndex = Array.from(items).indexOf(e.target as HTMLElement);
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+			items[next]?.focus();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+			items[prev]?.focus();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions — context menu positioned at cursor -->
+<div
+	class="fixed z-[99999]"
+	style="left: {adjustedX}px; top: {adjustedY}px;"
+	onmousedown={(e) => e.stopPropagation()}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div class="sf-ctx-menu" role="menu" tabindex="-1" aria-label="Feedback actions" onkeydown={handleKeydown}>
+		<button class="sf-ctx-item" role="menuitem" onclick={onReportBug}>
+			<i class="fa-solid fa-bug text-red-400" aria-hidden="true"></i>
+			Report Bug
+		</button>
+		<button class="sf-ctx-item" role="menuitem" onclick={onRequestFeature}>
+			<i class="fa-solid fa-lightbulb text-amber-400" aria-hidden="true"></i>
+			Request Feature
+		</button>
+		{#if boardUrl && onViewBoard}
+			<div class="sf-ctx-divider" role="separator">
+				<button class="sf-ctx-item sf-ctx-item-secondary" role="menuitem" onclick={onViewBoard}>
+					<i class="fa-solid fa-clipboard-list" aria-hidden="true"></i>
+					View Open Issues
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.sf-ctx-menu {
+		background: var(--sf-surface, var(--color-surface, #1e293b));
+		border: 1px solid var(--sf-border, var(--color-border, #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: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.sf-ctx-item:hover,
+	.sf-ctx-item:focus-visible {
+		background: var(--sf-surface-hover, var(--color-surface-hover, #334155));
+		outline: none;
+	}
+
+	.sf-ctx-item-secondary {
+		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
+	}
+
+	.sf-ctx-divider {
+		border-top: 1px solid var(--sf-border, var(--color-border, #334155));
+	}
+</style>

package/dist/components/dev/DevContextMenu.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    x: number;
+    y: number;
+    boardUrl?: string;
+    onReportBug: () => void;
+    onRequestFeature: () => void;
+    onViewBoard?: () => void;
+}
+declare const DevContextMenu: import("svelte").Component<Props, {}, "">;
+type DevContextMenu = ReturnType<typeof DevContextMenu>;
+export default DevContextMenu;

package/dist/components/dev/DevOnboardingToast.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		onDismiss: () => void;
+	}
+
+	let { onDismiss }: Props = $props();
+</script>
+
+<div class="fixed bottom-4 right-4 z-[99997] animate-fade-in">
+	<div class="sf-toast">
+		<i class="fa-solid fa-computer-mouse sf-toast-icon"></i>
+		<div>
+			<p class="sf-toast-title">Ctrl + Right-click anywhere</p>
+			<p class="sf-toast-subtitle">to report bugs or request features</p>
+		</div>
+		<button class="sf-toast-close" onclick={onDismiss} aria-label="Dismiss">
+			<i class="fa-solid fa-xmark"></i>
+		</button>
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from { opacity: 0; transform: translateY(8px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+	.animate-fade-in {
+		animation: fade-in 0.3s ease-out;
+	}
+
+	.sf-toast {
+		background: var(--sf-surface, var(--color-surface, #1e293b));
+		border: 1px solid var(--sf-border, var(--color-border, #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: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+	}
+
+	.sf-toast-icon {
+		color: var(--color-primary, #3b82f6);
+		font-size: 1.125rem;
+	}
+
+	.sf-toast-title {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.sf-toast-subtitle {
+		font-size: 0.75rem;
+		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
+		margin: 0;
+	}
+
+	.sf-toast-close {
+		color: var(--sf-foreground-tertiary, var(--color-foreground-tertiary, #64748b));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		margin-left: 0.5rem;
+		transition: color 0.15s;
+	}
+
+	.sf-toast-close:hover {
+		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+	}
+</style>

package/dist/components/dev/DevOnboardingToast.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    onDismiss: () => void;
+}
+declare const DevOnboardingToast: import("svelte").Component<Props, {}, "">;
+type DevOnboardingToast = ReturnType<typeof DevOnboardingToast>;
+export default DevOnboardingToast;

package/dist/components/dev/environment.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Environment detection utilities for DevFeedback.
+ */
+/**
+ * Read an environment variable from common SvelteKit/Vite injection patterns.
+ */
+export declare function getEnvVar(key: string): string | undefined;
+/**
+ * Detect whether DevFeedback should be enabled.
+ * Priority: explicit prop > env var > Vercel env > localhost.
+ */
+export declare function detectEnvironment(explicitEnabled?: boolean): boolean;
+/**
+ * Get a human-readable environment name.
+ */
+export declare function getEnvironmentName(): string;
+/**
+ * Get a CSS selector path for a DOM element (for bug context).
+ */
+export declare function getElementSelector(el: HTMLElement | null): string;
+/**
+ * Get a truncated outer HTML snippet for a DOM element (for bug context).
+ */
+export declare function getElementHtml(el: HTMLElement | null): string;