includio-cms 0.5.3 → 0.5.7

package/dist/admin/client/collection/data-table.svelte

@@ -15,6 +15,8 @@
 	import * as Table from '../../../components/ui/table/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { droppable, draggable, dndState } from '@thisux/sveltednd';
+	import { flip } from 'svelte/animate';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -35,6 +37,8 @@
 		pageCount?: number;
 		rowCount?: number;
 		emptyMessage?: string;
+		orderable?: boolean;
+		onReorder?: (fromIndex: number, toIndex: number) => void;
 	};
 
 	let {
@@ -55,9 +59,18 @@
 		manualPagination: manualPaginationProp = false,
 		pageCount: pageCountProp,
 		rowCount: rowCountProp,
-		emptyMessage
+		emptyMessage,
+		orderable = false,
+		onReorder
 	}: DataTableProps<TData, TValue> = $props();
 
+	let liveRegionMessage = $state('');
+	let dropProcessing = false;
+
+	const matchesReducedMotion = typeof window !== 'undefined'
+		? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		: false;
+
 	const interfaceLanguage = useInterfaceLanguage();
 
 	const defaultEmptyMessages: Record<InterfaceLanguage, string> = {
@@ -113,10 +126,17 @@
 	});
 </script>
 
-<Table.Root>
+{#if orderable}
+	<div aria-live="polite" aria-atomic="true" class="sr-only">{liveRegionMessage}</div>
+{/if}
+
+<Table.Root aria-roledescription={orderable ? 'sortable list' : undefined}>
 	<Table.Header class="bg-muted sticky top-0 z-10">
 		{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
 			<Table.Row class="border-b-0 hover:bg-transparent">
+				{#if orderable}
+					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10 w-10"></Table.Head>
+				{/if}
 				{#each headerGroup.headers as header (header.id)}
 					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10">
 						{#if !header.isPlaceholder}
@@ -131,23 +151,112 @@
 		{/each}
 	</Table.Header>
 	<Table.Body>
-		{#each table.getRowModel().rows as row, i (row.id)}
-			<Table.Row
-				data-state={row.getIsSelected() && 'selected'}
-				class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
-			>
-				{#each row.getVisibleCells() as cell (cell.id)}
-					<Table.Cell class="py-3">
-						<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+		{#if orderable}
+			{#each table.getRowModel().rows as row, i (row.id)}
+				{@const totalRows = table.getRowModel().rows.length}
+				<tr
+					use:droppable={{
+						container: i.toString(),
+						callbacks: {
+							onDrop: (state) => {
+								if (dropProcessing) return;
+								dropProcessing = true;
+								const fromIndex = parseInt(state.sourceContainer ?? '');
+								const toIndex = parseInt(state.targetContainer ?? '');
+								if (!isNaN(fromIndex) && !isNaN(toIndex)) {
+									onReorder?.(fromIndex, toIndex);
+								}
+								dndState.isDragging = false;
+								dndState.draggedItem = null;
+								dndState.sourceContainer = '';
+								dndState.targetContainer = null;
+								dndState.targetElement = null;
+								setTimeout(() => { dropProcessing = false; }, 50);
+							}
+						}
+					}}
+					animate:flip={{ duration: matchesReducedMotion ? 0 : 200 }}
+					data-slot="table-row"
+					data-state={row.getIsSelected() ? 'selected' : undefined}
+					class="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === totalRows - 1 ? 'border-b-0' : ''}"
+				>
+					<Table.Cell class="py-3 w-10">
+						<div class="flex items-center gap-1">
+							<div
+								use:draggable={{
+									container: i.toString(),
+									dragData: { index: i }
+								}}
+								class="text-muted-foreground hover:text-foreground cursor-grab"
+								role="button"
+								tabindex="0"
+								aria-label={`Drag to reorder, row ${i + 1} of ${totalRows}`}
+								aria-roledescription="draggable"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+							</div>
+							<div class="flex flex-col">
+								{#if i > 0}
+									<button
+										type="button"
+										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+										aria-label={`Move up, row ${i + 1} of ${totalRows}`}
+										onclick={() => {
+											onReorder?.(i, i - 1);
+											liveRegionMessage = `Moved to position ${i} of ${totalRows}`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
+									</button>
+								{/if}
+								{#if i < totalRows - 1}
+									<button
+										type="button"
+										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+										aria-label={`Move down, row ${i + 1} of ${totalRows}`}
+										onclick={() => {
+											onReorder?.(i, i + 1);
+											liveRegionMessage = `Moved to position ${i + 2} of ${totalRows}`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
+									</button>
+								{/if}
+							</div>
+						</div>
 					</Table.Cell>
-				{/each}
-			</Table.Row>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell class="py-3">
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</tr>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length + 1} class="h-24 text-center text-muted-foreground">
+						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
+					</Table.Cell>
+				</Table.Row>
+			{/each}
 		{:else}
-			<Table.Row>
-				<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
-					{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
-				</Table.Cell>
-			</Table.Row>
-		{/each}
+			{#each table.getRowModel().rows as row, i (row.id)}
+				<Table.Row
+					data-state={row.getIsSelected() && 'selected'}
+					class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
+				>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell class="py-3">
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
+						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		{/if}
 	</Table.Body>
 </Table.Root>

package/dist/admin/client/collection/data-table.svelte.d.ts

@@ -18,6 +18,8 @@ type DataTableProps<TData, TValue> = {
     pageCount?: number;
     rowCount?: number;
     emptyMessage?: string;
+    orderable?: boolean;
+    onReorder?: (fromIndex: number, toIndex: number) => void;
 };
 declare function $$render<TData, TValue>(): {
     props: DataTableProps<TData, TValue>;

package/dist/admin/client/collection/row-actions.svelte

@@ -13,7 +13,7 @@
 		entryUrl: string;
 		entryName: string;
 		onArchive: () => void;
-		onDelete: () => void;
+		onDelete?: () => void;
 		onRestore?: () => void;
 	};
 
@@ -61,9 +61,11 @@
 			{t.archive}
 		</DropdownMenu.Item>
 		{/if}
+		{#if onDelete}
 		<DropdownMenu.Item class="text-destructive focus:text-destructive" onclick={onDelete}>
 			<Trash class="mr-2 size-4" />
 			{t.delete}
 		</DropdownMenu.Item>
+		{/if}
 	</DropdownMenu.Content>
 </DropdownMenu.Root>

package/dist/admin/client/collection/row-actions.svelte.d.ts

@@ -2,7 +2,7 @@ type Props = {
     entryUrl: string;
     entryName: string;
     onArchive: () => void;
-    onDelete: () => void;
+    onDelete?: () => void;
     onRestore?: () => void;
 };
 declare const RowActions: import("svelte").Component<Props, {}, "">;

package/dist/admin/client/entry/entry-page.svelte

@@ -10,10 +10,11 @@
 	let { data }: Props = $props();
 
 	const entryId = $derived(data?.entryId || page.params.entryId || '');
+	const query = $derived(remotes.getEntryForEntryPage(entryId));
 </script>
 
-{#await remotes.getEntryForEntryPage(entryId)}
+{#if !query.ready}
 	<EntryPageSkeleton />
-{:then entry}
-	<EntryVersion {entry} />
-{/await}
+{:else if query.current}
+	<EntryVersion entry={query.current} />
+{/if}

package/dist/admin/client/form/form-config-wrapper.svelte

@@ -27,6 +27,8 @@
 	});
 </script>
 
-{#await formSubmissionsQuery then submissions}
-	<FormSubmissions {submissions} {formConfig} />
-{/await}
+{#if formSubmissionsQuery.ready && formSubmissionsQuery.current}
+	<div class:opacity-60={formSubmissionsQuery.loading} class="transition-opacity duration-200">
+		<FormSubmissions submissions={formSubmissionsQuery.current} {formConfig} />
+	</div>
+{/if}

package/dist/admin/client/form/form-page.svelte

@@ -9,9 +9,9 @@
 </script>
 
 <div class="p-4 md:p-6">
-	{#key formConfigQuery}
-		{#await formConfigQuery then formConfig}
-			<FormConfigWrapper {formConfig} />
-		{/await}
-	{/key}
+	{#if formConfigQuery.ready && formConfigQuery.current}
+		<div class:opacity-60={formConfigQuery.loading} class="transition-opacity duration-200">
+			<FormConfigWrapper formConfig={formConfigQuery.current} />
+		</div>
+	{/if}
 </div>

package/dist/admin/client/form/form-submission/form-submission-page.svelte

@@ -44,47 +44,45 @@
 		data?.submissionId || (page.params as Record<string, string>).submissionId || (page.params as Record<string, string>).id || ''
 	);
 
-	let formSubmissionQuery = $derived(submissionId ? remotes.getFormSubmission(submissionId) : null);
+	const formSubmissionQuery = $derived(submissionId ? remotes.getFormSubmission(submissionId) : null);
 
 	$effect(() => {
-		if (formSubmissionQuery) {
-			formSubmissionQuery.then(async (submission) => {
-				if (submission) {
-					const form = await remotes.getForm(submission.formSlug);
-					const formLabel = getLocalizedLabel(form.label, interfaceLanguage.current) || form.slug;
-
-					breadcrumbs.state = [
-						{
-							label: formLabel,
-							href: `/admin/forms/${form.slug}`
-						},
-						{
-							label: lang[interfaceLanguage.current].submission
-						}
-					];
-
-					if (!submission.read) {
-						await remotes.updateFormSubmission({ id: submission.id, read: true });
+		const submission = formSubmissionQuery?.current;
+		if (submission) {
+			// Update breadcrumbs
+			const formQuery = remotes.getForm(submission.formSlug);
+			if (formQuery.ready && formQuery.current) {
+				const form = formQuery.current;
+				const formLabel = getLocalizedLabel(form.label, interfaceLanguage.current) || form.slug;
+				breadcrumbs.state = [
+					{
+						label: formLabel,
+						href: `/admin/forms/${form.slug}`
+					},
+					{
+						label: lang[interfaceLanguage.current].submission
 					}
-				}
-			});
+				];
+			}
+
+			if (!submission.read) {
+				remotes.updateFormSubmission({ id: submission.id, read: true });
+			}
 		}
 	});
 </script>
 
 <div class="p-4 md:p-6">
 	{#if formSubmissionQuery}
-		{#key submissionId}
-			{#await formSubmissionQuery}
-				<p class="text-muted-foreground">{lang[interfaceLanguage.current].loading}</p>
-			{:then submission}
-				{#if submission === null}
-					<p class="text-muted-foreground">{lang[interfaceLanguage.current].notFound}</p>
-				{:else}
-					<FormSubmission {submission} />
-				{/if}
-			{/await}
-		{/key}
+		{#if !formSubmissionQuery.ready}
+			<p class="text-muted-foreground">{lang[interfaceLanguage.current].loading}</p>
+		{:else if formSubmissionQuery.current === null}
+			<p class="text-muted-foreground">{lang[interfaceLanguage.current].notFound}</p>
+		{:else if formSubmissionQuery.current}
+			<div class:opacity-60={formSubmissionQuery.loading} class="transition-opacity duration-200">
+				<FormSubmission submission={formSubmissionQuery.current} />
+			</div>
+		{/if}
 	{:else}
 		<p class="text-muted-foreground">{lang[interfaceLanguage.current].notFound}</p>
 	{/if}

package/dist/admin/components/accessibility/accessibility-overview.svelte

@@ -20,6 +20,8 @@
 			altInfo: 'Total images without alt text:'
 		}
 	};
+
+	const query = $derived(remotes.getAltOverview());
 </script>
 
 <Card.Root>
@@ -28,18 +30,18 @@
 		<Card.Description>{lang[interfaceLanguage.current].description}</Card.Description>
 	</Card.Header>
 	<Card.Content>
-		{#await remotes.getAltOverview()}
+		{#if !query.ready}
 			<div class="space-y-2">
 				<Skeleton class="h-4 w-[250px]" />
 				<Skeleton class="h-4 w-[200px]" />
 			</div>
-		{:then overview}
-			<div class="space-y-4">
+		{:else if query.current}
+			<div class="space-y-4" class:opacity-60={query.loading} style="transition: opacity 200ms">
 				<p>
 					{lang[interfaceLanguage.current].altInfo}
-					<span class="text-2xl font-bold text-primary">{overview.filesWithoutAlt}</span>
+					<span class="text-2xl font-bold text-primary">{query.current.filesWithoutAlt}</span>
 				</p>
 			</div>
-		{/await}
+		{/if}
 	</Card.Content>
 </Card.Root>

package/dist/admin/components/accessibility/accessibility-overview.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AccessibilityOverview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AccessibilityOverview = InstanceType<typeof AccessibilityOverview>;
+declare const AccessibilityOverview: import("svelte").Component<Record<string, never>, {}, "">;
+type AccessibilityOverview = ReturnType<typeof AccessibilityOverview>;
 export default AccessibilityOverview;

package/dist/admin/components/dashboard/a11y-gauge.svelte

@@ -31,6 +31,8 @@
 			hint: (n) => `${n} image${n === 1 ? ' needs' : 's need'} a description. Go to the media library to add them.`
 		}
 	};
+
+	const query = $derived(remotes.getAltOverview());
 </script>
 
 <section class="dash-card dash-card--a11y" aria-labelledby="a11y-heading">
@@ -38,7 +40,7 @@
 		<h2 class="dash-card-title" id="a11y-heading">{lang[interfaceLanguage.current].title}</h2>
 	</div>
 
-	{#await remotes.getAltOverview()}
+	{#if !query.ready}
 		<div class="a11y-card-body">
 			<div class="gauge-wrap">
 				<Skeleton class="rounded-full" style="width:140px;height:140px" />
@@ -46,12 +48,13 @@
 			<Skeleton class="h-4 w-32 mb-2" />
 			<Skeleton class="h-12 w-full" />
 		</div>
-	{:then overview}
+	{:else if query.current}
+		{@const overview = query.current}
 		{@const compliancePercent = overview.totalFiles > 0 ? Math.round((overview.filesWithAlt / overview.totalFiles) * 100) : 100}
 		{@const fillLength = (compliancePercent / 100) * CIRCUMFERENCE}
 		{@const hasIssues = overview.filesWithoutAlt > 0}
 
-		<div class="a11y-card-body">
+		<div class="a11y-card-body" class:opacity-60={query.loading} style="transition: opacity 200ms">
 			<div class="gauge-wrap">
 				<svg class="gauge-svg" viewBox="0 0 140 140" role="img" aria-label="{interfaceLanguage.current === 'pl' ? 'Ocena dostępności' : 'Accessibility score'}: {compliancePercent}%">
 					<circle class="gauge-bg" cx="70" cy="70" r="54" />
@@ -86,5 +89,5 @@
 				{/if}
 			</div>
 		</div>
-	{/await}
+	{/if}
 </section>

package/dist/admin/components/dashboard/a11y-gauge.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const A11yGauge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type A11yGauge = InstanceType<typeof A11yGauge>;
+declare const A11yGauge: import("svelte").Component<Record<string, never>, {}, "">;
+type A11yGauge = ReturnType<typeof A11yGauge>;
 export default A11yGauge;

package/dist/admin/components/dashboard/accessibility-hub.svelte

@@ -52,6 +52,8 @@
 			issuesFound: 'images need alt text'
 		}
 	};
+
+	const query = $derived(remotes.getAltOverview());
 </script>
 
 <Card.Root class="rounded-2xl border bg-card shadow-sm">
@@ -67,7 +69,7 @@
 		</div>
 	</Card.Header>
 	<Card.Content>
-		{#await remotes.getAltOverview()}
+		{#if !query.ready}
 			<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 				{#each Array(4) as _}
 					<div class="space-y-2">
@@ -76,14 +78,15 @@
 					</div>
 				{/each}
 			</div>
-		{:then overview}
+		{:else if query.current}
+			{@const overview = query.current}
 			{@const compliancePercent =
 				overview.totalFiles > 0
 					? Math.round((overview.filesWithAlt / overview.totalFiles) * 100)
 					: 100}
 			{@const hasIssues = overview.filesWithoutAlt > 0}
 
-			<div class="space-y-4">
+			<div class="space-y-4" class:opacity-60={query.loading} style="transition: opacity 200ms">
 				<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 					<StatCard
 						label={lang[interfaceLanguage.current].compliance}
@@ -142,6 +145,6 @@
 					</Alert.Root>
 				{/if}
 			</div>
-		{/await}
+		{/if}
 	</Card.Content>
 </Card.Root>

package/dist/admin/components/dashboard/accessibility-hub.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AccessibilityHub: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AccessibilityHub = InstanceType<typeof AccessibilityHub>;
+declare const AccessibilityHub: import("svelte").Component<Record<string, never>, {}, "">;
+type AccessibilityHub = ReturnType<typeof AccessibilityHub>;
 export default AccessibilityHub;

package/dist/admin/components/dashboard/form-submissions-widget.svelte

@@ -29,6 +29,8 @@
 	function formatRelativeDate(date: Date): string {
 		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
+
+	const query = $derived(remotes.getSubmissionsOverview());
 </script>
 
 <section class="dash-card dash-card--forms" aria-labelledby="forms-heading">
@@ -37,7 +39,7 @@
 		<a href="/admin/forms" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
 	</div>
 
-	{#await remotes.getSubmissionsOverview()}
+	{#if !query.ready}
 		<div class="forms-card-body">
 			{#each Array(2) as _}
 				<div class="form-group">
@@ -47,7 +49,9 @@
 				</div>
 			{/each}
 		</div>
-	{:then overview}
+	{:else if query.current}
+		{@const overview = query.current}
+		<div class:opacity-60={query.loading} class="transition-opacity duration-200">
 		{#if overview.length === 0}
 			<p class="text-center text-sm py-6" style="color:var(--text-light)">
 				{lang[interfaceLanguage.current].noSubmissions}
@@ -96,5 +100,6 @@
 				{/each}
 			</div>
 		{/if}
-	{/await}
+		</div>
+	{/if}
 </section>

package/dist/admin/components/dashboard/form-submissions-widget.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FormSubmissionsWidget: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FormSubmissionsWidget = InstanceType<typeof FormSubmissionsWidget>;
+declare const FormSubmissionsWidget: import("svelte").Component<Record<string, never>, {}, "">;
+type FormSubmissionsWidget = ReturnType<typeof FormSubmissionsWidget>;
 export default FormSubmissionsWidget;

package/dist/admin/components/dashboard/recent-activity.svelte

@@ -28,6 +28,8 @@
 	function formatRelativeDate(date: Date): string {
 		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
+
+	const query = $derived(remotes.getRecentActivity(10));
 </script>
 
 <section class="dash-card dash-card--activity" aria-labelledby="activity-heading">
@@ -35,7 +37,7 @@
 		<h2 class="dash-card-title" id="activity-heading">{lang[interfaceLanguage.current].title}</h2>
 	</div>
 
-	{#await remotes.getRecentActivity(10)}
+	{#if !query.ready}
 		<ul class="activity-list">
 			{#each Array(4) as _}
 				<li class="activity-item">
@@ -49,7 +51,9 @@
 				</li>
 			{/each}
 		</ul>
-	{:then activity}
+	{:else if query.current}
+		{@const activity = query.current}
+		<div class:opacity-60={query.loading} class="transition-opacity duration-200">
 		{#if activity.length === 0}
 			<p class="text-center text-sm py-6" style="color:var(--text-light)">
 				{lang[interfaceLanguage.current].noActivity}
@@ -76,5 +80,6 @@
 				{/each}
 			</ul>
 		{/if}
-	{/await}
+		</div>
+	{/if}
 </section>

package/dist/admin/components/dashboard/recent-activity.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RecentActivity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RecentActivity = InstanceType<typeof RecentActivity>;
+declare const RecentActivity: import("svelte").Component<Record<string, never>, {}, "">;
+type RecentActivity = ReturnType<typeof RecentActivity>;
 export default RecentActivity;