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

package/dist/components/DevFeedback.svelte

@@ -11,7 +11,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 +39,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 +53,7 @@
 		showOnboarding = true,
 		boardUrl,
 		userEmail,
-		screenshotProvider,
+		renderTokenEndpoint = '/svc/internal/issue-render-token',
 	}: Props = $props();
 
 	// Dev-mode warning when userEmail is empty
@@ -151,9 +147,9 @@
 	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,16 +245,36 @@
 		if (e.key === 'Escape') {
 			menuOpen = false;
 			formOpen = false;
-			screenshotData = null;
+			renderContext = null;
 		}
 	}
 
-	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;
+		}
 	}
 
 	function openForm(type: 'bug' | 'feature') {
@@ -273,9 +289,9 @@
 		modalY = 0;
 
 		if (type === 'bug') {
-			doScreenshot();
+			fetchRenderToken();
 		} else {
-			screenshotData = null;
+			renderContext = null;
 		}
 	}
 
@@ -302,8 +318,11 @@
 				metadata.consoleErrors = [...consoleErrors];
 			}
 
-			if (screenshotData) {
-				metadata.screenshot = screenshotData;
+			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 +345,7 @@
 			setTimeout(() => {
 				formOpen = false;
 				submitResult = null;
-				screenshotData = null;
+				renderContext = null;
 			}, 2000);
 		} catch {
 			submitResult = 'error';
@@ -451,40 +470,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}
+									<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}
+									<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/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';

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 ──

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",
@@ -18,30 +18,32 @@
   ],
   "scripts": {
     "build": "svelte-package -o dist && publint",
-    "lint": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint src",
     "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",
+    "@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"
   },
@@ -61,4 +63,4 @@
     "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;
-    }
-}