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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.3.2
+
+### Changed
+
+- `<DevFeedback>` *Report Bug* form: when the consumer app's render-token endpoint is unreachable or returns an error, the form now shows paste-screenshot instructions ("Paste a screenshot to attach one — capture with ⌘⇧4 / Win+Shift+S, then ⌘V / Ctrl+V into the description") instead of the dead-end "Screenshot setup failed / Retry" panel. The previous panel offered a Retry button that could never succeed when the endpoint was simply not configured.
+
+## 2.3.1
+
+### Fixed
+
+- `<FeedbackSubmitForm>` paste-to-attach was missing from 2.3.0 (commit didn't land on main before merge). Now included.
+
 ## 2.3.0
 
 ### Added

package/dist/components/DevFeedback.svelte

@@ -89,6 +89,10 @@
 	// --- 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);
@@ -508,16 +512,14 @@
 								{: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-image-slash" aria-hidden="true"></i>
-											<span>Screenshot setup failed</span>
+											<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 mb-2">Your feedback will be submitted without a screenshot.</p>
-										<button
-											class="text-xs text-primary hover:underline bg-transparent border-none cursor-pointer p-0"
-											onclick={fetchRenderToken}
-										>
-											Retry
-										</button>
+										<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">

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
 	import type { FeedbackBoardState } from './state.svelte.js';
+	import PasteImageInput from '../shared/PasteImageInput.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -16,6 +17,16 @@
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
@@ -32,11 +43,14 @@
 				title: title.trim() || undefined,
 				message: message.trim(),
 				category: category || undefined,
+				pastedImage,
 			});
 			success = true;
 			title = '';
 			message = '';
 			category = '';
+			pastedImage = null;
+			pastedFilename = '';
 			setTimeout(() => { success = false; }, 2000);
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to submit';
@@ -66,11 +80,18 @@
 				bind:value={title}
 				placeholder="Title (optional)"
 			/>
-			<Textarea
-				value={message}
-				oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-				placeholder="Describe your feedback..."
-				rows={3}
+			<div bind:this={textareaWrapperEl}>
+				<Textarea
+					value={message}
+					oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+					placeholder="Describe your feedback (paste an image to attach it)\u2026"
+					rows={3}
+				/>
+			</div>
+			<PasteImageInput
+				{textareaEl}
+				bind:image={pastedImage}
+				bind:filename={pastedFilename}
 			/>
 			{#if error}
 				<p class="text-sm text-red-400">

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

@@ -46,6 +46,7 @@ export interface FeedbackBoardState {
         title?: string;
         message: string;
         category?: string;
+        pastedImage?: string | null;
     }): Promise<void>;
     submitResponse(itemId: string, message: string, pastedImage?: string | null): Promise<void>;
     getCategoryIcon(name: string): string;

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

@@ -128,10 +128,16 @@ export function createFeedbackBoard(options) {
     async function submitFeedback(data) {
         if (!resolvedEmail)
             throw new Error('Authentication required to submit feedback');
+        const metadata = {};
+        if (data.pastedImage)
+            metadata.pastedScreenshot = data.pastedImage;
         await client.submitFeedback({
-            ...data,
+            title: data.title,
+            message: data.message,
+            category: data.category,
             email: resolvedEmail,
             pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
         });
         await load();
     }

package/package.json

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