@alliance-droid/status-feedback-system 2.0.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,
@@ -11,7 +12,6 @@
 	} from '@alliance-droid/svelte-component-library';
 	import DevContextMenu from './dev/DevContextMenu.svelte';
 	import DevOnboardingToast from './dev/DevOnboardingToast.svelte';
-	import { captureScreenshot, type ScreenshotProvider } from './dev/screenshot.js';
 	import {
 		detectEnvironment,
 		getEnvironmentName,
@@ -40,13 +40,10 @@
 		 */
 		userEmail: string;
 		/**
-		 * Custom screenshot provider. When supplied, this is called instead of
-		 * the default html2canvas client-side capture. Use this to delegate
-		 * screenshot capture to a server endpoint (e.g. Puppeteer / screenshot-service).
-		 *
-		 * See `createServerScreenshotProvider()` for a ready-made helper.
+		 * Endpoint on the consumer app that issues render tokens.
+		 * Default: '/svc/internal/issue-render-token'
 		 */
-		screenshotProvider?: ScreenshotProvider;
+		renderTokenEndpoint?: string;
 	}
 
 	let {
@@ -57,7 +54,7 @@
 		showOnboarding = true,
 		boardUrl,
 		userEmail,
-		screenshotProvider,
+		renderTokenEndpoint = '/svc/internal/issue-render-token',
 	}: Props = $props();
 
 	// Dev-mode warning when userEmail is empty
@@ -146,14 +143,18 @@
 	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);
 	let submitResult = $state<'success' | 'error' | null>(null);
 
-	let screenshotData = $state<string | null>(null);
-	let capturingScreenshot_ = $state(false);
-	let screenshotFailed = $state(false);
+	let renderContext = $state<{ url: string; scrollX: number; scrollY: number; renderToken: string; issuer: string } | null>(null);
+	let fetchingRenderToken = $state(false);
+	let renderTokenFailed = $state(false);
 
 	// Drag state
 	let isDragging = $state(false);
@@ -249,22 +250,52 @@
 		if (e.key === 'Escape') {
 			menuOpen = false;
 			formOpen = false;
-			screenshotData = null;
+			renderContext = null;
+			pastedScreenshot = null;
+			pastedFilename = '';
 		}
 	}
 
-	async function doScreenshot() {
-		capturingScreenshot_ = true;
-		screenshotFailed = false;
-		screenshotData = await captureScreenshot(screenshotProvider);
-		if (!screenshotData) screenshotFailed = true;
-		capturingScreenshot_ = false;
+	async function fetchRenderToken() {
+		fetchingRenderToken = true;
+		renderTokenFailed = false;
+		try {
+			const url = window.location.href;
+			const scrollX = Math.round(window.scrollX);
+			const scrollY = Math.round(window.scrollY);
+			const res = await fetch(renderTokenEndpoint, {
+				method: 'POST',
+				credentials: 'include',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ url, scrollX, scrollY }),
+			});
+			if (!res.ok) {
+				renderTokenFailed = true;
+				console.warn('[DevFeedback] Render token fetch failed:', res.status);
+				return;
+			}
+			const { token } = (await res.json()) as { token: string };
+			renderContext = { url, scrollX, scrollY, renderToken: token, issuer: new URL(url).origin };
+		} catch (err) {
+			renderTokenFailed = true;
+			console.warn('[DevFeedback] Render token fetch error:', err);
+		} finally {
+			fetchingRenderToken = false;
+		}
 	}
 
+	$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;
@@ -273,9 +304,9 @@
 		modalY = 0;
 
 		if (type === 'bug') {
-			doScreenshot();
+			fetchRenderToken();
 		} else {
-			screenshotData = null;
+			renderContext = null;
 		}
 	}
 
@@ -302,8 +333,16 @@
 				metadata.consoleErrors = [...consoleErrors];
 			}
 
-			if (screenshotData) {
-				metadata.screenshot = screenshotData;
+			if (pastedScreenshot) {
+				metadata.pastedScreenshot = pastedScreenshot;
+				metadata.pastedScreenshotFilename = pastedFilename;
+			}
+
+			if (renderContext) {
+				metadata.renderToken = renderContext.renderToken;
+				metadata.issuer = renderContext.issuer;
+				metadata.scrollX = renderContext.scrollX;
+				metadata.scrollY = renderContext.scrollY;
 			}
 
 			const gitCommit = getEnvVar('VERCEL_GIT_COMMIT_SHA');
@@ -326,7 +365,9 @@
 			setTimeout(() => {
 				formOpen = false;
 				submitResult = null;
-				screenshotData = null;
+				renderContext = null;
+				pastedScreenshot = null;
+				pastedFilename = '';
 			}, 2000);
 		} catch {
 			submitResult = 'error';
@@ -415,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) -->
@@ -451,40 +500,30 @@
 									{/if}
 								</div>
 
-								<!-- Screenshot preview -->
-								{#if capturingScreenshot_}
+								<!-- Render token status -->
+								{#if fetchingRenderToken}
 									<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
-										<Spinner /> Capturing screenshot...
+										<Spinner /> Preparing screenshot...
 									</div>
-								{:else if screenshotFailed}
-							<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 capture failed</span>
-								</div>
-								<p class="text-xs text-foreground-tertiary mb-2">Check console for error. May need: <code class="bg-background px-1 rounded">npm install html2canvas</code></p>
-								<button
-									class="text-xs text-primary hover:underline bg-transparent border-none cursor-pointer p-0"
-									onclick={doScreenshot}
-								>
-									Retry
-								</button>
-							</div>
-						{:else if screenshotData}
-									<div class="relative">
-										<img
-											src={screenshotData}
-											alt="Screenshot"
-											class="w-full rounded-md border border-border max-h-40 object-cover object-top"
-										/>
+								{: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>
+										</div>
+										<p class="text-xs text-foreground-tertiary mb-2">Your feedback will be submitted without a screenshot.</p>
 										<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"
+											class="text-xs text-primary hover:underline bg-transparent border-none cursor-pointer p-0"
+											onclick={fetchRenderToken}
 										>
-											<i class="fa-solid fa-xmark"></i>
+											Retry
 										</button>
 									</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">
+										<i class="fa-solid fa-camera" aria-hidden="true"></i>
+										<span>Screenshot will be captured server-side on submit</span>
+									</div>
 								{/if}
 							</div>
 						{/if}

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

@@ -1,4 +1,3 @@
-import { type ScreenshotProvider } from './dev/screenshot.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
@@ -19,13 +18,10 @@ interface Props {
      */
     userEmail: string;
     /**
-     * Custom screenshot provider. When supplied, this is called instead of
-     * the default html2canvas client-side capture. Use this to delegate
-     * screenshot capture to a server endpoint (e.g. Puppeteer / screenshot-service).
-     *
-     * See `createServerScreenshotProvider()` for a ready-made helper.
+     * Endpoint on the consumer app that issues render tokens.
+     * Default: '/svc/internal/issue-render-token'
      */
-    screenshotProvider?: ScreenshotProvider;
+    renderTokenEndpoint?: string;
 }
 declare const DevFeedback: import("svelte").Component<Props, {}, "">;
 type DevFeedback = ReturnType<typeof DevFeedback>;

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

@@ -9,8 +9,6 @@
  */
 export type { Project, System, Incident, IncidentUpdate, Feedback, FeedbackResponse, FeedbackVisibility, StatusHistoryEntry, SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus, ApiResponse, } from './types.js';
 export { deriveOverallStatus } from './utils.js';
-export { createServerScreenshotProvider } from './components/dev/screenshot.js';
-export type { ScreenshotProvider } from './components/dev/screenshot.js';
 export { createStatusClient } from './api.js';
 export type { StatusClient, StatusClientConfig, StatusData, IncidentData, UptimeData, BoardData, BoardItem, BoardCategory } from './api.js';
 export { default as StatusPage } from './components/StatusPage.svelte';
@@ -25,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

@@ -9,7 +9,6 @@
  */
 // ── Utilities ──
 export { deriveOverallStatus } from './utils.js';
-export { createServerScreenshotProvider } from './components/dev/screenshot.js';
 // ── API Client ──
 export { createStatusClient } from './api.js';
 // ── Client Components ──
@@ -26,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,64 +1,66 @@
 {
-  "name": "@alliance-droid/status-feedback-system",
-  "version": "2.0.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": "svelte-check --tsconfig ./tsconfig.json",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "html2canvas": "^1.4.1"
-  },
-  "peerDependencies": {
-    "@alliance-droid/svelte-component-library": ">=1.0.0",
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@alliance-droid/svelte-component-library": "^1.0.5",
-    "@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",
-    "jsdom": "^29.0.0",
-    "publint": "^0.3.0",
-    "svelte": "^5.48.0",
-    "svelte-check": "^4.3.0",
-    "typescript": "^5.9.0",
-    "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"
+	}
 }

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

@@ -1,36 +0,0 @@
-/**
- * Screenshot capture utility for DevFeedback.
- *
- * Supports two modes:
- * 1. Custom provider — consumer supplies a `ScreenshotProvider` callback
- *    (e.g. server-side capture via Puppeteer / screenshot-service).
- * 2. html2canvas fallback — dynamically imports html2canvas if no provider
- *    is given (html2canvas is an optional peer dependency).
- */
-/**
- * A function that captures a screenshot and returns a data URL (or null on failure).
- * Consumers can implement this however they like — server endpoint, different
- * client library, canvas API, etc.
- */
-export type ScreenshotProvider = () => Promise<string | null>;
-/**
- * Capture a screenshot using the given provider, or fall back to html2canvas.
- */
-export declare function captureScreenshot(provider?: ScreenshotProvider): Promise<string | null>;
-/**
- * Create a screenshot provider that POSTs to a server endpoint.
- *
- * The endpoint receives `{ url, viewport }` and should return
- * `{ screenshot: "data:image/..." }` (or any JSON with a `screenshot` string field).
- *
- * @example
- * ```ts
- * <DevFeedback
- *   screenshotProvider={createServerScreenshotProvider('/api/screenshot')}
- *   ...
- * />
- * ```
- */
-export declare function createServerScreenshotProvider(endpoint: string, options?: {
-    headers?: Record<string, string>;
-}): ScreenshotProvider;

package/dist/components/dev/screenshot.js

@@ -1,94 +0,0 @@
-/**
- * Screenshot capture utility for DevFeedback.
- *
- * Supports two modes:
- * 1. Custom provider — consumer supplies a `ScreenshotProvider` callback
- *    (e.g. server-side capture via Puppeteer / screenshot-service).
- * 2. html2canvas fallback — dynamically imports html2canvas if no provider
- *    is given (html2canvas is an optional peer dependency).
- */
-/**
- * Capture a screenshot using the given provider, or fall back to html2canvas.
- */
-export async function captureScreenshot(provider) {
-    if (provider) {
-        try {
-            return await provider();
-        }
-        catch (err) {
-            console.error('[DevFeedback] Screenshot provider failed:', err);
-            return null;
-        }
-    }
-    return captureWithHtml2Canvas();
-}
-/**
- * Create a screenshot provider that POSTs to a server endpoint.
- *
- * The endpoint receives `{ url, viewport }` and should return
- * `{ screenshot: "data:image/..." }` (or any JSON with a `screenshot` string field).
- *
- * @example
- * ```ts
- * <DevFeedback
- *   screenshotProvider={createServerScreenshotProvider('/api/screenshot')}
- *   ...
- * />
- * ```
- */
-export function createServerScreenshotProvider(endpoint, options) {
-    return async () => {
-        const res = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                ...options?.headers,
-            },
-            body: JSON.stringify({
-                url: window.location.href,
-                viewport: {
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                },
-            }),
-        });
-        if (!res.ok)
-            return null;
-        const data = await res.json();
-        return data.screenshot ?? null;
-    };
-}
-/** html2canvas fallback — gracefully degrades if not installed. */
-async function captureWithHtml2Canvas() {
-    try {
-        const html2canvas = (await import('html2canvas')).default;
-        const canvas = await html2canvas(document.body, {
-            logging: false,
-            useCORS: true,
-            scale: 1,
-            width: window.innerWidth,
-            height: window.innerHeight,
-            windowWidth: window.innerWidth,
-            windowHeight: window.innerHeight,
-            ignoreElements: (element) => {
-                // Skip elements that might have unsupported CSS (oklab, oklch, color-mix)
-                const style = window.getComputedStyle(element);
-                const hasUnsupportedColor = [
-                    style.color,
-                    style.backgroundColor,
-                    style.borderColor,
-                ].some(color => color && (color.includes('oklab') || color.includes('oklch') || color.includes('color-mix')));
-                return hasUnsupportedColor;
-            },
-        });
-        return canvas.toDataURL('image/jpeg', 0.7);
-    }
-    catch (err) {
-        console.error('[DevFeedback] Screenshot capture failed:', err);
-        if (err instanceof Error && err.message.includes('oklab')) {
-            console.warn('[DevFeedback] Your CSS uses oklab/oklch colors which html2canvas doesn\'t support. Screenshot skipped.');
-        }
-        // html2canvas failed (unsupported CSS, cross-origin iframe, etc.)
-        return null;
-    }
-}