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

package/dist/components/board/FeedbackItem.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Badge, IconButton } from '@alliance-droid/svelte-component-library';
+	import { IconButton } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
-	import { timeAgo, getStatusBadgeVariant, publicStatusLabel } from './utils.js';
+	import { timeAgo } from './utils.js';
+	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -13,26 +14,20 @@
 	let { board, item, onclick }: Props = $props();
 
 	let isClickable = $derived(!!onclick);
-	let voteLabel = $derived.by(() => {
-		const current = board.votedItems[item.id];
-		if (current === 'up') return 'Remove upvote';
-		if (current === 'down') return 'Remove downvote';
-		return undefined;
-	});
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <article
-	class="rounded-xl border border-border bg-surface transition-colors {isClickable ? 'cursor-pointer hover:bg-surface-hover' : ''}"
+	class="rounded-xl border border-border bg-surface p-4 transition-all {isClickable ? 'cursor-pointer hover:border-border-strong hover:bg-surface-hover' : ''}"
 	role={isClickable ? 'button' : undefined}
 	tabindex={isClickable ? 0 : undefined}
 	aria-label={isClickable ? (item.title || item.message.slice(0, 80)) : undefined}
 	onclick={() => onclick?.(item)}
 	onkeydown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onclick?.(item); } }}
 >
-	<div class="flex gap-3 p-4">
+	<div class="flex gap-4">
 		<!-- Vote column -->
-		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]" role="group" aria-label="Vote on this feedback">
+		<div class="flex flex-col items-center gap-1 pt-0.5" role="group" aria-label="Vote on this feedback">
 			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
 				<IconButton
 					size="sm"
@@ -43,7 +38,7 @@
 					<i class="fa-solid fa-chevron-up text-xs"></i>
 				</IconButton>
 			</div>
-			<span class="text-sm font-bold tabular-nums" aria-label="{item.votes} votes">{item.votes}</span>
+			<span class="text-sm font-semibold tabular-nums text-foreground" aria-label="{item.votes} votes">{item.votes}</span>
 			{#if board.voteErrors[item.id]}
 				<span class="text-[0.625rem] text-red-400" role="alert">
 					<i class="fa-solid fa-exclamation-circle" aria-hidden="true"></i>
@@ -62,41 +57,43 @@
 		</div>
 
 		<!-- Content -->
-		<div class="flex-1 min-w-0">
-			<div class="flex items-center gap-2 flex-wrap">
-				{#if item.category}
-					<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-secondary" aria-hidden="true"></i>
-				{/if}
-				<h3 class="text-[0.9375rem] font-semibold flex-1 leading-snug">
-					{item.title || item.message.slice(0, 80)}
-				</h3>
-				<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
-					{publicStatusLabel(item.publicStatus)}
-				</Badge>
-			</div>
-
-			{#if item.title}
-				<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed line-clamp-2">{item.message}</p>
-			{/if}
-
-			{#if item.email}
-				<p class="text-[0.8125rem] text-foreground-tertiary mt-1.5 flex items-center gap-1">
-					<i class="fa-solid fa-envelope" aria-hidden="true"></i>
-					{item.email}
-				</p>
-			{/if}
-
-			<div class="flex items-center justify-between mt-2 text-[0.8125rem] text-foreground-tertiary">
-				<div class="flex items-center gap-3">
-					<span>{timeAgo(item.createdAt)}</span>
-					{#if item.adminResponse}
-						<span class="text-xs text-primary">
-							<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
-						</span>
+		<div class="min-w-0 flex-1">
+			<div class="flex items-start gap-3">
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-2">
+						{#if item.category}
+							<i class="{board.getCategoryIcon(item.category)} flex-shrink-0 text-sm text-foreground-tertiary" aria-hidden="true"></i>
+						{/if}
+						<h3 class="line-clamp-1 text-[0.9375rem] font-semibold leading-snug text-foreground">
+							{item.title || item.message}
+						</h3>
+					</div>
+					{#if item.title}
+						<p class="mt-1 line-clamp-2 text-sm leading-relaxed text-foreground-secondary">{item.message}</p>
 					{/if}
 				</div>
+				<StatusBadgeMenu {board} {item} />
+			</div>
+
+			<!-- Meta -->
+			<div class="mt-3 flex items-center gap-3 text-xs text-foreground-tertiary">
+				{#if item.email}
+					<span class="inline-flex min-w-0 flex-1 items-center gap-1.5">
+						<i class="fa-solid fa-circle-user flex-shrink-0" aria-hidden="true"></i>
+						<span class="truncate">{item.email}</span>
+					</span>
+				{/if}
+				<span class="flex-shrink-0 whitespace-nowrap">{timeAgo(item.createdAt)}</span>
+				{#if item.adminResponse}
+					<span class="inline-flex flex-shrink-0 items-center gap-1 whitespace-nowrap text-primary">
+						<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
+					</span>
+				{/if}
 				{#if item.responseCount > 0}
-					<span class="flex items-center gap-1" aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}">
+					<span
+						class="ml-auto inline-flex flex-shrink-0 items-center gap-1"
+						aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}"
+					>
 						<i class="fa-solid fa-comment" aria-hidden="true"></i>
 						{item.responseCount}
 					</span>
@@ -107,11 +104,18 @@
 </article>
 
 <style>
+	.line-clamp-1,
 	.line-clamp-2 {
 		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 	}
+	.line-clamp-1 {
+		-webkit-line-clamp: 1;
+		line-clamp: 1;
+	}
+	.line-clamp-2 {
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+	}
 </style>

package/dist/components/board/FeedbackSidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Divider, Select } from '@alliance-droid/svelte-component-library';
-	import type { FeedbackBoardState } from './state.svelte.js';
+	import { Divider, Select } from "@alliance-droid/svelte-component-library";
+	import type { FeedbackBoardState } from "./state.svelte.js";
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -9,52 +9,75 @@
 	let { board }: Props = $props();
 
 	const statusOptions = [
-		{ value: 'open', label: 'Open' },
-		{ value: 'resolved', label: 'Done' },
-		{ value: 'all', label: 'All' },
+		{ value: "open", label: "Open" },
+		{ value: "resolved", label: "Done" },
+		{ value: "all", label: "All" },
 	];
 
 	const sortOptions = [
-		{ value: 'votes', label: 'Most Votes' },
-		{ value: 'newest', label: 'Newest' },
+		{ value: "votes", label: "Most Votes" },
+		{ value: "newest", label: "Newest" },
 	];
 </script>
 
 <aside class="flex flex-col gap-1" aria-label="Filter feedback">
-	<button
-		class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-			{board.activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-		onclick={() => (board.activeCategory = null)}
-	>
-		<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
-		<span>All</span>
-		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
-	</button>
-
-	{#each board.categories as cat (cat.name)}
+	<div class="mx-2 pt-2">
 		<button
 			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-			onclick={() => (board.activeCategory = board.activeCategory === cat.name ? null : cat.name)}
+			{board.activeCategory === null
+				? 'bg-surface-secondary text-foreground font-semibold'
+				: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+			onclick={() => (board.activeCategory = null)}
 		>
-			<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"></i>
-			<span>{board.getCategoryLabel(cat.name)}</span>
-			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{cat.count}</span>
+			<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
+			<span>All</span>
+			<span
+				class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+				>{board.total}</span
+			>
 		</button>
-	{/each}
+
+		{#each board.categories as cat (cat.name)}
+			<button
+				class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
+				{board.activeCategory === cat.name
+					? 'bg-surface-secondary text-foreground font-semibold'
+					: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+				onclick={() =>
+					(board.activeCategory =
+						board.activeCategory === cat.name ? null : cat.name)}
+			>
+				<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"
+				></i>
+				<span>{board.getCategoryLabel(cat.name)}</span>
+				<span
+					class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+					>{cat.count}</span
+				>
+			</button>
+		{/each}
+	</div>
 
 	<Divider class="my-2" />
 
-	<div class="px-3 space-y-3">
-		<Select
-			label="Status"
-			options={statusOptions}
-			bind:value={board.statusFilter}
-		/>
-		<Select
-			label="Sort By"
-			options={sortOptions}
-			bind:value={board.sortBy}
-		/>
+	<div class="space-y-3">
+		<div class="mx-4">
+			<Select
+				label="Status"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={statusOptions}
+				bind:value={board.statusFilter}
+			/>
+		</div>
+		<Divider class="my-2" />
+		<div class="mx-4">
+			<Select
+				label="Sort By"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={sortOptions}
+				bind:value={board.sortBy}
+			/>
+		</div>
 	</div>
 </aside>
+

package/dist/components/board/FeedbackSidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FeedbackBoardState } from './state.svelte.js';
+import type { FeedbackBoardState } from "./state.svelte.js";
 interface Props {
     board: FeedbackBoardState;
 }

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,123 +1,239 @@
-<script lang="ts">
-	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
-	import type { FeedbackBoardState } from './state.svelte.js';
-	import PasteImageInput from '../shared/PasteImageInput.svelte';
-
-	interface Props {
-		board: FeedbackBoardState;
-		/** Available category options for the dropdown */
-		categories?: string[];
-	}
-
-	let { board, categories = [] }: Props = $props();
-
-	let title = $state('');
-	let message = $state('');
-	let category = $state('');
-	let submitting = $state(false);
-	let success = $state(false);
-	let error = $state('');
-	let pastedImage = $state<string | null>(null);
-	let pastedFilename = $state('');
-	let textareaWrapperEl: HTMLDivElement | undefined = $state();
-	let textareaEl: HTMLTextAreaElement | undefined = $state();
-
-	$effect(() => {
-		if (textareaWrapperEl) {
-			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
-		}
-	});
-
-	let isAuthenticated = $derived(!!board.userEmail);
-
-	let categoryOptions = $derived(
-		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
-	);
-
-	async function handleSubmit() {
-		if (!message.trim() || !isAuthenticated) return;
-		submitting = true;
-		error = '';
-		try {
-			await board.submitFeedback({
-				title: title.trim() || undefined,
-				message: message.trim(),
-				category: category || undefined,
-				pastedImage,
-			});
-			success = true;
-			title = '';
-			message = '';
-			category = '';
-			pastedImage = null;
-			pastedFilename = '';
-			setTimeout(() => { success = false; }, 2000);
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to submit';
-		} finally {
-			submitting = false;
-		}
-	}
-</script>
-
-<Card variant="outlined" padding="md">
-	{#if !isAuthenticated}
-		<div class="text-center py-3 text-foreground-tertiary">
-			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
-			<span class="text-sm">Sign in to submit feedback</span>
-		</div>
-	{:else if success}
-		<div class="text-center py-2 text-green-400 font-semibold">
-			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
-		</div>
-	{:else}
-		<div class="space-y-3">
-			<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
-				<i class="fa-solid fa-user" aria-hidden="true"></i>
-				<span>Submitting as <span class="font-medium text-foreground-secondary">{board.userEmail}</span></span>
-			</div>
-			<Input
-				bind:value={title}
-				placeholder="Title (optional)"
-			/>
-			<div bind:this={textareaWrapperEl}>
-				<Textarea
-					value={message}
-					oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-					placeholder="Describe your feedback (paste an image to attach it)\u2026"
-					rows={3}
-				/>
-			</div>
-			<PasteImageInput
-				{textareaEl}
-				bind:image={pastedImage}
-				bind:filename={pastedFilename}
-			/>
-			{#if error}
-				<p class="text-sm text-red-400">
-					<i class="fa-solid fa-exclamation-circle mr-1"></i>
-					{error}
-				</p>
-			{/if}
-			<div class="flex gap-2 items-center flex-wrap">
-				{#if categoryOptions.length > 0}
-					<div class="min-w-[140px]">
-						<Select
-							options={[{ value: '', label: 'Category...' }, ...categoryOptions]}
-							bind:value={category}
-						/>
-					</div>
-				{/if}
-				<div class="flex-1"></div>
-				<Button
-					variant="primary"
-					disabled={submitting || !message.trim()}
-					loading={submitting}
-					onclick={handleSubmit}
-				>
-					Submit
-				</Button>
-			</div>
-		</div>
-	{/if}
-</Card>
+<script lang="ts">
+	import { Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import { FEEDBACK_CATEGORIES } from '../../types.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+	}
+
+	let { board }: Props = $props();
+
+	let title = $state('');
+	let message = $state('');
+	let category = $state('');
+	let submitting = $state(false);
+	let success = $state(false);
+	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let dragActive = $state(false);
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	const MAX_BYTES = 5 * 1024 * 1024;
+	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
+
+	$effect(() => {
+		if (!textareaEl) return;
+		const handler = (e: ClipboardEvent) => handlePaste(e);
+		textareaEl.addEventListener('paste', handler);
+		return () => textareaEl?.removeEventListener('paste', handler);
+	});
+
+	let isAuthenticated = $derived(!!board.userEmail);
+
+	// Labels are the canonical system category names — not the consumer's
+	// `categoryConfig` (which only customizes the sidebar).
+	let categoryOptions = FEEDBACK_CATEGORIES.map((c) => ({ value: c, label: c }));
+
+	/** Validate and load an image file (shared by paste, file-pick, and drop). */
+	function processFile(file: File) {
+		if (!ALLOWED_MIME.includes(file.type)) {
+			error = 'Unsupported image type — PNG, JPEG, GIF, or WebP only';
+			return;
+		}
+		if (file.size > MAX_BYTES) {
+			error = 'Image too large — max 5 MB';
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = () => {
+			pastedImage = reader.result as string;
+			const ext = file.type.split('/')[1] || 'png';
+			const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
+			pastedFilename = file.name || `screenshot-${stamp}.${ext}`;
+			error = '';
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		const clipItems = Array.from(e.clipboardData?.items ?? []);
+		const imageItem = clipItems.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
+		if (!imageItem) return;
+		const file = imageItem.getAsFile();
+		if (!file) return;
+		e.preventDefault();
+		processFile(file);
+	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) processFile(file);
+		input.value = '';
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragActive = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) processFile(file);
+	}
+
+	function formatSize(dataUrl: string): string {
+		const comma = dataUrl.indexOf(',');
+		if (comma === -1) return '';
+		const bytes = Math.round((dataUrl.length - comma - 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`;
+	}
+
+	async function handleSubmit() {
+		if (!message.trim() || !category || !isAuthenticated) return;
+		submitting = true;
+		error = '';
+		try {
+			await board.submitFeedback({
+				title: title.trim() || undefined,
+				message: message.trim(),
+				category,
+				pastedImage,
+			});
+			success = true;
+			title = '';
+			message = '';
+			category = '';
+			pastedImage = null;
+			pastedFilename = '';
+			setTimeout(() => { success = false; }, 2000);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to submit';
+		} finally {
+			submitting = false;
+		}
+	}
+</script>
+
+<div>
+	{#if !isAuthenticated}
+		<div class="py-3 text-center text-foreground-tertiary">
+			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+			<span class="text-sm">Sign in to submit feedback</span>
+		</div>
+	{:else if success}
+		<div class="py-2 text-center font-semibold text-green-400">
+			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
+		</div>
+	{:else}
+		<div class="space-y-2">
+			<!-- Composer card: title + description + attachment + toolbar -->
+			<div
+				class="overflow-hidden rounded-xl border bg-background shadow-sm transition-all {dragActive
+					? 'border-primary ring-2 ring-primary/30'
+					: 'border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'}"
+				role="group"
+				ondragover={(e) => { e.preventDefault(); dragActive = true; }}
+				ondragleave={() => (dragActive = false)}
+				ondrop={handleDrop}
+			>
+				<div class="border-b border-border">
+					<Input
+						class="rounded-none border-0 bg-transparent px-4 py-3 text-sm font-medium hover:border-transparent focus:border-transparent"
+						bind:value={title}
+						placeholder="Title (optional)"
+					/>
+				</div>
+
+				<div bind:this={textareaWrapperEl}>
+					<Textarea
+						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
+						value={message}
+						oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Describe your feedback…"
+						rows={4}
+					/>
+				</div>
+
+				{#if pastedImage}
+					<div class="flex items-center gap-3 border-t border-border px-3 py-2">
+						<img
+							src={pastedImage}
+							alt={pastedFilename}
+							class="h-11 w-11 flex-shrink-0 rounded border border-border object-cover"
+						/>
+						<div class="min-w-0 flex-1">
+							<p class="truncate text-xs font-medium text-foreground">{pastedFilename}</p>
+							<p class="text-[11px] text-foreground-tertiary">{formatSize(pastedImage)}</p>
+						</div>
+						<button
+							type="button"
+							class="flex-shrink-0 rounded p-1.5 text-foreground-tertiary transition-colors hover:bg-surface-hover hover:text-foreground"
+							onclick={() => { pastedImage = null; pastedFilename = ''; }}
+							aria-label="Remove image"
+						>
+							<i class="fa-solid fa-xmark" aria-hidden="true"></i>
+						</button>
+					</div>
+				{/if}
+
+				<!-- Toolbar -->
+				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2.5">
+					<div class="flex items-center gap-2">
+						<div class="min-w-[150px]">
+							<Select
+								class="border-0 bg-transparent"
+								size="sm"
+								placeholder="Category…"
+								options={categoryOptions}
+								required
+								bind:value={category}
+							/>
+						</div>
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:border-border-strong hover:text-foreground"
+							onclick={() => fileInputEl?.click()}
+						>
+							<i class="fa-solid fa-image" aria-hidden="true"></i>
+							Attach screenshot
+						</button>
+					</div>
+					<Button
+						variant="primary"
+						size="sm"
+						disabled={submitting || !message.trim() || !category}
+						loading={submitting}
+						onclick={handleSubmit}
+					>
+						Submit
+					</Button>
+				</div>
+
+				<input
+					bind:this={fileInputEl}
+					type="file"
+					accept="image/png,image/jpeg,image/gif,image/webp"
+					class="hidden"
+					onchange={handleFileSelect}
+				/>
+			</div>
+
+			{#if error}
+				<p class="text-sm text-red-400">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{error}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/board/FeedbackSubmitForm.svelte.d.ts

@@ -1,8 +1,6 @@
 import type { FeedbackBoardState } from './state.svelte.js';
 interface Props {
     board: FeedbackBoardState;
-    /** Available category options for the dropdown */
-    categories?: string[];
 }
 declare const FeedbackSubmitForm: import("svelte").Component<Props, {}, "">;
 type FeedbackSubmitForm = ReturnType<typeof FeedbackSubmitForm>;