includio-cms 0.0.56 → 0.0.58

package/dist/admin/client/admin/admin-after-login-layout-content.svelte

@@ -21,7 +21,7 @@
 
 	<Sidebar.Inset class="h-[calc(100vh-1rem)] overflow-hidden">
 		<SiteHeader />
-		<div class="grow overflow-auto">
+		<div class="flex grow flex-col overflow-auto">
 			{@render children()}
 		</div>
 	</Sidebar.Inset>

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

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import AccessibilityOverview from '../../components/accessibility/accessibility-overview.svelte';
+	import AccessibilityHub from '../../components/dashboard/accessibility-hub.svelte';
+	import FormSubmissionsWidget from '../../components/dashboard/form-submissions-widget.svelte';
+	import RecentActivity from '../../components/dashboard/recent-activity.svelte';
 	import { sidebarLang } from '../../components/layout/lang.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
@@ -7,7 +9,6 @@
 	import { Button } from '../../../components/ui/button/index.js';
 
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import InfoCircleIcon from '@tabler/icons-svelte/icons/info-circle';
 	import AlertTriangleIcon from '@tabler/icons-svelte/icons/alert-triangle';
 	import TrashIcon from '@tabler/icons-svelte/icons/trash';
 
@@ -61,17 +62,6 @@
 		];
 	});
 
-	const alertLang: Record<InterfaceLanguage, { title: string; description: string }> = {
-		pl: {
-			title: 'Kokpit jest w trakcie budowy',
-			description: 'Oczekuj na więcej funkcji w nadchodzących aktualizacjach.'
-		},
-		en: {
-			title: 'The dashboard is under construction',
-			description: 'Expect more features in upcoming updates.'
-		}
-	};
-
 	const orphanedLang: Record<
 		InterfaceLanguage,
 		{ title: string; description: string; deleteBtn: string; confirmDelete: string }
@@ -93,27 +83,12 @@
 	};
 </script>
 
-<div class="relative min-h-[calc(100vh-var(--header-height))] p-4 md:p-6">
-	<!-- Dot pattern background -->
-	<div
-		class="pointer-events-none absolute inset-0 opacity-30 dark:opacity-10"
-		style="background-image: radial-gradient(circle, oklch(0.5 0.02 285) 1px, transparent 1px); background-size: 24px 24px;"
-	></div>
-
-	<!-- Floating orbs -->
-	<div
-		class="animate-float-slow pointer-events-none absolute -top-20 right-10 h-64 w-64 rounded-full bg-primary/10 blur-3xl"
-	></div>
-	<div
-		class="animate-float-slow pointer-events-none absolute bottom-20 left-10 h-48 w-48 rounded-full bg-primary/15 blur-2xl"
-		style="animation-delay: -5s;"
-	></div>
-
-	<div class="relative z-10">
+<div class="min-h-[calc(100vh-var(--header-height))] bg-slate-50 p-4 dark:bg-slate-950 md:p-6">
+	<div class="mx-auto max-w-7xl space-y-6">
 		{#if !loadingOrphaned && orphanedEntries.length > 0}
 			<Alert.Root
 				variant="destructive"
-				class="glass-panel mb-4 rounded-2xl border-orange-300/50 bg-orange-50/80 backdrop-blur-xl dark:border-orange-500/30 dark:bg-orange-950/60 md:mb-6"
+				class="rounded-2xl border-orange-300/50 bg-orange-50 dark:border-orange-500/30 dark:bg-orange-950/60"
 			>
 				<AlertTriangleIcon class="text-orange-600 dark:text-orange-400" />
 				<Alert.Title class="text-orange-800 dark:text-orange-200">
@@ -142,23 +117,11 @@
 			</Alert.Root>
 		{/if}
 
-		<Alert.Root
-			class="glass-panel mb-4 rounded-2xl border-slate-200/50 bg-white/80 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60 md:mb-6"
-		>
-			<InfoCircleIcon />
-			<Alert.Title>{alertLang[interfaceLanguage.current].title}</Alert.Title>
-			<Alert.Description>{alertLang[interfaceLanguage.current].description}</Alert.Description>
-		</Alert.Root>
+		<AccessibilityHub />
 
-		<div class="flex flex-wrap gap-4">
-			<AccessibilityOverview />
-			<a
-				href="/admin/demo/hybrid-editor"
-				class="glass-card rounded-2xl p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
-			>
-				<h3 class="font-medium">Hybrid Editor Demo</h3>
-				<p class="text-muted-foreground text-sm">Try the visual editing experience</p>
-			</a>
+		<div class="grid gap-6 lg:grid-cols-2">
+			<FormSubmissionsWidget />
+			<RecentActivity />
 		</div>
 	</div>
 </div>

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

@@ -9,9 +9,21 @@
 	};
 
 	let { restoreLabel, deleteLabel, onRestore, onDelete }: Props = $props();
+
+	function handleRestore(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		onRestore();
+	}
+
+	function handleDelete(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		onDelete();
+	}
 </script>
 
 <div class="flex gap-2">
-	<Button size="sm" variant="outline" onclick={onRestore}>{restoreLabel}</Button>
-	<Button size="sm" variant="destructive" onclick={onDelete}>{deleteLabel}</Button>
+	<Button size="sm" variant="outline" onclick={handleRestore}>{restoreLabel}</Button>
+	<Button size="sm" variant="destructive" onclick={handleDelete}>{deleteLabel}</Button>
 </div>

package/dist/admin/client/collection/collection-entries.svelte

@@ -1,18 +1,31 @@
 <script lang="ts">
+	import Plus from '@tabler/icons-svelte/icons/plus';
+	import Button from '../../../components/ui/button/button.svelte';
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
+	import { getEntryThumbnail } from '../../utils/entryThumbnail.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
-	import type { ColumnDef } from '@tanstack/table-core';
+	import type { ColumnDef, RowSelectionState, SortingState, Table } from '@tanstack/table-core';
 	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
 	import EntryLink from './entry-link.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getEntryStatus } from '../entry/utils.js';
 	import * as Tabs from '../../../components/ui/tabs/index.js';
+	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import { toast } from 'svelte-sonner';
 	import ArchivedActions from './archived-actions.svelte';
+	import StatusBadge from './status-badge.svelte';
+	import SortableHeader from './sortable-header.svelte';
+	import DateCell from './date-cell.svelte';
+	import SelectionCell from './selection-cell.svelte';
+	import TableToolbar from './table-toolbar.svelte';
+	import TablePagination from './table-pagination.svelte';
+	import GridView from './grid-view.svelte';
+	import { createCollectionViewState } from './collection-view.svelte.js';
+	import type { EntryStatus, RawEntry } from '../../../types/entries.js';
 
 	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
@@ -31,6 +44,12 @@
 			delete: string;
 			entryRestored: string;
 			entryDeleted: string;
+			selectAll: string;
+			selectRow: string;
+			entriesArchived: string;
+			deleteConfirmTitle: string;
+			deleteConfirmDescription: string;
+			cancel: string;
 		}
 	> = {
 		en: {
@@ -43,7 +62,13 @@
 			restore: 'Restore',
 			delete: 'Delete',
 			entryRestored: 'Entry restored',
-			entryDeleted: 'Entry permanently deleted'
+			entryDeleted: 'Entry permanently deleted',
+			selectAll: 'Select all',
+			selectRow: 'Select row',
+			entriesArchived: 'Entries archived',
+			deleteConfirmTitle: 'Delete entry permanently?',
+			deleteConfirmDescription: 'This action cannot be undone. The entry will be permanently deleted.',
+			cancel: 'Cancel'
 		},
 		pl: {
 			name: 'Nazwa',
@@ -55,23 +80,70 @@
 			restore: 'Przywróć',
 			delete: 'Usuń',
 			entryRestored: 'Wpis przywrócony',
-			entryDeleted: 'Wpis trwale usunięty'
+			entryDeleted: 'Wpis trwale usunięty',
+			selectAll: 'Zaznacz wszystkie',
+			selectRow: 'Zaznacz wiersz',
+			entriesArchived: 'Wpisy zarchiwizowane',
+			deleteConfirmTitle: 'Usunąć wpis na stałe?',
+			deleteConfirmDescription: 'Ta akcja jest nieodwracalna. Wpis zostanie trwale usunięty.',
+			cancel: 'Anuluj'
 		}
 	};
 
 	interface CollectionDataTableRow {
 		id: string;
 		name: string;
-		status: string;
+		status: EntryStatus;
 		createdAt: Date;
 		updatedAt: Date;
 		url: string;
+		thumbnail: string | null;
+		searchText: string;
 	}
 
+	type Props = {
+		collection: CollectionConfigWithType;
+		onCreateEntry: () => void;
+		addLabel: string;
+	};
+
+	let { collection, onCreateEntry, addLabel }: Props = $props();
+
+	const viewState = createCollectionViewState(collection.slug);
+
+	let searchQuery = $state('');
+	let rowSelection = $state<RowSelectionState>({});
+	let tableInstance = $state<Table<CollectionDataTableRow> | null>(null);
+	let deleteDialogOpen = $state(false);
+	let pendingDeleteId = $state<string | null>(null);
+
 	const columns: ColumnDef<CollectionDataTableRow>[] = $derived([
+		{
+			id: 'select',
+			header: ({ table }) =>
+				renderComponent(SelectionCell, {
+					checked: table.getIsAllPageRowsSelected(),
+					indeterminate: table.getIsSomePageRowsSelected(),
+					onCheckedChange: (value: boolean) => table.toggleAllPageRowsSelected(value),
+					ariaLabel: lang[interfaceLanguage.current].selectAll
+				}),
+			cell: ({ row }) =>
+				renderComponent(SelectionCell, {
+					checked: row.getIsSelected(),
+					onCheckedChange: (value: boolean) => row.toggleSelected(value),
+					ariaLabel: lang[interfaceLanguage.current].selectRow
+				}),
+			enableSorting: false,
+			enableHiding: false
+		},
 		{
 			accessorKey: 'name',
-			header: lang[interfaceLanguage.current].name,
+			header: ({ column }) =>
+				renderComponent(SortableHeader<CollectionDataTableRow>, {
+					column,
+					label: lang[interfaceLanguage.current].name,
+					sorting: viewState.sorting
+				}),
 			cell: (info) => {
 				return renderComponent(EntryLink, {
 					name: info.row.original.name,
@@ -81,21 +153,40 @@
 		},
 		{
 			accessorKey: 'status',
-			header: 'Status'
+			header: 'Status',
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					status: info.row.original.status
+				}),
+			enableSorting: false
 		},
 		{
 			accessorKey: 'createdAt',
-			header: lang[interfaceLanguage.current].createdAt,
-			cell: (info) => {
-				return new Date(info.row.original.createdAt).toLocaleString('pl');
-			}
+			header: ({ column }) =>
+				renderComponent(SortableHeader<CollectionDataTableRow>, {
+					column,
+					label: lang[interfaceLanguage.current].createdAt,
+					sorting: viewState.sorting
+				}),
+			cell: (info) =>
+				renderComponent(DateCell, {
+					date: info.row.original.createdAt,
+					format: viewState.dateFormat
+				})
 		},
 		{
 			accessorKey: 'updatedAt',
-			header: lang[interfaceLanguage.current].updatedAt,
-			cell: (info) => {
-				return new Date(info.row.original.updatedAt).toLocaleString('pl');
-			}
+			header: ({ column }) =>
+				renderComponent(SortableHeader<CollectionDataTableRow>, {
+					column,
+					label: lang[interfaceLanguage.current].updatedAt,
+					sorting: viewState.sorting
+				}),
+			cell: (info) =>
+				renderComponent(DateCell, {
+					date: info.row.original.updatedAt,
+					format: viewState.dateFormat
+				})
 		}
 	]);
 
@@ -112,16 +203,20 @@
 		{
 			accessorKey: 'createdAt',
 			header: lang[interfaceLanguage.current].createdAt,
-			cell: (info) => {
-				return new Date(info.row.original.createdAt).toLocaleString('pl');
-			}
+			cell: (info) =>
+				renderComponent(DateCell, {
+					date: info.row.original.createdAt,
+					format: viewState.dateFormat
+				})
 		},
 		{
 			accessorKey: 'updatedAt',
 			header: lang[interfaceLanguage.current].updatedAt,
-			cell: (info) => {
-				return new Date(info.row.original.updatedAt).toLocaleString('pl');
-			}
+			cell: (info) =>
+				renderComponent(DateCell, {
+					date: info.row.original.updatedAt,
+					format: viewState.dateFormat
+				})
 		},
 		{
 			id: 'actions',
@@ -137,12 +232,6 @@
 		}
 	]);
 
-	type Props = {
-		collection: CollectionConfigWithType;
-	};
-
-	let { collection }: Props = $props();
-
 	let activeTab = $state('active');
 
 	async function handleRestore(id: string) {
@@ -152,55 +241,199 @@
 		remotes.getRawEntries({ slug: collection.slug }).refresh();
 	}
 
-	async function handleDelete(id: string) {
-		if (!confirm('Are you sure? This cannot be undone.')) return;
-		await remotes.deleteEntryCommand(id);
+	function handleDelete(id: string) {
+		pendingDeleteId = id;
+		deleteDialogOpen = true;
+	}
+
+	async function confirmDelete() {
+		if (!pendingDeleteId) return;
+		await remotes.deleteEntryCommand(pendingDeleteId);
 		toast.success(lang[interfaceLanguage.current].entryDeleted);
 		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
+		deleteDialogOpen = false;
+		pendingDeleteId = null;
+	}
+
+	function getSearchText(entry: RawEntry): string {
+		const data = entry.draftVersion?.data || entry.publishedVersion?.data;
+		if (!data) return '';
+		return extractTextValues(data).join(' ').toLowerCase();
+	}
+
+	function extractTextValues(obj: unknown): string[] {
+		const values: string[] = [];
+
+		if (typeof obj === 'string') {
+			values.push(obj);
+		} else if (Array.isArray(obj)) {
+			for (const item of obj) {
+				values.push(...extractTextValues(item));
+			}
+		} else if (obj && typeof obj === 'object') {
+			for (const value of Object.values(obj)) {
+				values.push(...extractTextValues(value));
+			}
+		}
+
+		return values;
+	}
+
+	function mapEntryToRow(entry: RawEntry): CollectionDataTableRow {
+		const data = entry.draftVersion?.data || entry.publishedVersion?.data || {};
+		return {
+			id: entry.id,
+			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
+			url: `/admin/entries/${entry.id}`,
+			status: getEntryStatus(entry),
+			createdAt: new Date(entry.createdAt),
+			updatedAt: new Date(entry.updatedAt),
+			thumbnail: getEntryThumbnail(data as Record<string, unknown>, collection),
+			searchText: getSearchText(entry)
+		};
+	}
+
+	const selectedIndices = $derived(Object.keys(rowSelection).filter((k) => rowSelection[k]).map(Number));
+	const selectedCount = $derived(selectedIndices.length);
+
+	function sortItems<T extends CollectionDataTableRow>(items: T[], sorting: SortingState): T[] {
+		if (!sorting.length) return items;
+		const { id, desc } = sorting[0];
+		return [...items].sort((a, b) => {
+			const aVal = a[id as keyof CollectionDataTableRow];
+			const bVal = b[id as keyof CollectionDataTableRow];
+			if (aVal instanceof Date && bVal instanceof Date) {
+				return desc ? bVal.getTime() - aVal.getTime() : aVal.getTime() - bVal.getTime();
+			}
+			if (typeof aVal === 'string' && typeof bVal === 'string') {
+				return desc ? bVal.localeCompare(aVal) : aVal.localeCompare(bVal);
+			}
+			return 0;
+		});
+	}
+
+	async function handleBulkArchive(items: CollectionDataTableRow[]) {
+		const idsToArchive = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
+		for (const id of idsToArchive) {
+			await remotes.archiveEntryCommand(id);
+		}
+		toast.success(lang[interfaceLanguage.current].entriesArchived);
+		rowSelection = {};
+		remotes.getRawEntries({ slug: collection.slug }).refresh();
+		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
 	}
 </script>
 
 <Tabs.Root bind:value={activeTab} class="w-full">
-	<Tabs.List class="mb-4">
-		<Tabs.Trigger value="active">{lang[interfaceLanguage.current].active}</Tabs.Trigger>
-		<Tabs.Trigger value="archived">{lang[interfaceLanguage.current].archived}</Tabs.Trigger>
-	</Tabs.List>
+	<div class="flex items-center justify-between border-b border-slate-200/50 px-4 py-3 dark:border-white/10">
+		<Tabs.List class="h-auto gap-1 bg-transparent p-0">
+			<Tabs.Trigger value="active" class="rounded-lg px-3 py-1.5 text-sm font-medium data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white">{lang[interfaceLanguage.current].active}</Tabs.Trigger>
+			<Tabs.Trigger value="archived" class="rounded-lg px-3 py-1.5 text-sm font-medium data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white">{lang[interfaceLanguage.current].archived}</Tabs.Trigger>
+		</Tabs.List>
+		<Button type="button" onclick={onCreateEntry} class="btn-gradient" size="sm">
+			<Plus class="size-4" /> {addLabel}
+		</Button>
+	</div>
 
-	<Tabs.Content value="active">
+	<Tabs.Content value="active" class="mt-0">
 		{#await remotes.getRawEntries({ slug: collection.slug }) then entries}
 			{@const items = entries
 				.filter((entry) => entry.archivedAt === null)
-				.map((entry) => ({
-					id: entry.id,
-					collection: entry.slug,
-					name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
-					url: `/admin/entries/${entry.id}`,
-					status: getEntryStatus(entry),
-					createdAt: entry.createdAt,
-					updatedAt: entry.updatedAt
-				}))}
-			{#key interfaceLanguage.current}
-				<DataTable data={items} {columns} />
-			{/key}
+				.map(mapEntryToRow)}
+			{@const filteredItems = searchQuery
+				? items.filter((item) => item.searchText.includes(searchQuery.toLowerCase()))
+				: items}
+			{@const totalItems = filteredItems.length}
+			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+
+			<TableToolbar
+				{searchQuery}
+				onSearchChange={(q) => (searchQuery = q)}
+				viewMode={viewState.viewMode}
+				onViewModeChange={(m) => (viewState.viewMode = m)}
+				dateFormat={viewState.dateFormat}
+				onDateFormatChange={(f) => (viewState.dateFormat = f)}
+				{selectedCount}
+				onBulkArchive={() => handleBulkArchive(sortItems(filteredItems, viewState.sorting))}
+			/>
+
+			{#if viewState.viewMode === 'list'}
+				<DataTable
+					data={sortItems(filteredItems, viewState.sorting)}
+					{columns}
+					enableSorting
+					enableFiltering
+					enableSelection
+					enablePagination
+					sorting={viewState.sorting}
+					onSortingChange={(s) => (viewState.sorting = s)}
+					{rowSelection}
+					onRowSelectionChange={(s) => (rowSelection = s)}
+					pagination={{ pageIndex: 0, pageSize: viewState.pageSize }}
+					tableRef={(t) => (tableInstance = t)}
+				/>
+
+				<TablePagination
+					pageIndex={tableInstance?.getState().pagination.pageIndex ?? 0}
+					pageSize={viewState.pageSize}
+					{pageCount}
+					{totalItems}
+					onPageChange={(p) => tableInstance?.setPageIndex(p)}
+					onPageSizeChange={(s) => {
+						viewState.pageSize = s;
+						tableInstance?.setPageSize(s);
+					}}
+				/>
+			{:else}
+				<GridView
+					items={sortItems(filteredItems, viewState.sorting).map((item) => ({
+						id: item.id,
+						name: item.name,
+						status: item.status,
+						url: item.url,
+						thumbnail: item.thumbnail,
+						updatedAt: item.updatedAt
+					}))}
+					dateFormat={viewState.dateFormat}
+					enableSelection
+					selectedIds={new Set(selectedIndices.map((idx) => sortItems(filteredItems, viewState.sorting)[idx]?.id).filter(Boolean))}
+					onSelectionChange={(ids) => {
+						const sorted = sortItems(filteredItems, viewState.sorting);
+						const newSelection: RowSelectionState = {};
+						for (const id of ids) {
+							const idx = sorted.findIndex((i) => i.id === id);
+							if (idx !== -1) {
+								newSelection[idx] = true;
+							}
+						}
+						rowSelection = newSelection;
+					}}
+				/>
+			{/if}
 		{/await}
 	</Tabs.Content>
 
-	<Tabs.Content value="archived">
+	<Tabs.Content value="archived" class="mt-0">
 		{#await remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }) then entries}
 			{@const items = entries.map((entry) => ({
-				id: entry.id,
-				collection: entry.slug,
-				name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
-				url: `/admin/entries/${entry.id}`,
-				status: getEntryStatus(entry),
-				createdAt: entry.createdAt,
-				updatedAt: entry.updatedAt,
+				...mapEntryToRow(entry),
 				onRestore: () => handleRestore(entry.id),
 				onDelete: () => handleDelete(entry.id)
 			}))}
-			{#key interfaceLanguage.current}
+			<div class="p-4">
 				<DataTable data={items} columns={archivedColumns} />
-			{/key}
+			</div>
 		{/await}
 	</Tabs.Content>
 </Tabs.Root>
+
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+	<AlertDialog.Content>
+		<AlertDialog.Title>{lang[interfaceLanguage.current].deleteConfirmTitle}</AlertDialog.Title>
+		<AlertDialog.Description>{lang[interfaceLanguage.current].deleteConfirmDescription}</AlertDialog.Description>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>{lang[interfaceLanguage.current].cancel}</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={confirmDelete}>{lang[interfaceLanguage.current].delete}</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/admin/client/collection/collection-entries.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { CollectionConfigWithType } from '../../../types/collections.js';
 type Props = {
     collection: CollectionConfigWithType;
+    onCreateEntry: () => void;
+    addLabel: string;
 };
 declare const CollectionEntries: import("svelte").Component<Props, {}, "">;
 type CollectionEntries = ReturnType<typeof CollectionEntries>;

package/dist/admin/client/collection/collection-view.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SortingState } from '@tanstack/table-core';
+export type ViewMode = 'list' | 'grid';
+export type DateFormat = 'relative' | 'absolute';
+export interface CollectionViewState {
+    viewMode: ViewMode;
+    dateFormat: DateFormat;
+    pageSize: number;
+    sorting: SortingState;
+}
+export declare function createCollectionViewState(collectionSlug: string): {
+    viewMode: ViewMode;
+    dateFormat: DateFormat;
+    pageSize: number;
+    sorting: SortingState;
+};

package/dist/admin/client/collection/collection-view.svelte.js

@@ -0,0 +1,66 @@
+const DEFAULT_STATE = {
+    viewMode: 'list',
+    dateFormat: 'relative',
+    pageSize: 10,
+    sorting: []
+};
+function getStorageKey(collectionSlug) {
+    return `includio-collection-${collectionSlug}-view`;
+}
+function loadState(collectionSlug) {
+    if (typeof window === 'undefined')
+        return DEFAULT_STATE;
+    try {
+        const stored = localStorage.getItem(getStorageKey(collectionSlug));
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return { ...DEFAULT_STATE, ...parsed };
+        }
+    }
+    catch {
+        // ignore
+    }
+    return DEFAULT_STATE;
+}
+function saveState(collectionSlug, state) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(getStorageKey(collectionSlug), JSON.stringify(state));
+    }
+    catch {
+        // ignore
+    }
+}
+export function createCollectionViewState(collectionSlug) {
+    let state = $state(loadState(collectionSlug));
+    $effect(() => {
+        saveState(collectionSlug, state);
+    });
+    return {
+        get viewMode() {
+            return state.viewMode;
+        },
+        set viewMode(value) {
+            state = { ...state, viewMode: value };
+        },
+        get dateFormat() {
+            return state.dateFormat;
+        },
+        set dateFormat(value) {
+            state = { ...state, dateFormat: value };
+        },
+        get pageSize() {
+            return state.pageSize;
+        },
+        set pageSize(value) {
+            state = { ...state, pageSize: value };
+        },
+        get sorting() {
+            return state.sorting;
+        },
+        set sorting(value) {
+            state = { ...state, sorting: value };
+        }
+    };
+}