includio-cms 0.24.1 → 0.26.0

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)}

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

@@ -6,6 +6,7 @@
 	import PlusIcon from '@tabler/icons-svelte/icons/plus';
 	import BuildingStoreIcon from '@tabler/icons-svelte/icons/building-store';
 	import { getRemotes } from '../../../sveltekit/index.js';
+	import { errorMessages } from '../../i18n/errors.js';
 	import type { ShopField } from '../../../types/fields.js';
 
 	type Props = { field: ShopField };
@@ -150,7 +151,7 @@
 			await dataQuery.refresh();
 			successMessage = 'Zapisano dane sklepu.';
 		} catch (err) {
-			errorMessage = err instanceof Error ? err.message : 'Nie udało się zapisać';
+			errorMessage = err instanceof Error ? err.message : errorMessages.server.saveFailed.pl;
 		} finally {
 			saving = false;
 		}
@@ -183,9 +184,10 @@
 						<span class="text-muted-foreground text-xs font-semibold">
 							Cena bazowa ({inputMode === 'net' ? 'netto' : 'brutto'}, PLN)
 						</span>
-						<div class="bg-muted inline-flex rounded-md p-0.5 text-xs">
+						<div class="bg-muted inline-flex rounded-md p-0.5 text-xs" role="group" aria-label="Tryb wpisywania ceny">
 							<button
 								type="button"
+								aria-pressed={inputMode === 'net'}
 								class="rounded px-2 py-0.5 {inputMode === 'net'
 									? 'bg-background text-primary font-semibold shadow-sm'
 									: 'text-muted-foreground'}"
@@ -195,6 +197,7 @@
 							</button>
 							<button
 								type="button"
+								aria-pressed={inputMode === 'gross'}
 								class="rounded px-2 py-0.5 {inputMode === 'gross'
 									? 'bg-background text-primary font-semibold shadow-sm'
 									: 'text-muted-foreground'}"
@@ -274,9 +277,10 @@
 								<span class="text-muted-foreground text-xs">
 									Zmiana ceny ({v.priceDeltaMode === 'net' ? 'netto' : 'brutto'}, PLN)
 								</span>
-								<div class="bg-muted inline-flex rounded-md p-0.5 text-[10px]">
+								<div class="bg-muted inline-flex rounded-md p-0.5 text-[10px]" role="group" aria-label="Tryb zmiany ceny wariantu {i + 1}">
 									<button
 										type="button"
+										aria-pressed={v.priceDeltaMode === 'net'}
 										class="rounded px-1.5 py-0.5 {v.priceDeltaMode === 'net'
 											? 'bg-background text-primary font-semibold shadow-sm'
 											: 'text-muted-foreground'}"
@@ -286,6 +290,7 @@
 									</button>
 									<button
 										type="button"
+										aria-pressed={v.priceDeltaMode === 'gross'}
 										class="rounded px-1.5 py-0.5 {v.priceDeltaMode === 'gross'
 											? 'bg-background text-primary font-semibold shadow-sm'
 											: 'text-muted-foreground'}"
@@ -314,7 +319,7 @@
 							</label>
 						{/if}
 						<div class="col-span-2 flex justify-end">
-							<Button type="button" variant="ghost" size="sm" onclick={() => removeVariant(i)}>
+							<Button type="button" variant="ghost" size="sm" onclick={() => removeVariant(i)} aria-label="Usuń wariant {i + 1}">
 								<TrashIcon class="size-4" />
 							</Button>
 						</div>