@alliance-droid/status-feedback-system 1.1.3 → 1.2.1

package/dist/components/FeedbackBoard.svelte

@@ -241,16 +241,16 @@
 	<main class="flex-1 min-w-0">
 		<div class="flex items-start justify-between mb-4">
 			<div>
-				<h2 class="text-xl font-bold flex items-center gap-2">
-					{#if activeCategory}
+				{#if activeCategory}
+					<h2 class="text-xl font-bold flex items-center gap-2">
 						<i class={getCategoryIcon(activeCategory)}></i>
 						{getCategoryLabel(activeCategory)}
-					{:else}
-						{title}
+					</h2>
+					{#if getCategoryDescription(activeCategory)}
+						<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
 					{/if}
-				</h2>
-				{#if activeCategory && getCategoryDescription(activeCategory)}
-					<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
+				{:else if title}
+					<h2 class="text-xl font-bold">{title}</h2>
 				{/if}
 			</div>
 			{#if showSubmit}

package/dist/components/board/FeedbackDetail.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Badge, Spinner } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { timeAgo, getStatusBadgeVariant } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+	}
+
+	let { board, item }: Props = $props();
+
+	let responses = $state<{ message: string; author: string | null; createdAt: number }[]>([]);
+	let loadingResponses = $state(true);
+
+	onMount(async () => {
+		responses = await board.getResponses(item.id);
+		loadingResponses = false;
+	});
+</script>
+
+<div class="space-y-4">
+	<!-- Header -->
+	<div class="flex items-center gap-2 flex-wrap">
+		{#if item.category}
+			<i class="{board.getCategoryIcon(item.category)} text-foreground-secondary"></i>
+		{/if}
+		<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
+			{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+		</Badge>
+		<span class="text-xs text-foreground-tertiary">{timeAgo(item.createdAt)}</span>
+		{#if item.responseCount > 0}
+			<span class="text-xs text-foreground-tertiary flex items-center gap-1">
+				<i class="fa-solid fa-comment"></i> {item.responseCount}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Title + Message -->
+	{#if item.title}
+		<h3 class="text-lg font-semibold text-foreground">{item.title}</h3>
+	{/if}
+	<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{item.message}</p>
+
+	<!-- Votes -->
+	<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
+		<i class="fa-solid fa-arrow-up"></i>
+		<span class="font-semibold">{item.votes}</span>
+		<span>votes</span>
+	</div>
+
+	<!-- Admin response -->
+	{#if item.adminResponse}
+		<div class="rounded-lg bg-primary/5 border border-primary/20 p-3">
+			<p class="text-xs font-semibold text-primary mb-1">
+				<i class="fa-solid fa-shield mr-1"></i> Official Response
+			</p>
+			<p class="text-sm text-foreground-secondary">{item.adminResponse}</p>
+		</div>
+	{/if}
+
+	<!-- Responses -->
+	{#if loadingResponses}
+		<div class="text-foreground-tertiary text-sm">
+			<Spinner /> Loading responses...
+		</div>
+	{:else if responses.length > 0}
+		<div class="space-y-3">
+			<h4 class="text-sm font-semibold text-foreground">
+				<i class="fa-solid fa-comments mr-1"></i> Responses
+			</h4>
+			{#each responses as resp}
+				<div class="rounded-lg bg-surface-secondary p-3">
+					<div class="flex items-center justify-between mb-1">
+						<span class="text-xs font-semibold text-primary">
+							<i class="fa-solid fa-shield mr-1"></i>{resp.author || 'Team'}
+						</span>
+						<span class="text-[0.6875rem] text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
+					</div>
+					<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{resp.message}</p>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { BoardItem } from '../../api.js';
+import type { FeedbackBoardState } from './state.svelte.js';
+interface Props {
+    board: FeedbackBoardState;
+    item: BoardItem;
+}
+declare const FeedbackDetail: import("svelte").Component<Props, {}, "">;
+type FeedbackDetail = ReturnType<typeof FeedbackDetail>;
+export default FeedbackDetail;

package/dist/components/board/FeedbackItem.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Badge, IconButton } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { timeAgo, getStatusBadgeVariant } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+		onclick?: (item: BoardItem) => void;
+	}
+
+	let { board, item, onclick }: Props = $props();
+
+	let isClickable = $derived(!!onclick);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions — clickable variant uses onclick for item selection, keyboard handled manually -->
+<div
+	class="rounded-xl border border-border bg-surface transition-colors {isClickable ? 'cursor-pointer hover:bg-surface-hover' : ''}"
+	onclick={() => onclick?.(item)}
+	onkeydown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onclick?.(item); } }}
+>
+	<div class="flex gap-3 p-4">
+		<!-- Vote column -->
+		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]">
+			<!-- svelte-ignore a11y_click_events_have_key_events — IconButton handles keyboard -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div onclick={(e) => e.stopPropagation()}>
+				<IconButton
+					size="sm"
+					variant={board.votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
+					onclick={() => board.vote(item.id, 'up')}
+					label="Upvote"
+				>
+					<i class="fa-solid fa-chevron-up text-xs"></i>
+				</IconButton>
+			</div>
+			<span class="text-sm font-bold tabular-nums">{item.votes}</span>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div onclick={(e) => e.stopPropagation()}>
+				<IconButton
+					size="sm"
+					variant={board.votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
+					onclick={() => board.vote(item.id, 'down')}
+					label="Downvote"
+				>
+					<i class="fa-solid fa-chevron-down text-xs"></i>
+				</IconButton>
+			</div>
+		</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"></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.status)} size="sm">
+					{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+				</Badge>
+			</div>
+
+			{#if item.title}
+				<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed line-clamp-2">{item.message}</p>
+			{/if}
+
+			<div class="flex items-center gap-3 mt-2 text-[0.8125rem] text-foreground-tertiary">
+				<span>{timeAgo(item.createdAt)}</span>
+				{#if item.responseCount > 0}
+					<span class="flex items-center gap-1">
+						<i class="fa-solid fa-comment"></i>
+						{item.responseCount}
+					</span>
+				{/if}
+				{#if item.adminResponse}
+					<span class="text-xs text-primary">
+						<i class="fa-solid fa-shield"></i> Official response
+					</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.line-clamp-2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { BoardItem } from '../../api.js';
+import type { FeedbackBoardState } from './state.svelte.js';
+interface Props {
+    board: FeedbackBoardState;
+    item: BoardItem;
+    onclick?: (item: BoardItem) => void;
+}
+declare const FeedbackItem: import("svelte").Component<Props, {}, "">;
+type FeedbackItem = ReturnType<typeof FeedbackItem>;
+export default FeedbackItem;

package/dist/components/board/FeedbackList.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Spinner } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import FeedbackItem from './FeedbackItem.svelte';
+
+	interface Props {
+		board: FeedbackBoardState;
+		/** Called when an item is clicked. If not provided, items are not clickable. */
+		onSelect?: (item: BoardItem) => void;
+	}
+
+	let { board, onSelect }: Props = $props();
+</script>
+
+{#if board.loading}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<Spinner />
+		<p class="mt-2">Loading...</p>
+	</div>
+{:else if board.error}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
+		<p class="mt-2">{board.error}</p>
+	</div>
+{:else if board.items.length === 0}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<i class="fa-solid fa-inbox text-3xl"></i>
+		<p class="mt-2">No feedback yet</p>
+		<p class="text-sm">Be the first to submit!</p>
+	</div>
+{:else}
+	<div class="flex flex-col gap-2">
+		{#each board.items as item (item.id)}
+			<FeedbackItem {board} {item} onclick={onSelect ? () => onSelect(item) : undefined} />
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { BoardItem } from '../../api.js';
+import type { FeedbackBoardState } from './state.svelte.js';
+interface Props {
+    board: FeedbackBoardState;
+    /** Called when an item is clicked. If not provided, items are not clickable. */
+    onSelect?: (item: BoardItem) => void;
+}
+declare const FeedbackList: import("svelte").Component<Props, {}, "">;
+type FeedbackList = ReturnType<typeof FeedbackList>;
+export default FeedbackList;

package/dist/components/board/FeedbackSidebar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Divider, Select } from '@alliance-droid/svelte-component-library';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+	}
+
+	let { board }: Props = $props();
+
+	const statusOptions = [
+		{ value: 'open', label: 'Open' },
+		{ value: 'resolved', label: 'Resolved' },
+		{ value: 'all', label: 'All' },
+	];
+
+	const sortOptions = [
+		{ value: 'votes', label: 'Most Votes' },
+		{ value: 'newest', label: 'Newest' },
+	];
+</script>
+
+<aside class="flex flex-col gap-1">
+	<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"></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}
+		<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)}></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}
+
+	<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>
+</aside>

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

@@ -0,0 +1,7 @@
+import type { FeedbackBoardState } from './state.svelte.js';
+interface Props {
+    board: FeedbackBoardState;
+}
+declare const FeedbackSidebar: import("svelte").Component<Props, {}, "">;
+type FeedbackSidebar = ReturnType<typeof FeedbackSidebar>;
+export default FeedbackSidebar;

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	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 email = $state('');
+	let submitting = $state(false);
+	let success = $state(false);
+	let error = $state('');
+
+	let categoryOptions = $derived(
+		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
+	);
+
+	async function handleSubmit() {
+		if (!message.trim()) return;
+		submitting = true;
+		error = '';
+		try {
+			await board.submitFeedback({
+				title: title.trim() || undefined,
+				message: message.trim(),
+				category: category || undefined,
+				email: email.trim() || undefined,
+			});
+			success = true;
+			title = '';
+			message = '';
+			category = '';
+			email = '';
+			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 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">
+			<Input
+				bind:value={title}
+				placeholder="Title (optional)"
+			/>
+			<Textarea
+				value={message}
+				oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+				placeholder="Describe your feedback..."
+				rows={3}
+			/>
+			{#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">
+					<Input
+						type="email"
+						bind:value={email}
+						placeholder="Email (optional)"
+					/>
+				</div>
+				<Button
+					variant="primary"
+					disabled={submitting || !message.trim()}
+					loading={submitting}
+					onclick={handleSubmit}
+				>
+					Submit
+				</Button>
+			</div>
+		</div>
+	{/if}
+</Card>

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

@@ -0,0 +1,9 @@
+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>;
+export default FeedbackSubmitForm;

package/dist/components/board/index.d.ts

@@ -0,0 +1,8 @@
+export { createFeedbackBoard } from './state.svelte.js';
+export type { FeedbackBoardState, FeedbackBoardOptions, CategoryConfig } from './state.svelte.js';
+export { default as FeedbackSidebar } from './FeedbackSidebar.svelte';
+export { default as FeedbackList } from './FeedbackList.svelte';
+export { default as FeedbackItem } from './FeedbackItem.svelte';
+export { default as FeedbackDetail } from './FeedbackDetail.svelte';
+export { default as FeedbackSubmitForm } from './FeedbackSubmitForm.svelte';
+export { timeAgo, getStatusBadgeVariant } from './utils.js';

package/dist/components/board/index.js

@@ -0,0 +1,7 @@
+export { createFeedbackBoard } from './state.svelte.js';
+export { default as FeedbackSidebar } from './FeedbackSidebar.svelte';
+export { default as FeedbackList } from './FeedbackList.svelte';
+export { default as FeedbackItem } from './FeedbackItem.svelte';
+export { default as FeedbackDetail } from './FeedbackDetail.svelte';
+export { default as FeedbackSubmitForm } from './FeedbackSubmitForm.svelte';
+export { timeAgo, getStatusBadgeVariant } from './utils.js';

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

@@ -0,0 +1,49 @@
+/**
+ * Reactive state manager for FeedbackBoard composable components.
+ *
+ * Usage:
+ *   const board = createFeedbackBoard({ apiUrl, apiKey });
+ *   <FeedbackSidebar {board} />
+ *   <FeedbackList {board} />
+ */
+import { type BoardItem, type BoardCategory, type StatusClient } from '../../api.js';
+export interface CategoryConfig {
+    label?: string;
+    icon?: string;
+    description?: string;
+}
+export interface FeedbackBoardOptions {
+    apiUrl: string;
+    apiKey: string;
+    categoryConfig?: Record<string, CategoryConfig>;
+}
+export interface FeedbackBoardState {
+    readonly client: StatusClient;
+    readonly categoryConfig: Record<string, CategoryConfig>;
+    readonly items: BoardItem[];
+    readonly categories: BoardCategory[];
+    readonly total: number;
+    readonly loading: boolean;
+    readonly error: string;
+    activeCategory: string | null;
+    statusFilter: string;
+    sortBy: string;
+    readonly votedItems: Record<string, 'up' | 'down'>;
+    reload(): Promise<void>;
+    vote(itemId: string, direction: 'up' | 'down'): Promise<void>;
+    getResponses(itemId: string): Promise<{
+        message: string;
+        author: string | null;
+        createdAt: number;
+    }[]>;
+    submitFeedback(data: {
+        title?: string;
+        message: string;
+        category?: string;
+        email?: string;
+    }): Promise<void>;
+    getCategoryIcon(name: string): string;
+    getCategoryLabel(name: string): string;
+    getCategoryDescription(name: string): string;
+}
+export declare function createFeedbackBoard(options: FeedbackBoardOptions): FeedbackBoardState;

package/dist/components/board/state.svelte.js

@@ -0,0 +1,119 @@
+/**
+ * Reactive state manager for FeedbackBoard composable components.
+ *
+ * Usage:
+ *   const board = createFeedbackBoard({ apiUrl, apiKey });
+ *   <FeedbackSidebar {board} />
+ *   <FeedbackList {board} />
+ */
+import { createStatusClient } from '../../api.js';
+export function createFeedbackBoard(options) {
+    const { apiUrl, apiKey, categoryConfig = {} } = options;
+    const client = createStatusClient({ apiUrl, apiKey });
+    // Reactive state
+    let items = $state([]);
+    let categories = $state([]);
+    let total = $state(0);
+    let loading = $state(true);
+    let error = $state('');
+    let activeCategory = $state(null);
+    let statusFilter = $state('open');
+    let sortBy = $state('votes');
+    let votedItems = $state({});
+    // Response cache
+    const responseCache = {};
+    async function load() {
+        loading = true;
+        error = '';
+        try {
+            const data = await client.getBoard({
+                category: activeCategory || undefined,
+                status: statusFilter,
+                sort: sortBy,
+            });
+            items = data.items;
+            total = data.total;
+            categories = data.categories;
+        }
+        catch (e) {
+            error = e instanceof Error ? e.message : 'Failed to load';
+        }
+        finally {
+            loading = false;
+        }
+    }
+    // Auto-reload when filters change
+    $effect(() => {
+        void activeCategory;
+        void statusFilter;
+        void sortBy;
+        load();
+    });
+    async function vote(itemId, direction) {
+        const prev = votedItems[itemId];
+        try {
+            const result = await client.vote(itemId, direction);
+            const item = items.find((i) => i.id === itemId);
+            if (item)
+                item.votes = result.votes;
+            if (prev === direction) {
+                delete votedItems[itemId];
+                votedItems = { ...votedItems };
+            }
+            else {
+                votedItems = { ...votedItems, [itemId]: direction };
+            }
+        }
+        catch {
+            // Vote failures are silent — optimistic UI
+        }
+    }
+    async function getResponses(itemId) {
+        if (responseCache[itemId])
+            return responseCache[itemId];
+        try {
+            const data = await client.getResponses(itemId);
+            responseCache[itemId] = data.responses;
+            return data.responses;
+        }
+        catch {
+            return [];
+        }
+    }
+    async function submitFeedback(data) {
+        await client.submitFeedback({
+            ...data,
+            pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
+        });
+        await load();
+    }
+    return {
+        get client() { return client; },
+        get categoryConfig() { return categoryConfig; },
+        get items() { return items; },
+        get categories() { return categories; },
+        get total() { return total; },
+        get loading() { return loading; },
+        get error() { return error; },
+        get activeCategory() { return activeCategory; },
+        set activeCategory(v) { activeCategory = v; },
+        get statusFilter() { return statusFilter; },
+        set statusFilter(v) { statusFilter = v; },
+        get sortBy() { return sortBy; },
+        set sortBy(v) { sortBy = v; },
+        get votedItems() { return votedItems; },
+        reload: load,
+        vote,
+        getResponses,
+        submitFeedback,
+        getCategoryIcon(name) {
+            return categoryConfig[name]?.icon || 'fa-solid fa-circle';
+        },
+        getCategoryLabel(name) {
+            return categoryConfig[name]?.label || name;
+        },
+        getCategoryDescription(name) {
+            return categoryConfig[name]?.description || '';
+        },
+    };
+}

package/dist/components/board/utils.d.ts

@@ -0,0 +1,4 @@
+/** Relative time formatting for feedback timestamps */
+export declare function timeAgo(timestamp: number): string;
+/** Map feedback status to badge variant */
+export declare function getStatusBadgeVariant(status: string): 'success' | 'neutral' | 'info';

package/dist/components/board/utils.js

@@ -0,0 +1,22 @@
+/** Relative time formatting for feedback timestamps */
+export function timeAgo(timestamp) {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60)
+        return 'just now';
+    if (seconds < 3600)
+        return `${Math.floor(seconds / 60)}m ago`;
+    if (seconds < 86400)
+        return `${Math.floor(seconds / 3600)}h ago`;
+    const days = Math.floor(seconds / 86400);
+    if (days < 30)
+        return `${days}d ago`;
+    return new Date(timestamp).toLocaleDateString();
+}
+/** Map feedback status to badge variant */
+export function getStatusBadgeVariant(status) {
+    if (status === 'new' || status === 'reviewed')
+        return 'success';
+    if (status === 'resolved')
+        return 'neutral';
+    return 'info';
+}

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as FeedbackForm } from './components/FeedbackForm.svelte';
 export { default as DevFeedback } from './components/DevFeedback.svelte';
 export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
+export { createFeedbackBoard, FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm, } from './components/board/index.js';
+export type { FeedbackBoardState, FeedbackBoardOptions, CategoryConfig } from './components/board/index.js';
 export { default as StatusIndicator } from './components/shared/StatusIndicator.svelte';
 export { default as UptimeBar } from './components/shared/UptimeBar.svelte';
 export { default as IncidentTimeline } from './components/shared/IncidentTimeline.svelte';

package/dist/index.js

@@ -16,6 +16,8 @@ export { default as FeedbackForm } from './components/FeedbackForm.svelte';
 export { default as DevFeedback } from './components/DevFeedback.svelte';
 export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
+// ── Composable Board Components ──
+export { createFeedbackBoard, FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm, } from './components/board/index.js';
 // ── Shared Components ──
 export { default as StatusIndicator } from './components/shared/StatusIndicator.svelte';
 export { default as UptimeBar } from './components/shared/UptimeBar.svelte';

package/package.json

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