includio-cms 0.1.4 → 0.5.1

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

@@ -9,6 +9,10 @@
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
+	import ArchiveIcon from '@tabler/icons-svelte/icons/archive';
+	import XIcon from '@tabler/icons-svelte/icons/x';
+	import Button from '../../../components/ui/button/button.svelte';
 	import { ElementSize, useDebounce } from 'runed';
 	import { defaults, superForm, type SuperForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
@@ -18,10 +22,12 @@
 	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import type { Field } from '../../../types/fields.js';
+	import { getFieldsFromConfig, hasLayout } from '../../../core/fields/layoutUtils.js';
 	import type { ValidationErrors } from 'sveltekit-superforms';
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
+	import { computeTranslationStatus } from '../../utils/translationStatus.js';
 
 	const contentLanguage = getContentLanguage();
 	const remotes = getRemotes();
@@ -56,7 +62,11 @@
 			} else if (typeof value === 'object' && value !== null) {
 				// Nested errors - recurse
 				const nestedFields = field && 'fields' in field ? (field.fields as Field[]) : [];
-				const nested = flattenErrors(value as ValidationErrors<Record<string, unknown>>, nestedFields, path);
+				const nested = flattenErrors(
+					value as ValidationErrors<Record<string, unknown>>,
+					nestedFields,
+					path
+				);
 				if (nested.length > 0) {
 					result.push(...nested.map((e) => `${label} > ${e}`));
 				}
@@ -70,31 +80,55 @@
 		InterfaceLanguage,
 		{
 			entryArchived: string;
+			entryRestored: string;
+			archivedBanner: string;
+			restore: string;
 			saveToast: string;
-			saveDraftToast: string;
 			publishToast: string;
 			scheduledToast: string;
+			unpublishToast: string;
 			saveFailed: string;
 			cannotPublish: string;
+			validationHint: string;
+			newerDraft: string;
+			switchToDraft: string;
+			editingDraft: string;
+			switchToPublished: string;
 		}
 	> = {
 		en: {
 			entryArchived: 'Entry archived successfully',
+			entryRestored: 'Entry restored successfully',
+			archivedBanner: 'This entry is archived. Restore it to edit.',
+			restore: 'Restore',
 			saveToast: 'Entry saved successfully',
-			saveDraftToast: 'Draft saved successfully',
 			publishToast: 'Entry published successfully',
 			scheduledToast: 'Entry scheduled successfully',
+			unpublishToast: 'Publication withdrawn',
 			saveFailed: 'Save failed',
-			cannotPublish: 'Cannot publish'
+			cannotPublish: 'Cannot publish',
+			validationHint: 'Fix the highlighted fields below to publish',
+			newerDraft: 'A newer unpublished draft exists',
+			switchToDraft: 'Switch to draft',
+			editingDraft: 'You are editing an unpublished draft',
+			switchToPublished: 'View published'
 		},
 		pl: {
 			entryArchived: 'Wpis został zarchiwizowany pomyślnie',
+			entryRestored: 'Wpis został przywrócony',
+			archivedBanner: 'Ten wpis jest zarchiwizowany. Przywróć go, żeby edytować.',
+			restore: 'Przywróć',
 			saveToast: 'Wpis został pomyślnie zapisany',
-			saveDraftToast: 'Wersja robocza została pomyślnie zapisana',
 			publishToast: 'Wpis został pomyślnie opublikowany',
 			scheduledToast: 'Wpis został zaplanowany pomyślnie',
+			unpublishToast: 'Wycofano publikację',
 			saveFailed: 'Błąd zapisu',
-			cannotPublish: 'Nie można opublikować'
+			cannotPublish: 'Nie można opublikować',
+			validationHint: 'Popraw wyróżnione pola, żeby opublikować',
+			newerDraft: 'Istnieje nowszy nieopublikowany szkic',
+			switchToDraft: 'Przejdź do szkicu',
+			editingDraft: 'Edytujesz nieopublikowany szkic',
+			switchToPublished: 'Zobacz opublikowaną'
 		}
 	};
 
@@ -105,9 +139,13 @@
 
 	let { entry, editingEntry }: Props = $props();
 	let { collection } = entry;
+	const isArchived = $derived(!!entry.archivedAt);
 
 	// Create form once at component level
-	const collectionSchema = generateZodSchemaFromFields(collection.fields, contentLanguage.all);
+	const collectionSchema = generateZodSchemaFromFields(
+		getFieldsFromConfig(collection),
+		contentLanguage.all
+	);
 	const form = superForm(defaults(editingEntry.data, zod4(collectionSchema)), {
 		validators: zod4Client(collectionSchema),
 		SPA: true,
@@ -115,15 +153,29 @@
 		resetForm: false
 	});
 
+	let validationErrors = $state<string[]>([]);
+
 	// Autosave state
 	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 	let saveStatus = $state<SaveStatus>('idle');
-	let lastSavedData = $state<string>(JSON.stringify(editingEntry.data));
+	let lastSavedData = $state<string>(JSON.stringify(get(form.form)));
 	let autosaveTimer: ReturnType<typeof setTimeout> | null = null;
+	// Tracks draft version created via autosave while editing a published version
+	let savedDraftVersionId = $state<string | null>(null);
 
 	const AUTOSAVE_DELAY = 30000; // 30 seconds
 
+	// Reactive translation status — must live here where we can subscribe to form.form store
+	const formStore = form.form;
+	const collectionFields = getFieldsFromConfig(collection);
+	const translationStatus = $derived.by(() => {
+		if (contentLanguage.all.length <= 1) return null;
+		const data = $formStore;
+		return computeTranslationStatus(data, collectionFields, contentLanguage.all);
+	});
+
 	function scheduleAutosave() {
+		if (isArchived) return;
 		if (autosaveTimer) {
 			clearTimeout(autosaveTimer);
 		}
@@ -133,22 +185,26 @@
 	}
 
 	async function performAutosave() {
+		if (isArchived) return;
 		const currentFormData = get(form.form);
 		const currentData = JSON.stringify(currentFormData);
 		if (currentData === lastSavedData) {
-			saveStatus = 'saved';
 			return;
 		}
 
 		saveStatus = 'saving';
 		try {
-			await remotes.updateEntryVersionCommand({
+			const result = await remotes.updateEntryVersionCommand({
 				entryId: entry.id,
 				data: currentFormData,
 				type: 'draft'
 			});
 			lastSavedData = currentData;
 			saveStatus = 'saved';
+			// If we're editing the published version and saved a draft, track it for the banner
+			if (entry.publishedVersion && editingEntry.id === entry.publishedVersion.id && result?.id) {
+				savedDraftVersionId = result.id;
+			}
 			// Reset to idle after 3s
 			setTimeout(() => {
 				if (saveStatus === 'saved') saveStatus = 'idle';
@@ -158,7 +214,7 @@
 		}
 	}
 
-	// Track form changes for autosave
+	// Track form changes for autosave + Ctrl/Cmd+S shortcut
 	onMount(() => {
 		const unsub = form.form.subscribe((data) => {
 			const currentData = JSON.stringify(data);
@@ -167,8 +223,23 @@
 				scheduleAutosave();
 			}
 		});
+
+		function handleKeydown(e: KeyboardEvent) {
+			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+				e.preventDefault();
+				if (isArchived) return;
+				if (autosaveTimer) {
+					clearTimeout(autosaveTimer);
+					autosaveTimer = null;
+				}
+				performAutosave();
+			}
+		}
+		window.addEventListener('keydown', handleKeydown);
+
 		return () => {
 			unsub();
+			window.removeEventListener('keydown', handleKeydown);
 			if (autosaveTimer) clearTimeout(autosaveTimer);
 		};
 	});
@@ -179,6 +250,12 @@
 		goto(`/admin/collections/${collection.slug}`);
 	}
 
+	async function onRestore() {
+		await remotes.unarchiveEntryCommand(entry.id);
+		toast.success(lang[interfaceLanguage.current].entryRestored);
+		goto(window.location.pathname, { invalidateAll: true });
+	}
+
 	async function onSave(type: UpdateEntryVersionCommandType, scheduledAt?: Date) {
 		// Cancel pending autosave
 		if (autosaveTimer) {
@@ -186,24 +263,23 @@
 			autosaveTimer = null;
 		}
 
-		if (type === 'draft') {
-			// Drafts save without validation
-			const currentFormData = get(form.form);
+		// Unpublish — skip validation, call remote directly
+		if (type === 'cancel-published') {
 			saveStatus = 'saving';
 			try {
 				await remotes.updateEntryVersionCommand({
 					entryId: entry.id,
-					data: currentFormData,
-					type: 'draft'
+					data: get(form.form),
+					type
 				});
-				lastSavedData = JSON.stringify(currentFormData);
 				saveStatus = 'saved';
-				toast.success(lang[interfaceLanguage.current].saveDraftToast);
+				toast.success(lang[interfaceLanguage.current].unpublishToast);
+
 				setTimeout(() => {
 					if (saveStatus === 'saved') saveStatus = 'idle';
 				}, 3000);
 			} catch (e) {
-				console.error('Save error:', e);
+				console.error('Unpublish error:', e);
 				saveStatus = 'error';
 				toast.error(lang[interfaceLanguage.current].saveFailed, {
 					description: e instanceof Error ? e.message : undefined
@@ -213,9 +289,10 @@
 		}
 
 		// Publish requires validation
-		const validatedForm = await form.validateForm();
+		const validatedForm = await form.validateForm({ update: true });
 
 		if (validatedForm.valid) {
+			validationErrors = [];
 			saveStatus = 'saving';
 			try {
 				await remotes.updateEntryVersionCommand({
@@ -245,14 +322,16 @@
 				});
 			}
 		} else {
-			const errors = flattenErrors(validatedForm.errors, collection.fields);
-			toast.error(
-				lang[interfaceLanguage.current].cannotPublish,
-				{
-					description: errors.slice(0, 3).join('\n') + (errors.length > 3 ? '\n...' : ''),
-					duration: 5000
-				}
+			const errors = flattenErrors(validatedForm.errors, getFieldsFromConfig(collection));
+			validationErrors = errors;
+
+			// Scroll to first errored field
+			const firstErrorKey = Object.keys(validatedForm.errors).find(
+				(k) => k !== '_errors'
 			);
+			if (firstErrorKey) {
+				scrollToIssue(firstErrorKey);
+			}
 		}
 	}
 
@@ -292,7 +371,7 @@
 
 	type SizePreset = keyof typeof sizePresets;
 
-	let sizePreset: SizePreset = $state('responsive');
+	let sizePreset: SizePreset = $state('desktop');
 
 	function getOriginFromUrl(url: string): string {
 		try {
@@ -302,7 +381,9 @@
 		}
 	}
 
-	const previewOrigin = collection.previewUrl ? getOriginFromUrl(collection.previewUrl) : window.location.origin;
+	const previewOrigin = collection.previewUrl
+		? getOriginFromUrl(collection.previewUrl)
+		: window.location.origin;
 
 	const updatePreview = useDebounce(
 		async (window: Window, form: SuperForm<Record<string, unknown>>) => {
@@ -420,46 +501,176 @@
 			}
 		}
 	});
+
+	// Banner: viewing published version + a separate draft exists
+	const showDraftBanner = $derived(
+		entry.publishedVersion != null &&
+			editingEntry.id === entry.publishedVersion.id &&
+			entry.draftVersion != null &&
+			entry.draftVersion.id !== entry.publishedVersion.id &&
+			entry.draftVersion.createdAt > entry.publishedVersion.createdAt
+	);
+
+	// Banner: viewing draft + a published version exists
+	const showPublishedBanner = $derived(
+		entry.publishedVersion != null && editingEntry.id !== entry.publishedVersion.id
+	);
+
+	const draftVersionId = $derived(entry.draftVersion?.id ?? savedDraftVersionId);
+
+	const scrollToIssue = (fieldSlug: string) => {
+		const fieldEl = document.querySelector(`[data-field-path="${fieldSlug}"]`);
+		if (fieldEl) {
+			fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			const proseMirror = fieldEl.querySelector('.ProseMirror') as HTMLElement | null;
+			if (proseMirror) {
+				proseMirror.focus();
+			}
+		}
+	};
+
+	// Auto-dismiss validation banner when user starts editing
+	onMount(() => {
+		const unsub = form.tainted.subscribe((tainted) => {
+			if (tainted && validationErrors.length > 0) {
+				validationErrors = [];
+			}
+		});
+		return () => unsub();
+	});
+
+	const t = $derived(lang[interfaceLanguage.current]);
 </script>
 
-<EntryHeader {entry} version={editingEntry} {onSave} {onArchive} {saveStatus} />
+<EntryHeader
+	{entry}
+	version={editingEntry}
+	{onSave}
+	onSaveDraft={performAutosave}
+	{onArchive}
+	{saveStatus}
+	{isArchived}
+	fields={getFieldsFromConfig(collection)}
+	getFormData={() => get(form.form)}
+	onScrollToIssue={scrollToIssue}
+	{translationStatus}
+/>
+
+{#if validationErrors.length > 0}
+	<div
+		role="alert"
+		aria-live="assertive"
+		class="flex items-start gap-3 border-b border-[var(--error)]/20 bg-[#FDF0F0] px-6 py-3 text-sm text-[var(--error)]"
+	>
+		<AlertCircle class="mt-0.5 size-4 shrink-0" />
+		<div class="min-w-0 flex-1">
+			<p class="font-semibold">{t.cannotPublish}</p>
+			<p class="text-xs opacity-80">{t.validationHint}</p>
+			<ul class="mt-1 text-xs">
+				{#each validationErrors.slice(0, 5) as error}
+					<li>— {error}</li>
+				{/each}
+			</ul>
+		</div>
+		<button
+			type="button"
+			onclick={() => (validationErrors = [])}
+			class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
+			aria-label="Zamknij"
+		>
+			<XIcon class="size-4" />
+		</button>
+	</div>
+{/if}
+
+{#if isArchived}
+	<div
+		role="alert"
+		class="flex items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
+	>
+		<div class="flex items-center gap-2 text-[var(--warning)]">
+			<ArchiveIcon class="size-4 shrink-0" />
+			<span>{t.archivedBanner}</span>
+		</div>
+		<Button size="sm" onclick={onRestore}>{t.restore}</Button>
+	</div>
+{/if}
+
+{#if showDraftBanner}
+	<div
+		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+	>
+		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].newerDraft}</span>
+		<button
+			type="button"
+			class="font-semibold text-[var(--primary)] hover:underline"
+			onclick={() => goto(`?version=${draftVersionId}`)}
+		>
+			{lang[interfaceLanguage.current].switchToDraft}
+		</button>
+	</div>
+{:else if showPublishedBanner}
+	<div
+		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+	>
+		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].editingDraft}</span>
+		<button
+			type="button"
+			class="font-semibold text-[var(--primary)] hover:underline"
+			onclick={() => goto(`?version=${entry.publishedVersion!.id}`)}
+		>
+			{lang[interfaceLanguage.current].switchToPublished}
+		</button>
+	</div>
+{/if}
 
+<div class={isArchived ? 'pointer-events-none opacity-60' : ''}>
 {#if hybridContext.mode === 'hybrid' && collection.previewUrl}
-<div class="flex min-h-0 flex-1 overflow-hidden">
-	{#await import('./hybrid/hybrid-layout.svelte')}
-		<div class="h-full animate-pulse rounded-md bg-accent"></div>
-	{:then { default: HybridLayout }}
-		<HybridLayout>
-			{#snippet preview()}
-				{#await import('./hybrid/hybrid-preview.svelte')}
-					<div class="h-full animate-pulse rounded-md bg-accent"></div>
-				{:then { default: HybridPreview }}
-					<HybridPreview {collection} {editingEntry} bind:previewIframe bind:sizePreset {size} bind:el />
-				{:catch}
-					<p class="p-4 text-sm text-destructive">Failed to load preview</p>
-				{/await}
-			{/snippet}
-			{#snippet formPanel()}
-				<EntryForm
-					{form}
-					{entry}
-					focusedPath={hybridContext.focusedPath}
-					onPathSelect={(path) => hybridContext.focusedPath = path}
-				/>
-			{/snippet}
-		</HybridLayout>
-	{:catch}
-		<p class="p-4 text-sm text-destructive">Failed to load layout</p>
-	{/await}
-</div>
+	<div class="flex min-h-0 flex-1 overflow-hidden">
+		{#await import('./hybrid/hybrid-layout.svelte')}
+			<div class="bg-accent h-full animate-pulse rounded-md"></div>
+		{:then { default: HybridLayout }}
+			<HybridLayout>
+				{#snippet preview()}
+					{#await import('./hybrid/hybrid-preview.svelte')}
+						<div class="bg-accent h-full animate-pulse rounded-md"></div>
+					{:then { default: HybridPreview }}
+						<HybridPreview
+							{collection}
+							{editingEntry}
+							bind:previewIframe
+							bind:sizePreset
+							{size}
+							bind:el
+						/>
+					{:catch}
+						<p class="text-destructive p-4 text-sm">Failed to load preview</p>
+					{/await}
+				{/snippet}
+				{#snippet formPanel()}
+					<EntryForm
+						{form}
+						{entry}
+						focusedPath={hybridContext.focusedPath}
+						onPathSelect={(path) => (hybridContext.focusedPath = path)}
+					/>
+				{/snippet}
+			</HybridLayout>
+		{:catch}
+			<p class="text-destructive p-4 text-sm">Failed to load layout</p>
+		{/await}
+	</div>
+{:else if hasLayout(collection)}
+	<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
+		<EntryForm {form} {entry} />
+	</div>
 {:else}
-	<div class="flex items-stretch justify-center">
+	<div class="flex items-stretch justify-center" style="scroll-padding-top: 48px;">
 		<div class="max-w-2xl grow p-4 lg:p-6">
-			<div
-				class="glass-panel rounded-2xl border-slate-200/50 bg-white/80 p-4 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60 lg:p-6"
-			>
+			<div class="bg-card rounded-2xl border p-4 shadow-sm lg:p-6">
 				<EntryForm {form} {entry} />
 			</div>
 		</div>
 	</div>
 {/if}
+</div>

package/dist/admin/client/entry/header/a11y-validator.d.ts

@@ -0,0 +1,47 @@
+import type { Field } from '../../../../types/fields.js';
+export type A11yIssueType = 'warning' | 'success';
+export interface A11yIssue {
+    type: A11yIssueType;
+    message: string;
+    fieldSlug?: string;
+    firstNodePos?: number;
+}
+/** Get heading issue positions for inline decoration in the editor.
+ *  Works with TipTap JSON doc format (with `type`, `attrs.level`, `content`).
+ *  Returns issues for: first heading not H2, H3 appearing before any H2. */
+export interface HeadingIssue {
+    pos: number;
+    message: string;
+}
+export declare function getHeadingIssuePositions(doc: {
+    type: string;
+    content?: any[];
+}): HeadingIssue[];
+/** Find position of first image without alt in TipTap JSON doc. */
+export declare function findFirstImageWithoutAlt(doc: {
+    type: string;
+    content?: any[];
+}): number | null;
+/** Find position of first heading hierarchy issue in TipTap JSON doc. */
+export declare function findFirstHeadingIssue(doc: {
+    type: string;
+    content?: any[];
+}): number | null;
+/** Find position of first generic link in TipTap JSON doc. */
+export declare function findFirstGenericLink(doc: {
+    type: string;
+    content?: any[];
+}): number | null;
+export interface A11yLang {
+    imagesWithoutAlt: (count: number) => string;
+    headingsOk: string;
+    headingsSkipped: string;
+    genericLinks: (count: number) => string;
+    allImagesHaveAlt: string;
+    noGenericLinks: string;
+}
+export declare const a11yLangPl: A11yLang;
+export declare const a11yLangEn: A11yLang;
+/** Run a11y validation on entry data and return issues list.
+ *  When `languages` is provided, validates each language separately with prefix tags. */
+export declare function validateA11y(data: Record<string, unknown>, fields: Field[], lang?: A11yLang, languages?: string[]): A11yIssue[];