includio-cms 0.36.9 → 0.37.0

package/dist/admin/client/entry/preview-views-context.svelte.js

@@ -0,0 +1,58 @@
+import { getContext, setContext } from 'svelte';
+import { defaultView, findView, resolveActiveView } from './preview-views.js';
+const PREVIEW_VIEWS_KEY = Symbol('preview-views');
+/**
+ * Holds which preview view is showing, plus the per-tab memory of manual picks:
+ * a view the user selected by hand on a tab wins over that tab's `preview`
+ * binding when they come back to it. Lives as long as the open entry — nothing
+ * is persisted to the URL or the database.
+ */
+export function createPreviewViewsContext(views) {
+    let activeName = $state(defaultView(views)?.name ?? '');
+    let activeTab = $state('');
+    const overrides = new Map();
+    const ctx = {
+        get views() {
+            return views;
+        },
+        get activeName() {
+            return activeName;
+        },
+        get activeView() {
+            return findView(views, activeName) ?? defaultView(views);
+        },
+        /** Manual pick — remember it for the tab the user is on. */
+        select(name) {
+            if (!findView(views, name))
+                return;
+            activeName = name;
+            if (activeTab)
+                overrides.set(activeTab, name);
+        },
+        /** A tab became active (on mount too, so a `?tab=` deep-link lands right). */
+        onTabActivate(tabValue, tabPreview) {
+            activeTab = tabValue;
+            activeName = resolveActiveView({
+                views,
+                current: activeName,
+                tabValue,
+                tabPreview,
+                overrides
+            });
+        }
+    };
+    setContext(PREVIEW_VIEWS_KEY, ctx);
+    return ctx;
+}
+/**
+ * Optional — layout components also render outside the entry editor (Storybook,
+ * forms), where no preview context exists.
+ */
+export function getPreviewViewsContext() {
+    try {
+        return getContext(PREVIEW_VIEWS_KEY);
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/admin/client/entry/preview-views.d.ts

@@ -0,0 +1,27 @@
+import type { PreviewView } from '../../../types/config.js';
+/** The subset of a collection/single config this module cares about. */
+export type PreviewSource = {
+    previewUrl?: string;
+    previews?: PreviewView[];
+};
+/**
+ * Collapse the two config shapes into one: `previewUrl` becomes a single view
+ * named `default`, so no caller has to know about the shorthand.
+ */
+export declare function normalizePreviews(config: PreviewSource): PreviewView[];
+/** The view marked `default: true`, else the first one. */
+export declare function defaultView(views: PreviewView[]): PreviewView | undefined;
+export declare function findView(views: PreviewView[], name: string): PreviewView | undefined;
+/** `{url}?preview={entryId}&view={name}` — respects a query string already present in `url`. */
+export declare function buildPreviewUrl(view: PreviewView, entryId: string): string;
+/**
+ * Rule (c) — per-tab memory. A view the user picked by hand on this tab beats
+ * the tab's own binding; a tab without a binding leaves the current view alone.
+ */
+export declare function resolveActiveView(params: {
+    views: PreviewView[];
+    current: string;
+    tabValue: string;
+    tabPreview?: string;
+    overrides: Map<string, string>;
+}): string;

package/dist/admin/client/entry/preview-views.js

@@ -0,0 +1,33 @@
+/**
+ * Collapse the two config shapes into one: `previewUrl` becomes a single view
+ * named `default`, so no caller has to know about the shorthand.
+ */
+export function normalizePreviews(config) {
+    if (config.previews?.length)
+        return config.previews;
+    if (config.previewUrl)
+        return [{ name: 'default', url: config.previewUrl }];
+    return [];
+}
+/** The view marked `default: true`, else the first one. */
+export function defaultView(views) {
+    return views.find((v) => v.default) ?? views[0];
+}
+export function findView(views, name) {
+    return views.find((v) => v.name === name);
+}
+/** `{url}?preview={entryId}&view={name}` — respects a query string already present in `url`. */
+export function buildPreviewUrl(view, entryId) {
+    const sep = view.url.includes('?') ? '&' : '?';
+    return `${view.url}${sep}preview=${encodeURIComponent(entryId)}&view=${encodeURIComponent(view.name)}`;
+}
+/**
+ * Rule (c) — per-tab memory. A view the user picked by hand on this tab beats
+ * the tab's own binding; a tab without a binding leaves the current view alone.
+ */
+export function resolveActiveView(params) {
+    const next = params.overrides.get(params.tabValue) ?? params.tabPreview;
+    if (next && findView(params.views, next))
+        return next;
+    return params.current;
+}

package/dist/admin/client/index.d.ts

@@ -22,6 +22,9 @@ export { default as ShopOrderDetailPage } from './shop/shop-order-detail-page.sv
 export { default as ShopCouponsListPage } from './shop/coupons-list-page.svelte';
 export { default as ShopCouponNewPage } from './shop/coupon-new-page.svelte';
 export { default as ShopCouponEditPage } from './shop/coupon-edit-page.svelte';
+export { default as BookingReservationsPage } from './booking/reservations-page.svelte';
+export { default as BookingReservationDetailPage } from './booking/reservation-detail-page.svelte';
+export { default as ModuleDashboardPage } from './modules/module-dashboard-page.svelte';
 export * from '../helpers/index.js';
 export * from '../ui/index.js';
 export { default as DataTable } from './collection/data-table.svelte';

package/dist/admin/client/index.js

@@ -22,6 +22,9 @@ export { default as ShopOrderDetailPage } from './shop/shop-order-detail-page.sv
 export { default as ShopCouponsListPage } from './shop/coupons-list-page.svelte';
 export { default as ShopCouponNewPage } from './shop/coupon-new-page.svelte';
 export { default as ShopCouponEditPage } from './shop/coupon-edit-page.svelte';
+export { default as BookingReservationsPage } from './booking/reservations-page.svelte';
+export { default as BookingReservationDetailPage } from './booking/reservation-detail-page.svelte';
+export { default as ModuleDashboardPage } from './modules/module-dashboard-page.svelte';
 // Folded from `./admin/helpers` (dropped as separate export in 0.20.0)
 export * from '../helpers/index.js';
 // Folded from `./admin/ui` (dropped as separate export in 0.20.0)

package/dist/admin/client/modules/dashboard-registry.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+/**
+ * Client-side registry of per-module dashboard components, keyed by module id.
+ * Dashboards live here (not in the serializable {@link import('../../../types/modules.js').CMSModule}
+ * descriptor) because Svelte components cannot cross the config/remote boundary.
+ */
+export declare const moduleDashboards: Record<string, Component>;

package/dist/admin/client/modules/dashboard-registry.js

@@ -0,0 +1,11 @@
+import ShopDashboard from '../shop/shop-dashboard.svelte';
+import BookingDashboard from '../booking/booking-dashboard.svelte';
+/**
+ * Client-side registry of per-module dashboard components, keyed by module id.
+ * Dashboards live here (not in the serializable {@link import('../../../types/modules.js').CMSModule}
+ * descriptor) because Svelte components cannot cross the config/remote boundary.
+ */
+export const moduleDashboards = {
+    shop: ShopDashboard,
+    booking: BookingDashboard
+};

package/dist/admin/client/modules/module-dashboard-page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import { moduleDashboards } from './dashboard-registry.js';
+	import type { Localized } from '../../../types/languages.js';
+
+	let { moduleId }: { moduleId: string } = $props();
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const modulesQuery = $derived(remotes.getModules());
+	const mod = $derived((modulesQuery.current ?? []).find((m) => m.id === moduleId) ?? null);
+	const title = $derived(
+		mod ? getLocalizedLabel(mod.label as Localized, interfaceLanguage.current) || moduleId : moduleId
+	);
+	const Dashboard = $derived(moduleDashboards[moduleId]);
+</script>
+
+<PageHeader {title} />
+
+{#if Dashboard}
+	<Dashboard />
+{/if}

package/dist/admin/client/modules/module-dashboard-page.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    moduleId: string;
+};
+declare const ModuleDashboardPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModuleDashboardPage = ReturnType<typeof ModuleDashboardPage>;
+export default ModuleDashboardPage;

package/dist/admin/client/modules/stat-card.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		value,
+		hint,
+		children
+	}: {
+		label: string;
+		value: string | number;
+		hint?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="border-border bg-surface/40 flex flex-col gap-1 rounded-xl border p-4">
+	<span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{label}</span>
+	<span class="text-foreground text-2xl font-extrabold tabular-nums">{value}</span>
+	{#if hint}<span class="text-muted-foreground text-xs">{hint}</span>{/if}
+	{#if children}{@render children()}{/if}
+</div>

package/dist/admin/client/modules/stat-card.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    value: string | number;
+    hint?: string;
+    children?: Snippet;
+};
+declare const StatCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/admin/client/shop/shop-dashboard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import StatCard from '../modules/stat-card.svelte';
+	import { Button } from '../../../components/ui/button/index.js';
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const ordersQuery = $derived(remotes.listOrdersAdmin({ limit: 1 }));
+	const totalOrders = $derived(ordersQuery.current?.total ?? 0);
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? { orders: 'Zamówienia', manageProducts: 'Produkty', manageOrders: 'Zamówienia', coupons: 'Kody rabatowe' }
+			: { orders: 'Orders', manageProducts: 'Products', manageOrders: 'Orders', coupons: 'Coupons' }
+	);
+</script>
+
+<div class="flex flex-col gap-4 px-4 pb-6 sm:px-6">
+	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+		<StatCard label={t.orders} value={ordersQuery.ready ? totalOrders : '—'} />
+	</div>
+	<div class="flex flex-wrap gap-2">
+		<Button href="/admin/shop/products" variant="outline" size="sm">{t.manageProducts}</Button>
+		<Button href="/admin/shop/orders" variant="outline" size="sm">{t.manageOrders}</Button>
+		<Button href="/admin/shop/coupons" variant="outline" size="sm">{t.coupons}</Button>
+	</div>
+</div>

package/dist/admin/client/shop/shop-dashboard.svelte.d.ts

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

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

@@ -422,8 +422,15 @@
 						<Command.Empty>{t.noResults}</Command.Empty>
 						<Command.Group>
 							{#each pickerOptions as option (option.id)}
+								<!--
+									`value` to tożsamość pozycji w Command (filtrowanie, nawigacja
+									klawiaturą, podświetlenie) — musi być unikalna, inaczej dwa wpisy
+									o tej samej nazwie zlewają się w jeden. Szukanie po nazwie zapewnia
+									`keywords` (domyślny scorer skleja value + keywords).
+								-->
 								<Command.Item
-									value={option.label}
+									value={option.id}
+									keywords={[option.label]}
 									onSelect={() => toggleItem(option.id)}
 									class="flex items-center gap-2"
 								>
@@ -523,8 +530,10 @@
 							<Command.Empty>{t.noResults}</Command.Empty>
 							<Command.Group>
 								{#each pickerOptions as option (option.id)}
+									<!-- Tożsamość po id, szukanie po nazwie — patrz komentarz w wariancie multi. -->
 									<Command.Item
-										value={option.label}
+										value={option.id}
+										keywords={[option.label]}
 										onSelect={() => {
 											value = option.id;
 											closePopoverAndFocus();

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

@@ -24,6 +24,10 @@ 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';
+import IconBuildingStore from '@tabler/icons-svelte/icons/building-store';
+import IconPackage from '@tabler/icons-svelte/icons/package';
+import IconTruck from '@tabler/icons-svelte/icons/truck';
+import IconTicket from '@tabler/icons-svelte/icons/ticket';
 // Media
 import IconPhoto from '@tabler/icons-svelte/icons/photo';
 import IconCamera from '@tabler/icons-svelte/icons/camera';
@@ -89,6 +93,10 @@ export const iconMap = {
     // E-commerce
     'shopping-cart': IconShoppingCart,
     'shopping-bag': IconShoppingBag,
+    'building-store': IconBuildingStore,
+    package: IconPackage,
+    truck: IconTruck,
+    ticket: IconTicket,
     tag: IconTag,
     tags: IconTags,
     receipt: IconReceipt,

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

@@ -6,43 +6,74 @@
 	import NavCollections from './nav-collections.svelte';
 	import NavFooter from './nav-footer.svelte';
 	import NavForms from './nav-forms.svelte';
-	import NavShop from './nav-shop.svelte';
+	import NavModule from './nav-module.svelte';
 	import NavCustom from './nav-custom.svelte';
 	import NavSearch from './nav-search.svelte';
+	import NavGlobal from './nav-global.svelte';
+	import ContextSwitcher from './context-switcher.svelte';
+	import { getIcon } from '../icons/icon-map.js';
+	import BoxIcon from '@tabler/icons-svelte/icons/box';
 	import { resolve } from '$app/paths';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { getActiveContext, CONTENT_CONTEXT } from '../../state/active-context.svelte.js';
 	import { sidebarLang } from './lang.js';
 
 	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 
 	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 activeContext = $derived(getActiveContext(moduleIds));
+	const activeModule = $derived(modules.find((m) => m.id === activeContext) ?? null);
 </script>
 
-<Sidebar.Root collapsible="icon" class="bg-sidebar" {...restProps}>
+<Sidebar.Root collapsible="icon" class="bg-sidebar" data-context={activeContext} {...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"
+			class="flex items-baseline gap-px group-data-[collapsible=icon]:hidden"
 			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
-			>
+			<span class="text-primary text-[11px] font-light tracking-[0.15em] uppercase">CMS</span>
 		</a>
+		<ContextSwitcher />
 	</Sidebar.Header>
 	<Sidebar.Content class="gap-0">
 		<NavSearch />
-		<nav id="admin-nav" aria-label={sidebarLang[interfaceLanguage.current].nav.primary} class="py-1">
-			<NavMain />
-			<NavSingletons />
-			<NavCollections />
-			<NavForms />
-			<NavShop />
-			<NavCustom />
+		<nav
+			id="admin-nav"
+			aria-label={sidebarLang[interfaceLanguage.current].nav.primary}
+			class="flex flex-1 flex-col py-1"
+		>
+			{#if activeContext === CONTENT_CONTEXT || !activeModule}
+				<NavMain />
+				<NavSingletons />
+				<NavCollections />
+				<NavForms />
+				<NavCustom />
+			{:else}
+				<NavMain
+					url={activeModule.context.landingUrl}
+					icon={getIcon(activeModule.icon) ?? BoxIcon}
+				/>
+				<NavModule module={activeModule} />
+				<NavCollections
+					filterSlugs={activeModule.context.surfacedCollections ?? []}
+					ctx={activeContext}
+				/>
+				<NavSingletons
+					filterSlugs={activeModule.context.surfacedSingles ?? []}
+					ctx={activeContext}
+				/>
+			{/if}
+			<NavGlobal />
 		</nav>
 	</Sidebar.Content>
 	<Sidebar.Footer class="p-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;