includio-cms 0.5.3 → 0.5.7

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import * as Command from '../../../components/ui/command/index.js';
+	import Check from '@tabler/icons-svelte/icons/check';
+	import { cn } from '../../../utils.js';
+	import Spinner from '../../../components/ui/spinner/spinner.svelte';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type LabelEntry = { id: string; label: string };
+
+	type Props = {
+		open: boolean;
+		title: string;
+		searchPlaceholder: string;
+		noResults: string;
+		closeLabel: string;
+		multiple: boolean;
+		selected: string[];
+		options: LabelEntry[];
+		loading: boolean;
+		searchValue: string;
+		onSearchChange: (value: string) => void;
+		onSelect: (id: string) => void;
+		onClose: () => void;
+	};
+
+	let {
+		open = $bindable(),
+		title,
+		searchPlaceholder,
+		noResults,
+		closeLabel,
+		multiple,
+		selected,
+		options,
+		loading,
+		searchValue = $bindable(),
+		onSearchChange,
+		onSelect,
+		onClose
+	}: Props = $props();
+
+	function isSelected(id: string): boolean {
+		return selected.includes(id);
+	}
+
+	function handleOpenChange(next: boolean) {
+		if (!next) {
+			onClose();
+		}
+		open = next;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="flex max-h-[80vh] flex-col gap-0 p-0 sm:max-w-md">
+		<Dialog.Header class="border-b px-4 py-3">
+			<Dialog.Title class="text-base font-semibold">{title}</Dialog.Title>
+			<Dialog.Description class="sr-only">{title}</Dialog.Description>
+		</Dialog.Header>
+
+		<Command.Root shouldFilter={false} class="flex flex-1 flex-col overflow-hidden">
+			<Command.Input
+				autofocus
+				placeholder={searchPlaceholder}
+				value={searchValue}
+				onValueChange={(v) => onSearchChange(v)}
+				class="h-10"
+			/>
+			<Command.List class="max-h-[50vh] flex-1 overflow-y-auto">
+				{#if loading}
+					<div class="flex items-center justify-center py-6">
+						<Spinner class="size-5" />
+					</div>
+				{:else if options.length === 0}
+					<Command.Empty>{noResults}</Command.Empty>
+				{:else}
+					<Command.Group>
+						{#each options as option (option.id)}
+							<Command.Item
+								value={option.id}
+								onSelect={() => onSelect(option.id)}
+								class="flex items-center gap-2"
+								aria-selected={isSelected(option.id)}
+							>
+								<div
+									class={cn(
+										'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+										isSelected(option.id)
+											? 'border-primary bg-primary text-primary-foreground'
+											: 'border-muted-foreground/30'
+									)}
+								>
+									{#if isSelected(option.id)}
+										<Check class="h-3 w-3" />
+									{/if}
+								</div>
+								<span class="flex-1 truncate">{option.label}</span>
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				{/if}
+			</Command.List>
+		</Command.Root>
+
+		{#if multiple && selected.length > 0}
+			<div class="border-t px-4 py-2 text-sm text-muted-foreground">
+				<span aria-live="polite">{selected.length} wybranych</span>
+			</div>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,22 @@
+type LabelEntry = {
+    id: string;
+    label: string;
+};
+type Props = {
+    open: boolean;
+    title: string;
+    searchPlaceholder: string;
+    noResults: string;
+    closeLabel: string;
+    multiple: boolean;
+    selected: string[];
+    options: LabelEntry[];
+    loading: boolean;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    onSelect: (id: string) => void;
+    onClose: () => void;
+};
+declare const RelationPickerDialog: import("svelte").Component<Props, {}, "searchValue" | "open">;
+type RelationPickerDialog = ReturnType<typeof RelationPickerDialog>;
+export default RelationPickerDialog;

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

@@ -15,6 +15,7 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { Switch } from '../../../components/ui/switch/index.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const contentLanguage = getContentLanguage();
@@ -86,7 +87,7 @@
 		slug: 'slug',
 		label: labels.slug.label,
 		description: labels.slug.description,
-		required: true
+		required: false
 	};
 
 	const canonicalUrlField: TextField = {
@@ -141,7 +142,6 @@
 	};
 
 	const fields: Field[] = [
-		slugField,
 		canonicalUrlField,
 		titleField,
 		descriptionField,
@@ -187,9 +187,30 @@
 	let lastAutoSlugs: Record<string, string> = {};
 	let lastAutoTitles: Record<string, string> = {};
 
+	// Auto slug toggle: ON by default when slugSource is set
+	// Initializes to false if existing slug differs from what auto-gen would produce
+	let autoSlug = $state((() => {
+		if (!field.slugSource) return false;
+		const sourceRaw = ($formData as Record<string, unknown>)[field.slugSource];
+		if (!sourceRaw) return true;
+		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)
+					: [];
+		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;
+			const expected = slugify(String(text), { lower: true, strict: true, trim: true });
+			if (current != null && current !== expected) return false;
+		}
+		return true;
+	})());
+
 	// slugSource → auto-gen seo.slug per language
 	$effect(() => {
-		if (!field.slugSource) return;
+		if (!field.slugSource || !autoSlug) return;
 		const sourceRaw = ($formData as Record<string, unknown>)[field.slugSource];
 		if (!sourceRaw) return;
 
@@ -205,19 +226,39 @@
 			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;
+				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;
 		});
 	});
 
+	function onAutoSlugToggle(checked: boolean) {
+		if (!checked || !field.slugSource) return;
+		// Regenerate slug from current source when toggling ON
+		const sourceRaw = ($formData as Record<string, unknown>)[field.slugSource];
+		if (!sourceRaw) return;
+		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 newSlug = slugify(String(text), { lower: true, strict: true, trim: true });
+			setAtPath($formData as Record<string, unknown>, targetPath, newSlug);
+			lastAutoSlugs[lang] = newSlug;
+			changed = true;
+		}
+		if (changed) $formData = $formData;
+	}
+
 	// titleSource → auto-fill seo.title per language
 	$effect(() => {
 		if (!field.titleSource) return;
@@ -250,6 +291,21 @@
 </script>
 
 <div class="space-y-4">
+	<!-- Slug field with auto/manual toggle -->
+	<div>
+		{#if field.slugSource}
+			<div class="mb-1.5 flex items-center gap-2">
+				<span class="text-sm font-medium text-muted-foreground">Auto</span>
+				<Switch bind:checked={autoSlug} onCheckedChange={onAutoSlugToggle} />
+			</div>
+		{/if}
+		<FieldRenderer
+			field={slugField}
+			{form}
+			path={joinPath(path, 'slug')}
+			readonly={autoSlug}
+		/>
+	</div>
 	{#each fields as f}
 		<div>
 			<FieldRenderer

package/dist/admin/components/icons/icon-map.d.ts

@@ -0,0 +1,4 @@
+import type { Icon } from '@tabler/icons-svelte';
+export declare const iconMap: Record<string, Icon>;
+export type IconName = keyof typeof iconMap;
+export declare function getIcon(name: IconName | string | undefined): Icon | undefined;

package/dist/admin/components/icons/icon-map.js

@@ -0,0 +1,143 @@
+// Documents & Content
+import IconFile from '@tabler/icons-svelte/icons/file';
+import IconFileText from '@tabler/icons-svelte/icons/file-text';
+import IconFiles from '@tabler/icons-svelte/icons/files';
+import IconArticle from '@tabler/icons-svelte/icons/article';
+import IconNews from '@tabler/icons-svelte/icons/news';
+import IconBook from '@tabler/icons-svelte/icons/book';
+import IconNotebook from '@tabler/icons-svelte/icons/notebook';
+import IconBlockquote from '@tabler/icons-svelte/icons/blockquote';
+// Navigation & Layout
+import IconHome from '@tabler/icons-svelte/icons/home';
+import IconMenu from '@tabler/icons-svelte/icons/menu-2';
+import IconLayout from '@tabler/icons-svelte/icons/layout';
+import IconSitemap from '@tabler/icons-svelte/icons/sitemap';
+import IconLink from '@tabler/icons-svelte/icons/link';
+// People & Users
+import IconUser from '@tabler/icons-svelte/icons/user';
+import IconUsers from '@tabler/icons-svelte/icons/users';
+import IconUserCircle from '@tabler/icons-svelte/icons/user-circle';
+// E-commerce
+import IconShoppingCart from '@tabler/icons-svelte/icons/shopping-cart';
+import IconShoppingBag from '@tabler/icons-svelte/icons/shopping-bag';
+import IconTag from '@tabler/icons-svelte/icons/tag';
+import IconTags from '@tabler/icons-svelte/icons/tags';
+import IconReceipt from '@tabler/icons-svelte/icons/receipt';
+import IconCreditCard from '@tabler/icons-svelte/icons/credit-card';
+// Media
+import IconPhoto from '@tabler/icons-svelte/icons/photo';
+import IconCamera from '@tabler/icons-svelte/icons/camera';
+import IconVideo from '@tabler/icons-svelte/icons/video';
+import IconMusic from '@tabler/icons-svelte/icons/music';
+import IconMicrophone from '@tabler/icons-svelte/icons/microphone';
+// Communication
+import IconMail from '@tabler/icons-svelte/icons/mail';
+import IconMessage from '@tabler/icons-svelte/icons/message';
+import IconMessages from '@tabler/icons-svelte/icons/messages';
+import IconSend from '@tabler/icons-svelte/icons/send';
+import IconPhone from '@tabler/icons-svelte/icons/phone';
+// Organization
+import IconFolder from '@tabler/icons-svelte/icons/folder';
+import IconCategory from '@tabler/icons-svelte/icons/category';
+import IconBookmark from '@tabler/icons-svelte/icons/bookmark';
+import IconArchive from '@tabler/icons-svelte/icons/archive';
+import IconClipboardList from '@tabler/icons-svelte/icons/clipboard-list';
+// Settings & System
+import IconSettings from '@tabler/icons-svelte/icons/settings';
+import IconAdjustments from '@tabler/icons-svelte/icons/adjustments';
+import IconTool from '@tabler/icons-svelte/icons/tool';
+import IconDatabase from '@tabler/icons-svelte/icons/database';
+// Misc
+import IconCalendar from '@tabler/icons-svelte/icons/calendar';
+import IconClock from '@tabler/icons-svelte/icons/clock';
+import IconMap from '@tabler/icons-svelte/icons/map';
+import IconMapPin from '@tabler/icons-svelte/icons/map-pin';
+import IconGlobe from '@tabler/icons-svelte/icons/world';
+import IconStar from '@tabler/icons-svelte/icons/star';
+import IconHeart from '@tabler/icons-svelte/icons/heart';
+import IconBulb from '@tabler/icons-svelte/icons/bulb';
+import IconPalette from '@tabler/icons-svelte/icons/palette';
+import IconCode from '@tabler/icons-svelte/icons/code';
+import IconBriefcase from '@tabler/icons-svelte/icons/briefcase';
+import IconBuilding from '@tabler/icons-svelte/icons/building';
+import IconSchool from '@tabler/icons-svelte/icons/school';
+import IconTrophy from '@tabler/icons-svelte/icons/trophy';
+import IconChartBar from '@tabler/icons-svelte/icons/chart-bar';
+import IconLock from '@tabler/icons-svelte/icons/lock';
+import IconShield from '@tabler/icons-svelte/icons/shield';
+import IconHelp from '@tabler/icons-svelte/icons/help';
+export const iconMap = {
+    // Documents & Content
+    file: IconFile,
+    'file-text': IconFileText,
+    files: IconFiles,
+    article: IconArticle,
+    news: IconNews,
+    book: IconBook,
+    notebook: IconNotebook,
+    blockquote: IconBlockquote,
+    // Navigation & Layout
+    home: IconHome,
+    menu: IconMenu,
+    layout: IconLayout,
+    sitemap: IconSitemap,
+    link: IconLink,
+    // People & Users
+    user: IconUser,
+    users: IconUsers,
+    'user-circle': IconUserCircle,
+    // E-commerce
+    'shopping-cart': IconShoppingCart,
+    'shopping-bag': IconShoppingBag,
+    tag: IconTag,
+    tags: IconTags,
+    receipt: IconReceipt,
+    'credit-card': IconCreditCard,
+    // Media
+    photo: IconPhoto,
+    camera: IconCamera,
+    video: IconVideo,
+    music: IconMusic,
+    microphone: IconMicrophone,
+    // Communication
+    mail: IconMail,
+    message: IconMessage,
+    messages: IconMessages,
+    send: IconSend,
+    phone: IconPhone,
+    // Organization
+    folder: IconFolder,
+    category: IconCategory,
+    bookmark: IconBookmark,
+    archive: IconArchive,
+    'clipboard-list': IconClipboardList,
+    // Settings & System
+    settings: IconSettings,
+    adjustments: IconAdjustments,
+    tool: IconTool,
+    database: IconDatabase,
+    // Misc
+    calendar: IconCalendar,
+    clock: IconClock,
+    map: IconMap,
+    'map-pin': IconMapPin,
+    globe: IconGlobe,
+    star: IconStar,
+    heart: IconHeart,
+    bulb: IconBulb,
+    palette: IconPalette,
+    code: IconCode,
+    briefcase: IconBriefcase,
+    building: IconBuilding,
+    school: IconSchool,
+    trophy: IconTrophy,
+    'chart-bar': IconChartBar,
+    lock: IconLock,
+    shield: IconShield,
+    help: IconHelp
+};
+export function getIcon(name) {
+    if (!name)
+        return undefined;
+    return iconMap[name];
+}

package/dist/admin/components/layout/header-actions.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { toggleMode } from 'mode-watcher';
-	import Sun from '@tabler/icons-svelte/icons/sun';
-	import Moon from '@tabler/icons-svelte/icons/moon';
 	import { useInterfaceLanguage, locales } from '../../state/interface-language.svelte.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -13,13 +10,6 @@
 </script>
 
 <div class="flex items-center gap-1">
-	<button
-		onclick={toggleMode}
-		class="text-foreground/70 hover:text-foreground flex size-8 items-center justify-center rounded-md border border-black/10 transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/10"
-	>
-		<Sun class="size-4 dark:hidden" />
-		<Moon class="hidden size-4 dark:block" />
-	</button>
 	<button
 		onclick={toggleLanguage}
 		class="text-foreground/70 hover:text-foreground flex size-8 items-center justify-center rounded-md border border-black/10 text-xs font-semibold transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/10"

package/dist/admin/components/layout/nav-collections.svelte

@@ -7,29 +7,35 @@
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { page } from '$app/state';
 	import FolderIcon from '@tabler/icons-svelte/icons/folder';
+	import { getIcon } from '../icons/icon-map.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
 	function isActive(url: string) {
-		return page.url.pathname.startsWith(url);
+		const pathname = page.url.pathname;
+		return pathname === url || pathname.startsWith(url + '/');
 	}
 
-	async function loadCollections() {
-		const collections = await remotes.getCollections();
-		const counts = await Promise.all(
-			collections.map((c: { slug: string }) =>
-				remotes
-					.getRawEntries({ slug: c.slug, limit: 1, offset: 0 })
-					.then((r: { total: number }) => r.total)
-					.catch(() => 0)
-			)
-		);
-		return collections.map((c: any, i: number) => ({ ...c, entryCount: counts[i] }));
-	}
+	const collectionsQuery = $derived(remotes.getCollections());
+
+	let countsMap: Map<string, number> = $state(new Map());
+
+	$effect(() => {
+		const collections = collectionsQuery.current;
+		if (!collections) return;
+		const map = new Map<string, number>();
+		for (const col of collections) {
+			const q = remotes.getRawEntries({ slug: col.slug, limit: 1, offset: 0 });
+			if (q.ready && q.current) {
+				map.set(col.slug, q.current.total);
+			}
+		}
+		countsMap = map;
+	});
 </script>
 
-{#await loadCollections()}
+{#if !collectionsQuery.ready}
 	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
 		<Sidebar.GroupLabel
 			>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
@@ -41,47 +47,39 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:then items}
-	{#if items.length > 0}
-		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-				>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
-			>
-			<Sidebar.Menu>
-				{#each items as item (item.slug)}
-					{@const name =
-						getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
-					{@const url = `/admin/collections/${item.slug}`}
-					{@const active = isActive(url)}
-					<Sidebar.MenuItem>
-						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-							{#snippet child({ props })}
-								<a {...props} href={url}>
-									{#if item.sidebarIcon}
-										<item.sidebarIcon
-											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-										/>
-									{:else}
-										<FolderIcon
-											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-										/>
-									{/if}
-									<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
-										>{name}</span
+{:else if collectionsQuery.current && collectionsQuery.current.length > 0}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+			>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
+		>
+		<Sidebar.Menu>
+			{#each collectionsQuery.current as item (item.slug)}
+				{@const name =
+					getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
+				{@const url = `/admin/collections/${item.slug}`}
+				{@const active = isActive(url)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+						{#snippet child({ props })}
+							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? FolderIcon}
+							<a {...props} href={url}>
+								<ResolvedIcon
+									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+								/>
+								<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
+									>{name}</span
+								>
+								{#if countsMap.get(item.slug)}
+									<span
+										class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
+										>{countsMap.get(item.slug)}</span
 									>
-									{#if item.entryCount > 0}
-										<span
-											class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold"
-										>
-											{item.entryCount}
-										</span>
-									{/if}
-								</a>
-							{/snippet}
-						</Sidebar.MenuButton>
-					</Sidebar.MenuItem>
-				{/each}
-			</Sidebar.Menu>
-		</Sidebar.Group>
-	{/if}
-{/await}
+								{/if}
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.Group>
+{/if}

package/dist/admin/components/layout/nav-collections.svelte.d.ts

@@ -1,18 +1,3 @@
-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 NavCollections: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavCollections = InstanceType<typeof NavCollections>;
+declare const NavCollections: import("svelte").Component<Record<string, never>, {}, "">;
+type NavCollections = ReturnType<typeof NavCollections>;
 export default NavCollections;