@alliance-droid/status-feedback-system 1.3.13 → 1.3.15

package/dist/components/DevFeedback.svelte

@@ -337,8 +337,8 @@
 		>
 			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">
 				<!-- Header (draggable) -->
-				<!-- svelte-ignore a11y_no_static_element_interactions — drag handle needs mousedown -->
 				<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}

package/dist/components/FeedbackForm.svelte

@@ -96,7 +96,7 @@
 					bind:value={category}
 					class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
 				>
-					{#each categories as cat}
+					{#each categories as cat (cat)}
 						<option value={cat}>{cat}</option>
 					{/each}
 				</select>

package/dist/components/StatusBanner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import type { System, SystemStatus } from '../types.js';
 	import { createStatusClient, type StatusClient } from '../api.js';
 	import { deriveOverallStatus } from '../utils.js';
@@ -20,8 +20,8 @@
 
 	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
 
-	let systems: System[] = $state(untrack(() => systemsProp ?? []));
-	let loading = $state(untrack(() => !systemsProp && !!apiUrl && !!apiKey));
+	let systems = $derived(systemsProp ?? []);
+	let loading = $derived(!systemsProp && !!apiUrl && !!apiKey);
 	let fetchFailed = $state(false);
 
 	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
@@ -66,10 +66,6 @@
 		};
 	});
 
-	$effect(() => {
-		if (systemsProp) systems = systemsProp;
-	});
-
 	let overallStatus = $derived(deriveOverallStatus(systems));
 
 	const messages: Record<SystemStatus, string> = {

package/dist/components/StatusPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
 	import { createStatusClient, type StatusClient } from '../api.js';
 	import { deriveOverallStatus } from '../utils.js';
@@ -37,10 +37,10 @@
 	}: Props = $props();
 
 	// ── State ──
-	let systems: System[] = $state(untrack(() => systemsProp ?? []));
-	let incidents: Incident[] = $state(untrack(() => incidentsProp ?? []));
-	let statusHistory: Record<string, StatusHistoryEntry[]> = $state(untrack(() => statusHistoryProp ?? {}));
-	let loading = $state(untrack(() => !systemsProp));
+	let systems = $derived(systemsProp ?? []);
+	let incidents = $derived(incidentsProp ?? []);
+	let statusHistory = $derived(statusHistoryProp ?? {});
+	let loading = $derived(!systemsProp);
 	let error = $state('');
 
 	// ── Self-fetching mode ──
@@ -95,17 +95,6 @@
 		};
 	});
 
-	// ── Sync props when in pass-through mode ──
-	$effect(() => {
-		if (systemsProp) systems = systemsProp;
-	});
-	$effect(() => {
-		if (incidentsProp) incidents = incidentsProp;
-	});
-	$effect(() => {
-		if (statusHistoryProp) statusHistory = statusHistoryProp;
-	});
-
 	// ── Derived state ──
 
 	let overallStatus = $derived(deriveOverallStatus(systems));
@@ -176,7 +165,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
 				<div class="space-y-3">
-					{#each systems as system}
+					{#each systems as system (system.id)}
 						<SystemCard
 							{system}
 							history={statusHistory[system.id] || []}
@@ -192,7 +181,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
 				<div class="space-y-4">
-					{#each activeIncidents as incident}
+					{#each activeIncidents as incident (incident.id)}
 						<div class="rounded-lg border border-border bg-surface p-4">
 							<div class="flex items-start justify-between">
 								<div>
@@ -222,7 +211,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
 				<div class="space-y-4">
-					{#each recentResolved as incident}
+					{#each recentResolved as incident (incident.id)}
 						<div class="rounded-lg border border-border bg-surface p-4">
 							<div class="flex items-start justify-between">
 								<div>

package/dist/components/board/FeedbackSidebar.svelte

@@ -31,7 +31,7 @@
 		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
 	</button>
 
-	{#each board.categories as cat}
+	{#each board.categories as cat (cat.name)}
 		<button
 			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
 				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"

package/dist/components/dev/screenshot.js

@@ -25,7 +25,7 @@ export async function captureScreenshot() {
                 return hasUnsupportedColor;
             },
         });
-        return canvas.toDataURL('image/png');
+        return canvas.toDataURL('image/jpeg', 0.7);
     }
     catch (err) {
         console.error('[DevFeedback] Screenshot capture failed:', err);

package/dist/components/shared/IncidentTimeline.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <div class="space-y-4" role="list" aria-label="Incident timeline">
-	{#each updates as update}
+	{#each updates as update (update.id)}
 		{@const config = statusConfig[update.status]}
 		<div class="flex gap-3" role="listitem">
 			<div class="flex flex-col items-center">

package/dist/components/shared/UptimeBar.svelte

@@ -74,7 +74,7 @@
 		<span>Today</span>
 	</div>
 	<div class="flex gap-px">
-		{#each dayBars as bar}
+		{#each dayBars as bar (bar.date)}
 			<div
 				class="h-8 flex-1 rounded-sm transition-opacity hover:opacity-80"
 				style="background-color: {bar.color}"

package/package.json

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