includio-cms 0.1.3 → 0.5.0

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

@@ -13,11 +13,12 @@
 		pageSize: number;
 		pageCount: number;
 		totalItems: number;
+		itemLabel?: string;
 		onPageChange: (pageIndex: number) => void;
 		onPageSizeChange: (pageSize: number) => void;
 	};
 
-	let { pageIndex, pageSize, pageCount, totalItems, onPageChange, onPageSizeChange }: Props =
+	let { pageIndex, pageSize, pageCount, totalItems, itemLabel, onPageChange, onPageSizeChange }: Props =
 		$props();
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -25,35 +26,36 @@
 	const lang: Record<
 		InterfaceLanguage,
 		{
-			rowsPerPage: string;
-			of: string;
-			page: string;
+			showing: (start: number, end: number, total: number, label?: string) => string;
+			perPage: string;
 			firstPage: string;
 			previousPage: string;
 			nextPage: string;
 			lastPage: string;
+			goToPage: (n: number) => string;
 		}
 	> = {
 		en: {
-			rowsPerPage: 'Rows per page',
-			of: 'of',
-			page: 'Page',
+			showing: (s, e, t, l) => `Showing ${s}–${e} of ${t}${l ? ` ${l}` : ''}`,
+			perPage: 'per page',
 			firstPage: 'First page',
 			previousPage: 'Previous page',
 			nextPage: 'Next page',
-			lastPage: 'Last page'
+			lastPage: 'Last page',
+			goToPage: (n) => `Go to page ${n}`
 		},
 		pl: {
-			rowsPerPage: 'Wierszy na stronie',
-			of: 'z',
-			page: 'Strona',
+			showing: (s, e, t, l) => `Wyświetlono ${s}–${e} z ${t}${l ? ` ${l}` : ''}`,
+			perPage: 'na stronie',
 			firstPage: 'Pierwsza strona',
 			previousPage: 'Poprzednia strona',
 			nextPage: 'Następna strona',
-			lastPage: 'Ostatnia strona'
+			lastPage: 'Ostatnia strona',
+			goToPage: (n) => `Przejdź do strony ${n}`
 		}
 	};
 
+	const t = $derived(lang[interfaceLanguage.current]);
 	const pageSizes = [10, 20, 30, 50, 100];
 
 	const canGoPrevious = $derived(pageIndex > 0);
@@ -61,76 +63,117 @@
 
 	const startItem = $derived(totalItems === 0 ? 0 : pageIndex * pageSize + 1);
 	const endItem = $derived(Math.min((pageIndex + 1) * pageSize, totalItems));
-</script>
 
-<div class="flex flex-wrap items-center justify-between gap-4 border-t px-4 py-3">
-	<div class="text-muted-foreground text-sm">
-		{startItem}-{endItem} {lang[interfaceLanguage.current].of} {totalItems}
-	</div>
+	/** Generate visible page numbers with ellipsis */
+	const visiblePages = $derived.by(() => {
+		if (pageCount <= 7) {
+			return Array.from({ length: pageCount }, (_, i) => i);
+		}
+
+		const pages: (number | 'ellipsis')[] = [0];
+
+		if (pageIndex > 2) pages.push('ellipsis');
+
+		const start = Math.max(1, pageIndex - 1);
+		const end = Math.min(pageCount - 2, pageIndex + 1);
+
+		for (let i = start; i <= end; i++) {
+			pages.push(i);
+		}
 
-	<div class="flex items-center gap-4">
-		<div class="flex items-center gap-2">
-			<span class="text-muted-foreground text-sm">{lang[interfaceLanguage.current].rowsPerPage}</span>
-			<Select.Root
-				type="single"
-				value={String(pageSize)}
-				onValueChange={(value) => value && onPageSizeChange(Number(value))}
-			>
-				<Select.Trigger class="h-8 w-[70px]">
-					{pageSize}
-				</Select.Trigger>
-				<Select.Content>
-					{#each pageSizes as size}
-						<Select.Item value={String(size)}>{size}</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
+		if (pageIndex < pageCount - 3) pages.push('ellipsis');
+
+		pages.push(pageCount - 1);
+
+		return pages;
+	});
+</script>
+
+{#if totalItems > 0}
+	<div class="flex flex-wrap items-center justify-between gap-4 px-1 py-4">
+		<div class="text-muted-foreground text-sm">
+			{t.showing(startItem, endItem, totalItems, itemLabel)}
 		</div>
 
-		<div class="flex items-center gap-1">
-			<Button
-				variant="outline"
-				size="icon"
-				class="h-8 w-8"
-				disabled={!canGoPrevious}
-				onclick={() => onPageChange(0)}
-				title={lang[interfaceLanguage.current].firstPage}
-			>
-				<ChevronsLeft class="size-4" />
-			</Button>
-			<Button
-				variant="outline"
-				size="icon"
-				class="h-8 w-8"
-				disabled={!canGoPrevious}
-				onclick={() => onPageChange(pageIndex - 1)}
-				title={lang[interfaceLanguage.current].previousPage}
-			>
-				<ChevronLeft class="size-4" />
-			</Button>
-			<span class="text-muted-foreground px-2 text-sm">
-				{lang[interfaceLanguage.current].page} {pageIndex + 1} {lang[interfaceLanguage.current].of} {Math.max(1, pageCount)}
-			</span>
-			<Button
-				variant="outline"
-				size="icon"
-				class="h-8 w-8"
-				disabled={!canGoNext}
-				onclick={() => onPageChange(pageIndex + 1)}
-				title={lang[interfaceLanguage.current].nextPage}
-			>
-				<ChevronRight class="size-4" />
-			</Button>
-			<Button
-				variant="outline"
-				size="icon"
-				class="h-8 w-8"
-				disabled={!canGoNext}
-				onclick={() => onPageChange(pageCount - 1)}
-				title={lang[interfaceLanguage.current].lastPage}
-			>
-				<ChevronsRight class="size-4" />
-			</Button>
+		<div class="flex items-center gap-3">
+			<nav class="flex items-center gap-1" aria-label="Pagination">
+				<Button
+					variant="outline"
+					size="icon"
+					class="h-8 w-8"
+					disabled={!canGoPrevious}
+					onclick={() => onPageChange(0)}
+					title={t.firstPage}
+				>
+					<ChevronsLeft class="size-4" />
+				</Button>
+				<Button
+					variant="outline"
+					size="icon"
+					class="h-8 w-8"
+					disabled={!canGoPrevious}
+					onclick={() => onPageChange(pageIndex - 1)}
+					title={t.previousPage}
+				>
+					<ChevronLeft class="size-4" />
+				</Button>
+
+				{#each visiblePages as page}
+					{#if page === 'ellipsis'}
+						<span class="px-1 text-sm text-muted-foreground">…</span>
+					{:else}
+						<Button
+							variant={page === pageIndex ? 'default' : 'outline'}
+							size="icon"
+							class="h-8 w-8 text-xs"
+							onclick={() => onPageChange(page)}
+							aria-label={t.goToPage(page + 1)}
+							aria-current={page === pageIndex ? 'page' : undefined}
+						>
+							{page + 1}
+						</Button>
+					{/if}
+				{/each}
+
+				<Button
+					variant="outline"
+					size="icon"
+					class="h-8 w-8"
+					disabled={!canGoNext}
+					onclick={() => onPageChange(pageIndex + 1)}
+					title={t.nextPage}
+				>
+					<ChevronRight class="size-4" />
+				</Button>
+				<Button
+					variant="outline"
+					size="icon"
+					class="h-8 w-8"
+					disabled={!canGoNext}
+					onclick={() => onPageChange(pageCount - 1)}
+					title={t.lastPage}
+				>
+					<ChevronsRight class="size-4" />
+				</Button>
+			</nav>
+
+			<div class="flex items-center gap-1.5">
+				<Select.Root
+					type="single"
+					value={String(pageSize)}
+					onValueChange={(value) => value && onPageSizeChange(Number(value))}
+				>
+					<Select.Trigger class="h-8 w-[70px] text-xs">
+						{pageSize}
+					</Select.Trigger>
+					<Select.Content>
+						{#each pageSizes as size}
+							<Select.Item value={String(size)}>{size}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+				<span class="text-xs text-muted-foreground">{t.perPage}</span>
+			</div>
 		</div>
 	</div>
-</div>
+{/if}

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

@@ -3,6 +3,7 @@ type Props = {
     pageSize: number;
     pageCount: number;
     totalItems: number;
+    itemLabel?: string;
     onPageChange: (pageIndex: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 };

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

@@ -2,40 +2,37 @@
 	import Search from '@tabler/icons-svelte/icons/search';
 	import List from '@tabler/icons-svelte/icons/list';
 	import LayoutGrid from '@tabler/icons-svelte/icons/layout-grid';
-	import Calendar from '@tabler/icons-svelte/icons/calendar';
-	import Clock from '@tabler/icons-svelte/icons/clock';
-	import Trash from '@tabler/icons-svelte/icons/trash';
-	import Archive from '@tabler/icons-svelte/icons/archive';
+	import Plus from '@tabler/icons-svelte/icons/plus';
+	import Filter from '@tabler/icons-svelte/icons/filter';
 	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
+	import * as Popover from '../../../components/ui/popover/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import type { ViewMode, DateFormat } from './collection-view.svelte.js';
+	import type { ViewMode, StatusFilter } from './collection-view.svelte.js';
 
 	type Props = {
 		searchQuery: string;
 		onSearchChange: (query: string) => void;
-		viewMode?: ViewMode;
-		onViewModeChange?: (mode: ViewMode) => void;
-		dateFormat: DateFormat;
-		onDateFormatChange: (format: DateFormat) => void;
-		selectedCount: number;
-		onBulkArchive?: () => void;
-		onBulkDelete?: () => void;
-		showViewModeToggle?: boolean;
+		statusFilter: StatusFilter;
+		onStatusFilterChange: (filter: StatusFilter) => void;
+		viewMode: ViewMode;
+		onViewModeChange: (mode: ViewMode) => void;
+		onCreateEntry: () => void;
+		createLabel: string;
+		searchPlaceholder?: string;
 	};
 
 	let {
 		searchQuery,
 		onSearchChange,
-		viewMode = 'list',
+		statusFilter,
+		onStatusFilterChange,
+		viewMode,
 		onViewModeChange,
-		dateFormat,
-		onDateFormatChange,
-		selectedCount,
-		onBulkArchive,
-		onBulkDelete,
-		showViewModeToggle = true
+		onCreateEntry,
+		createLabel,
+		searchPlaceholder
 	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -46,107 +43,130 @@
 			search: string;
 			listView: string;
 			gridView: string;
-			relativeDates: string;
-			absoluteDates: string;
-			archive: string;
-			delete: string;
-			selected: (n: number) => string;
+			status: string;
+			all: string;
+			published: string;
+			draft: string;
+			scheduled: string;
+			archived: string;
 		}
 	> = {
 		en: {
 			search: 'Search...',
 			listView: 'List view',
 			gridView: 'Grid view',
-			relativeDates: 'Relative dates',
-			absoluteDates: 'Absolute dates',
-			archive: 'Archive',
-			delete: 'Delete',
-			selected: (n) => `${n} selected`
+			status: 'Status',
+			all: 'All',
+			published: 'Published',
+			draft: 'Drafts',
+			scheduled: 'Scheduled',
+			archived: 'Archived'
 		},
 		pl: {
 			search: 'Szukaj...',
 			listView: 'Widok listy',
 			gridView: 'Widok kafelków',
-			relativeDates: 'Daty względne',
-			absoluteDates: 'Daty absolutne',
-			archive: 'Archiwizuj',
-			delete: 'Usuń',
-			selected: (n) => `Zaznaczono: ${n}`
+			status: 'Status',
+			all: 'Wszystkie',
+			published: 'Opublikowane',
+			draft: 'Szkice',
+			scheduled: 'Zaplanowane',
+			archived: 'Zarchiwizowane'
 		}
 	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	const statusOptions: { value: StatusFilter; label: () => string }[] = [
+		{ value: null, label: () => t.all },
+		{ value: 'published', label: () => t.published },
+		{ value: 'draft', label: () => t.draft },
+		{ value: 'scheduled', label: () => t.scheduled },
+		{ value: 'archived', label: () => t.archived }
+	];
+
+	const activeFilterLabel = $derived(
+		statusOptions.find((o) => o.value === statusFilter)?.label() ?? t.all
+	);
+
+	const hasActiveFilter = $derived(statusFilter !== null);
+
+	let statusPopoverOpen = $state(false);
 </script>
 
-<div class="flex flex-wrap items-center gap-2 p-4">
-	<div class="relative flex-1 min-w-[200px]">
+<div class="mb-6 flex flex-wrap items-center gap-2.5">
+	<div class="relative min-w-[240px] flex-1">
 		<Search
-			class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
+			class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
 		/>
 		<Input
 			type="text"
-			placeholder={lang[interfaceLanguage.current].search}
-			class="pl-9"
+			placeholder={searchPlaceholder ?? t.search}
+			class="border-border focus-visible:ring-primary/30 bg-white pl-9"
 			value={searchQuery}
 			oninput={(e) => onSearchChange(e.currentTarget.value)}
 		/>
 	</div>
 
-	{#if showViewModeToggle && onViewModeChange}
-		<div class="flex items-center gap-1">
-			<Button
-				variant={viewMode === 'list' ? 'secondary' : 'ghost'}
-				size="icon"
-				onclick={() => onViewModeChange('list')}
-				title={lang[interfaceLanguage.current].listView}
-			>
-				<List class="size-4" />
-			</Button>
-			<Button
-				variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
-				size="icon"
-				onclick={() => onViewModeChange('grid')}
-				title={lang[interfaceLanguage.current].gridView}
-			>
-				<LayoutGrid class="size-4" />
-			</Button>
-		</div>
-	{/if}
+	<Popover.Root bind:open={statusPopoverOpen}>
+		<Popover.Trigger>
+			{#snippet child({ props })}
+				<Button
+					{...props}
+					variant="outline"
+					size="sm"
+					class="gap-1.5 {hasActiveFilter
+						? 'border-primary/30 bg-lavender-lighter text-primary'
+						: ''}"
+				>
+					<Filter class="size-3.5" />
+					{t.status}{hasActiveFilter ? `: ${activeFilterLabel}` : ''}
+				</Button>
+			{/snippet}
+		</Popover.Trigger>
+		<Popover.Content class="w-44 p-1" align="start">
+			{#each statusOptions as option}
+				<button
+					class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {statusFilter ===
+					option.value
+						? 'bg-accent text-accent-foreground font-medium'
+						: 'text-foreground'}"
+					onclick={() => {
+						onStatusFilterChange(option.value);
+						statusPopoverOpen = false;
+					}}
+				>
+					{option.label()}
+				</button>
+			{/each}
+		</Popover.Content>
+	</Popover.Root>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-0.5 rounded-lg border p-0.5">
 		<Button
-			variant={dateFormat === 'relative' ? 'secondary' : 'ghost'}
+			variant={viewMode === 'list' ? 'secondary' : 'ghost'}
 			size="icon"
-			onclick={() => onDateFormatChange('relative')}
-			title={lang[interfaceLanguage.current].relativeDates}
+			class="h-7 w-7"
+			onclick={() => onViewModeChange('list')}
+			title={t.listView}
 		>
-			<Clock class="size-4" />
+			<List class="size-3.5" />
 		</Button>
 		<Button
-			variant={dateFormat === 'absolute' ? 'secondary' : 'ghost'}
+			variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
 			size="icon"
-			onclick={() => onDateFormatChange('absolute')}
-			title={lang[interfaceLanguage.current].absoluteDates}
+			class="h-7 w-7"
+			onclick={() => onViewModeChange('grid')}
+			title={t.gridView}
 		>
-			<Calendar class="size-4" />
+			<LayoutGrid class="size-3.5" />
 		</Button>
 	</div>
 
-	{#if selectedCount > 0}
-		<div
-			class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 dark:border-slate-700 dark:bg-slate-800"
-		>
-			<span class="text-sm font-medium">{lang[interfaceLanguage.current].selected(selectedCount)}</span>
-			{#if onBulkArchive}
-				<Button variant="ghost" size="sm" onclick={onBulkArchive}>
-					<Archive class="mr-1 size-3.5" />
-					{lang[interfaceLanguage.current].archive}
-				</Button>
-			{/if}
-			{#if onBulkDelete}
-				<Button variant="ghost" size="sm" class="text-destructive hover:text-destructive/80" onclick={onBulkDelete}>
-					<Trash class="mr-1 size-3.5" />
-					{lang[interfaceLanguage.current].delete}
-				</Button>
-			{/if}
-		</div>
-	{/if}
+	<div class="flex-1"></div>
+
+	<Button variant="default" size="sm" onclick={onCreateEntry}>
+		<Plus class="mr-1 size-4" />
+		{createLabel}
+	</Button>
 </div>

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

@@ -1,15 +1,14 @@
-import type { ViewMode, DateFormat } from './collection-view.svelte.js';
+import type { ViewMode, StatusFilter } from './collection-view.svelte.js';
 type Props = {
     searchQuery: string;
     onSearchChange: (query: string) => void;
-    viewMode?: ViewMode;
-    onViewModeChange?: (mode: ViewMode) => void;
-    dateFormat: DateFormat;
-    onDateFormatChange: (format: DateFormat) => void;
-    selectedCount: number;
-    onBulkArchive?: () => void;
-    onBulkDelete?: () => void;
-    showViewModeToggle?: boolean;
+    statusFilter: StatusFilter;
+    onStatusFilterChange: (filter: StatusFilter) => void;
+    viewMode: ViewMode;
+    onViewModeChange: (mode: ViewMode) => void;
+    onCreateEntry: () => void;
+    createLabel: string;
+    searchPlaceholder?: string;
 };
 declare const TableToolbar: import("svelte").Component<Props, {}, "">;
 type TableToolbar = ReturnType<typeof TableToolbar>;

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

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import FieldsForm from '../../components/fields/fields-form.svelte';
+	import LayoutRenderer from '../../components/layout/layout-renderer.svelte';
+	import { hasLayout, getFieldsFromConfig, resolveLayoutWithOrphans } from '../../../core/fields/layoutUtils.js';
 	import type { RawEntry } from '../../../types/entries.js';
 	import type { SuperForm } from 'sveltekit-superforms';
+	import { cn } from '../../../utils.js';
+	import { normalizePath } from '../../utils/objectPath.js';
+	import { tick } from 'svelte';
 
 	type Props = {
 		form: SuperForm<Record<string, unknown>>;
@@ -12,6 +17,109 @@
 
 	let { form, entry, focusedPath = null, onPathSelect }: Props = $props();
 	let { collection } = entry;
+
+	const layoutNodes = $derived(
+		hasLayout(collection) ? resolveLayoutWithOrphans(collection) : null
+	);
+
+	// --- Focus/flash logic ---
+	let lastScrolledPath = $state<string | null>(null);
+	let flashingPath = $state<string | null>(null);
+	let skipNextScroll = false;
+
+	function isFlashing(fieldPath: string): boolean {
+		if (!flashingPath) return false;
+		return normalizePath(flashingPath) === fieldPath;
+	}
+
+	$effect(() => {
+		if (focusedPath && focusedPath !== lastScrolledPath) {
+			lastScrolledPath = focusedPath;
+
+			if (skipNextScroll) {
+				skipNextScroll = false;
+				return;
+			}
+
+			tick().then(() => {
+				const normalizedPath = normalizePath(focusedPath!);
+				let targetEl = document.querySelector(`[data-field-path="${normalizedPath}"]`) as HTMLElement;
+
+				if (!targetEl) {
+					const rootPath = normalizedPath.split('.')[0];
+					targetEl = document.querySelector(`[data-field-path="${rootPath}"]`) as HTMLElement;
+				}
+
+				if (targetEl) {
+					// If inside a closed accordion, open it first
+					const accordionContent = targetEl.closest('[data-slot="accordion-content"]');
+					if (accordionContent && accordionContent.getAttribute('data-state') === 'closed') {
+						const item = accordionContent.closest('[data-slot="accordion-item"]');
+						const trigger = item?.querySelector('[data-slot="accordion-trigger"]') as HTMLElement;
+						if (trigger) {
+							trigger.click();
+						}
+					}
+
+					tick().then(() => {
+						const scrollContainer = targetEl.closest('.overflow-y-auto') as HTMLElement;
+						if (scrollContainer) {
+							const rect = targetEl.getBoundingClientRect();
+							const containerRect = scrollContainer.getBoundingClientRect();
+							const targetPosition = scrollContainer.scrollTop + (rect.top - containerRect.top) - (containerRect.height / 2) + (rect.height / 2);
+							scrollContainer.scrollTo({ top: targetPosition, behavior: 'smooth' });
+						}
+
+						flashingPath = normalizedPath;
+						setTimeout(() => {
+							if (flashingPath === normalizedPath) flashingPath = null;
+						}, 1500);
+
+						setTimeout(() => {
+							const input = targetEl.querySelector('input, textarea, [contenteditable="true"]') as HTMLElement;
+							if (input) input.focus();
+						}, 400);
+					});
+				}
+			});
+		}
+	});
+
+	function handleClick(e: MouseEvent) {
+		const fieldEl = (e.target as HTMLElement).closest('[data-field-path]') as HTMLElement;
+		const path = fieldEl?.dataset.fieldPath;
+		if (path && onPathSelect) {
+			skipNextScroll = true;
+			onPathSelect(path);
+		}
+	}
 </script>
 
-<FieldsForm {form} fields={collection.fields} {focusedPath} {onPathSelect} />
+{#if layoutNodes}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+	<div class="layout-entry-form" onclick={handleClick}>
+		<LayoutRenderer
+			nodes={layoutNodes}
+			fields={getFieldsFromConfig(collection)}
+			{form}
+			{focusedPath}
+			{flashingPath}
+		/>
+	</div>
+{:else}
+	<FieldsForm {form} fields={getFieldsFromConfig(collection)} {focusedPath} {onPathSelect} />
+{/if}
+
+<style>
+	.layout-entry-form {
+		max-width: 1100px;
+		margin: 0 auto;
+		padding: 24px;
+	}
+
+	@media (max-width: 900px) {
+		.layout-entry-form {
+			padding: 16px;
+		}
+	}
+</style>