@alliance-droid/status-feedback-system 0.3.2 → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog
+
+## 1.0.0
+
+First stable release. Client-only package with full component suite.
+
+### Components
+- `StatusPage` — Full status page with systems, incidents, uptime bars (self-fetching or pass-through)
+- `StatusBanner` — Compact inline status indicator
+- `FeedbackButton` — Floating action button with embedded feedback form
+- `FeedbackForm` — Standalone feedback submission form
+- `FeedbackBoard` — Public feedback board with voting, categories, filtering
+- `DevFeedback` — Developer feedback overlay (Ctrl+right-click) with screenshot capture
+- Shared: `StatusIndicator`, `UptimeBar`, `IncidentTimeline`, `SystemCard`
+
+### API Client
+- `createStatusClient()` with typed methods for all endpoints
+- Custom `fetch` support for SSR
+
+### Quality
+- 150 tests across 13 test files
+- 0 svelte-check errors/warnings
+- Full TypeScript types for all exports
+- Comprehensive README with architecture docs and props tables
+
+## 0.4.0
+
+### Breaking Changes
+- Package is now **client-only** — server/admin components moved to `status-feedback-admin` app
+- Removed `./server` and `./admin` subpath exports
+- All data is fetched from the admin backend via `createStatusClient` API
+
+### Added
+- `DevFeedback` — Ctrl+right-click developer feedback with screenshot capture, console error collection, and environment auto-detection
+- `FeedbackBoard` — Public feedback board with voting, categories, filtering, and inline responses
+- `FeedbackButton` — Floating action button with embedded feedback form
+- `StatusBanner` — Compact inline status indicator (self-fetching or pass-through)
+- `StatusPage` — Full status page with systems, incidents, uptime bars (self-fetching or pass-through)
+- `FeedbackForm` — Standalone feedback submission form
+- Shared components: `StatusIndicator`, `UptimeBar`, `IncidentTimeline`, `SystemCard`
+- Full API client (`createStatusClient`) with typed methods for all endpoints
+
+### Fixed
+- Proper TypeScript types for all event handlers
+- Accessibility: aria-labels on all icon-only buttons
+
+## 0.1.1
+
+- Initial client package extraction from monolith

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alliance Technical Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,95 +1,271 @@
 # @alliance-droid/status-feedback-system
 
-Drop-in system status pages and user feedback forms for SvelteKit apps.
+Drop-in system status pages and user feedback components for SvelteKit apps.
 
-## Features
+This is the **client package** — UI components that talk to a [status-feedback-admin](https://github.com/alliance-droid/status-feedback-admin) backend via API. The admin app handles data storage, API key management, and the admin dashboard.
 
-- **Status Page** — Public-facing system health display with uptime bars
-- **Feedback Form** — Users submit bugs, feature requests, general feedback
-- **Admin Dashboard** — Manage projects, systems, incidents, and feedback
-- **API Key Auth** — Multi-project support with scoped API keys
-- **MSSQL** — Auto-migration, all tables prefixed `sf_`
+## Architecture
 
-## Quick Start
+```
+┌─────────────────────────┐       ┌──────────────────────────┐
+│   Your SvelteKit App    │       │  status-feedback-admin   │
+│                         │       │                          │
+│  ┌───────────────────┐  │  API  │  ┌────────────────────┐  │
+│  │ StatusPage        │──┼───────┼──│ /api/status        │  │
+│  │ FeedbackButton    │  │       │  │ /api/feedback      │  │
+│  │ DevFeedback       │  │       │  │ /api/incidents     │  │
+│  │ FeedbackBoard     │  │       │  │ /api/board         │  │
+│  └───────────────────┘  │       │  └────────────────────┘  │
+│                         │       │           │               │
+│  npm package            │       │  MSSQL + Azure Blob      │
+└─────────────────────────┘       └──────────────────────────┘
+```
 
-### Server Setup
+## Setup
 
-```typescript
-// src/lib/server/status.ts
-import { createStatusServer } from '@alliance-droid/status-feedback-system/server';
+### 1. Deploy the admin backend
 
-export const statusServer = createStatusServer({
-  database: { connectionString: env.MSSQL_CONNECTION_STRING }
-});
+The admin app ([status-feedback-admin](https://github.com/alliance-droid/status-feedback-admin)) provides the API, database, and admin dashboard. Deploy it first.
+
+Required env vars on the admin app:
+```bash
+MSSQL_CONNECTION_STRING=Server=...;Initial Catalog=StatusFeedback;...
+SESSION_SECRET=your-secret
 
-await statusServer.init();
+# Optional — stores screenshots in Azure Blob Storage instead of base64 in DB
+AZURE_BLOB_CONNECTION_STRING=DefaultEndpointsProtocol=https;AccountName=...
+AZURE_BLOB_CONTAINER=screenshots
 ```
 
-### API Routes
+### 2. Create a project and get an API key
 
-```typescript
-// src/routes/api/status/[...path]/+server.ts
-import { statusServer } from '$lib/server/status';
-
-const handlers = statusServer.createHandlers();
-export const GET = handlers.GET;
-export const POST = handlers.POST;
-export const PATCH = handlers.PATCH;
-export const DELETE = handlers.DELETE;
+Log into the admin dashboard, create a project, and copy its API key (prefixed `sf_`).
+
+### 3. Install the client package
+
+```bash
+npm install @alliance-droid/status-feedback-system
 ```
 
-### Status Page
+**Peer dependencies:** `svelte ^5.0.0`, `@alliance-droid/svelte-component-library >=1.0.0`
+
+## Components
+
+### StatusPage
+
+Full status page with systems, incidents, and uptime history bars. Supports **self-fetching** (provide `apiUrl` + `apiKey`) or **pass-through** (provide data directly).
 
 ```svelte
 <script>
   import { StatusPage } from '@alliance-droid/status-feedback-system';
-  let { data } = $props();
 </script>
 
+<!-- Self-fetching mode -->
+<StatusPage
+  projectName="My App"
+  apiUrl="https://status-admin.example.com"
+  apiKey="sf_abc123..."
+/>
+
+<!-- Pass-through mode -->
 <StatusPage
   projectName="My App"
   systems={data.systems}
   incidents={data.incidents}
   statusHistory={data.statusHistory}
+  showUptime={true}
 />
 ```
 
-### Feedback Button
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `projectName` | `string` | required | Display name in the header |
+| `apiUrl` | `string` | — | Admin backend URL (self-fetching mode) |
+| `apiKey` | `string` | — | Project API key (self-fetching mode) |
+| `systems` | `System[]` | — | Pass-through: system data |
+| `incidents` | `Incident[]` | — | Pass-through: incident data |
+| `statusHistory` | `Record<string, StatusHistoryEntry[]>` | — | Pass-through: uptime data |
+| `showUptime` | `boolean` | `true` | Show 90-day uptime bars |
+
+### StatusBanner
+
+Compact inline status indicator — good for footers or nav bars.
 
 ```svelte
-<script>
-  import { FeedbackButton } from '@alliance-droid/status-feedback-system';
-</script>
+<StatusBanner
+  apiUrl="https://status-admin.example.com"
+  apiKey="sf_abc123..."
+  statusUrl="/status"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `systems` | `System[]` | — | Pass-through mode |
+| `apiUrl` | `string` | — | Self-fetching mode |
+| `apiKey` | `string` | — | Self-fetching mode |
+| `statusUrl` | `string` | — | Links to full status page (renders as `<a>`) |
+
+### FeedbackButton
+
+Floating action button with an embedded feedback form. Fixed position, bottom corner.
 
+```svelte
 <FeedbackButton
   apiKey="sf_abc123..."
-  endpoint="/api/status"
+  apiUrl="https://status-admin.example.com"
   position="bottom-right"
+  categories={['Bug', 'Feature Request', 'General']}
+  userEmail={currentUser?.email}
 />
 ```
 
-### Admin Dashboard
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | required | Admin backend URL |
+| `apiKey` | `string` | required | Project API key |
+| `categories` | `string[]` | `['Bug', 'Feature Request', 'General']` | Category options |
+| `userEmail` | `string` | — | Pre-fill email field |
+| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Button position |
+
+### FeedbackForm
+
+Standalone feedback form — embed it wherever you need it.
+
+```svelte
+<FeedbackForm
+  apiKey="sf_abc123..."
+  apiUrl="https://status-admin.example.com"
+  categories={['Bug', 'Feature Request']}
+  userEmail={currentUser?.email}
+  onSuccess={() => toast('Thanks!')}
+  onError={(msg) => toast(msg, 'error')}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | required | Admin backend URL |
+| `apiKey` | `string` | required | Project API key |
+| `categories` | `string[]` | `['Bug', 'Feature Request', 'General']` | Category options |
+| `userEmail` | `string` | — | Pre-fill email field |
+| `onSuccess` | `() => void` | — | Called after successful submission |
+| `onError` | `(error: string) => void` | — | Called on submission error |
+
+### FeedbackBoard
+
+Public feedback board with voting, category filtering, and admin responses.
+
+```svelte
+<FeedbackBoard
+  apiUrl="https://status-admin.example.com"
+  apiKey="sf_abc123..."
+  title="Feature Requests"
+  showSubmit={true}
+  submitCategories={['Bug', 'Feature Request', 'Improvement']}
+  categoryConfig={{
+    Bug: { icon: 'fa-solid fa-bug', label: 'Bugs', description: 'Something broken' },
+    'Feature Request': { icon: 'fa-solid fa-lightbulb', label: 'Ideas' },
+  }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | required | Admin backend URL |
+| `apiKey` | `string` | required | Project API key |
+| `title` | `string` | `'Feedback Board'` | Header title |
+| `showSubmit` | `boolean` | `true` | Show inline submit form |
+| `submitCategories` | `string[]` | `[]` | Category options for submit form |
+| `categoryConfig` | `Record<string, { label?, icon?, description? }>` | `{}` | Customize sidebar categories |
+
+### DevFeedback
+
+Developer feedback overlay for staging/preview environments. Activated via **Ctrl+right-click** anywhere on the page.
+
+Auto-captures: screenshots (via html2canvas), console errors, viewport size, current route, clicked element selector, and deployment context (Vercel env vars).
 
 ```svelte
 <script>
-  import { AdminDashboard } from '@alliance-droid/status-feedback-system/admin';
-  let { data } = $props();
+  import { DevFeedback } from '@alliance-droid/status-feedback-system';
 </script>
 
-<AdminDashboard
-  projects={data.projects}
-  apiEndpoint="/api/status"
+<!-- In your root +layout.svelte -->
+<DevFeedback
+  apiUrl="https://status-admin.example.com"
+  apiKey="sf_abc123..."
+  boardUrl="/feedback"
 />
 ```
 
-## Exports
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | required | Admin backend URL |
+| `apiKey` | `string` | required | Project API key |
+| `enabled` | `boolean` | auto-detect | Override environment detection |
+| `boardUrl` | `string` | — | URL for "View Open Issues" link. Hidden if omitted. |
+| `maxConsoleErrors` | `number` | `20` | Max console errors to capture |
+| `showOnboarding` | `boolean` | `true` | Show "Ctrl+right-click" toast on first visit |
+
+**Environment auto-detection:** Enabled on `localhost`, `127.0.0.1`, `*.local`, and Vercel preview deployments. Disabled in Vercel production. Override with the `enabled` prop or `PUBLIC_FEEDBACK_ENABLED` env var.
+
+**Screenshot storage:** If the admin backend has `AZURE_BLOB_CONNECTION_STRING` configured, screenshots are uploaded to Azure Blob Storage. Otherwise they're stored as base64 in the database.
+
+## API Client
+
+All components use a shared API client. You can also use it directly:
 
-| Path | Description |
-|------|-------------|
-| `.` | Client components (StatusPage, FeedbackForm, etc.) |
-| `./server` | Server module (createStatusServer, types) |
-| `./admin` | Admin components (AdminDashboard, etc.) |
+```typescript
+import { createStatusClient } from '@alliance-droid/status-feedback-system';
+
+const client = createStatusClient({
+  apiUrl: 'https://status-admin.example.com',
+  apiKey: 'sf_abc123...',
+  fetch: event.fetch, // Optional: pass SvelteKit's fetch for SSR
+});
+
+const { systems, overallStatus } = await client.getStatus();
+const { incidents } = await client.getIncidents({ limit: 5, includeResolved: true });
+const { history } = await client.getUptime({ days: 90 });
+const feedback = await client.submitFeedback({ message: 'Great product!' });
+const { items, total, categories } = await client.getBoard({ sort: 'votes', status: 'open' });
+```
+
+## Shared Components
+
+Lower-level building blocks used by StatusPage — exported for custom layouts:
+
+```typescript
+import {
+  StatusIndicator,  // Status dot + label (operational/degraded/outage/maintenance)
+  UptimeBar,        // 90-day uptime bar chart
+  IncidentTimeline, // Chronological incident updates
+  SystemCard,       // Single system status card with uptime bar
+} from '@alliance-droid/status-feedback-system';
+```
+
+## All Exports
+
+```typescript
+// Components
+import {
+  StatusPage, StatusBanner, FeedbackForm, FeedbackButton,
+  FeedbackBoard, DevFeedback,
+  StatusIndicator, UptimeBar, IncidentTimeline, SystemCard,
+} from '@alliance-droid/status-feedback-system';
+
+// API Client
+import { createStatusClient } from '@alliance-droid/status-feedback-system';
+import type { StatusClient, StatusClientConfig } from '@alliance-droid/status-feedback-system';
+
+// Types
+import type {
+  System, Incident, IncidentUpdate, Feedback, FeedbackResponse,
+  SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus,
+  StatusData, IncidentData, UptimeData, BoardData, BoardItem,
+} from '@alliance-droid/status-feedback-system';
+```
 
 ## License
 
-UNLICENSED — Private package.
+MIT © 2026 Alliance Technical Group

package/dist/components/DevFeedback.svelte

@@ -20,6 +20,8 @@
 		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;
 	}
 
 	let {
@@ -28,6 +30,7 @@
 		enabled = undefined,
 		maxConsoleErrors = 20,
 		showOnboarding = true,
+		boardUrl,
 	}: Props = $props();
 
 	let client = $derived(createStatusClient({ apiUrl, apiKey }));
@@ -43,7 +46,7 @@
 		} catch { /* ignore */ }
 		try {
 			// Window-injected env (common pattern)
-			const win = window as Record<string, unknown>;
+			const win = window as unknown as Record<string, unknown>;
 			const env = win.__ENV as Record<string, string> | undefined;
 			if (env?.[key]) return env[key];
 		} catch { /* ignore */ }
@@ -106,11 +109,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 +127,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();
 
@@ -161,6 +162,7 @@
 		const parts: string[] = [];
 		let current: HTMLElement | null = el;
 		while (current && current !== document.body) {
+			if (!current.tagName) { current = current.parentElement; continue; }
 			let selector = current.tagName.toLowerCase();
 			if (current.id) {
 				selector += `#${current.id}`;
@@ -197,8 +199,8 @@
 				windowHeight: window.innerHeight,
 			});
 			screenshotData = canvas.toDataURL('image/png');
-		} catch (e) {
-			console.warn('Screenshot capture failed:', e);
+		} catch {
+			// Screenshot capture can fail in cross-origin iframes or restricted contexts
 			screenshotData = null;
 		} finally {
 			capturingScreenshot = false;
@@ -287,8 +289,9 @@
 	}
 
 	function openBoard() {
+		if (!boardUrl) return;
 		menuOpen = false;
-		window.open('/feedback', '_blank');
+		window.open(boardUrl, '_blank');
 	}
 
 	// Ensure menu stays in viewport
@@ -299,8 +302,7 @@
 {#if isEnabled}
 	<!-- Context menu -->
 	{#if menuOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_no_static_element_interactions — context menu needs mousedown to prevent close-on-click -->
 		<div
 			class="fixed z-[99999]"
 			style="left: {adjustedX}px; top: {adjustedY}px;"
@@ -315,22 +317,23 @@
 					<i class="fa-solid fa-lightbulb text-amber-400"></i>
 					Request Feature
 				</button>
-				<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>
-				</div>
+				{#if boardUrl}
+					<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>
+					</div>
+				{/if}
 			</div>
 		</div>
 	{/if}
 
 	<!-- Form modal -->
 	{#if formOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- 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 backdrop-blur-sm" onmousedown={(e) => { if (e.target === e.currentTarget) formOpen = false; }}>
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<!-- 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 -->
@@ -348,6 +351,7 @@
 						<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>
@@ -371,7 +375,7 @@
 							/>
 
 							<Textarea
-								bind:value={formMessage}
+								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...'}
@@ -428,6 +432,7 @@
 											<button
 												class="absolute top-1 right-1 bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs border-none cursor-pointer hover:bg-black/80"
 												onclick={() => (screenshotData = null)}
+												aria-label="Remove screenshot"
 											>
 												<i class="fa-solid fa-xmark"></i>
 											</button>
@@ -444,7 +449,7 @@
 							{/if}
 
 							<div class="flex justify-end gap-2 pt-1">
-								<Button variant="neutral" style="outlined" onclick={() => (formOpen = false)}>
+								<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
 									Cancel
 								</Button>
 								<Button
@@ -469,10 +474,10 @@
 			<div class="sf-toast">
 				<i class="fa-solid fa-computer-mouse" style="color: var(--color-primary, #3b82f6); font-size: 1.125rem;"></i>
 				<div>
-					<p style="font-size: 0.875rem; font-weight: 600; margin: 0;">Middle-click anywhere</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="sf-toast-close" onclick={() => (showToast = false)}>
+				<button class="sf-toast-close" onclick={() => (showToast = false)} aria-label="Dismiss">
 					<i class="fa-solid fa-xmark"></i>
 				</button>
 			</div>

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

@@ -7,6 +7,8 @@ interface Props {
     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;
 }
 declare const DevFeedback: import("svelte").Component<Props, {}, "">;
 type DevFeedback = ReturnType<typeof DevFeedback>;

package/dist/components/FeedbackBoard.svelte

@@ -56,6 +56,7 @@
 	let submitEmail = $state('');
 	let submitting = $state(false);
 	let submitSuccess = $state(false);
+	let submitError = $state('');
 
 	let votedItems = $state<Record<string, 'up' | 'down'>>({});
 
@@ -98,7 +99,7 @@
 				votedItems = { ...votedItems, [itemId]: direction };
 			}
 		} catch {
-			// silently fail
+			// Vote failures are silent — optimistic UI, vote just doesn't persist
 		}
 	}
 
@@ -114,6 +115,7 @@
 				const data = await client.getResponses(itemId);
 				responses = { ...responses, [itemId]: data.responses };
 			} catch {
+				// Show empty responses on failure — user can re-expand to retry
 				responses = { ...responses, [itemId]: [] };
 			} finally {
 				loadingResponses = { ...loadingResponses, [itemId]: false };
@@ -124,13 +126,14 @@
 	async function handleSubmit() {
 		if (!submitMessage.trim()) return;
 		submitting = true;
+		submitError = '';
 		try {
 			await client.submitFeedback({
 				title: submitTitle.trim() || undefined,
 				message: submitMessage.trim(),
 				category: submitCategory || undefined,
 				email: submitEmail.trim() || undefined,
-				pageUrl: window.location.href,
+				pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
 			});
 			submitSuccess = true;
 			submitTitle = '';
@@ -142,8 +145,8 @@
 				showForm = false;
 			}, 2000);
 			await load();
-		} catch {
-			// ignore
+		} catch (err) {
+			submitError = err instanceof Error ? err.message : 'Failed to submit feedback';
 		} finally {
 			submitting = false;
 		}
@@ -271,10 +274,16 @@
 							placeholder="Title (optional)"
 						/>
 						<Textarea
-							bind:value={submitMessage}
+							value={submitMessage} oninput={(e) => (submitMessage = (e.currentTarget as HTMLTextAreaElement).value)}
 							placeholder="Describe your feedback..."
 							rows={3}
 						/>
+						{#if submitError}
+							<p class="text-sm text-red-400">
+								<i class="fa-solid fa-exclamation-circle mr-1"></i>
+								{submitError}
+							</p>
+						{/if}
 						<div class="flex gap-2 items-center flex-wrap">
 							{#if submitCategoryOptions.length > 0}
 								<div class="min-w-[140px]">
@@ -333,7 +342,7 @@
 									size="sm"
 									variant={votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
 									onclick={() => handleVote(item.id, 'up')}
-									aria-label="Upvote"
+									label="Upvote"
 								>
 									<i class="fa-solid fa-chevron-up text-xs"></i>
 								</IconButton>
@@ -342,7 +351,7 @@
 									size="sm"
 									variant={votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
 									onclick={() => handleVote(item.id, 'down')}
-									aria-label="Downvote"
+									label="Downvote"
 								>
 									<i class="fa-solid fa-chevron-down text-xs"></i>
 								</IconButton>

package/dist/components/FeedbackForm.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { createStatusClient } from '../api.js';
+
 	interface Props {
 		apiKey: string;
 		apiUrl: string;
@@ -17,9 +20,11 @@
 		onError,
 	}: Props = $props();
 
-	let category = $state(categories[0] || '');
+	let client = $derived(createStatusClient({ apiUrl, apiKey }));
+
+	let category = $state(untrack(() => categories[0] || ''));
 	let message = $state('');
-	let email = $state(userEmail ?? '');
+	let email = $state(untrack(() => userEmail ?? ''));
 	let submitting = $state(false);
 	let submitted = $state(false);
 	let errorMsg = $state('');
@@ -32,25 +37,13 @@
 		errorMsg = '';
 
 		try {
-			const res = await fetch(`${apiUrl.replace(/\/$/, '')}/api/feedback`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					'x-api-key': apiKey,
-				},
-				body: JSON.stringify({
-					category,
-					message: message.trim(),
-					email: email.trim() || undefined,
-					pageUrl: window.location.href,
-				}),
+			await client.submitFeedback({
+				category,
+				message: message.trim(),
+				email: email.trim() || undefined,
+				pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
 			});
 
-			if (!res.ok) {
-				const data = await res.json();
-				throw new Error(data.error || 'Failed to submit feedback');
-			}
-
 			submitted = true;
 			onSuccess?.();
 		} catch (err) {

package/dist/components/StatusBanner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import type { System, SystemStatus } from '../types.js';
 	import { createStatusClient } from '../api.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
@@ -17,8 +17,8 @@
 
 	let { systems: systemsProp, apiUrl, apiKey, statusUrl }: Props = $props();
 
-	let systems: System[] = $state(systemsProp ?? []);
-	let loading = $state(!systemsProp && !!apiUrl && !!apiKey);
+	let systems: System[] = $state(untrack(() => systemsProp ?? []));
+	let loading = $state(untrack(() => !systemsProp && !!apiUrl && !!apiKey));
 
 	onMount(async () => {
 		if (systemsProp || !apiUrl || !apiKey) return;
@@ -26,8 +26,9 @@
 			const client = createStatusClient({ apiUrl, apiKey });
 			const data = await client.getStatus();
 			systems = data.systems;
-		} catch (err) {
-			console.error('StatusBanner fetch error:', err);
+		} catch {
+			// Error is silent — banner simply stays in loading state
+			// Consumer can use StatusPage for full error display
 		} finally {
 			loading = false;
 		}

package/dist/components/StatusPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
 	import { createStatusClient } from '../api.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
@@ -33,10 +33,10 @@
 	}: Props = $props();
 
 	// ── State ──
-	let systems: System[] = $state(systemsProp ?? []);
-	let incidents: Incident[] = $state(incidentsProp ?? []);
-	let statusHistory: Record<string, StatusHistoryEntry[]> = $state(statusHistoryProp ?? {});
-	let loading = $state(!systemsProp);
+	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 error = $state('');
 
 	// ── Self-fetching mode ──
@@ -59,7 +59,6 @@
 			statusHistory = uptimeData.history;
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to load status data';
-			console.error('StatusPage fetch error:', err);
 		} finally {
 			loading = false;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "0.3.2",
+  "version": "1.0.0",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",
@@ -13,37 +13,38 @@
   },
   "files": [
     "dist",
-    "!dist/**/*.test.*"
+    "!dist/**/*.test.*",
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "package": "svelte-kit sync && svelte-package -o dist",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "build": "svelte-package -o dist && publint",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@alliance-droid/svelte-component-library": ">=0.1.0",
+    "@alliance-droid/svelte-component-library": ">=1.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@alliance-droid/svelte-component-library": "^0.1.88",
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.0",
+    "@alliance-droid/svelte-component-library": "^1.0.5",
     "@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",
-    "tailwindcss": "^4.1.0",
     "typescript": "^5.9.0",
     "vite": "^7.3.0",
     "vitest": "^4.0.0"
   },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  },
   "keywords": [
     "svelte",
     "sveltekit",
@@ -52,12 +53,12 @@
     "uptime"
   ],
   "author": "Alliance Technical Group",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "publishConfig": {
     "access": "restricted"
   },
-  "dependencies": {
-    "@alliance-droid/svelte-component-library": ">=0.1.0",
-    "html2canvas": "^1.4.1"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alliance-droid/status-feedback-system.git"
   }
 }