@alliance-droid/status-feedback-system 1.3.14 → 1.4.0

package/dist/components/DevFeedback.svelte

@@ -11,7 +11,7 @@
 	} from '@alliance-droid/svelte-component-library';
 	import DevContextMenu from './dev/DevContextMenu.svelte';
 	import DevOnboardingToast from './dev/DevOnboardingToast.svelte';
-	import { captureScreenshot } from './dev/screenshot.js';
+	import { captureScreenshot, type ScreenshotProvider } from './dev/screenshot.js';
 	import {
 		detectEnvironment,
 		getEnvironmentName,
@@ -33,6 +33,14 @@
 		boardUrl?: string;
 		/** Authenticated user email. Required for submitting feedback. */
 		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.
+		 */
+		screenshotProvider?: ScreenshotProvider;
 	}
 
 	let {
@@ -43,6 +51,7 @@
 		showOnboarding = true,
 		boardUrl,
 		userEmail,
+		screenshotProvider,
 	}: Props = $props();
 
 	// --- Client (lazy, stable) ---
@@ -225,7 +234,7 @@
 	async function doScreenshot() {
 		capturingScreenshot_ = true;
 		screenshotFailed = false;
-		screenshotData = await captureScreenshot();
+		screenshotData = await captureScreenshot(screenshotProvider);
 		if (!screenshotData) screenshotFailed = true;
 		capturingScreenshot_ = false;
 	}

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

@@ -1,3 +1,4 @@
+import { type ScreenshotProvider } from './dev/screenshot.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
@@ -11,6 +12,14 @@ interface Props {
     boardUrl?: string;
     /** Authenticated user email. Required for submitting feedback. */
     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.
+     */
+    screenshotProvider?: ScreenshotProvider;
 }
 declare const DevFeedback: import("svelte").Component<Props, {}, "">;
 type DevFeedback = ReturnType<typeof DevFeedback>;

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

@@ -1,6 +1,36 @@
 /**
  * Screenshot capture utility for DevFeedback.
- * Dynamically imports html2canvas — gracefully degrades if not installed
- * (html2canvas is an optional peer dependency).
+ *
+ * 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).
  */
-export declare function captureScreenshot(): Promise<string | null>;
+/**
+ * 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,9 +1,65 @@
 /**
  * Screenshot capture utility for DevFeedback.
- * Dynamically imports html2canvas — gracefully degrades if not installed
- * (html2canvas is an optional peer dependency).
+ *
+ * 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).
  */
-export async function captureScreenshot() {
+/**
+ * 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, {
@@ -25,7 +81,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/index.d.ts

@@ -9,6 +9,8 @@
  */
 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';

package/dist/index.js

@@ -9,6 +9,7 @@
  */
 // ── Utilities ──
 export { deriveOverallStatus } from './utils.js';
+export { createServerScreenshotProvider } from './components/dev/screenshot.js';
 // ── API Client ──
 export { createStatusClient } from './api.js';
 // ── Client Components ──

package/package.json

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