includio-cms 0.25.0 → 0.27.0

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

@@ -332,7 +332,12 @@
 	{/if}
 
 	<Dialog.Root bind:open={dialogOpen}>
-		<Dialog.Content class="h-[85vh] w-full max-w-6xl! sm:max-w-6xl! overflow-hidden p-0 flex flex-col">
+		<Dialog.Content
+			fullscreenMobile
+			class="flex h-[85vh] w-full max-w-6xl! flex-col overflow-hidden p-0 sm:max-w-6xl!"
+		>
+			<Dialog.Title class="sr-only">{lang[interfaceLanguage.current].selectMedia}</Dialog.Title>
+			<Dialog.Description class="sr-only">{lang[interfaceLanguage.current].selectMedia}</Dialog.Description>
 			<MediaSelector
 				bind:selected={value}
 				multiple={field.multiple}
@@ -345,7 +350,16 @@
 
 	<!-- Lightbox for images -->
 	<Dialog.Root bind:open={lightboxOpen}>
-		<Dialog.Content class="max-w-[90vw] max-h-[90vh] p-2 bg-black/95 border-none">
+		<Dialog.Content
+			fullscreenMobile
+			class="max-h-[90vh] max-w-[90vw]! border-none bg-black/95 p-2"
+		>
+			<Dialog.Title class="sr-only">
+				{lightboxFile?.alt || lightboxFile?.name || ''}
+			</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				{lightboxFile?.alt || lightboxFile?.name || ''}
+			</Dialog.Description>
 			{#if lightboxFile}
 				<div class="checkered-lightbox flex items-center justify-center">
 					<img

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

@@ -9,7 +9,6 @@
 	import type { ObjectField, ObjectFieldData } from '../../../types/fields.js';
 	import { evaluateCondition } from '../../utils/fieldCondition.js';
 	import { onMount } from 'svelte';
-	import * as Item from '../../../components/ui/item/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { cn } from '../../../utils.js';
@@ -90,12 +89,33 @@
 			{@render content()}
 		</div>
 	{:else}
-		<!-- Top-level: with border -->
-		<Item.Root variant="outline">
-			<Item.Content>
-				<Item.Title class="mb-4 text-lg">{getLocalizedLabel(field.label, interfaceLanguage.current)}</Item.Title>
+		<!-- Top-level: full-width card -->
+		<div class="object-card">
+			<div class="object-card-header">{getLocalizedLabel(field.label, interfaceLanguage.current)}</div>
+			<div class="object-card-body">
 				{@render content()}
-			</Item.Content>
-		</Item.Root>
+			</div>
+		</div>
 	{/if}
 {/if}
+
+<style>
+	.object-card {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		box-shadow: 0 1px 2px rgba(43, 37, 88, 0.04);
+		overflow: hidden;
+	}
+
+	.object-card-header {
+		font-size: 13px;
+		font-weight: 700;
+		color: var(--foreground);
+		padding: 12px 16px 0;
+	}
+
+	.object-card-body {
+		padding: 10px 16px 16px;
+	}
+</style>

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

@@ -15,11 +15,18 @@
 
 	const interfaceLanguage = useInterfaceLanguage();
 
+	const clearLabel: Record<string, string> = {
+		pl: 'Wyczyść wybór',
+		en: 'Clear selection'
+	};
+
 	onMount(() => {
 		if (value === undefined) {
 			value = field.defaultValue ?? '';
 		}
 	});
+
+	const canClear = $derived(!field.required && typeof value === 'string' && value !== '');
 </script>
 
 {#if value !== undefined}
@@ -35,4 +42,19 @@
 			</div>
 		{/each}
 	</RadioGroup.Root>
+
+	{#if canClear}
+		<!--
+			Native radios have no native "uncheck" gesture. For optional fields,
+			expose an explicit Clear link so the editor can return to the
+			"no value" state without picking a sentinel option.
+		-->
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-foreground mt-1 self-start text-xs underline-offset-2 hover:underline"
+			onclick={() => (value = '')}
+		>
+			{clearLabel[interfaceLanguage.current] ?? clearLabel.en}
+		</button>
+	{/if}
 {/if}

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

@@ -16,6 +16,7 @@
 	import Spinner from '../../../components/ui/spinner/spinner.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { droppable, draggable } from '@thisux/sveltednd';
 	import { arrayMove } from '../../utils/arrayMove.js';
@@ -23,6 +24,7 @@
 	import { flip } from 'svelte/animate';
 	import { fade } from 'svelte/transition';
 	import RelationPickerDialog from './relation-picker-dialog.svelte';
+	import { LiveRegion } from '../../../components/ui/live-region/index.js';
 
 	const lang: Record<
 		InterfaceLanguage,
@@ -79,6 +81,7 @@
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	type Props = {
 		field: RelationField;
@@ -90,6 +93,13 @@
 	const multiple = $derived(field.multiple === true);
 	const t = $derived(lang[interfaceLanguage.current]);
 
+	// Collection singular labels come from config Pascal/Title-cased (it is the
+	// noun's nominative — "Projekt", "Post"). Inside a sentence it should be
+	// lowercase ("Wybierz projekt"). Cheap rule: first char to lowercase.
+	function inSentence(label: string): string {
+		return label ? label.charAt(0).toLowerCase() + label.slice(1) : label;
+	}
+
 	// Ensure value is array when multiple
 	onMount(() => {
 		if (multiple && !Array.isArray(value)) {
@@ -140,7 +150,8 @@
 
 		const results = await remotes.getEntryLabels({
 			slug: field.collection,
-			ids: missing
+			ids: missing,
+			language: contentLanguage.current
 		});
 		const newCache = new Map(labelCache);
 		for (const r of results) {
@@ -181,7 +192,8 @@
 				slug: field.collection,
 				search: search || undefined,
 				status: 'published',
-				limit: 100
+				limit: 100,
+				language: contentLanguage.current
 			});
 			pickerOptions = results.map((r) => ({ id: r.id, label: r.label }));
 			if (results.length > 0) {
@@ -200,7 +212,8 @@
 			const results = await remotes.getEntryLabels({
 				slug: field.collection,
 				status: 'published',
-				limit: 100
+				limit: 100,
+				language: contentLanguage.current
 			});
 			pickerOptions = results.map((r) => ({ id: r.id, label: r.label }));
 			totalCount = results.length > 0 ? results[0].total : 0;
@@ -366,7 +379,7 @@
 			aria-haspopup="dialog"
 		>
 			<Plus class="h-4 w-4" />
-			{t.add} {singularLabel}
+			{t.select} {inSentence(singularLabel)}
 		</button>
 
 		<RelationPickerDialog
@@ -393,10 +406,12 @@
 				aria-expanded={popoverOpen}
 			>
 				<Plus class="h-4 w-4" />
-				{t.add} {singularLabel}
+				{t.select} {inSentence(singularLabel)}
 			</Popover.Trigger>
 
-			<Popover.Content class="min-w-[280px] p-0">
+			<Popover.Content
+				class="w-[var(--bits-popover-anchor-width)] min-w-[280px] max-w-[calc(100vw-1rem)] p-0"
+			>
 				<Command.Root>
 					<Command.Input
 						autofocus
@@ -434,107 +449,118 @@
 		</Popover.Root>
 	{/if}
 
-	<!-- Live region for screen readers -->
-	<div class="sr-only" aria-live="polite" role="status">
-		{liveMessage || `${getArrayValue().length} ${t.selected}`}
-	</div>
+	<LiveRegion message={liveMessage || `${getArrayValue().length} ${t.selected}`} />
 {:else}
-	<!-- Single-select mode -->
-	{#if value}
-		<!-- Show selected chip -->
-		<div class="flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
-			<span class="flex-1 truncate">{singleLabel}</span>
+	<!-- Single-select mode: the combobox trigger shows the selected label
+	     (or a placeholder), with an inline X to clear. Standard shadcn/bits-ui
+	     combobox UX — replaces the previous chip + separate trigger pair. -->
+	{@const placeholder = `${t.select} ${inSentence(singularLabel)}`}
+	{@const triggerLabel = singleLabel || placeholder}
+
+	<div class="relative">
+		{#if useDialog}
 			<button
 				type="button"
-				class="shrink-0 text-muted-foreground hover:text-destructive"
-				onclick={clearValue}
-				aria-label={t.clear}
-			>
-				<X class="h-3.5 w-3.5" />
-			</button>
-		</div>
-	{/if}
-
-	{#if useDialog}
-		<button
-			type="button"
-			class={cn(
-				buttonVariants({ variant: 'outline' }),
-				'w-full justify-between',
-				!value && 'text-muted-foreground',
-				value && 'mt-1.5'
-			)}
-			onclick={openPicker}
-			role="combobox"
-			aria-expanded={pickerOpen}
-			aria-haspopup="dialog"
-			{...props}
-		>
-			{`${t.select} ${singularLabel}`}
-			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
-		</button>
-
-		<RelationPickerDialog
-			bind:open={pickerOpen}
-			title="{t.dialogTitle} {singularLabel}"
-			searchPlaceholder="{t.search} {collectionLabel}..."
-			noResults={t.noResults}
-			closeLabel={t.closeDialog}
-			{multiple}
-			selected={value ? [value as string] : []}
-			options={pickerOptions}
-			loading={pickerLoading}
-			bind:searchValue
-			onSearchChange={handleSearchChange}
-			onSelect={toggleItem}
-			onClose={closePicker}
-		/>
-	{:else}
-		<Popover.Root bind:open={popoverOpen}>
-			<Popover.Trigger
-				id={triggerId}
 				class={cn(
 					buttonVariants({ variant: 'outline' }),
 					'w-full justify-between',
 					!value && 'text-muted-foreground',
-					value && 'mt-1.5'
+					value && 'pr-16'
 				)}
+				onclick={openPicker}
 				role="combobox"
-				aria-expanded={popoverOpen}
+				aria-expanded={pickerOpen}
+				aria-haspopup="dialog"
 				{...props}
 			>
-				{`${t.select} ${singularLabel}`}
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
-			</Popover.Trigger>
+				<span class="truncate text-left">{triggerLabel}</span>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+			</button>
 
-			<Popover.Content class="min-w-[280px] p-0">
-				<Command.Root>
-					<Command.Input
-						autofocus
-						placeholder="{t.search} {collectionLabel}..."
-						class="h-9"
-					/>
-					<Command.List>
-						<Command.Empty>{t.noResults}</Command.Empty>
-						<Command.Group>
-							{#each pickerOptions as option (option.id)}
-								<Command.Item
-									value={option.label}
-									onSelect={() => {
-										value = option.id;
-										closePopoverAndFocus();
-									}}
-								>
-									{option.label}
-									<Check
-										class={cn('ml-auto', option.id !== value && 'text-transparent')}
-									/>
-								</Command.Item>
-							{/each}
-						</Command.Group>
-					</Command.List>
-				</Command.Root>
-			</Popover.Content>
-		</Popover.Root>
-	{/if}
+			<RelationPickerDialog
+				bind:open={pickerOpen}
+				title="{t.dialogTitle} {inSentence(singularLabel)}"
+				searchPlaceholder="{t.search} {collectionLabel}..."
+				noResults={t.noResults}
+				closeLabel={t.closeDialog}
+				{multiple}
+				selected={value ? [value as string] : []}
+				options={pickerOptions}
+				loading={pickerLoading}
+				bind:searchValue
+				onSearchChange={handleSearchChange}
+				onSelect={toggleItem}
+				onClose={closePicker}
+			/>
+		{:else}
+			<Popover.Root bind:open={popoverOpen}>
+				<Popover.Trigger
+					id={triggerId}
+					class={cn(
+						buttonVariants({ variant: 'outline' }),
+						'w-full justify-between',
+						!value && 'text-muted-foreground',
+						value && 'pr-16'
+					)}
+					role="combobox"
+					aria-expanded={popoverOpen}
+					{...props}
+				>
+					<span class="truncate text-left">{triggerLabel}</span>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+				</Popover.Trigger>
+
+				<Popover.Content
+				class="w-[var(--bits-popover-anchor-width)] min-w-[280px] max-w-[calc(100vw-1rem)] p-0"
+			>
+					<Command.Root>
+						<Command.Input
+							autofocus
+							placeholder="{t.search} {collectionLabel}..."
+							class="h-9"
+						/>
+						<Command.List>
+							<Command.Empty>{t.noResults}</Command.Empty>
+							<Command.Group>
+								{#each pickerOptions as option (option.id)}
+									<Command.Item
+										value={option.label}
+										onSelect={() => {
+											value = option.id;
+											closePopoverAndFocus();
+										}}
+									>
+										{option.label}
+										<Check
+											class={cn('ml-auto', option.id !== value && 'text-transparent')}
+										/>
+									</Command.Item>
+								{/each}
+							</Command.Group>
+						</Command.List>
+					</Command.Root>
+				</Popover.Content>
+			</Popover.Root>
+		{/if}
+
+		{#if value}
+			<!--
+				Absolute-positioned clear button next to the chevron. Sits inside
+				the trigger's right padding (`pr-16` above) so it doesn't overlap
+				the label, and stops propagation to avoid opening the picker.
+			-->
+			<button
+				type="button"
+				class="text-muted-foreground hover:text-destructive absolute top-1/2 right-9 -translate-y-1/2 rounded-sm p-0.5"
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					clearValue();
+				}}
+				aria-label={t.clear}
+			>
+				<X class="h-3.5 w-3.5" />
+			</button>
+		{/if}
+	</div>
 {/if}

package/dist/admin/components/fields/relation-picker-dialog.svelte

@@ -67,9 +67,9 @@
 				onValueChange={(v) => onSearchChange(v)}
 				class="h-10"
 			/>
-			<Command.List class="max-h-[50vh] flex-1 overflow-y-auto">
+			<Command.List class="max-h-[50vh] flex-1 overflow-y-auto" aria-busy={loading}>
 				{#if loading}
-					<div class="flex items-center justify-center py-6">
+					<div class="flex items-center justify-center py-6" role="status" aria-label="Ładowanie wyników">
 						<Spinner class="size-5" />
 					</div>
 				{:else if options.length === 0}

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

@@ -103,14 +103,6 @@
 		required: false
 	};
 
-	const titleField: TextField = {
-		type: 'text',
-		slug: 'title',
-		label: labels.title.label,
-		description: labels.title.description,
-		required: true
-	};
-
 	const descriptionField: TextField = {
 		type: 'text',
 		slug: 'description',
@@ -149,7 +141,6 @@
 
 	const fields: Field[] = [
 		canonicalUrlField,
-		titleField,
 		descriptionField,
 		keyWordsField,
 		ogImageField,
@@ -179,9 +170,11 @@
 		return 'text-destructive';
 	}
 
-	// Slug field proxy for direct input binding
+	// Slug + title field proxies for direct input binding
 	const slugPath = joinPath(String(path), 'slug');
+	const titlePath = joinPath(String(path), 'title');
 	const { value: slugValue } = formFieldProxy(form, slugPath as FormPathLeaves<Record<string, unknown>>);
+	const { value: titleValue } = formFieldProxy(form, titlePath as FormPathLeaves<Record<string, unknown>>);
 
 	// Auto-gen: track last auto-generated value
 	let lastAutoSlug = '';
@@ -229,24 +222,46 @@
 		$formData = $formData;
 	}
 
-	// titleSource → auto-fill seo.title (flat)
+	// Auto title toggle (analogiczne do autoSlug)
+	let autoTitle = $state((() => {
+		if (!field.titleSource) return false;
+		if (wasPublished) return false;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.titleSource];
+		if (!sourceRaw || typeof sourceRaw !== 'string') return true;
+		const current = getAtPath($formData as Record<string, unknown>, titlePath) as string | undefined;
+		if (current != null && current !== '' && current !== sourceRaw) return false;
+		return true;
+	})());
+
+	// titleSource → auto-fill seo.title (flat) — tylko gdy autoTitle włączony
 	$effect(() => {
-		if (!field.titleSource) return;
+		if (!field.titleSource || !autoTitle) return;
 		const sourceRaw = ($formData as Record<string, unknown>)[field.titleSource];
 		if (!sourceRaw || typeof sourceRaw !== 'string') return;
 
 		untrack(() => {
-			const titlePath = joinPath(String(path), 'title');
 			const current = getAtPath($formData as Record<string, unknown>, titlePath) as string | undefined;
-			if (!current || current === lastAutoTitle) {
-				if (sourceRaw !== current) {
-					setAtPath($formData as Record<string, unknown>, titlePath, sourceRaw);
-					$formData = $formData;
-				}
-				lastAutoTitle = sourceRaw;
+			if (sourceRaw !== current) {
+				setAtPath($formData as Record<string, unknown>, titlePath, sourceRaw);
+				$formData = $formData;
 			}
+			lastAutoTitle = sourceRaw;
 		});
 	});
+
+	function onAutoTitleToggle(checked: boolean) {
+		if (!checked || !field.titleSource) return;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.titleSource];
+		if (!sourceRaw || typeof sourceRaw !== 'string') return;
+		setAtPath($formData as Record<string, unknown>, titlePath, sourceRaw);
+		lastAutoTitle = sourceRaw;
+		$formData = $formData;
+	}
+
+	// User edycja inputa tytułu → wyłącz auto (analogiczne do slug-field cichy flip)
+	function onTitleInput() {
+		if (autoTitle) autoTitle = false;
+	}
 </script>
 
 <div class="space-y-4">
@@ -267,6 +282,31 @@
 		</div>
 		<Form.Description>{getLocalizedLabel(labels.slug.description, interfaceLanguage.current)}</Form.Description>
 	</Form.Field>
+
+	<!-- Title field with auto/manual toggle (analogiczne do slug) -->
+	<Form.Field {form} name={titlePath} class="space-y-1">
+		<div class="flex items-center justify-between">
+			<Form.Label>{getLocalizedLabel(labels.title.label, interfaceLanguage.current)}</Form.Label>
+			{#if field.titleSource}
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-medium text-muted-foreground">Auto</span>
+					<Switch bind:checked={autoTitle} onCheckedChange={onAutoTitleToggle} />
+				</div>
+			{/if}
+		</div>
+		<Input bind:value={$titleValue} readonly={autoTitle} oninput={onTitleInput} />
+		<Form.Description>{getLocalizedLabel(labels.title.description, interfaceLanguage.current)}</Form.Description>
+		<p class="mt-1 text-xs {charHintClass(titleLength, 50, 60)}" aria-live="polite">
+			{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>
+		<Form.FieldErrors />
+	</Form.Field>
+
 	{#each fields as f}
 		<div>
 			<FieldRenderer
@@ -274,18 +314,8 @@
 				{form}
 				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)}">
+				<p class="mt-1 text-xs {charHintClass(descLength, 120, 160)}" aria-live="polite">
 					{descLength}/160
 					{#if descLength > 0 && descLength < 120}
 						— {getLocalizedLabel({ en: 'a bit short', pl: 'trochę za krótko' }, interfaceLanguage.current)}