includio-cms 0.1.4 → 0.5.1

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	const CIRCUMFERENCE = 2 * Math.PI * 54; // 339.292
+
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		overallScore: string;
+		imageDescriptions: string;
+		allGood: string;
+		hint: (n: number) => string;
+	}> = {
+		pl: {
+			title: 'Dostępność treści',
+			overallScore: 'wynik ogólny',
+			imageDescriptions: 'Opisy obrazów',
+			allGood: 'Wszystkie obrazy mają opisy — świetna robota!',
+			hint: (n) => `${n} ${n === 1 ? 'obraz wymaga' : 'obrazów wymaga'} dodania opisu. Przejdź do biblioteki mediów, żeby je uzupełnić.`
+		},
+		en: {
+			title: 'Content accessibility',
+			overallScore: 'overall score',
+			imageDescriptions: 'Image descriptions',
+			allGood: 'All images have descriptions — great job!',
+			hint: (n) => `${n} image${n === 1 ? ' needs' : 's need'} a description. Go to the media library to add them.`
+		}
+	};
+</script>
+
+<section class="dash-card dash-card--a11y" aria-labelledby="a11y-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="a11y-heading">{lang[interfaceLanguage.current].title}</h2>
+	</div>
+
+	{#await remotes.getAltOverview()}
+		<div class="a11y-card-body">
+			<div class="gauge-wrap">
+				<Skeleton class="rounded-full" style="width:140px;height:140px" />
+			</div>
+			<Skeleton class="h-4 w-32 mb-2" />
+			<Skeleton class="h-12 w-full" />
+		</div>
+	{:then overview}
+		{@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="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" />
+					<circle class="gauge-fill" cx="70" cy="70" r="54"
+						style="stroke-dasharray: {fillLength} {CIRCUMFERENCE}"
+						stroke-dashoffset="0" />
+					<text class="gauge-text-group" x="70" y="64">
+						<tspan class="gauge-value">{compliancePercent}%</tspan>
+					</text>
+					<text class="gauge-text-group" x="70" y="84">
+						<tspan class="gauge-label">{lang[interfaceLanguage.current].overallScore}</tspan>
+					</text>
+				</svg>
+			</div>
+
+			<ul class="a11y-breakdown" aria-label={interfaceLanguage.current === 'pl' ? 'Szczegóły dostępności' : 'Accessibility details'}>
+				<li class="a11y-breakdown-item">
+					<span class="a11y-breakdown-icon {hasIssues ? 'a11y-breakdown-icon--warn' : 'a11y-breakdown-icon--ok'}" aria-hidden="true">
+						{hasIssues ? '⚠' : '✓'}
+					</span>
+					<span class="a11y-breakdown-label">
+						{lang[interfaceLanguage.current].imageDescriptions}
+					</span>
+				</li>
+			</ul>
+
+			<div class="a11y-hint" role="status">
+				{#if hasIssues}
+					{lang[interfaceLanguage.current].hint(overview.filesWithoutAlt)}
+				{:else}
+					{lang[interfaceLanguage.current].allGood}
+				{/if}
+			</div>
+		</div>
+	{/await}
+</section>

package/dist/admin/components/dashboard/a11y-gauge.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 A11yGauge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type A11yGauge = InstanceType<typeof A11yGauge>;
+export default A11yGauge;

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

@@ -6,6 +6,7 @@
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import StatCard from './stat-card.svelte';
+	import * as Alert from '../../../components/ui/alert/index.js';
 	import AccessibilityIcon from '@tabler/icons-svelte/icons/accessible';
 	import PhotoIcon from '@tabler/icons-svelte/icons/photo';
 	import AlertTriangleIcon from '@tabler/icons-svelte/icons/alert-triangle';
@@ -53,7 +54,7 @@
 	};
 </script>
 
-<Card.Root class="rounded-2xl border-slate-200/50 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+<Card.Root class="rounded-2xl border bg-card shadow-sm">
 	<Card.Header class="pb-2">
 		<div class="flex items-center gap-2">
 			<div class="rounded-lg bg-primary/10 p-2">
@@ -103,7 +104,7 @@
 						value={overview.totalFiles}
 					>
 						{#snippet icon()}
-							<PhotoIcon class="size-5 text-slate-600 dark:text-slate-400" />
+							<PhotoIcon class="size-5 text-muted-foreground" />
 						{/snippet}
 					</StatCard>
 
@@ -121,24 +122,24 @@
 				</div>
 
 				{#if hasIssues}
-					<div class="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900/50 dark:bg-amber-950/30">
+					<Alert.Root variant="warning" class="flex items-center justify-between">
 						<div class="flex items-center gap-2">
-							<AlertTriangleIcon class="size-5 text-amber-600 dark:text-amber-400" />
-							<span class="text-sm text-amber-800 dark:text-amber-200">
+							<AlertTriangleIcon class="size-5" />
+							<Alert.Description class="text-inherit">
 								{overview.filesWithoutAlt} {lang[interfaceLanguage.current].issuesFound}
-							</span>
+							</Alert.Description>
 						</div>
 						<Button href="/admin/media" variant="outline" size="sm">
 							{lang[interfaceLanguage.current].fixIssues}
 						</Button>
-					</div>
+					</Alert.Root>
 				{:else}
-					<div class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900/50 dark:bg-emerald-950/30">
-						<CircleCheckIcon class="size-5 text-emerald-600 dark:text-emerald-400" />
-						<span class="text-sm text-emerald-800 dark:text-emerald-200">
+					<Alert.Root variant="success">
+						<CircleCheckIcon class="size-5" />
+						<Alert.Description class="text-inherit">
 							{lang[interfaceLanguage.current].allGood}
-						</span>
-					</div>
+						</Alert.Description>
+					</Alert.Root>
 				{/if}
 			</div>
 		{/await}

package/dist/admin/components/dashboard/changelog-dialog.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { updates } from '../../../updates/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import { Badge } from '../../../components/ui/badge/index.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import SparklesIcon from '@tabler/icons-svelte/icons/sparkles';
+	import AlertTriangleIcon from '@tabler/icons-svelte/icons/alert-triangle';
+	import BugIcon from '@tabler/icons-svelte/icons/bug';
+	import StarIcon from '@tabler/icons-svelte/icons/star';
+
+	type Props = {
+		open: boolean;
+	};
+
+	let { open = $bindable(false) }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const sorted = [...updates].sort((a, b) => {
+		const ap = a.version.split('.').map(Number);
+		const bp = b.version.split('.').map(Number);
+		for (let i = 0; i < 3; i++) {
+			if (bp[i] !== ap[i]) return bp[i] - ap[i];
+		}
+		return 0;
+	});
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			features: string;
+			fixes: string;
+			breaking: string;
+			migration: string;
+			empty: string;
+		}
+	> = {
+		pl: {
+			title: 'Historia zmian',
+			features: 'Nowe funkcje',
+			fixes: 'Poprawki',
+			breaking: 'Zmiany wymagające uwagi',
+			migration: 'Migracja SQL',
+			empty: 'Brak zmian w tej wersji.'
+		},
+		en: {
+			title: 'Changelog',
+			features: 'Features',
+			fixes: 'Fixes',
+			breaking: 'Breaking changes',
+			migration: 'SQL Migration',
+			empty: 'No changes in this version.'
+		}
+	};
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-h-[80vh] max-w-2xl! overflow-hidden sm:max-w-2xl!">
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<SparklesIcon class="text-primary size-5" />
+				{lang[interfaceLanguage.current].title}
+			</Dialog.Title>
+		</Dialog.Header>
+
+		<div class="custom-scrollbar -mx-1 max-h-[60vh] space-y-6 overflow-y-auto px-1 py-2">
+			{#each sorted as update, i}
+				{@const t = lang[interfaceLanguage.current]}
+				{@const hasBreaking = update.breakingChanges.length > 0}
+				{@const hasContent =
+					update.features.length > 0 ||
+					update.fixes.length > 0 ||
+					update.breakingChanges.length > 0}
+
+				<div class="relative">
+					{#if i > 0}
+						<div class="border-border mb-6 border-t"></div>
+					{/if}
+
+					<div class="mb-2 flex items-center gap-2">
+						<Badge variant={i === 0 ? 'default' : 'secondary'} class="font-mono text-xs">
+							v{update.version}
+						</Badge>
+						<span class="text-text-light text-xs">{update.date}</span>
+						{#if hasBreaking}
+							<Badge variant="destructive" class="text-xs">
+								<AlertTriangleIcon class="mr-0.5 size-3" />
+								{t.breaking}
+							</Badge>
+						{/if}
+					</div>
+
+					<p class="text-sm text-foreground/80">{update.description}</p>
+
+					{#if hasContent}
+						<div class="mt-3 space-y-3">
+							{#if update.features.length > 0}
+								<div>
+									<p class="text-primary mb-1 flex items-center gap-1 text-xs font-semibold">
+										<StarIcon class="size-3.5" />
+										{t.features}
+									</p>
+									<ul class="list-inside list-disc text-sm text-foreground/70">
+										{#each update.features as feature}
+											<li>{feature}</li>
+										{/each}
+									</ul>
+								</div>
+							{/if}
+
+							{#if update.fixes.length > 0}
+								<div>
+									<p class="mb-1 flex items-center gap-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
+										<BugIcon class="size-3.5" />
+										{t.fixes}
+									</p>
+									<ul class="list-inside list-disc text-sm text-foreground/70">
+										{#each update.fixes as fix}
+											<li>{fix}</li>
+										{/each}
+									</ul>
+								</div>
+							{/if}
+
+							{#if update.breakingChanges.length > 0}
+								<div>
+									<p class="mb-1 flex items-center gap-1 text-xs font-semibold text-orange-600 dark:text-orange-400">
+										<AlertTriangleIcon class="size-3.5" />
+										{t.breaking}
+									</p>
+									<ul class="list-inside list-disc text-sm text-orange-700 dark:text-orange-300">
+										{#each update.breakingChanges as change}
+											<li>{change}</li>
+										{/each}
+									</ul>
+								</div>
+							{/if}
+
+							{#if update.migration}
+								<details>
+									<summary class="cursor-pointer text-xs font-semibold text-foreground/60">
+										{t.migration}
+									</summary>
+									<pre class="mt-1 overflow-x-auto rounded-lg bg-muted p-2 text-xs">{update.migration}</pre>
+								</details>
+							{/if}
+						</div>
+					{:else}
+						<p class="mt-1 text-xs text-foreground/50 italic">{t.empty}</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/components/dashboard/changelog-dialog.svelte.d.ts

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

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

@@ -1,47 +1,28 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
-	import * as Card from '../../../components/ui/card/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
-	import { Button } from '../../../components/ui/button/index.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import type { InterfaceLanguage, Localized } from '../../../types/languages.js';
-	import InboxIcon from '@tabler/icons-svelte/icons/inbox';
-	import MailIcon from '@tabler/icons-svelte/icons/mail';
-	import MailOpenedIcon from '@tabler/icons-svelte/icons/mail-opened';
-	import ChevronRightIcon from '@tabler/icons-svelte/icons/chevron-right';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
-	const lang: Record<
-		InterfaceLanguage,
-		{
-			title: string;
-			description: string;
-			viewAll: string;
-			noSubmissions: string;
-			new: string;
-			total: string;
-		}
-	> = {
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		viewAll: string;
+		noSubmissions: string;
+	}> = {
 		pl: {
-			title: 'Zgłoszenia formularzy',
-			description: 'Ostatnie zgłoszenia',
-			viewAll: 'Zobacz wszystkie',
-			noSubmissions: 'Brak zgłoszeń',
-			new: 'nowe',
-			total: 'wszystkich'
+			title: 'Zgłoszenia',
+			viewAll: 'Wszystkie →',
+			noSubmissions: 'Brak zgłoszeń'
 		},
 		en: {
-			title: 'Form Submissions',
-			description: 'Recent submissions',
-			viewAll: 'View all',
-			noSubmissions: 'No submissions',
-			new: 'new',
-			total: 'total'
+			title: 'Submissions',
+			viewAll: 'View all →',
+			noSubmissions: 'No submissions'
 		}
 	};
 
@@ -50,93 +31,70 @@
 	}
 </script>
 
-<Card.Root class="rounded-2xl border-slate-200/50 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
-	<Card.Header class="pb-2">
-		<div class="flex items-center gap-2">
-			<div class="rounded-lg bg-blue-500/10 p-2">
-				<InboxIcon class="size-5 text-blue-600 dark:text-blue-400" />
-			</div>
-			<div>
-				<Card.Title>{lang[interfaceLanguage.current].title}</Card.Title>
-				<Card.Description>{lang[interfaceLanguage.current].description}</Card.Description>
-			</div>
+<section class="dash-card dash-card--forms" aria-labelledby="forms-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="forms-heading">{lang[interfaceLanguage.current].title}</h2>
+		<a href="/admin/forms" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
+	</div>
+
+	{#await remotes.getSubmissionsOverview()}
+		<div class="forms-card-body">
+			{#each Array(2) as _}
+				<div class="form-group">
+					<Skeleton class="h-4 w-24 mb-2" />
+					<Skeleton class="h-8 w-full" />
+					<Skeleton class="h-8 w-full mt-1" />
+				</div>
+			{/each}
 		</div>
-	</Card.Header>
-	<Card.Content>
-		{#await remotes.getSubmissionsOverview()}
-			<div class="space-y-3">
-				{#each Array(3) as _}
-					<div class="flex items-center gap-3">
-						<Skeleton class="size-8 rounded-lg" />
-						<div class="flex-1 space-y-1">
-							<Skeleton class="h-4 w-32" />
-							<Skeleton class="h-3 w-20" />
+	{:then overview}
+		{#if overview.length === 0}
+			<p class="text-center text-sm py-6" style="color:var(--text-light)">
+				{lang[interfaceLanguage.current].noSubmissions}
+			</p>
+		{:else}
+			<div class="forms-card-body">
+				{#each overview as form}
+					<div class="form-group">
+						<div class="form-group-header">
+							<span class="form-group-name">
+								{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}
+							</span>
+							<span
+								class="form-group-badge {form.unread > 0 ? 'form-group-badge--unread' : ''}"
+								aria-label="{form.unread} {interfaceLanguage.current === 'pl' ? 'nieprzeczytanych' : 'unread'}"
+							>
+								{form.unread}
+							</span>
 						</div>
-					</div>
-				{/each}
-			</div>
-		{:then overview}
-			{@const totalUnread = overview.reduce((sum, f) => sum + f.unread, 0)}
 
-			{#if overview.length === 0}
-				<p class="text-muted-foreground py-4 text-center text-sm">
-					{lang[interfaceLanguage.current].noSubmissions}
-				</p>
-			{:else}
-				<div class="space-y-4">
-					{#each overview as form}
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-2">
-									<span class="font-medium">
-										{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}
-									</span>
-									{#if form.unread > 0}
-										<Badge variant="default" class="h-5 px-1.5 text-xs">
-											{form.unread}
-										</Badge>
-									{/if}
-								</div>
-								<Button href="/admin/forms/{form.slug}" variant="ghost" size="sm" class="h-7 px-2">
-									{lang[interfaceLanguage.current].viewAll}
-									<ChevronRightIcon class="ml-1 size-4" />
-								</Button>
-							</div>
-
-							{#if form.recent.length > 0}
-								<div class="space-y-1">
-									{#each form.recent.slice(0, 3) as submission}
-										<a
-											href="/admin/form-submissions/{submission.id}"
-											class="flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
-										>
-											{#if submission.read}
-												<MailOpenedIcon class="size-4 text-slate-400" />
-											{:else}
-												<MailIcon class="size-4 text-blue-600 dark:text-blue-400" />
-											{/if}
-											<span
-												class="flex-1 truncate text-sm {submission.read
-													? 'text-slate-600 dark:text-slate-400'
-													: 'font-medium'}"
-											>
+						{#if form.recent.length > 0}
+							<ul class="form-submissions-list" aria-label="{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}">
+								{#each form.recent.slice(0, 3) as submission}
+									<li>
+										<a href="/admin/form-submissions/{submission.id}" class="form-submission-item">
+											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" style="flex-shrink:0; color: {submission.read ? 'var(--text-light)' : 'var(--primary)'}">
+												<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+												<polyline points="22,6 12,13 2,6"/>
+											</svg>
+											<span style="flex:1; min-width:0; font-size:13px; font-weight:{submission.read ? '500' : '700'}; color:{submission.read ? 'var(--muted-foreground)' : 'var(--foreground)'}; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">
 												{submission.preview || '—'}
 											</span>
-											<span class="text-muted-foreground text-xs">
+											<time style="font-size:11px; color:var(--text-light); white-space:nowrap; flex-shrink:0">
 												{formatRelativeDate(new Date(submission.createdAt))}
-											</span>
+											</time>
 										</a>
-									{/each}
-								</div>
-							{:else}
-								<p class="text-muted-foreground px-2 text-sm">
-									{lang[interfaceLanguage.current].noSubmissions}
-								</p>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			{/if}
-		{/await}
-	</Card.Content>
-</Card.Root>
+									</li>
+								{/each}
+							</ul>
+						{:else}
+							<p style="font-size:13px; color:var(--text-light); padding:4px 10px">
+								{lang[interfaceLanguage.current].noSubmissions}
+							</p>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/await}
+</section>

package/dist/admin/components/dashboard/index.d.ts

@@ -1,4 +1,6 @@
-export { default as AccessibilityHub } from './accessibility-hub.svelte';
+export { default as A11yGauge } from './a11y-gauge.svelte';
 export { default as FormSubmissionsWidget } from './form-submissions-widget.svelte';
 export { default as RecentActivity } from './recent-activity.svelte';
-export { default as StatCard } from './stat-card.svelte';
+export { default as RecentEntries } from './recent-entries.svelte';
+export { default as TipOfTheDay } from './tip-of-the-day.svelte';
+export { default as WelcomeHeader } from './welcome-header.svelte';

package/dist/admin/components/dashboard/index.js

@@ -1,4 +1,6 @@
-export { default as AccessibilityHub } from './accessibility-hub.svelte';
+export { default as A11yGauge } from './a11y-gauge.svelte';
 export { default as FormSubmissionsWidget } from './form-submissions-widget.svelte';
 export { default as RecentActivity } from './recent-activity.svelte';
-export { default as StatCard } from './stat-card.svelte';
+export { default as RecentEntries } from './recent-entries.svelte';
+export { default as TipOfTheDay } from './tip-of-the-day.svelte';
+export { default as WelcomeHeader } from './welcome-header.svelte';