@alliance-droid/status-feedback-system 2.3.2 → 3.1.0

package/dist/components/dev/DevOnboardingToast.svelte

@@ -1,73 +1,73 @@
-<script lang="ts">
-	interface Props {
-		onDismiss: () => void;
-	}
-
-	let { onDismiss }: Props = $props();
-</script>
-
-<div class="fixed bottom-4 right-4 animate-fade-in" style="z-index: 99997;">
-	<div class="sf-toast">
-		<i class="fa-solid fa-computer-mouse sf-toast-icon"></i>
-		<div>
-			<p class="sf-toast-title">Ctrl + Right-click anywhere</p>
-			<p class="sf-toast-subtitle">to report bugs or request features</p>
-		</div>
-		<button class="sf-toast-close" onclick={onDismiss} aria-label="Dismiss">
-			<i class="fa-solid fa-xmark"></i>
-		</button>
-	</div>
-</div>
-
-<style>
-	@keyframes fade-in {
-		from { opacity: 0; transform: translateY(8px); }
-		to { opacity: 1; transform: translateY(0); }
-	}
-	.animate-fade-in {
-		animation: fade-in 0.3s ease-out;
-	}
-
-	.sf-toast {
-		background: var(--sf-surface, var(--color-surface, #1e293b));
-		border: 1px solid var(--sf-border, var(--color-border, #334155));
-		border-radius: 0.5rem;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-		padding: 0.75rem 1rem;
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		max-width: 20rem;
-		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
-	}
-
-	.sf-toast-icon {
-		color: var(--color-primary, #3b82f6);
-		font-size: 1.125rem;
-	}
-
-	.sf-toast-title {
-		font-size: 0.875rem;
-		font-weight: 600;
-		margin: 0;
-	}
-
-	.sf-toast-subtitle {
-		font-size: 0.75rem;
-		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
-		margin: 0;
-	}
-
-	.sf-toast-close {
-		color: var(--sf-foreground-tertiary, var(--color-foreground-tertiary, #64748b));
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		margin-left: 0.5rem;
-		transition: color 0.15s;
-	}
-
-	.sf-toast-close:hover {
-		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
-	}
-</style>
+<script lang="ts">
+	interface Props {
+		onDismiss: () => void;
+	}
+
+	let { onDismiss }: Props = $props();
+</script>
+
+<div class="fixed bottom-4 right-4 animate-fade-in" style="z-index: 99997;">
+	<div class="sf-toast">
+		<i class="fa-solid fa-computer-mouse sf-toast-icon"></i>
+		<div>
+			<p class="sf-toast-title">Ctrl + Right-click anywhere</p>
+			<p class="sf-toast-subtitle">to report bugs or request features</p>
+		</div>
+		<button class="sf-toast-close" onclick={onDismiss} aria-label="Dismiss">
+			<i class="fa-solid fa-xmark"></i>
+		</button>
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from { opacity: 0; transform: translateY(8px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+	.animate-fade-in {
+		animation: fade-in 0.3s ease-out;
+	}
+
+	.sf-toast {
+		background: var(--sf-surface, var(--color-surface, #1e293b));
+		border: 1px solid var(--sf-border, var(--color-border, #334155));
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		padding: 0.75rem 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		max-width: 20rem;
+		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+	}
+
+	.sf-toast-icon {
+		color: var(--color-primary, #3b82f6);
+		font-size: 1.125rem;
+	}
+
+	.sf-toast-title {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.sf-toast-subtitle {
+		font-size: 0.75rem;
+		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
+		margin: 0;
+	}
+
+	.sf-toast-close {
+		color: var(--sf-foreground-tertiary, var(--color-foreground-tertiary, #64748b));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		margin-left: 0.5rem;
+		transition: color 0.15s;
+	}
+
+	.sf-toast-close:hover {
+		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+	}
+</style>

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

@@ -6,12 +6,8 @@
  */
 export declare function getEnvVar(key: string): string | undefined;
 /**
- * Detect whether DevFeedback should be enabled.
- * Priority: explicit prop > env var > Vercel env > localhost.
- */
-export declare function detectEnvironment(explicitEnabled?: boolean): boolean;
-/**
- * Get a human-readable environment name.
+ * Get a human-readable environment name (labelling only — used in the feedback
+ * payload/badge, not for gating).
  */
 export declare function getEnvironmentName(): string;
 /**

package/dist/components/dev/environment.js

@@ -21,29 +21,8 @@ export function getEnvVar(key) {
     return undefined;
 }
 /**
- * Detect whether DevFeedback should be enabled.
- * Priority: explicit prop > env var > Vercel env > localhost.
- */
-export function detectEnvironment(explicitEnabled) {
-    if (explicitEnabled !== undefined)
-        return explicitEnabled;
-    if (typeof window === 'undefined')
-        return false;
-    const feedbackEnabled = getEnvVar('PUBLIC_FEEDBACK_ENABLED');
-    if (feedbackEnabled === 'true')
-        return true;
-    if (feedbackEnabled === 'false')
-        return false;
-    const vercelEnv = getEnvVar('VERCEL_ENV');
-    if (vercelEnv === 'production')
-        return false;
-    if (vercelEnv)
-        return true;
-    const host = window.location.hostname;
-    return host === 'localhost' || host === '127.0.0.1' || host.endsWith('.local');
-}
-/**
- * Get a human-readable environment name.
+ * Get a human-readable environment name (labelling only — used in the feedback
+ * payload/badge, not for gating).
  */
 export function getEnvironmentName() {
     const vercelEnv = getEnvVar('VERCEL_ENV');

package/dist/components/shared/IncidentTimeline.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-	import type { IncidentUpdate, IncidentStatus } from '../../types.js';
-
-	interface Props {
-		updates: IncidentUpdate[];
-	}
-
-	let { updates }: Props = $props();
-
-	const statusConfig: Record<IncidentStatus, { label: string; icon: string; colorClass: string }> = {
-		investigating: {
-			label: 'Investigating',
-			icon: 'fa-magnifying-glass',
-			colorClass: 'text-yellow-500',
-		},
-		identified: {
-			label: 'Identified',
-			icon: 'fa-circle-exclamation',
-			colorClass: 'text-orange-500',
-		},
-		monitoring: {
-			label: 'Monitoring',
-			icon: 'fa-eye',
-			colorClass: 'text-blue-500',
-		},
-		resolved: {
-			label: 'Resolved',
-			icon: 'fa-circle-check',
-			colorClass: 'text-green-500',
-		},
-	};
-
-	function formatTime(timestamp: number): string {
-		return new Date(timestamp).toLocaleString();
-	}
-</script>
-
-<div class="space-y-4" role="list" aria-label="Incident timeline">
-	{#each updates as update (update.id)}
-		{@const config = statusConfig[update.status]}
-		<div class="flex gap-3" role="listitem">
-			<div class="flex flex-col items-center">
-				<i class="fa-solid {config.icon} {config.colorClass} text-sm" aria-hidden="true"></i>
-				<div class="mt-1 h-full w-px bg-border"></div>
-			</div>
-			<div class="pb-4">
-				<div class="flex items-center gap-2">
-					<span class="text-sm font-semibold text-foreground">{config.label}</span>
-					<span class="text-xs text-foreground-tertiary">{formatTime(update.createdAt)}</span>
-				</div>
-				<p class="mt-1 text-sm text-foreground-secondary">{update.message}</p>
-			</div>
-		</div>
-	{/each}
-</div>
+<script lang="ts">
+	import type { IncidentUpdate, IncidentStatus } from '../../types.js';
+
+	interface Props {
+		updates: IncidentUpdate[];
+	}
+
+	let { updates }: Props = $props();
+
+	const statusConfig: Record<IncidentStatus, { label: string; icon: string; colorClass: string }> = {
+		investigating: {
+			label: 'Investigating',
+			icon: 'fa-magnifying-glass',
+			colorClass: 'text-yellow-500',
+		},
+		identified: {
+			label: 'Identified',
+			icon: 'fa-circle-exclamation',
+			colorClass: 'text-orange-500',
+		},
+		monitoring: {
+			label: 'Monitoring',
+			icon: 'fa-eye',
+			colorClass: 'text-blue-500',
+		},
+		resolved: {
+			label: 'Resolved',
+			icon: 'fa-circle-check',
+			colorClass: 'text-green-500',
+		},
+	};
+
+	function formatTime(timestamp: number): string {
+		return new Date(timestamp).toLocaleString();
+	}
+</script>
+
+<div class="space-y-4" role="list" aria-label="Incident timeline">
+	{#each updates as update (update.id)}
+		{@const config = statusConfig[update.status]}
+		<div class="flex gap-3" role="listitem">
+			<div class="flex flex-col items-center">
+				<i class="fa-solid {config.icon} {config.colorClass} text-sm" aria-hidden="true"></i>
+				<div class="mt-1 h-full w-px bg-border"></div>
+			</div>
+			<div class="pb-4">
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-semibold text-foreground">{config.label}</span>
+					<span class="text-xs text-foreground-tertiary">{formatTime(update.createdAt)}</span>
+				</div>
+				<p class="mt-1 text-sm text-foreground-secondary">{update.message}</p>
+			</div>
+		</div>
+	{/each}
+</div>

package/dist/components/shared/PasteImageInput.svelte

@@ -1,169 +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>
+<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>