includio-cms 0.36.8 → 0.37.0

package/dist/admin/components/layout/context-switcher.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { getIcon } from '../icons/icon-map.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import {
+		getActiveContext,
+		setActiveContext,
+		CONTENT_CONTEXT
+	} from '../../state/active-context.svelte.js';
+	import { sidebarLang } from './lang.js';
+	import { goto } from '$app/navigation';
+	import ChevronDownIcon from '@tabler/icons-svelte/icons/chevron-down';
+	import FileTextIcon from '@tabler/icons-svelte/icons/file-text';
+	import CheckIcon from '@tabler/icons-svelte/icons/check';
+	import type { Localized } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	const modulesQuery = $derived(remotes.getModules());
+	const modules = $derived(modulesQuery.current ?? []);
+	const moduleIds = $derived(modules.map((m) => m.id));
+	const active = $derived(getActiveContext(moduleIds));
+	const lang = $derived(sidebarLang[interfaceLanguage.current].contexts);
+
+	function labelFor(id: string): string {
+		if (id === CONTENT_CONTEXT) return lang.content;
+		const m = modules.find((x) => x.id === id);
+		if (!m) return id;
+		return (
+			getLocalizedLabel(
+				(m.context.contextLabel ?? m.label) as Localized,
+				interfaceLanguage.current
+			) || m.id
+		);
+	}
+
+	function iconFor(id: string) {
+		if (id === CONTENT_CONTEXT) return FileTextIcon;
+		const m = modules.find((x) => x.id === id);
+		return (m && getIcon(m.icon)) || FileTextIcon;
+	}
+
+	function choose(id: string) {
+		setActiveContext(id);
+		if (id === CONTENT_CONTEXT) {
+			goto('/admin');
+			return;
+		}
+		const m = modules.find((x) => x.id === id);
+		goto(m?.context.landingUrl ?? '/admin');
+	}
+</script>
+
+{#if modulesQuery.ready && modules.length >= 1}
+	{@const ActiveIcon = iconFor(active)}
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger
+			aria-label={lang.switch}
+			class="border-input hover:bg-lavender-lighter hover:border-lavender focus-visible:ring-ring ml-auto inline-flex cursor-pointer items-center gap-1.5 rounded-md border bg-transparent px-2 py-1 text-[13px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-1 group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:px-1.5"
+		>
+			<ActiveIcon class="text-primary size-4 shrink-0" />
+			<span class="text-primary group-data-[collapsible=icon]:hidden">{labelFor(active)}</span>
+			<ChevronDownIcon class="size-3.5 shrink-0 opacity-60 group-data-[collapsible=icon]:hidden" />
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content align="start" class="w-52">
+			{@const ContentIcon = iconFor(CONTENT_CONTEXT)}
+			<DropdownMenu.Item onSelect={() => choose(CONTENT_CONTEXT)}>
+				<ContentIcon class="mr-2 size-4" />
+				<span class="flex-1">{labelFor(CONTENT_CONTEXT)}</span>
+				{#if active === CONTENT_CONTEXT}
+					<CheckIcon class="text-primary size-4" />
+				{/if}
+			</DropdownMenu.Item>
+			<DropdownMenu.Separator />
+			{#each modules as m (m.id)}
+				{@const MIcon = iconFor(m.id)}
+				<DropdownMenu.Item onSelect={() => choose(m.id)}>
+					<MIcon class="mr-2 size-4" />
+					<span class="flex-1">{labelFor(m.id)}</span>
+					{#if active === m.id}
+						<CheckIcon class="text-primary size-4" />
+					{/if}
+				</DropdownMenu.Item>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{/if}

package/dist/admin/components/layout/context-switcher.svelte.d.ts

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

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

@@ -42,4 +42,8 @@ export declare const sidebarLang: Record<string, {
         breadcrumb: string;
         skipToMain: string;
     };
+    contexts: {
+        switch: string;
+        content: string;
+    };
 }>;

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

@@ -42,6 +42,10 @@ export const sidebarLang = {
             primary: 'Główna nawigacja',
             breadcrumb: 'Ścieżka okruszków',
             skipToMain: 'Przejdź do głównej treści'
+        },
+        contexts: {
+            switch: 'Przełącz widok',
+            content: 'Treści'
         }
     },
     en: {
@@ -87,6 +91,10 @@ export const sidebarLang = {
             primary: 'Main navigation',
             breadcrumb: 'Breadcrumb',
             skipToMain: 'Skip to main content'
+        },
+        contexts: {
+            switch: 'Switch view',
+            content: 'Content'
         }
     }
 };

package/dist/admin/components/layout/layout-renderer.svelte

@@ -109,7 +109,8 @@
 			const hasError =
 				!!errorPaths &&
 				collectLeafPathsForNodes([child], fields).some((p) => errorPaths!.has(p));
-			return { value, label, child, hasError };
+			const preview = child.type === 'tab' ? child.preview : undefined;
+			return { value, label, child, hasError, preview };
 		});
 	}
 

package/dist/admin/components/layout/layout-tabs.svelte

@@ -11,6 +11,8 @@
 		child: LayoutNode;
 		/** True when a leaf field inside this tab is currently invalid. */
 		hasError: boolean;
+		/** Preview view this tab binds to (`TabNode.preview`), if any. */
+		preview?: string;
 	};
 </script>
 
@@ -22,6 +24,7 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
+	import { getPreviewViewsContext } from '../../client/entry/preview-views-context.svelte.js';
 
 	type Props = {
 		tabs: TabInfo[];
@@ -44,6 +47,17 @@
 
 	let active = $state(initialValue());
 
+	const previewViews = getPreviewViewsContext();
+
+	// Tell the preview which view the active tab wants. Only the URL-synced
+	// (outermost) group drives it, so two tab groups never fight over the preview.
+	// Runs on mount too, so a `?tab=` deep-link lands on the right view.
+	$effect(() => {
+		if (!syncUrl || !previewViews) return;
+		const tab = tabs.find((t) => t.value === active);
+		if (tab) previewViews.onTabActivate(tab.value, tab.preview);
+	});
+
 	// Write the active tab back to the URL (outermost group only). Guard against
 	// the no-op case so we never trigger an infinite replaceState loop.
 	$effect(() => {

package/dist/admin/components/layout/layout-tabs.svelte.d.ts

@@ -9,6 +9,8 @@ export type TabInfo = {
     child: LayoutNode;
     /** True when a leaf field inside this tab is currently invalid. */
     hasError: boolean;
+    /** Preview view this tab binds to (`TabNode.preview`), if any. */
+    preview?: string;
 };
 import type { Snippet } from 'svelte';
 type Props = {

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

@@ -11,16 +11,19 @@
 	import { getIcon } from '../icons/icon-map.js';
 	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
+	let { filterSlugs, ctx }: { filterSlugs?: string[]; ctx?: string } = $props();
+
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 	const breadcrumbs = getBreadcrumbs();
 
 	function isActive(url: string) {
+		const base = url.split('?')[0];
 		const pathname = page.url.pathname;
-		if (pathname === url || pathname.startsWith(url + '/')) return true;
+		if (pathname === base || pathname.startsWith(base + '/')) return true;
 		// Also highlight a collection while editing one of its entries — the entry
 		// page sets a breadcrumb linking back to the collection list.
-		return breadcrumbs.state.some((b) => b.href === url);
+		return breadcrumbs.state.some((b) => b.href === base);
 	}
 
 	const collectionsQuery = $derived(remotes.getCollections());
@@ -41,16 +44,20 @@
 	});
 
 	const items: NavSectionItem[] = $derived(
-		collectionsQuery.current?.map((item) => ({
-			title: getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug,
-			url: `/admin/collections/${item.slug}`,
-			icon: getIcon(item.sidebarIcon) ?? FolderIcon,
-			count: countsMap.get(item.slug)
-		})) ?? []
+		(collectionsQuery.current ?? [])
+			.filter((item) => !filterSlugs || filterSlugs.includes(item.slug))
+			.map((item) => ({
+				title: getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug,
+				url: `/admin/collections/${item.slug}${ctx ? `?ctx=${ctx}` : ''}`,
+				icon: getIcon(item.sidebarIcon) ?? FolderIcon,
+				count: countsMap.get(item.slug)
+			}))
 	);
 </script>
 
-{#if !collectionsQuery.ready}
+{#if filterSlugs && filterSlugs.length === 0}
+	<!-- no surfaced collections in this context -->
+{:else 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

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

@@ -1,3 +1,7 @@
-declare const NavCollections: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    filterSlugs?: string[];
+    ctx?: string;
+};
+declare const NavCollections: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavCollections = ReturnType<typeof NavCollections>;
 export default NavCollections;

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { sidebarLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import CameraIcon from '@tabler/icons-svelte/icons/camera';
+	import UsersIcon from '@tabler/icons-svelte/icons/users';
+	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
+	import { page } from '$app/state';
+	import { authClient } from '../../auth-client.js';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	let session = authClient.useSession();
+
+	const isAdmin = $derived($session.data?.user?.role === 'admin');
+
+	const items: NavSectionItem[] = $derived([
+		{
+			title: sidebarLang[interfaceLanguage.current].main.media,
+			url: '/admin/media',
+			icon: CameraIcon
+		},
+		...(isAdmin
+			? [
+					{
+						title: sidebarLang[interfaceLanguage.current].main.users,
+						url: '/admin/users',
+						icon: UsersIcon
+					},
+					{
+						title: sidebarLang[interfaceLanguage.current].main.maintenance,
+						url: '/admin/maintenance',
+						icon: SettingsIcon
+					}
+				]
+			: [])
+	]);
+
+	function isActive(url: string) {
+		return page.url.pathname.startsWith(url);
+	}
+</script>
+
+<div class="mt-auto">
+	<NavSection {items} {isActive} withTopBorder />
+</div>

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

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

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

@@ -1,49 +1,25 @@
 <script lang="ts">
 	import { sidebarLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import CameraIcon from '@tabler/icons-svelte/icons/camera';
 	import LayoutDashboardIcon from '@tabler/icons-svelte/icons/layout-dashboard';
-	import UsersIcon from '@tabler/icons-svelte/icons/users';
-	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import { page } from '$app/state';
-	import { authClient } from '../../auth-client.js';
+	import type { Icon } from '@tabler/icons-svelte';
 	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
-	const interfaceLanguage = useInterfaceLanguage();
-	let session = authClient.useSession();
+	let { url = '/admin', icon = LayoutDashboardIcon }: { url?: string; icon?: Icon } = $props();
 
-	const isAdmin = $derived($session.data?.user?.role === 'admin');
+	const interfaceLanguage = useInterfaceLanguage();
 
 	const items: NavSectionItem[] = $derived([
 		{
 			title: sidebarLang[interfaceLanguage.current].main.dashboard,
-			url: '/admin',
-			icon: LayoutDashboardIcon
-		},
-		{
-			title: sidebarLang[interfaceLanguage.current].main.media,
-			url: '/admin/media',
-			icon: CameraIcon
-		},
-		...(isAdmin
-			? [
-					{
-						title: sidebarLang[interfaceLanguage.current].main.users,
-						url: '/admin/users',
-						icon: UsersIcon
-					},
-					{
-						title: sidebarLang[interfaceLanguage.current].main.maintenance,
-						url: '/admin/maintenance',
-						icon: SettingsIcon
-					}
-				]
-			: [])
+			url,
+			icon
+		}
 	]);
 
-	function isActive(url: string) {
-		if (url === '/admin') return page.url.pathname === '/admin';
-		return page.url.pathname.startsWith(url);
+	function isActive(u: string) {
+		return page.url.pathname === u.split('?')[0];
 	}
 </script>
 

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

@@ -1,3 +1,8 @@
-declare const NavMain: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Icon } from '@tabler/icons-svelte';
+type $$ComponentProps = {
+    url?: string;
+    icon?: Icon;
+};
+declare const NavMain: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavMain = ReturnType<typeof NavMain>;
 export default NavMain;

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { getIcon } from '../icons/icon-map.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { page } from '$app/state';
+	import BoxIcon from '@tabler/icons-svelte/icons/box';
+	import NavSection, { type NavSectionItem } from './nav-section.svelte';
+	import type { CMSModuleDescriptor } from '../../../types/modules.js';
+	import type { Localized } from '../../../types/languages.js';
+
+	let { module }: { module: CMSModuleDescriptor } = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	function isActive(url: string) {
+		const pathname = page.url.pathname;
+		const base = url.split('?')[0];
+		return pathname === base || pathname.startsWith(base + '/');
+	}
+
+	// Optional reactive badges for sections declaring a `countSource` remote
+	// query (mirrors nav-collections' entry-count pattern). Dormant otherwise.
+	let countsMap: Map<string, number> = $state(new Map());
+	$effect(() => {
+		const map = new Map<string, number>();
+		for (const section of module.context.sections) {
+			if (!section.countSource) continue;
+			const fn = (remotes as Record<string, unknown>)[section.countSource];
+			if (typeof fn !== 'function') continue;
+			const q = (fn as () => { ready: boolean; current: unknown })();
+			if (q.ready && typeof q.current === 'number') map.set(section.key, q.current);
+		}
+		countsMap = map;
+	});
+
+	const label = $derived(
+		getLocalizedLabel(module.label as Localized, interfaceLanguage.current) || module.id
+	);
+	const items: NavSectionItem[] = $derived(
+		module.context.sections.map((s) => ({
+			title: getLocalizedLabel(s.title as Localized, interfaceLanguage.current) || s.url,
+			url: s.url,
+			icon: getIcon(s.icon) ?? BoxIcon,
+			count: countsMap.get(s.key)
+		}))
+	);
+</script>
+
+<NavSection
+	{items}
+	{label}
+	labelIcon={getIcon(module.icon) ?? BoxIcon}
+	{isActive}
+	withTopBorder
+/>

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

@@ -0,0 +1,7 @@
+import type { CMSModuleDescriptor } from '../../../types/modules.js';
+type $$ComponentProps = {
+    module: CMSModuleDescriptor;
+};
+declare const NavModule: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavModule = ReturnType<typeof NavModule>;
+export default NavModule;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	/**
 	 * @internal
-	 * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavShop).
+	 * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavModule).
 	 * Not exported publicly. Sesja 4 (UI Normalization → 0.26.0).
 	 */
 	import type { Icon } from '@tabler/icons-svelte';

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

@@ -1,6 +1,6 @@
 /**
  * @internal
- * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavShop).
+ * Internal helper — DRY for sidebar nav-* sections (NavMain, NavCollections, NavSingletons, NavForms, NavModule).
  * Not exported publicly. Sesja 4 (UI Normalization → 0.26.0).
  */
 import type { Icon } from '@tabler/icons-svelte';

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

@@ -10,26 +10,33 @@
 	import { getIcon } from '../icons/icon-map.js';
 	import NavSection, { type NavSectionItem } from './nav-section.svelte';
 
+	let { filterSlugs, ctx }: { filterSlugs?: string[]; ctx?: string } = $props();
+
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
 	function isActive(url: string) {
+		const base = url.split('?')[0];
 		const pathname = page.url.pathname;
-		return pathname === url || pathname.startsWith(url + '/');
+		return pathname === base || pathname.startsWith(base + '/');
 	}
 
 	const query = $derived(remotes.getSingles());
 
 	const items: NavSectionItem[] = $derived(
-		query.current?.map((item) => ({
-			title: getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug,
-			url: `/admin/entries/${item.slug}`,
-			icon: getIcon(item.sidebarIcon) ?? SettingsIcon
-		})) ?? []
+		(query.current ?? [])
+			.filter((item) => !filterSlugs || filterSlugs.includes(item.slug))
+			.map((item) => ({
+				title: getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug,
+				url: `/admin/entries/${item.slug}${ctx ? `?ctx=${ctx}` : ''}`,
+				icon: getIcon(item.sidebarIcon) ?? SettingsIcon
+			}))
 	);
 </script>
 
-{#if !query.ready}
+{#if filterSlugs && filterSlugs.length === 0}
+	<!-- no surfaced singletons in this context -->
+{:else if !query.ready}
 	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
 		<Sidebar.GroupLabel
 			>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel

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

@@ -1,3 +1,7 @@
-declare const NavSingletons: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    filterSlugs?: string[];
+    ctx?: string;
+};
+declare const NavSingletons: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavSingletons = ReturnType<typeof NavSingletons>;
 export default NavSingletons;