@alliance-droid/status-feedback-system 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.2.0
+
+### Added
+
+- `<DevFeedback>` *Report Bug* form: paste a screenshot from clipboard (Cmd/Ctrl+V) into the description textarea. Pasted images attach to the resulting ADO work item. When both a pasted image and a server-side capture are available, the pasted image wins.
+- `<PasteImageInput>` shared component exported from the package root for consumers that want to build their own paste-to-attach inputs.
+
 ## 2.0.0
 
 ### Breaking Changes

package/dist/components/DevFeedback.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { createStatusClient, type StatusClient } from '../api.js';
+	import PasteImageInput from './shared/PasteImageInput.svelte';
 	import {
 		Card,
 		Button,
@@ -142,6 +143,10 @@
 	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);
@@ -246,6 +251,8 @@
 			menuOpen = false;
 			formOpen = false;
 			renderContext = null;
+			pastedScreenshot = null;
+			pastedFilename = '';
 		}
 	}
 
@@ -277,10 +284,18 @@
 		}
 	}
 
+	$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;
@@ -318,6 +333,11 @@
 				metadata.consoleErrors = [...consoleErrors];
 			}
 
+			if (pastedScreenshot) {
+				metadata.pastedScreenshot = pastedScreenshot;
+				metadata.pastedScreenshotFilename = pastedFilename;
+			}
+
 			if (renderContext) {
 				metadata.renderToken = renderContext.renderToken;
 				metadata.issuer = renderContext.issuer;
@@ -346,6 +366,8 @@
 				formOpen = false;
 				submitResult = null;
 				renderContext = null;
+				pastedScreenshot = null;
+				pastedFilename = '';
 			}, 2000);
 		} catch {
 			submitResult = 'error';
@@ -434,13 +456,21 @@
 							label="Title"
 						/>
 
-						<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 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) -->
@@ -475,7 +505,7 @@
 									<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
 										<Spinner /> Preparing screenshot...
 									</div>
-								{:else if renderTokenFailed}
+								{: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>
@@ -489,7 +519,7 @@
 											Retry
 										</button>
 									</div>
-								{:else if renderContext}
+								{: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>

package/dist/components/shared/PasteImageInput.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	interface Props {
+		textareaEl: HTMLTextAreaElement | undefined;
+		image?: string | null;
+		filename?: string;
+		maxBytes?: number;
+		allowedMimeTypes?: string[];
+		onimage?: (value: string | null) => void;
+		previewClass?: string;
+	}
+
+	let {
+		textareaEl,
+		image = $bindable(null),
+		filename = $bindable(''),
+		maxBytes = 5 * 1024 * 1024,
+		allowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+		onimage,
+		previewClass = '',
+	}: Props = $props();
+
+	let errorMessage = $state('');
+	let errorTimer: ReturnType<typeof setTimeout> | null = null;
+	let attachedTextarea: HTMLTextAreaElement | null = null;
+
+	function setError(msg: string) {
+		errorMessage = msg;
+		if (errorTimer) clearTimeout(errorTimer);
+		errorTimer = setTimeout(() => { errorMessage = ''; }, 4000);
+	}
+
+	async function handlePaste(e: ClipboardEvent) {
+		const items = Array.from(e.clipboardData?.items ?? []);
+		const imageItem = items.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
+		if (!imageItem) return;
+
+		e.preventDefault();
+		const file = imageItem.getAsFile();
+		if (!file) return;
+
+		if (!allowedMimeTypes.includes(file.type)) {
+			setError('Unsupported image type \u2014 PNG, JPEG, GIF, or WebP only');
+			return;
+		}
+		if (file.size > maxBytes) {
+			const limitMb = Math.round(maxBytes / (1024 * 1024));
+			setError(`Image too large \u2014 max ${limitMb} MB`);
+			return;
+		}
+
+		const dataUrl = await readFileAsDataUrl(file);
+		image = dataUrl;
+		filename = generateFilename(file.type);
+		errorMessage = '';
+		onimage?.(dataUrl);
+	}
+
+	function readFileAsDataUrl(file: File): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = () => resolve(reader.result as string);
+			reader.onerror = () => reject(reader.error);
+			reader.readAsDataURL(file);
+		});
+	}
+
+	function generateFilename(mime: string): string {
+		const ext = mime.split('/')[1] || 'png';
+		const now = new Date();
+		const stamp = now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+		return `pasted-image-${stamp}.${ext}`;
+	}
+
+	export function removeImage() {
+		image = null;
+		filename = '';
+		onimage?.(null);
+	}
+
+	function formatSize(dataUrl: string): string {
+		const commaIdx = dataUrl.indexOf(',');
+		if (commaIdx === -1) return '';
+		const bytes = Math.round((dataUrl.length - commaIdx - 1) * 0.75);
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+	}
+
+	$effect(() => {
+		if (attachedTextarea === textareaEl) return;
+		if (attachedTextarea) attachedTextarea.removeEventListener('paste', handlePaste);
+		attachedTextarea = textareaEl ?? null;
+		if (attachedTextarea) attachedTextarea.addEventListener('paste', handlePaste);
+	});
+
+	onDestroy(() => {
+		if (attachedTextarea) attachedTextarea.removeEventListener('paste', handlePaste);
+		if (errorTimer) clearTimeout(errorTimer);
+	});
+</script>
+
+{#if image}
+	<div class="sf-paste-preview {previewClass}">
+		<img src={image} alt={filename} class="sf-paste-thumb" />
+		<div class="sf-paste-meta">
+			<span class="sf-paste-name">{filename}</span>
+			<span class="sf-paste-size">{formatSize(image)}</span>
+		</div>
+		<button type="button" class="sf-paste-remove" onclick={removeImage} aria-label="Remove image">
+			&times;
+		</button>
+	</div>
+{/if}
+
+{#if errorMessage}
+	<p class="sf-paste-error">{errorMessage}</p>
+{/if}
+
+<style>
+	.sf-paste-preview {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.5rem;
+		border: 1px solid var(--color-border, #2a2f3a);
+		border-radius: 0.5rem;
+		background: var(--color-surface-secondary, rgba(255, 255, 255, 0.04));
+	}
+	.sf-paste-thumb {
+		width: 120px;
+		height: 80px;
+		object-fit: cover;
+		border-radius: 0.25rem;
+		flex-shrink: 0;
+	}
+	.sf-paste-meta {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	.sf-paste-name {
+		font-size: 0.8125rem;
+		color: var(--color-foreground, #e5e7eb);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.sf-paste-size {
+		font-size: 0.75rem;
+		color: var(--color-foreground-tertiary, #9ca3af);
+	}
+	.sf-paste-remove {
+		background: transparent;
+		border: none;
+		color: var(--color-foreground-tertiary, #9ca3af);
+		font-size: 1.25rem;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+	}
+	.sf-paste-remove:hover { color: var(--color-danger, #ef4444); }
+	.sf-paste-error {
+		margin-top: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--color-danger, #ef4444);
+	}
+</style>

package/dist/components/shared/PasteImageInput.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    textareaEl: HTMLTextAreaElement | undefined;
+    image?: string | null;
+    filename?: string;
+    maxBytes?: number;
+    allowedMimeTypes?: string[];
+    onimage?: (value: string | null) => void;
+    previewClass?: string;
+}
+declare const PasteImageInput: import("svelte").Component<Props, {
+    removeImage: () => void;
+}, "image" | "filename">;
+type PasteImageInput = ReturnType<typeof PasteImageInput>;
+export default PasteImageInput;

package/dist/components/shared/index.d.ts

@@ -2,3 +2,4 @@ export { default as StatusIndicator } from './StatusIndicator.svelte';
 export { default as UptimeBar } from './UptimeBar.svelte';
 export { default as IncidentTimeline } from './IncidentTimeline.svelte';
 export { default as SystemCard } from './SystemCard.svelte';
+export { default as PasteImageInput } from './PasteImageInput.svelte';

package/dist/components/shared/index.js

@@ -2,3 +2,4 @@ export { default as StatusIndicator } from './StatusIndicator.svelte';
 export { default as UptimeBar } from './UptimeBar.svelte';
 export { default as IncidentTimeline } from './IncidentTimeline.svelte';
 export { default as SystemCard } from './SystemCard.svelte';
+export { default as PasteImageInput } from './PasteImageInput.svelte';

package/dist/index.d.ts

@@ -23,3 +23,4 @@ export { default as StatusIndicator } from './components/shared/StatusIndicator.
 export { default as UptimeBar } from './components/shared/UptimeBar.svelte';
 export { default as IncidentTimeline } from './components/shared/IncidentTimeline.svelte';
 export { default as SystemCard } from './components/shared/SystemCard.svelte';
+export { default as PasteImageInput } from './components/shared/PasteImageInput.svelte';

package/dist/index.js

@@ -25,3 +25,4 @@ export { default as StatusIndicator } from './components/shared/StatusIndicator.
 export { default as UptimeBar } from './components/shared/UptimeBar.svelte';
 export { default as IncidentTimeline } from './components/shared/IncidentTimeline.svelte';
 export { default as SystemCard } from './components/shared/SystemCard.svelte';
+export { default as PasteImageInput } from './components/shared/PasteImageInput.svelte';

package/package.json

@@ -1,66 +1,66 @@
 {
-  "name": "@alliance-droid/status-feedback-system",
-  "version": "2.1.0",
-  "type": "module",
-  "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "build": "svelte-package -o dist && publint",
-    "lint": "eslint src",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "@alliance-droid/svelte-component-library": ">=1.0.0",
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@alliance-droid/svelte-component-library": "^1.0.5",
-    "@eslint/js": "^10.0.1",
-    "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^6.0.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
-    "eslint": "^10.4.0",
-    "eslint-plugin-svelte": "^3.17.1",
-    "globals": "^17.6.0",
-    "jsdom": "^29.0.0",
-    "publint": "^0.3.0",
-    "svelte": "^5.48.0",
-    "svelte-check": "^4.3.0",
-    "typescript": "^5.9.0",
-    "typescript-eslint": "^8.59.4",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.0"
-  },
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "status-page",
-    "feedback",
-    "uptime"
-  ],
-  "author": "Alliance Technical Group",
-  "license": "UNLICENSED",
-  "publishConfig": {
-    "access": "restricted"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
-  }
-}
+	"name": "@alliance-droid/status-feedback-system",
+	"version": "2.2.0",
+	"type": "module",
+	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "svelte-package -o dist && publint",
+		"lint": "eslint src",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"@alliance-droid/svelte-component-library": ">=1.0.0",
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@alliance-droid/svelte-component-library": "^1.0.5",
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/svelte": "^5.3.1",
+		"eslint": "^10.4.0",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.6.0",
+		"jsdom": "^29.0.0",
+		"publint": "^0.3.0",
+		"svelte": "^5.48.0",
+		"svelte-check": "^4.3.0",
+		"typescript": "^5.9.0",
+		"typescript-eslint": "^8.59.4",
+		"vite": "^7.3.0",
+		"vitest": "^4.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"status-page",
+		"feedback",
+		"uptime"
+	],
+	"author": "Alliance Technical Group",
+	"license": "UNLICENSED",
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
+	}
+}