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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.0.0
+
+### Breaking Changes
+
+- `userEmail` prop on `DevFeedback` is now **required** (was optional). Pass the authenticated user's email; pass an empty string when no user is signed in.
+- Widget renders nothing (no bubble, no context menu) when `userEmail` is empty. The previous lock-screen UI for unauthenticated users is removed.
+- Anonymous feedback submission is no longer possible through the widget.
+
+### Added
+
+- Dev-mode console warning when `userEmail` is empty, to surface misconfigurations in consumer apps.
+
 ## 1.3.0
 
 - Add composable FeedbackBoard components (FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm)

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,
@@ -31,8 +31,22 @@
 		showOnboarding?: boolean;
 		/** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
 		boardUrl?: string;
-		/** Authenticated user email. Required for submitting feedback. */
-		userEmail?: string;
+		/**
+		 * Authenticated user email. Required.
+		 *
+		 * Pass an empty string when the user is not signed in — the widget will
+		 * render nothing (no floating bubble, no menu, no form). Anonymous
+		 * feedback is not supported.
+		 */
+		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,8 +57,24 @@
 		showOnboarding = true,
 		boardUrl,
 		userEmail,
+		screenshotProvider,
 	}: Props = $props();
 
+	// Dev-mode warning when userEmail is empty
+	$effect(() => {
+		if (!userEmail && typeof console !== 'undefined') {
+			// eslint-disable-next-line no-restricted-globals -- safe typeof guard for universal code
+			const proc = typeof globalThis !== 'undefined' ? (globalThis as Record<string, unknown>).process as { env?: Record<string, string> } | undefined : undefined;
+			const env = proc?.env?.NODE_ENV || 'development';
+			if (env !== 'production') {
+				console.warn(
+					'[status-feedback-system] <DevFeedback> was rendered with an empty userEmail. ' +
+					"The widget will not appear. Pass the authenticated user's email, or do not render <DevFeedback> when no user is signed in.",
+				);
+			}
+		}
+	});
+
 	// --- Client (lazy, stable) ---
 	let client: StatusClient | null = $state(null);
 	let lastApiUrl = '';
@@ -61,6 +91,7 @@
 
 	// --- Environment gate ---
 	let isEnabled = $state(false);
+	let hasUserEmail = $derived(!!userEmail);
 
 	// --- State ---
 	let menuOpen = $state(false);
@@ -116,7 +147,7 @@
 	let formTitle = $state('');
 	let formMessage = $state('');
 
-	let isAuthenticated = $derived(!!userEmail);
+
 	let submitting = $state(false);
 	let submitResult = $state<'success' | 'error' | null>(null);
 
@@ -162,7 +193,7 @@
 	const ONBOARDING_KEY = 'sf-devfeedback-onboarded';
 
 	onMount(() => {
-		isEnabled = detectEnvironment(enabled);
+		isEnabled = detectEnvironment(enabled) && !!userEmail;
 		if (!isEnabled) return;
 
 		// Hook console.error
@@ -225,7 +256,7 @@
 	async function doScreenshot() {
 		capturingScreenshot_ = true;
 		screenshotFailed = false;
-		screenshotData = await captureScreenshot();
+		screenshotData = await captureScreenshot(screenshotProvider);
 		if (!screenshotData) screenshotFailed = true;
 		capturingScreenshot_ = false;
 	}
@@ -249,7 +280,7 @@
 	}
 
 	async function handleSubmit() {
-		if (!formMessage.trim() || !isAuthenticated) return;
+		if (!formMessage.trim() || !hasUserEmail) return;
 		submitting = true;
 		submitResult = null;
 
@@ -372,11 +403,6 @@
 								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
 							</p>
 						</div>
-					{:else if !isAuthenticated}
-						<div class="text-center py-6 text-foreground-tertiary">
-							<i class="fa-solid fa-lock text-2xl" aria-hidden="true"></i>
-							<p class="mt-2 text-sm">Sign in to submit feedback</p>
-						</div>
 					{:else}
 						<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
 							<i class="fa-solid fa-user" aria-hidden="true"></i>
@@ -473,7 +499,7 @@
 				</div>
 
 				<!-- Footer -->
-				{#if submitResult !== 'success' && isAuthenticated}
+				{#if submitResult !== 'success' && hasUserEmail}
 					<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
 						<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
 							Cancel

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

@@ -1,3 +1,4 @@
+import { type ScreenshotProvider } from './dev/screenshot.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
@@ -9,8 +10,22 @@ interface Props {
     showOnboarding?: boolean;
     /** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
     boardUrl?: string;
-    /** Authenticated user email. Required for submitting feedback. */
-    userEmail?: string;
+    /**
+     * Authenticated user email. Required.
+     *
+     * Pass an empty string when the user is not signed in — the widget will
+     * render nothing (no floating bubble, no menu, no form). Anonymous
+     * feedback is not supported.
+     */
+    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, {

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.15",
+  "version": "2.0.0",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",