includio-cms 0.1.4 → 0.5.1

package/dist/admin/components/dashboard/welcome-header.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { authClient } from '../../auth-client.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	let session = authClient.useSession();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const firstName = $derived($session.data?.user?.name?.split(' ')[0] ?? '');
+
+	const lang: Record<InterfaceLanguage, { greeting: (name: string) => string }> = {
+		pl: {
+			greeting: (name) => {
+				const h = new Date().getHours();
+				if (h < 12) return `Dzień dobry, ${name}`;
+				if (h < 18) return `Cześć, ${name}`;
+				return `Dobry wieczór, ${name}`;
+			}
+		},
+		en: {
+			greeting: (name) => {
+				const h = new Date().getHours();
+				if (h < 12) return `Good morning, ${name}`;
+				if (h < 18) return `Good afternoon, ${name}`;
+				return `Good evening, ${name}`;
+			}
+		}
+	};
+
+	const formattedDate = $derived(
+		new Date().toLocaleDateString(interfaceLanguage.current === 'pl' ? 'pl-PL' : 'en-US', {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		})
+	);
+</script>
+
+<section class="welcome-header" aria-label={interfaceLanguage.current === 'pl' ? 'Powitanie' : 'Welcome'}>
+	<div>
+		<h1 class="welcome-title">{lang[interfaceLanguage.current].greeting(firstName)}</h1>
+		<p class="welcome-date"><time datetime={new Date().toISOString().split('T')[0]}>{formattedDate}</time></p>
+	</div>
+</section>

package/dist/admin/components/dashboard/welcome-header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WelcomeHeader: import("svelte").Component<Record<string, never>, {}, "">;
+type WelcomeHeader = ReturnType<typeof WelcomeHeader>;
+export default WelcomeHeader;

package/dist/admin/components/fields/{array-field.svelte → blocks-field.svelte}

@@ -13,7 +13,7 @@
 	} from 'sveltekit-superforms';
 	import { joinPath, normalizePath } from '../../utils/objectPath.js';
 	import type {
-		ArrayField,
+		BlocksField,
 		ObjectField as ObjectFieldType,
 		ObjectFieldData
 	} from '../../../types/fields.js';
@@ -46,7 +46,7 @@
 	}
 
 	type Props = {
-		field: ArrayField;
+		field: BlocksField;
 		form: SuperForm<T>;
 		path: FormPathLeaves<T, ObjectFieldData[] | undefined>;
 		focusedPath?: string | null;
@@ -295,7 +295,7 @@
 					{#if objectField}
 						<Accordion.Item value={index.toString()} class="border-0" data-depth={depth + 1}>
 							<Accordion.Trigger
-								class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none dark:bg-slate-800/30 dark:hover:bg-slate-700/40 dark:border-white/[0.08]"
+								class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none"
 							>
 								<div class="flex grow items-center justify-between gap-4">
 									<div class="flex items-center gap-4">
@@ -353,7 +353,7 @@
 								</div>
 							</Accordion.Trigger>
 							<Accordion.Content
-								class="space-y-4 rounded-b-md border border-t-0 dark:bg-slate-900/30 dark:shadow-[inset_0_2px_4px_rgb(0_0_0/0.1)] dark:border-white/[0.08]"
+								class="space-y-4 rounded-b-md border border-t-0"
 								style="padding: {Math.max(4, 16 - depth * 3)}px;"
 							>
 								{@const itemPath = joinPath(path, index)}

package/dist/admin/components/fields/{array-field.svelte.d.ts → blocks-field.svelte.d.ts}

@@ -1,8 +1,8 @@
 import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-import type { ArrayField, ObjectFieldData } from '../../../types/fields.js';
+import type { BlocksField, ObjectFieldData } from '../../../types/fields.js';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
-        field: ArrayField;
+        field: BlocksField;
         form: SuperForm<T>;
         path: FormPathLeaves<T, ObjectFieldData[] | undefined>;
         focusedPath?: string | null;
@@ -28,6 +28,6 @@ interface $$IsomorphicComponent {
     <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const ArrayField: $$IsomorphicComponent;
-type ArrayField<T extends Record<string, unknown>> = InstanceType<typeof ArrayField<T>>;
-export default ArrayField;
+declare const BlocksField: $$IsomorphicComponent;
+type BlocksField<T extends Record<string, unknown>> = InstanceType<typeof BlocksField<T>>;
+export default BlocksField;

package/dist/admin/components/fields/content-field.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import {
+		formFieldProxy,
+		type FormFieldProxy,
+		type FormPathLeaves,
+		type SuperForm
+	} from 'sveltekit-superforms';
+	import ContentEditor from '../tiptap/content-editor.svelte';
+	import type { ContentField } from '../../../types/fields.js';
+	import type { StructuredContentDoc } from '../../../types/structured-content.js';
+
+	type Props = {
+		field: ContentField;
+		form: SuperForm<T>;
+		path: FormPathLeaves<T, StructuredContentDoc | undefined>;
+	};
+
+	let { field, form, path, ...props }: Props = $props();
+
+	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<StructuredContentDoc | undefined>;
+</script>
+
+<ContentEditor bind:value={$value} inlineBlocks={field.inlineBlocks} />

package/dist/admin/components/fields/content-field.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+import type { ContentField } from '../../../types/fields.js';
+import type { StructuredContentDoc } from '../../../types/structured-content.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        field: ContentField;
+        form: SuperForm<T>;
+        path: FormPathLeaves<T, StructuredContentDoc | undefined>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ContentField: $$IsomorphicComponent;
+type ContentField<T extends Record<string, unknown>> = InstanceType<typeof ContentField<T>>;
+export default ContentField;

package/dist/admin/components/fields/field-renderer.svelte

@@ -32,13 +32,13 @@
 
 	const interfaceLanguage = useInterfaceLanguage();
 
-	const fieldsWithNoDescription: FieldType[] = ['boolean', 'object', 'array', 'seo'];
-	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'array', 'seo'];
+	const fieldsWithNoDescription: FieldType[] = ['boolean', 'object', 'blocks', 'seo'];
+	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'blocks', 'seo'];
 
-	const fieldsWithAlternativeDescription: FieldType[] = ['image', 'media', 'object', 'array'];
+	const fieldsWithAlternativeDescription: FieldType[] = ['image', 'media', 'object', 'blocks'];
 
-	function isTextField(field: Field): field is Extract<Field, { type: 'text' | 'richtext' }> {
-		return ['text', 'richtext'].includes(field.type);
+	function isTextField(field: Field): field is Extract<Field, { type: 'text' | 'richtext' | 'content' }> {
+		return ['text', 'richtext', 'content'].includes(field.type);
 	}
 
 	function isRadioField(field: Field): field is Extract<Field, { type: 'radio' }> {
@@ -106,7 +106,7 @@
 			{#snippet children({ props })}
 				<div class="space-y-2">
 					{#if field.label && !fieldsWithNoLabel.includes(field.type)}
-						<RequiredLabel required={field.required} class={field.type === 'array' ? 'text-lg font-medium' : ''}>
+						<RequiredLabel required={field.required} class={field.type === 'blocks' ? 'text-lg font-medium' : ''}>
 							{getLocalizedLabel(field.label, interfaceLanguage.current)}
 						</RequiredLabel>
 					{/if}
@@ -121,8 +121,10 @@
 						<LazyField loader={() => import('./media-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-24" />
 					{:else if field.type === 'file'}
 						<LazyField loader={() => import('./file-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-12" />
+					{:else if field.type === 'blocks'}
+						<LazyField loader={() => import('./blocks-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'array'}
-						<LazyField loader={() => import('./array-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./simple-array-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-12" />
 					{:else if field.type === 'object'}
 						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'slug'}

package/dist/admin/components/fields/image-field.svelte

@@ -108,7 +108,7 @@
 								<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
 									<button
 										type="button"
-										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-slate-900/80 dark:hover:bg-slate-900"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
 										onclick={(e) => {
 											e.stopPropagation();
 											currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1;
@@ -118,7 +118,7 @@
 									</button>
 									<button
 										type="button"
-										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-slate-900/80 dark:hover:bg-slate-900"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
 										onclick={(e) => {
 											e.stopPropagation();
 											currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0;

package/dist/admin/components/fields/media-field.svelte

@@ -280,14 +280,14 @@
 											<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
 												<button
 													type="button"
-													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-slate-900/80 dark:hover:bg-slate-900"
+													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
 													onclick={(e) => { e.stopPropagation(); currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1; }}
 												>
 													<ChevronLeft class="h-5 w-5" />
 												</button>
 												<button
 													type="button"
-													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-slate-900/80 dark:hover:bg-slate-900"
+													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
 													onclick={(e) => { e.stopPropagation(); currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0; }}
 												>
 													<ChevronRight class="h-5 w-5" />

package/dist/admin/components/fields/seo-field.svelte

@@ -4,23 +4,27 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>">
 	import {
-		formFieldProxy,
-		type FormFieldProxy,
 		type FormPathLeaves,
 		type SuperForm
 	} from 'sveltekit-superforms';
 	import FieldRenderer from './field-renderer.svelte';
 	import { joinPath } from '../../utils/objectPath.js';
+	import { getAtPath, setAtPath } from '../../utils/objectPath.js';
 	import type {
 		Field,
 		ImageField,
-		ObjectFieldData,
 		SeoField,
 		SeoFieldData,
 		TextField
 	} from '../../../types/fields.js';
-	// import { onMount } from 'svelte';
-	import * as Item from '../../../components/ui/item/index.js';
+	import { untrack } from 'svelte';
+	import slugify from '../../imports/slugify.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	type Props = {
 		field: SeoField;
@@ -30,31 +34,89 @@
 
 	let { field, form, path, ...props }: Props = $props();
 
+	const { form: formData } = form;
+
+	const labels = {
+		slug: {
+			label: { en: 'URL Slug', pl: 'Slug URL' },
+			description: {
+				en: 'Page address shown in the browser bar',
+				pl: 'Adres strony widoczny w pasku przeglądarki'
+			}
+		},
+		canonicalUrl: {
+			label: { en: 'Canonical URL', pl: 'Adres kanoniczny' },
+			description: {
+				en: 'If this content appears at another address, enter the original URL',
+				pl: 'Jeśli ta treść pojawia się pod innym adresem, podaj oryginalny URL'
+			}
+		},
+		title: {
+			label: { en: 'SEO Title', pl: 'Tytuł SEO' },
+			description: {
+				en: 'Appears in search results and browser tabs (50–60 characters)',
+				pl: 'Widoczny w wynikach wyszukiwania i zakładce przeglądarki (50–60 znaków)'
+			}
+		},
+		description: {
+			label: { en: 'Description', pl: 'Opis' },
+			description: {
+				en: 'Short summary for search engines (120–160 characters)',
+				pl: 'Krótkie podsumowanie dla wyszukiwarek (120–160 znaków)'
+			}
+		},
+		keywords: {
+			label: { en: 'Keywords', pl: 'Słowa kluczowe' },
+			description: {
+				en: 'Comma-separated list of keywords',
+				pl: 'Lista słów kluczowych oddzielonych przecinkami'
+			}
+		},
+		ogImage: {
+			label: { en: 'Social media image', pl: 'Obraz w mediach społecznościowych' },
+			description: {
+				en: 'Image displayed when sharing this page on social media',
+				pl: 'Obraz wyświetlany przy udostępnianiu strony w mediach społecznościowych'
+			}
+		},
+		customCode: {
+			label: { en: 'Custom code', pl: 'Własny kod' },
+			description: {
+				en: 'Additional HTML inserted into the page <head>',
+				pl: 'Dodatkowy HTML wstawiany do sekcji <head> strony'
+			}
+		}
+	};
+
 	const slugField: TextField = {
 		type: 'text',
 		slug: 'slug',
-		label: 'Slug',
+		label: labels.slug.label,
+		description: labels.slug.description,
 		required: true
 	};
 
 	const canonicalUrlField: TextField = {
 		type: 'text',
 		slug: 'canonicalUrl',
-		label: 'Canonical Url',
+		label: labels.canonicalUrl.label,
+		description: labels.canonicalUrl.description,
 		required: false
 	};
 
 	const titleField: TextField = {
 		type: 'text',
 		slug: 'title',
-		label: 'Title',
+		label: labels.title.label,
+		description: labels.title.description,
 		required: true
 	};
 
 	const descriptionField: TextField = {
 		type: 'text',
 		slug: 'description',
-		label: 'Description',
+		label: labels.description.label,
+		description: labels.description.description,
 		required: false,
 		multiline: true
 	};
@@ -62,7 +124,8 @@
 	const keyWordsField: TextField = {
 		type: 'text',
 		slug: 'keywords',
-		label: 'Keywords',
+		label: labels.keywords.label,
+		description: labels.keywords.description,
 		required: false,
 		multiline: true
 	};
@@ -70,14 +133,16 @@
 	const ogImageField: ImageField = {
 		type: 'image',
 		slug: 'ogImage',
-		label: 'Open Graph Image',
+		label: labels.ogImage.label,
+		description: labels.ogImage.description,
 		required: false
 	};
 
 	const customCodeField: TextField = {
 		type: 'text',
 		slug: 'customCode',
-		label: 'Custom Code',
+		label: labels.customCode.label,
+		description: labels.customCode.description,
 		required: false,
 		multiline: true
 	};
@@ -91,19 +156,134 @@
 		ogImageField,
 		customCodeField
 	];
+
+	// Helper: read a value from formData, handling both localized (object) and plain (string) values
+	function readSourceValue(sourcePath: string): string | undefined {
+		const raw = ($formData as Record<string, unknown>)[sourcePath];
+		if (typeof raw === 'string') return raw;
+		if (raw && typeof raw === 'object') {
+			return (raw as Record<string, string>)[contentLanguage.current];
+		}
+		return undefined;
+	}
+
+	// Helper: read value at a dot-path from formData
+	function readPath(dotPath: string): string | undefined {
+		const val = getAtPath($formData as Record<string, unknown>, dotPath);
+		return typeof val === 'string' ? val : undefined;
+	}
+
+	// Character count for current language
+	let titleLength = $derived.by(() => {
+		const val = readPath(joinPath(String(path), 'title', contentLanguage.current));
+		return val?.length ?? 0;
+	});
+	let descLength = $derived.by(() => {
+		const val = readPath(joinPath(String(path), 'description', contentLanguage.current));
+		return val?.length ?? 0;
+	});
+
+	function charHintClass(len: number, min: number, max: number): string {
+		if (len === 0) return 'text-muted-foreground';
+		if (len >= min && len <= max) return 'text-success';
+		if (len < min) return 'text-warning';
+		return 'text-destructive';
+	}
+
+	// Auto-gen: track last auto-generated values per language
+	let lastAutoSlugs: Record<string, string> = {};
+	let lastAutoTitles: Record<string, string> = {};
+
+	// slugSource → auto-gen seo.slug per language
+	$effect(() => {
+		if (!field.slugSource) return;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.slugSource];
+		if (!sourceRaw) return;
+
+		untrack(() => {
+			const pairs: [string, string][] =
+				typeof sourceRaw === 'string'
+					? [[contentLanguage.current, sourceRaw]]
+					: typeof sourceRaw === 'object'
+						? Object.entries(sourceRaw as Record<string, string>).filter(([, v]) => typeof v === 'string' && v)
+						: [];
+
+			let changed = false;
+			for (const [lang, text] of pairs) {
+				const targetPath = joinPath(String(path), 'slug', lang);
+				const current = getAtPath($formData as Record<string, unknown>, targetPath) as string | undefined;
+				if (!current || current === lastAutoSlugs[lang]) {
+					const newSlug = slugify(String(text), { lower: true, strict: true, trim: true });
+					if (newSlug !== current) {
+						setAtPath($formData as Record<string, unknown>, targetPath, newSlug);
+						changed = true;
+					}
+					lastAutoSlugs[lang] = newSlug;
+				}
+			}
+			if (changed) $formData = $formData;
+		});
+	});
+
+	// titleSource → auto-fill seo.title per language
+	$effect(() => {
+		if (!field.titleSource) return;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.titleSource];
+		if (!sourceRaw) return;
+
+		untrack(() => {
+			const pairs: [string, string][] =
+				typeof sourceRaw === 'string'
+					? [[contentLanguage.current, sourceRaw]]
+					: typeof sourceRaw === 'object'
+						? Object.entries(sourceRaw as Record<string, string>).filter(([, v]) => typeof v === 'string' && v)
+						: [];
+
+			let changed = false;
+			for (const [lang, text] of pairs) {
+				const targetPath = joinPath(String(path), 'title', lang);
+				const current = getAtPath($formData as Record<string, unknown>, targetPath) as string | undefined;
+				if (!current || current === lastAutoTitles[lang]) {
+					if (text !== current) {
+						setAtPath($formData as Record<string, unknown>, targetPath, text);
+						changed = true;
+					}
+					lastAutoTitles[lang] = text;
+				}
+			}
+			if (changed) $formData = $formData;
+		});
+	});
 </script>
 
-<Item.Root variant="outline">
-	<Item.Content>
-		<Item.Title class="mb-4 text-lg">SEO</Item.Title>
-		<div class="space-y-4">
-			{#each fields as f}
-				<FieldRenderer
-					field={f}
-					form={form as SuperForm<Record<string, unknown>>}
-					path={joinPath(path, f.slug)}
-				/>
-			{/each}
+<div class="space-y-4">
+	{#each fields as f}
+		<div>
+			<FieldRenderer
+				field={f}
+				form={form as SuperForm<Record<string, unknown>>}
+				path={joinPath(path, f.slug)}
+			/>
+			{#if f.slug === 'title'}
+				<p class="mt-1 text-xs {charHintClass(titleLength, 50, 60)}">
+					{titleLength}/60
+					{#if titleLength > 0 && titleLength < 50}
+						— {getLocalizedLabel({ en: 'a bit short', pl: 'trochę za krótko' }, interfaceLanguage.current)}
+					{:else if titleLength > 60}
+						— {getLocalizedLabel({ en: 'too long', pl: 'za długo' }, interfaceLanguage.current)}
+					{/if}
+				</p>
+			{/if}
+			{#if f.slug === 'description'}
+				<p class="mt-1 text-xs {charHintClass(descLength, 120, 160)}">
+					{descLength}/160
+					{#if descLength > 0 && descLength < 120}
+						— {getLocalizedLabel({ en: 'a bit short', pl: 'trochę za krótko' }, interfaceLanguage.current)}
+					{:else if descLength > 160}
+						— {getLocalizedLabel({ en: 'too long', pl: 'za długo' }, interfaceLanguage.current)}
+					{/if}
+				</p>
+			{/if}
 		</div>
-	</Item.Content>
-</Item.Root>
+	{/each}
+</div>