includio-cms 0.0.47 → 0.0.49

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

@@ -5,11 +5,13 @@
 	import SiteHeader from '../../components/layout/site-header.svelte';
 	import { Breadcrumbs, setBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { ContentLanguage, setContentLanguage } from '../../state/content-language.svelte.js';
+	import { Preview, setPreviewStatus } from '../../state/preview-svelte.js';
 
 	let { languages, children }: { languages: string[]; children: Snippet } = $props();
 
 	setBreadcrumbs(new Breadcrumbs());
 	setContentLanguage(new ContentLanguage(languages, languages[0]));
+	setPreviewStatus(new Preview());
 </script>
 
 <Sidebar.Provider

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

@@ -3,14 +3,11 @@
 	import '../../styles/admin.css';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '../../../components/ui/sonner/index.js';
-	import {
-		InterfaceLanguage,
-		setInterfaceLanguage
-	} from '../../state/interface-language.svelte.js';
+	import { MediaSort, setMediaSort } from '../../state/media-sort.svelte.js';
 
-	let { children }: { children: Snippet } = $props();
+	setMediaSort(new MediaSort());
 
-	setInterfaceLanguage(new InterfaceLanguage());
+	let { children }: { children: Snippet } = $props();
 </script>
 
 <ModeWatcher />

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

@@ -2,14 +2,14 @@
 	import AccessibilityOverview from '../../components/accessibility/accessibility-overview.svelte';
 	import { sidebarLang } from '../../components/layout/lang.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
-	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import * as Alert from '../../../components/ui/alert/index.js';
 
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import InfoCircleIcon from '@tabler/icons-svelte/icons/info-circle';
 
 	const breadcrumbs = getBreadcrumbs();
-	const interfaceLanguage = getInterfaceLanguage();
+	const interfaceLanguage = useInterfaceLanguage();
 
 	$effect(() => {
 		breadcrumbs.state = [

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
+	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
@@ -8,11 +8,12 @@
 	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
 	import EntryLink from './entry-link.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getEntryStatus } from '../entry/utils.js';
 
 	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
-	const interfaceLanguage = getInterfaceLanguage();
+	const interfaceLanguage = useInterfaceLanguage();
 
 	const lang: Record<InterfaceLanguage, { name: string; createdAt: string; updatedAt: string }> = {
 		en: {
@@ -74,15 +75,15 @@
 	let { collection }: Props = $props();
 </script>
 
-{#await remotes.getRawCollectionEntries(collection.slug) then entries}
+{#await remotes.getRawEntries({ slug: collection.slug }) then entries}
 	{@const items = entries
-		.filter((entry) => entry.deletedAt === null)
+		.filter((entry) => entry.archivedAt === null)
 		.map((entry) => ({
 			id: entry.id,
 			collection: entry.slug,
-			name: getCollectionEntryLabel(entry, collection, contentLanguage.current),
+			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
 			url: `/admin/entries/${entry.id}`,
-			status: entry.status,
+			status: getEntryStatus(entry),
 			createdAt: entry.createdAt,
 			updatedAt: entry.updatedAt
 		}))}

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

@@ -7,11 +7,11 @@
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
-	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const remotes = getRemotes();
-	const interfaceLanguage = getInterfaceLanguage();
+	const interfaceLanguage = useInterfaceLanguage();
 
 	const lang: Record<InterfaceLanguage, { add: string }> = {
 		en: { add: 'Create new' },
@@ -25,7 +25,7 @@
 	let { collection }: Props = $props();
 
 	async function onCreateEntry() {
-		const newEntry = await remotes.createNewEntry({ type: 'collection', slug: collection.slug });
+		const newEntry = await remotes.createEntry({ type: 'collection', slug: collection.slug });
 		goto(`/admin/entries/${newEntry.id}`);
 	}
 

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

@@ -3,11 +3,8 @@
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { generateZodSchemaFromFields } from '../../../core/fields/fieldSchemaToTs.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
-	import type { CollectionConfigWithType } from '../../../types/collections.js';
-	import type { RawEntry, RawEntryWithCollection } from '../../../types/entries.js';
-	import type { SingleConfigWithType } from '../../../types/singles.js';
+	import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
 	import { onMount } from 'svelte';
-	import { toast } from 'svelte-sonner';
 	import { defaults, superForm, type SuperForm } from 'sveltekit-superforms';
 	import { zod, zodClient } from 'sveltekit-superforms/adapters';
 
@@ -16,39 +13,34 @@
 
 	type Props = {
 		form: SuperForm<any> | undefined;
-		entry: RawEntryWithCollection;
+		entry: RawEntry;
+		version: DbEntryVersion;
+		onUpdate?: () => void;
 	};
 
-	let { form = $bindable(), entry }: Props = $props();
+	let { form = $bindable(), entry, version, onUpdate }: Props = $props();
 	let { collection } = entry;
 
 	onMount(() => {
 		let collectionSchema = generateZodSchemaFromFields(collection.fields, contentLanguage.all);
 
-		form = superForm(defaults(entry.data, zod(collectionSchema)), {
+		form = superForm(defaults(version.data, zod(collectionSchema)), {
 			validators: zodClient(collectionSchema),
 			SPA: true,
 			dataType: 'json',
-			resetForm: false,
-			onUpdate: async ({ form }) => {
-				if (form.valid) {
-					await remotes.updateEntryCommand({
-						id: entry.id,
-						data: {
-							data: form.data
-						}
-					});
-					toast.success('Entry saved!');
-				}
-			}
+			resetForm: false
 		});
+
+		const unsub = form.form.subscribe((currentForm) => {
+			onUpdate?.();
+		});
+
+		() => {
+			unsub();
+		};
 	});
 </script>
 
 {#if form}
-	<div class="flex items-stretch">
-		<div class="grow p-4 lg:p-6">
-			<FieldsForm {form} fields={collection.fields} />
-		</div>
-	</div>
+	<FieldsForm {form} fields={collection.fields} />
 {/if}

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

@@ -1,8 +1,10 @@
-import type { RawEntryWithCollection } from '../../../types/entries.js';
+import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
 import { type SuperForm } from 'sveltekit-superforms';
 type Props = {
     form: SuperForm<any> | undefined;
-    entry: RawEntryWithCollection;
+    entry: RawEntry;
+    version: DbEntryVersion;
+    onUpdate?: () => void;
 };
 declare const EntryForm: import("svelte").Component<Props, {}, "form">;
 type EntryForm = ReturnType<typeof EntryForm>;

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

@@ -1,116 +1,103 @@
 <script lang="ts">
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
-	import { getRemotes } from '../../../sveltekit/index.js';
-	import type { RawEntryWithCollection } from '../../../types/entries.js';
+	import type { DbEntryVersion, EntryStatus, RawEntry } from '../../../types/entries.js';
 	import * as ToggleGroup from '../../../components/ui/toggle-group/index.js';
 	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import DotsVerticalIcon from '@tabler/icons-svelte/icons/dots-vertical';
-	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import HistoryIcon from '@tabler/icons-svelte/icons/history';
+	import { goto } from '$app/navigation';
+	import { getPreviewStatus } from '../../state/preview-svelte.js';
+	import Check from '@tabler/icons-svelte/icons/check';
+	import Visibility from './header/visibility.svelte';
+	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
+	import X from '@tabler/icons-svelte/icons/x';
+	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
+	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
 
-	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
-	const interfaceLanguage = getInterfaceLanguage();
+	const interfaceLanguage = useInterfaceLanguage();
+	const previewStatus = getPreviewStatus();
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
+			visibility: string;
 			publish: string;
 			unpublish: string;
-			status: Record<string, string>;
-			modified: string;
-			created: string;
+			status: Record<EntryStatus, string>;
+			publishDate: string;
+			planPublish: string;
 			save: string;
-			delete: string;
+			publishNow: string;
+			cancelPublish: string;
+			saveAndPublish: string;
+			saveDraft: string;
+			archive: string;
+			togglePreview: string;
+			versions: string;
 		}
 	> = {
 		en: {
+			visibility: 'Visibility',
 			publish: 'Publish',
+			planPublish: 'Schedule Publish',
 			unpublish: 'Unpublish',
 			status: {
 				draft: 'Draft',
 				published: 'Published',
 				archived: 'Archived'
 			},
-			modified: 'Modified',
-			created: 'Created',
+			publishDate: 'Publish Date',
 			save: 'Save',
-			delete: 'Delete'
+			publishNow: 'Publish Now',
+			cancelPublish: 'Cancel Publish',
+			saveAndPublish: 'Save and Publish',
+			saveDraft: 'Save Draft',
+			archive: 'Archive',
+			togglePreview: 'Live Preview',
+			versions: 'Versions'
 		},
 		pl: {
-			publish: 'Opublikuj',
-			unpublish: 'Cofnij publikację',
+			planPublish: 'Zaplanuj publikację',
+			visibility: 'Widoczność',
+			publish: 'Publikuj',
+			unpublish: 'Ukryj',
 			status: {
-				draft: 'Roboczy',
-				published: 'Opublikowany',
+				draft: 'Ukryty',
+				published: 'Publiczny',
 				archived: 'Zarchiwizowany'
 			},
-			modified: 'Zmodyfikowany',
-			created: 'Utworzony',
+			publishDate: 'Data publikacji',
 			save: 'Zapisz',
-			delete: 'Usuń'
+			publishNow: 'Opublikuj teraz',
+			cancelPublish: 'Cofnij publikację',
+			saveAndPublish: 'Zapisz i opublikuj',
+			saveDraft: 'Zapisz szkic',
+			archive: 'Zarchiwizuj',
+			togglePreview: 'Podgląd zmian na żywo',
+			versions: 'Wersje'
 		}
 	};
 
 	type Props = {
-		entry: RawEntryWithCollection;
-		onSave: () => void;
-		onDelete: () => void;
+		entry: RawEntry;
+		version: DbEntryVersion;
+		onSave: (type: UpdateEntryVersionCommandType) => void;
+		onArchive: () => void;
 	};
 
-	let { entry, onSave, onDelete }: Props = $props();
+	let { entry, onSave, onArchive, version }: Props = $props();
+	let { collection } = entry;
 </script>
 
 <div
 	class="bg-background sticky top-0 z-50 flex items-center justify-between gap-4 border-b px-4 py-3 md:px-6"
 >
 	<div class="flex items-center gap-4">
-		<div class="flex items-center gap-1">
-			<p class="text-sm whitespace-nowrap">
-				<span class="text-muted-foreground">Status:</span>
-				<span class="font-medium capitalize"
-					>{lang[interfaceLanguage.current].status[entry.status]}</span
-				> -
-			</p>
-
-			{#if entry.status === 'draft'}
-				<button
-					onclick={async () => {
-						entry.status = 'published';
-						const updatedEntry = await remotes.updateEntryCommand({
-							id: entry.id,
-							data: { status: 'published' }
-						});
-						entry = updatedEntry;
-					}}
-					type="button"
-					class="text-sm underline">{lang[interfaceLanguage.current].publish}</button
-				>
-			{:else}
-				<button
-					type="button"
-					class="text-sm underline"
-					onclick={async () => {
-						entry.status = 'draft';
-						const updatedEntry = await remotes.updateEntryCommand({
-							id: entry.id,
-							data: { status: 'draft' }
-						});
-						entry = updatedEntry;
-					}}>{lang[interfaceLanguage.current].unpublish}</button
-				>
-			{/if}
-		</div>
-
-		<p class="text-sm whitespace-nowrap">
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].modified}:</span>
-			{entry.updatedAt.toLocaleString('pl')}
-		</p>
-		<p class="text-sm whitespace-nowrap">
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].created}:</span>
-			{entry.createdAt.toLocaleString('pl')}
-		</p>
+		<Visibility {entry} />
 	</div>
 
 	<div class="flex items-center gap-2">
@@ -134,7 +121,73 @@
 			</ToggleGroup.Root>
 		{/if}
 
-		<Button type="submit" size="sm" onclick={onSave}>{lang[interfaceLanguage.current].save}</Button>
+		<Button size="sm" type="button" variant="ghost" onclick={() => onSave('draft')}
+			>{lang[interfaceLanguage.current].saveDraft}</Button
+		>
+
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} size="sm" type="button">
+						{lang[interfaceLanguage.current].publish}
+						<ChevronDown />
+					</Button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end" class="[--radius:1rem]">
+				<DropdownMenu.Group>
+					<DropdownMenu.Item onclick={() => onSave('published-now')}>
+						{lang[interfaceLanguage.current].publishNow}
+						<DropdownMenu.Shortcut>
+							<ChevronRight />
+						</DropdownMenu.Shortcut>
+					</DropdownMenu.Item>
+
+					<!-- <DropdownMenu.Item>
+						{lang[interfaceLanguage.current].schedulePublish}
+						<ChevronDown />
+					</DropdownMenu.Item> -->
+
+					<DropdownMenu.Item onclick={() => onSave('cancel-published')}>
+						{lang[interfaceLanguage.current].cancelPublish}
+						<DropdownMenu.Shortcut>
+							<X />
+						</DropdownMenu.Shortcut>
+					</DropdownMenu.Item>
+				</DropdownMenu.Group>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger class="data-[state=open]:bg-muted text-muted-foreground flex size-8">
+				{#snippet child({ props })}
+					<Button variant="outline" size="icon" {...props}>
+						<HistoryIcon />
+						<span class="sr-only">Open history menu</span>
+					</Button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end">
+				<DropdownMenu.Group>
+					<DropdownMenu.Label>{lang[interfaceLanguage.current].versions}</DropdownMenu.Label>
+					<DropdownMenu.Separator />
+					<DropdownMenu.RadioGroup value={version.id}>
+						{#each entry.versions.sort((a, b) => b.versionNumber - a.versionNumber) as ver}
+							<DropdownMenu.RadioItem
+								value={ver.id}
+								onclick={() => {
+									goto(`/admin/entries/${entry.id}?version=${ver.id}`);
+								}}
+								>({ver.versionNumber}) - {ver.createdAt.toLocaleString('pl')}
+								{#if ver.id === entry.publishedVersion?.id}
+									- {lang[interfaceLanguage.current].status.published}
+								{/if}
+							</DropdownMenu.RadioItem>
+						{/each}
+					</DropdownMenu.RadioGroup>
+				</DropdownMenu.Group>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
 
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger class="data-[state=open]:bg-muted text-muted-foreground flex size-8">
@@ -145,9 +198,20 @@
 					</Button>
 				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content align="end" class="w-32">
-				<DropdownMenu.Item variant="destructive" onclick={onDelete}
-					>{lang[interfaceLanguage.current].delete}</DropdownMenu.Item
+			<DropdownMenu.Content align="end">
+				{#if collection.previewUrl}
+					<DropdownMenu.Item
+						onclick={() => {
+							previewStatus.current = previewStatus.current === 'on' ? 'off' : 'on';
+						}}
+						>{lang[interfaceLanguage.current].togglePreview}
+						{#if previewStatus.current === 'on'}
+							<Check />
+						{/if}
+					</DropdownMenu.Item>
+				{/if}
+				<DropdownMenu.Item variant="destructive" onclick={onArchive}
+					>{lang[interfaceLanguage.current].archive}</DropdownMenu.Item
 				>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>

package/dist/admin/client/entry/entry-header.svelte.d.ts

@@ -1,8 +1,10 @@
-import type { RawEntryWithCollection } from '../../../types/entries.js';
+import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
+import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
 type Props = {
-    entry: RawEntryWithCollection;
-    onSave: () => void;
-    onDelete: () => void;
+    entry: RawEntry;
+    version: DbEntryVersion;
+    onSave: (type: UpdateEntryVersionCommandType) => void;
+    onArchive: () => void;
 };
 declare const EntryHeader: import("svelte").Component<Props, {}, "">;
 type EntryHeader = ReturnType<typeof EntryHeader>;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Entry from './entry.svelte';
 	import { getRemotes } from '../../context/remotes.js';
+	import EntryVersion from './entry-version.svelte';
 
 	const remotes = getRemotes();
 
@@ -13,6 +13,6 @@
 	let { data }: Props = $props();
 </script>
 
-{#await remotes.getEntryById(data.entryId) then entry}
-	<Entry {entry} />
+{#await remotes.getEntryForEntryPage(data.entryId) then entry}
+	<EntryVersion {entry} />
 {/await}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { RawEntry } from '../../../types/entries.js';
+	import Entry from './entry.svelte';
+
+	type Props = {
+		entry: RawEntry;
+	};
+
+	let { entry }: Props = $props();
+
+	const version = $derived(page.url.searchParams.get('version') || '');
+
+	const editingEntry = $derived(
+		entry.versions.find((ver) => ver.id === version) || entry.versions[0]
+	);
+</script>
+
+{#key editingEntry.id}
+	<Entry {entry} {editingEntry} />
+{/key}

package/dist/admin/client/entry/entry-version.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RawEntry } from '../../../types/entries.js';
+type Props = {
+    entry: RawEntry;
+};
+declare const EntryVersion: import("svelte").Component<Props, {}, "">;
+type EntryVersion = ReturnType<typeof EntryVersion>;
+export default EntryVersion;