includio-cms 0.1.4 → 0.5.0

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

package/dist/admin/components/dashboard/stat-card.svelte

@@ -12,7 +12,7 @@
 	let { label, value, trend, icon, variant = 'default' }: Props = $props();
 
 	const variantClasses = {
-		default: 'text-slate-900 dark:text-slate-100',
+		default: 'text-foreground',
 		success: 'text-emerald-600 dark:text-emerald-400',
 		warning: 'text-amber-600 dark:text-amber-400',
 		danger: 'text-rose-600 dark:text-rose-400'
@@ -21,7 +21,7 @@
 
 <div class="flex items-center gap-3">
 	{#if icon}
-		<div class="rounded-lg bg-slate-100 p-2 dark:bg-slate-800">
+		<div class="rounded-lg bg-muted p-2">
 			{@render icon()}
 		</div>
 	{/if}

package/dist/admin/components/dashboard/tip-of-the-day.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	interface Tip {
+		text: Record<InterfaceLanguage, string>;
+		link?: string;
+	}
+
+	const tips: Tip[] = [
+		{
+			text: {
+				pl: 'Dodaj opis do każdego zdjęcia — osoby niewidome używają czytników ekranu, które odczytują ten tekst zamiast obrazu.',
+				en: 'Add a description to every image — blind users rely on screen readers that read this text instead of the image.'
+			},
+			link: 'https://www.w3.org/WAI/tutorials/images/'
+		},
+		{
+			text: {
+				pl: 'Używaj nagłówków w kolejności (H1 → H2 → H3). Pomijanie poziomów dezorientuje użytkowników czytników ekranu.',
+				en: 'Use headings in order (H1 → H2 → H3). Skipping levels confuses screen reader users.'
+			},
+			link: 'https://www.w3.org/WAI/tutorials/page-structure/headings/'
+		},
+		{
+			text: {
+				pl: 'Linki powinny opisywać cel — „Czytaj artykuł" jest lepsze niż „Kliknij tutaj".',
+				en: 'Links should describe their destination — "Read the article" is better than "Click here".'
+			},
+			link: 'https://www.w3.org/WAI/tips/writing/#provide-informative-unique-page-titles'
+		},
+		{
+			text: {
+				pl: 'Kontrast tekstu powinien wynosić min. 4.5:1 (WCAG AA). Używaj jasnego tła z ciemnym tekstem lub odwrotnie.',
+				en: 'Text contrast should be at least 4.5:1 (WCAG AA). Use light backgrounds with dark text or vice versa.'
+			}
+		},
+		{
+			text: {
+				pl: 'Tabele danych potrzebują nagłówków (<th>) — bez nich czytnik ekranu nie powie, co oznacza dana komórka.',
+				en: 'Data tables need headers (<th>) — without them, screen readers can\'t tell what each cell means.'
+			}
+		},
+		{
+			text: {
+				pl: 'Formularze powinny mieć etykiety (<label>) powiązane z polami. Placeholder nie zastępuje etykiety.',
+				en: 'Form fields should have associated labels. Placeholder text is not a replacement for labels.'
+			}
+		},
+		{
+			text: {
+				pl: 'Treść powinna być zrozumiała dla jak najszerszego grona odbiorców. Unikaj żargonu i skomplikowanych zdań.',
+				en: 'Content should be understandable by the widest audience possible. Avoid jargon and complex sentences.'
+			}
+		},
+		{
+			text: {
+				pl: 'Nie przekazuj informacji wyłącznie kolorem — osoby z daltonizmem mogą ich nie rozróżnić. Dodaj ikonę lub tekst.',
+				en: 'Don\'t convey information through color alone — people with color blindness may not distinguish them. Add an icon or text.'
+			}
+		},
+		{
+			text: {
+				pl: 'Wideo powinno mieć napisy — pomagają osobom niesłyszącym i tym, którzy oglądają bez dźwięku.',
+				en: 'Videos should have captions — they help deaf users and those watching without sound.'
+			}
+		},
+		{
+			text: {
+				pl: 'Język strony powinien być ustawiony w atrybucie lang. Pomaga to czytnikom ekranu poprawnie wymawiać treść.',
+				en: 'The page language should be set in the lang attribute. This helps screen readers pronounce content correctly.'
+			}
+		}
+	];
+
+	function getDayOfYear(): number {
+		const now = new Date();
+		const start = new Date(now.getFullYear(), 0, 0);
+		const diff = now.getTime() - start.getTime();
+		return Math.floor(diff / (1000 * 60 * 60 * 24));
+	}
+
+	const tip = $derived(tips[getDayOfYear() % tips.length]);
+
+	const labelText: Record<InterfaceLanguage, string> = {
+		pl: 'Wskazówka dnia',
+		en: 'Tip of the day'
+	};
+
+	const learnMore: Record<InterfaceLanguage, string> = {
+		pl: 'Dowiedz się więcej →',
+		en: 'Learn more →'
+	};
+</script>
+
+<div class="dash-card dash-card--tip tip-card">
+	<div class="tip-card-label">
+		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/></svg>
+		{labelText[interfaceLanguage.current]}
+	</div>
+	<p class="tip-card-text">{tip.text[interfaceLanguage.current]}</p>
+	{#if tip.link}
+		<a href={tip.link} class="tip-card-link" target="_blank" rel="noopener noreferrer">
+			{learnMore[interfaceLanguage.current]}
+		</a>
+	{/if}
+</div>

package/dist/admin/components/dashboard/tip-of-the-day.svelte.d.ts

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

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" />