includio-cms 0.1.4 → 0.5.1

package/dist/admin/components/fields/text-field-wrapper.svelte

@@ -5,23 +5,26 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
 	import type {
 		RichtextField as RichtextFieldType,
+		ContentField as ContentFieldType,
 		TextField as TextFieldType
 	} from '../../../types/fields.js';
 	import * as Tabs from '../../../components/ui/tabs/index.js';
 	import * as Form from '../../../components/ui/form/index.js';
 	import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 	import TextField from './text-field.svelte';
-	import { joinPath } from '../../utils/objectPath.js';
+	import { joinPath, setAtPath } from '../../utils/objectPath.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import RequiredLabel from './required-label.svelte';
+	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	type Props = {
-		field: TextFieldType | RichtextFieldType;
+		field: TextFieldType | RichtextFieldType | ContentFieldType;
 		form: SuperForm<T>;
 		path: FormPathLeaves<T, string | undefined>;
 	};
@@ -34,11 +37,83 @@
 	const hasConstraints = $derived(
 		isText && (field.minLength !== undefined || field.maxLength !== undefined || field.pattern !== undefined)
 	);
+	const isMultiLang = $derived(contentLanguage.all.length > 1);
+	const defaultLang = $derived(contentLanguage.all[0]);
+	const isEditingNonDefault = $derived(isMultiLang && contentLanguage.current !== defaultLang);
+
+	const copyLang: Record<InterfaceLanguage, { copyFrom: (lang: string) => string }> = {
+		en: { copyFrom: (lang: string) => `Copy from ${lang.toUpperCase()}` },
+		pl: { copyFrom: (lang: string) => `Kopiuj z ${lang.toUpperCase()}` }
+	};
+
+	const refLang: Record<InterfaceLanguage, { reference: (lang: string) => string }> = {
+		en: { reference: (lang: string) => `${lang.toUpperCase()} (reference)` },
+		pl: { reference: (lang: string) => `${lang.toUpperCase()} (referencja)` }
+	};
 
 	function resolvePathValue(data: Record<string, unknown>, dotPath: string): unknown {
 		return dotPath.split('.').reduce<unknown>((obj, key) => (obj as Record<string, unknown>)?.[key], data);
 	}
 
+	/** Check if a value is empty for copy-from logic. */
+	function isValueEmpty(value: unknown): boolean {
+		if (value == null) return true;
+		if (typeof value === 'string') return value.length === 0;
+		if (typeof value === 'object' && 'type' in (value as Record<string, unknown>)) {
+			const doc = value as { type: string; content?: unknown[] };
+			return doc.type === 'doc' && (!doc.content || doc.content.length === 0);
+		}
+		return false;
+	}
+
+	/** Get source language value for a given field. */
+	function getSourceValue(lang: string): unknown {
+		return resolvePathValue($formData, joinPath(path, lang));
+	}
+
+	/** Find first language that has content (for copy-from). */
+	function findSourceLang(currentLang: string): string | null {
+		for (const l of contentLanguage.all) {
+			if (l === currentLang) continue;
+			const val = getSourceValue(l);
+			if (!isValueEmpty(val)) return l;
+		}
+		return null;
+	}
+
+	/** Copy value from source language to current language. */
+	function copyFrom(sourceLang: string, targetLang: string) {
+		const sourceVal = getSourceValue(sourceLang);
+		if (sourceVal == null) return;
+
+		const targetPath = joinPath(path, targetLang);
+		const value =
+			field.type === 'content' && typeof sourceVal === 'object'
+				? structuredClone(sourceVal)
+				: sourceVal;
+		setAtPath($formData as Record<string, unknown>, targetPath, value);
+		$formData = $formData; // trigger reactivity
+	}
+
+	/** Get reference text for display. */
+	function getReferenceText(lang: string): string {
+		const val = getSourceValue(lang);
+		if (typeof val === 'string') return val;
+		if (val && typeof val === 'object' && 'type' in (val as Record<string, unknown>)) {
+			// Content field — show placeholder
+			return interfaceLanguage.current === 'pl'
+				? '(treść w edytorze)'
+				: '(editor content)';
+		}
+		return '';
+	}
+
+	/** Get per-language fill status for status dots. */
+	function getLangFillStatus(lang: string): boolean {
+		const val = getSourceValue(lang);
+		return !isValueEmpty(val);
+	}
+
 	function constraintHint(): string {
 		if (field.type !== 'text') return '';
 		const parts: string[] = [];
@@ -51,6 +126,18 @@
 		}
 		return parts.join('');
 	}
+
+	function dotTooltip(): string {
+		const parts = contentLanguage.all.map((l) => {
+			const filled = getLangFillStatus(l);
+			const statusText =
+				interfaceLanguage.current === 'pl'
+					? filled ? 'uzupełnione' : 'puste'
+					: filled ? 'filled' : 'empty';
+			return `${l.toUpperCase()}: ${statusText}`;
+		});
+		return parts.join(', ');
+	}
 </script>
 
 <Tabs.Root
@@ -65,7 +152,37 @@
 				<Form.Control>
 					{#snippet children({ props })}
 						{#if field.label}
-							<RequiredLabel required={field.required}>{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
+							<div class="flex items-center gap-1.5">
+								<RequiredLabel required={field.required}>{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
+								<!-- Status dots -->
+								{#if isMultiLang && (field.required || contentLanguage.all.some(l => getLangFillStatus(l)))}
+									<span
+										class="inline-flex items-center gap-1"
+										title={dotTooltip()}
+										aria-label={dotTooltip()}
+									>
+										{#each contentLanguage.all as l}
+											<span
+												class="inline-block size-1.5 rounded-full {getLangFillStatus(l) ? 'bg-[var(--success)]' : 'bg-[var(--warning)]'}"
+											></span>
+										{/each}
+									</span>
+								{/if}
+							</div>
+						{/if}
+
+						<!-- Reference block -->
+						{#if contentLanguage.referenceMode && isMultiLang}
+							{@const refSource = findSourceLang(lang)}
+							{#if refSource}
+								{@const refText = getReferenceText(refSource)}
+								{#if refText}
+									<div class="mb-2 rounded-lg border-l-2 border-[var(--primary)]/20 bg-[var(--muted)]/50 p-3 text-sm text-[var(--muted-foreground)]">
+										<div class="mb-1 text-xs font-semibold text-[var(--text-light)]">{refLang[interfaceLanguage.current].reference(refSource)}</div>
+										<div class="whitespace-pre-wrap">{refText}</div>
+									</div>
+								{/if}
+							{/if}
 						{/if}
 
 						{#if field.type === 'text'}
@@ -86,6 +203,33 @@
 							{:catch}
 								<div class="h-32 animate-pulse rounded-md bg-accent"></div>
 							{/await}
+						{:else if field.type === 'content'}
+							{#await import('./content-field.svelte') then { default: ContentField }}
+								<ContentField
+									{...props}
+									{field}
+									{form}
+									path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
+								/>
+							{:catch}
+								<div class="h-32 animate-pulse rounded-md bg-accent"></div>
+							{/await}
+						{/if}
+
+						<!-- Copy from button -->
+						{#if isMultiLang}
+							{@const currentVal = resolvePathValue($formData, joinPath(path, lang))}
+							{@const sourceLang = isValueEmpty(currentVal) ? findSourceLang(lang) : null}
+							{#if sourceLang}
+								<button
+									type="button"
+									class="mt-1 inline-flex items-center gap-1 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--primary)]"
+									onclick={() => copyFrom(sourceLang, lang)}
+								>
+									<ClipboardIcon class="size-3" />
+									{copyLang[interfaceLanguage.current].copyFrom(sourceLang)}
+								</button>
+							{/if}
 						{/if}
 					{/snippet}
 				</Form.Control>

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

@@ -1,8 +1,8 @@
-import type { RichtextField as RichtextFieldType, TextField as TextFieldType } from '../../../types/fields.js';
+import type { RichtextField as RichtextFieldType, ContentField as ContentFieldType, TextField as TextFieldType } from '../../../types/fields.js';
 import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
-        field: TextFieldType | RichtextFieldType;
+        field: TextFieldType | RichtextFieldType | ContentFieldType;
         form: SuperForm<T>;
         path: FormPathLeaves<T, string | undefined>;
     };

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

@@ -80,11 +80,12 @@
 			let url = Object.values(currUrl)[i];
 
 			if (url.length > 2) {
-				let results = (await remotes.getEntries({
-					dataLike: { seo: { slug: url } }
-				})) as EntryWithSeo[];
+				const [slugResults, titleResults] = await Promise.all([
+					remotes.getEntries({ dataLike: { seo: { slug: url } } }),
+					remotes.getEntries({ dataLike: { seo: { title: url } } })
+				]) as [EntryWithSeo[], EntryWithSeo[]];
 
-				suggestions = [...suggestions, ...results];
+				suggestions = [...suggestions, ...slugResults, ...titleResults];
 				suggestions = suggestions.filter(
 					(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
 				);

package/dist/admin/components/layout/app-sidebar.svelte

@@ -2,38 +2,41 @@
 	import * as Sidebar from '../../../components/ui/sidebar/index.js';
 	import type { ComponentProps } from 'svelte';
 	import NavMain from './nav-main.svelte';
+	import NavSingletons from './nav-singletons.svelte';
 	import NavCollections from './nav-collections.svelte';
-	import NavUser from './nav-user.svelte';
+	import NavFooter from './nav-footer.svelte';
 	import NavForms from './nav-forms.svelte';
 	import NavSearch from './nav-search.svelte';
-	import logo from '../../assets/logo.svg';
-
+	import { resolve } from '$app/paths';
 	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 </script>
 
-<Sidebar.Root
-	collapsible="offcanvas"
-	class="border-none bg-white/70 backdrop-blur-xl dark:bg-slate-900/70"
-	{...restProps}
->
-	<Sidebar.Header class="h-(--header-height) shrink-0 flex-row items-center border-b border-sidebar-border px-4">
-		<img
-			src={logo}
-			alt="cms logo"
-			width="100"
-			height="22"
-			class="dark:brightness-0 dark:invert"
-		/>
+<Sidebar.Root collapsible="icon" class="bg-sidebar" {...restProps}>
+	<Sidebar.Header
+		class="border-sidebar-border h-[52px] shrink-0 flex-row items-center border-b px-3 group-data-[collapsible=icon]:px-2"
+	>
+		<a
+			href={resolve('/admin')}
+			class="flex items-baseline gap-px"
+			aria-label="AriaCMS — strona główna"
+		>
+			<span class="text-primary text-base font-extrabold">Aria</span>
+			<span
+				class="text-primary text-[11px] font-light tracking-[0.15em] uppercase group-data-[collapsible=icon]:hidden"
+				>CMS</span
+			>
+		</a>
 	</Sidebar.Header>
-	<Sidebar.Content>
-		<div class="px-0 pt-3 pb-1">
-			<NavSearch />
+	<Sidebar.Content class="gap-0">
+		<NavSearch />
+		<div class="py-1">
+			<NavMain />
+			<NavSingletons />
+			<NavCollections />
+			<NavForms />
 		</div>
-		<NavMain />
-		<NavCollections />
-		<NavForms />
 	</Sidebar.Content>
-	<Sidebar.Footer>
-		<NavUser />
+	<Sidebar.Footer class="p-0">
+		<NavFooter />
 	</Sidebar.Footer>
 </Sidebar.Root>

package/dist/admin/components/layout/lang.d.ts

@@ -9,12 +9,18 @@ export declare const sidebarLang: Record<string, {
         dashboard: string;
         users: string;
     };
+    singletons: {
+        title: string;
+    };
     collections: {
         title: string;
     };
     forms: {
         title: string;
     };
+    footer: {
+        help: string;
+    };
     search: {
         placeholder: string;
         noResults: string;

package/dist/admin/components/layout/lang.js

@@ -7,15 +7,21 @@ export const sidebarLang = {
         main: {
             platform: 'Platforma',
             media: 'Biblioteka mediów',
-            dashboard: 'Kokpit',
+            dashboard: 'Pulpit',
             users: 'Użytkownicy'
         },
+        singletons: {
+            title: 'Pojedyncze'
+        },
         collections: {
             title: 'Kolekcje'
         },
         forms: {
             title: 'Formularze'
         },
+        footer: {
+            help: 'Pomoc'
+        },
         search: {
             placeholder: 'Szukaj...',
             noResults: 'Brak wyników',
@@ -36,12 +42,18 @@ export const sidebarLang = {
             dashboard: 'Dashboard',
             users: 'Users'
         },
+        singletons: {
+            title: 'Singletons'
+        },
         collections: {
             title: 'Collections'
         },
         forms: {
             title: 'Forms'
         },
+        footer: {
+            help: 'Help'
+        },
         search: {
             placeholder: 'Search...',
             noResults: 'No results',