includio-cms 0.1.3 → 0.5.0

package/dist/admin/client/account/sessions-section.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
 	import * as Card from '../../../components/ui/card/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { toLocaleCode } from '../../utils/formatDate.js';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
-	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
-	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
-	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
 	import Button from '../../../components/ui/button/button.svelte';
 	import { parseUserAgent } from '../../utils/parseUserAgent.js';
 
@@ -75,6 +71,10 @@
 			minute: '2-digit'
 		});
 	}
+
+	function getDeviceLabel(ua: { browser: string; os: string }): string {
+		return `${ua.os} — ${ua.browser}`;
+	}
 </script>
 
 <Card.Root>
@@ -84,41 +84,43 @@
 	<Card.Content>
 		{#if loading}
 			<div class="flex items-center justify-center py-8">
-				<Loader2 class="text-muted-foreground size-6 animate-spin" />
+				<svg class="text-muted-foreground size-5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
 			</div>
 		{:else}
-			<div class="space-y-4">
+			<div>
 				{#each sessions as session}
 					{@const ua = parseUserAgent(session.userAgent)}
-					<div
-						class="flex items-center justify-between rounded-lg border p-4 {session.token ===
-						currentSessionToken
-							? 'border-primary/30 bg-primary/5'
-							: ''}"
-					>
-						<div class="flex items-center gap-4">
-							<div class="text-muted-foreground">
-								{#if ua.isMobile}
-									<DeviceMobile class="size-6" />
-								{:else}
-									<DeviceDesktop class="size-6" />
+					{@const isCurrent = session.token === currentSessionToken}
+					<div class="acct-session-item">
+						<div class="acct-session-icon">
+							{#if ua.isMobile}
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+							{:else}
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+							{/if}
+						</div>
+						<div class="min-w-0 flex-1">
+							<div class="flex items-center gap-2">
+								<span class="text-sm font-semibold">{getDeviceLabel(ua)}</span>
+								{#if isCurrent}
+									<span class="acct-session-badge">{lang.sessions.currentSession}</span>
 								{/if}
 							</div>
-							<div>
-								<div class="flex items-center gap-2">
-									<span class="font-medium">{ua.browser} on {ua.os}</span>
-									{#if session.token === currentSessionToken}
-										<Badge variant="secondary">{lang.sessions.currentSession}</Badge>
-									{/if}
-								</div>
-								<div class="text-muted-foreground text-sm">
-									{session.ipAddress || 'Unknown IP'} &middot; {lang.sessions.lastActive}:{' '}
-									{formatDate(session.updatedAt)}
-								</div>
+							<div class="text-muted-foreground mt-0.5 flex items-center gap-1.5 text-xs">
+								{#if isCurrent}
+									<span class="acct-dot-online" aria-hidden="true"></span>
+									<span>{lang.sessions.online}</span>
+									<span aria-hidden="true">&middot;</span>
+								{/if}
+								{#if session.ipAddress}
+									<span>{session.ipAddress}</span>
+									<span aria-hidden="true">&middot;</span>
+								{/if}
+								<span>{formatDate(session.updatedAt)}</span>
 							</div>
 						</div>
-						{#if session.token !== currentSessionToken}
-							<Button variant="ghost" size="sm" class="text-destructive" onclick={() => revokeSession(session.token)}>
+						{#if !isCurrent}
+							<Button variant="ghost" size="sm" class="text-destructive shrink-0" onclick={() => revokeSession(session.token)}>
 								{lang.sessions.revoke}
 							</Button>
 						{/if}
@@ -126,11 +128,10 @@
 				{/each}
 
 				{#if sessions.length > 1}
-					<div class="border-t pt-4">
-						<Button variant="ghost" size="sm" class="text-destructive" onclick={revokeAllSessions}>
+					<div class="acct-sessions-footer">
+						<Button variant="outline" class="border-destructive text-destructive hover:bg-error-bg" onclick={revokeAllSessions}>
 							{lang.sessions.signOutEverywhere}
 						</Button>
-						<p class="text-muted-foreground mt-1 text-sm">{lang.sessions.signOutEverywhereDesc}</p>
 					</div>
 				{/if}
 			</div>

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

@@ -12,12 +12,10 @@
 	setContentLanguage(new ContentLanguage(languages, languages[0]));
 </script>
 
-<Sidebar.Provider
-	style="--sidebar-width: calc(var(--spacing) * 72); --header-height: calc(var(--spacing) * 12);"
->
-	<AppSidebar variant="inset" />
+<Sidebar.Provider style="--sidebar-width: 16rem;  --header-height: calc(var(--spacing) * 13);">
+	<AppSidebar />
 
-	<Sidebar.Inset class="h-[calc(100vh-1rem)] overflow-hidden">
+	<Sidebar.Inset class="h-screen overflow-hidden">
 		<SiteHeader />
 		<div class="flex grow flex-col overflow-auto">
 			{@render children()}

package/dist/admin/client/admin/admin-layout.svelte

@@ -4,6 +4,7 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '../../../components/ui/sonner/index.js';
 	import { MediaSort, setMediaSort } from '../../state/media-sort.svelte.js';
+	import AdminPreloader from './admin-preloader.svelte';
 
 	setMediaSort(new MediaSort());
 
@@ -11,10 +12,10 @@
 </script>
 
 <ModeWatcher />
-<Toaster />
+<Toaster richColors />
 
 <svelte:boundary>
-	{#snippet pending()}Loading...{/snippet}
+	{#snippet pending()}<AdminPreloader />{/snippet}
 
 	{@render children()}
 </svelte:boundary>

package/dist/admin/client/admin/admin-preloader.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+</script>
+
+<!-- Fullscreen preloader shown while admin shell loads -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-background" role="status" aria-live="polite" out:fade={{ duration: 300 }}>
+	<!-- Background orbs (reuse login orb classes) -->
+	<div class="fixed inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+		<div class="login-orb login-orb--1"></div>
+		<div class="login-orb login-orb--2"></div>
+		<div class="login-orb login-orb--3"></div>
+	</div>
+
+	<!-- Content -->
+	<div class="preloader-fade-in relative z-[1] flex flex-col items-center gap-8">
+		<!-- Logo -->
+		<div class="flex items-baseline gap-0.5" aria-label="AriaCMS">
+			<span class="text-primary text-[36px] leading-none font-extrabold max-[480px]:text-[28px]" aria-hidden="true">
+				Aria
+			</span>
+			<span class="text-primary text-[20px] leading-none font-light tracking-[0.15em] uppercase max-[480px]:text-[16px]" aria-hidden="true">
+				CMS
+			</span>
+		</div>
+
+		<!-- Spinner + text -->
+		<div class="flex flex-col items-center gap-5">
+			<div class="h-10 w-10 max-[480px]:h-8 max-[480px]:w-8" aria-hidden="true">
+				<div class="preloader-ring"></div>
+			</div>
+			<p class="text-muted-foreground text-[14px] font-medium tracking-[0.01em]">
+				Ładowanie…
+			</p>
+		</div>
+	</div>
+</div>

package/dist/admin/client/admin/admin-preloader.svelte.d.ts

@@ -0,0 +1,18 @@
+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 AdminPreloader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AdminPreloader = InstanceType<typeof AdminPreloader>;
+export default AdminPreloader;

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

@@ -1,8 +1,11 @@
 <script lang="ts">
-	import AccessibilityHub from '../../components/dashboard/accessibility-hub.svelte';
+	import UpdatesBanner from '../../components/dashboard/updates-banner.svelte';
+	import WelcomeHeader from '../../components/dashboard/welcome-header.svelte';
+	import RecentEntries from '../../components/dashboard/recent-entries.svelte';
 	import FormSubmissionsWidget from '../../components/dashboard/form-submissions-widget.svelte';
 	import RecentActivity from '../../components/dashboard/recent-activity.svelte';
-	import UpdatesBanner from '../../components/dashboard/updates-banner.svelte';
+	import A11yGauge from '../../components/dashboard/a11y-gauge.svelte';
+	import TipOfTheDay from '../../components/dashboard/tip-of-the-day.svelte';
 	import { sidebarLang } from '../../components/layout/lang.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
@@ -84,47 +87,58 @@
 	};
 </script>
 
-<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">
-		<UpdatesBanner />
+<main class="dash-main">
+	<UpdatesBanner />
 
-		{#if !loadingOrphaned && orphanedEntries.length > 0}
-			<Alert.Root
-				variant="destructive"
-				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">
-					{orphanedLang[interfaceLanguage.current].title} ({orphanedEntries.length})
-				</Alert.Title>
-				<Alert.Description class="text-orange-700 dark:text-orange-300">
-					<p class="mb-3">{orphanedLang[interfaceLanguage.current].description}</p>
-					<details class="mb-3">
-						<summary class="cursor-pointer text-sm font-medium">Slugs</summary>
-						<ul class="mt-2 list-inside list-disc text-sm">
-							{#each orphanedEntries as entry}
-								<li><code class="rounded bg-orange-200/50 px-1 dark:bg-orange-800/50">{entry.slug}</code></li>
-							{/each}
-						</ul>
-					</details>
-					<Button
-						variant="destructive"
-						size="sm"
-						onclick={deleteOrphaned}
-						disabled={deletingOrphaned}
-					>
-						<TrashIcon class="mr-1 h-4 w-4" />
-						{orphanedLang[interfaceLanguage.current].deleteBtn}
-					</Button>
-				</Alert.Description>
-			</Alert.Root>
-		{/if}
+	{#if !loadingOrphaned && orphanedEntries.length > 0}
+		<Alert.Root
+			variant="destructive"
+			class="mb-5 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">
+				{orphanedLang[interfaceLanguage.current].title} ({orphanedEntries.length})
+			</Alert.Title>
+			<Alert.Description class="text-orange-700 dark:text-orange-300">
+				<p class="mb-3">{orphanedLang[interfaceLanguage.current].description}</p>
+				<details class="mb-3">
+					<summary class="cursor-pointer text-sm font-medium">Slugs</summary>
+					<ul class="mt-2 list-inside list-disc text-sm">
+						{#each orphanedEntries as entry}
+							<li><code class="rounded bg-orange-200/50 px-1 dark:bg-orange-800/50">{entry.slug}</code></li>
+						{/each}
+					</ul>
+				</details>
+				<Button
+					variant="destructive"
+					size="sm"
+					onclick={deleteOrphaned}
+					disabled={deletingOrphaned}
+				>
+					<TrashIcon class="mr-1 h-4 w-4" />
+					{orphanedLang[interfaceLanguage.current].deleteBtn}
+				</Button>
+			</Alert.Description>
+		</Alert.Root>
+	{/if}
 
-		<AccessibilityHub />
+	<WelcomeHeader />
 
-		<div class="grid gap-6 lg:grid-cols-2">
-			<FormSubmissionsWidget />
-			<RecentActivity />
+	<div class="dashboard-grid">
+		<div class="dashboard-grid-main">
+			<div class="content-duo">
+				<RecentEntries />
+				<FormSubmissionsWidget />
+			</div>
+			<div style="margin-top:20px">
+				<RecentActivity />
+			</div>
+		</div>
+		<div class="dashboard-grid-aside">
+			<A11yGauge />
+			<div style="margin-top:20px">
+				<TipOfTheDay />
+			</div>
 		</div>
 	</div>
-</div>
+</main>

package/dist/admin/client/collection/a11y-score-cell.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type Props = {
+		warningCount: number;
+	};
+
+	let { warningCount }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<InterfaceLanguage, {
+		ok: string;
+		warnings: (n: number) => string;
+		problems: (n: number) => string;
+	}> = {
+		en: {
+			ok: 'Compliant',
+			warnings: (n) => `${n} note${n === 1 ? '' : 's'}`,
+			problems: (n) => `${n} issue${n === 1 ? '' : 's'}`
+		},
+		pl: {
+			ok: 'Zgodny',
+			warnings: (n) => `${n} ${n === 1 ? 'uwaga' : n < 5 ? 'uwagi' : 'uwag'}`,
+			problems: (n) => `${n} ${n === 1 ? 'problem' : n < 5 ? 'problemy' : 'problemów'}`
+		}
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+</script>
+
+{#if warningCount === 0}
+	<span class="inline-flex items-center gap-1 text-xs text-success font-medium whitespace-nowrap">
+		<span aria-hidden="true">✓</span> {t.ok}
+	</span>
+{:else if warningCount <= 2}
+	<span class="inline-flex items-center gap-1 text-xs text-warning font-medium whitespace-nowrap">
+		<span aria-hidden="true">⚠</span> {t.warnings(warningCount)}
+	</span>
+{:else}
+	<span class="inline-flex items-center gap-1 text-xs text-destructive font-medium whitespace-nowrap">
+		<span aria-hidden="true">✗</span> {t.problems(warningCount)}
+	</span>
+{/if}

package/dist/admin/client/collection/a11y-score-cell.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    warningCount: number;
+};
+declare const A11yScoreCell: import("svelte").Component<Props, {}, "">;
+type A11yScoreCell = ReturnType<typeof A11yScoreCell>;
+export default A11yScoreCell;

package/dist/admin/client/collection/bulk-actions-bar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import Archive from '@tabler/icons-svelte/icons/archive';
+	import Trash from '@tabler/icons-svelte/icons/trash';
+	import X from '@tabler/icons-svelte/icons/x';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { fly } from 'svelte/transition';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type Props = {
+		selectedCount: number;
+		onArchive: () => void;
+		onDelete: () => void;
+		onClear: () => void;
+	};
+
+	let { selectedCount, onArchive, onDelete, onClear }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<InterfaceLanguage, {
+		selected: (n: number) => string;
+		archive: string;
+		delete: string;
+	}> = {
+		en: {
+			selected: (n) => `${n} selected`,
+			archive: 'Archive',
+			delete: 'Delete'
+		},
+		pl: {
+			selected: (n) => `Zaznaczono: ${n}`,
+			archive: 'Archiwizuj',
+			delete: 'Usuń'
+		}
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+</script>
+
+{#if selectedCount > 0}
+	<div
+		class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2"
+		transition:fly={{ y: 40, duration: 200 }}
+		role="status"
+		aria-live="polite"
+	>
+		<div
+			class="flex items-center gap-3 rounded-xl bg-plum-darker px-5 py-3 text-white shadow-xl"
+		>
+			<span class="text-sm font-medium">{t.selected(selectedCount)}</span>
+
+			<div class="h-5 w-px bg-white/20"></div>
+
+			<Button
+				variant="ghost"
+				size="sm"
+				class="text-white hover:bg-white/10 hover:text-white"
+				onclick={onArchive}
+			>
+				<Archive class="mr-1.5 size-3.5" />
+				{t.archive}
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				class="text-white border border-white/20 hover:bg-white/10 hover:text-white"
+				onclick={onDelete}
+			>
+				<Trash class="mr-1.5 size-3.5" />
+				{t.delete}
+			</Button>
+
+			<button
+				class="ml-1 rounded-md p-1 text-white/60 hover:bg-white/10 hover:text-white"
+				onclick={onClear}
+				aria-label="Clear selection"
+			>
+				<X class="size-4" />
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+type Props = {
+    selectedCount: number;
+    onArchive: () => void;
+    onDelete: () => void;
+    onClear: () => void;
+};
+declare const BulkActionsBar: import("svelte").Component<Props, {}, "">;
+type BulkActionsBar = ReturnType<typeof BulkActionsBar>;
+export default BulkActionsBar;