includio-cms 0.36.9 → 0.37.1

package/dist/admin/client/booking/reservations-page.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatCentsPrice, formatDateTime } from '../../utils/formatters.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import DataTable from '../collection/data-table.svelte';
+	import TableToolbar from '../collection/table-toolbar.svelte';
+	import TablePagination from '../collection/table-pagination.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+	import EntryLink from '../collection/entry-link.svelte';
+	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+	import { customerSummary } from './customer-view.js';
+	import type { ColumnDef, PaginationState } from '@tanstack/table-core';
+	import type { BookingStatus } from '../../../booking/state-machine.js';
+
+	type BookingRow = {
+		id: string;
+		number: string;
+		status: BookingStatus;
+		currency: string;
+		customer: Record<string, unknown>;
+		totals: { gross: number; balance: number };
+		createdAt: Date | string;
+	};
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	let statusFilter = $state<string | null>(null);
+	let searchQuery = $state('');
+	let appliedSearch = $state('');
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 50 });
+	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const bookingsQuery = $derived(
+		remotes.listBookings({
+			status: (statusFilter as BookingStatus | null) ?? undefined,
+			search: appliedSearch || undefined,
+			limit: pagination.pageSize,
+			offset: pagination.pageIndex * pagination.pageSize
+		})
+	);
+
+	const items = $derived<BookingRow[]>((bookingsQuery.current?.items as BookingRow[]) ?? []);
+	const total = $derived(bookingsQuery.current?.total ?? 0);
+	const isLoading = $derived(!bookingsQuery.ready);
+	const isError = $derived(Boolean(bookingsQuery.error));
+	const pageCount = $derived(Math.max(1, Math.ceil(total / pagination.pageSize)));
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? {
+					title: 'Rezerwacje',
+					search: 'Szukaj',
+					searchPlaceholder: 'Szukaj po numerze, imieniu lub e-mailu…',
+					filterStatus: 'Status',
+					number: 'Numer',
+					created: 'Utworzono',
+					customer: 'Klient',
+					total: 'Wartość',
+					balance: 'Saldo',
+					status: 'Status',
+					emptyTitle: 'Brak rezerwacji',
+					emptyDescription: 'Gdy ktoś zarezerwuje, pojawi się tutaj.',
+					noResults: 'Brak wyników.',
+					statusDraft: 'Czeka na zaliczkę',
+					statusReserved: 'Zarezerwowane',
+					statusPartiallyPaid: 'Częściowo opłacone',
+					statusPaid: 'Opłacone',
+					statusCompleted: 'Zakończone',
+					statusCancelled: 'Anulowane'
+				}
+			: {
+					title: 'Reservations',
+					search: 'Search',
+					searchPlaceholder: 'Search by number, name or email…',
+					filterStatus: 'Status',
+					number: 'Number',
+					created: 'Created',
+					customer: 'Customer',
+					total: 'Total',
+					balance: 'Balance',
+					status: 'Status',
+					emptyTitle: 'No reservations yet',
+					emptyDescription: 'Reservations will appear here as soon as someone books.',
+					noResults: 'No results.',
+					statusDraft: 'Awaiting deposit',
+					statusReserved: 'Reserved',
+					statusPartiallyPaid: 'Partially paid',
+					statusPaid: 'Paid',
+					statusCompleted: 'Completed',
+					statusCancelled: 'Cancelled'
+				}
+	);
+
+	const dataFilters = $derived([
+		{
+			slug: 'status',
+			label: t.filterStatus,
+			options: [
+				{ value: 'draft', label: t.statusDraft },
+				{ value: 'reserved', label: t.statusReserved },
+				{ value: 'partially_paid', label: t.statusPartiallyPaid },
+				{ value: 'paid', label: t.statusPaid },
+				{ value: 'completed', label: t.statusCompleted },
+				{ value: 'cancelled', label: t.statusCancelled }
+			]
+		}
+	]);
+	const activeDataFilters = $derived({ status: statusFilter });
+
+	function scheduleSearchUpdate(value: string) {
+		if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			appliedSearch = value.trim();
+			pagination = { ...pagination, pageIndex: 0 };
+		}, 350);
+	}
+
+	const columns = $derived.by<ColumnDef<BookingRow>[]>(() => [
+		{
+			accessorKey: 'number',
+			header: t.number,
+			cell: (info) =>
+				renderComponent(EntryLink, {
+					name: info.row.original.number,
+					url: `/admin/booking/reservations/${info.row.original.id}`
+				})
+		},
+		{
+			accessorKey: 'createdAt',
+			header: t.created,
+			cell: (info) => formatDateTime(info.row.original.createdAt, interfaceLanguage.current)
+		},
+		{
+			id: 'customer',
+			header: t.customer,
+			cell: (info) => {
+				const row = info.row.original;
+				const s = customerSummary(row.customer ?? {});
+				return renderComponent(EntryLink, {
+					name: s.name ?? s.email ?? '—',
+					url: `/admin/booking/reservations/${row.id}`,
+					slug: s.name && s.email ? s.email : undefined
+				});
+			}
+		},
+		{
+			id: 'gross',
+			header: t.total,
+			cell: (info) => formatCentsPrice(info.row.original.totals.gross, info.row.original.currency)
+		},
+		{
+			id: 'balance',
+			header: t.balance,
+			cell: (info) => formatCentsPrice(info.row.original.totals.balance, info.row.original.currency)
+		},
+		{
+			accessorKey: 'status',
+			header: t.status,
+			cell: (info) =>
+				renderComponent(StatusBadge, { variant: 'booking', status: info.row.original.status })
+		}
+	]);
+</script>
+
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader title={t.title} count={!isLoading && !isError ? total : undefined} />
+
+	{#if !isLoading && !isError && total === 0 && !statusFilter && !appliedSearch}
+		<StateDisplay kind="empty" title={t.emptyTitle} description={t.emptyDescription} />
+	{:else}
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				scheduleSearchUpdate(q);
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				statusFilter = value;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
+
+		<div class="bg-card overflow-hidden rounded-xl border shadow-sm">
+			{#if isError}
+				<StateDisplay kind="error" />
+			{:else if isLoading && items.length === 0}
+				<StateDisplay kind="loading" />
+			{:else}
+				<DataTable
+					data={items}
+					{columns}
+					enablePagination
+					manualPagination
+					{pageCount}
+					rowCount={total}
+					{pagination}
+					onPaginationChange={(p) => (pagination = p)}
+					emptyTitle={t.noResults}
+				/>
+
+				<TablePagination
+					pageIndex={pagination.pageIndex}
+					pageSize={pagination.pageSize}
+					{pageCount}
+					totalItems={total}
+					onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+					onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+				/>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/admin/client/booking/reservations-page.svelte.d.ts

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

package/dist/admin/client/collection/collection-entries.svelte

@@ -317,7 +317,7 @@
 				return renderComponent(EntryLink, {
 					name: info.row.original.name,
 					url: info.row.original.url,
-					slug: info.row.original.slug
+					path: info.row.original.slug
 				});
 			}
 		},

package/dist/admin/client/collection/entry-link.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
 	type Props = {
 		name: string;
+		/** Admin edit link for this entry. */
 		url: string;
-		slug?: string;
+		/** Public path of the entry — already absolute (`resolveEntryUrl`), never prefix it. */
+		path?: string;
 	};
 
-	let { name, url, slug }: Props = $props();
+	let { name, url, path }: Props = $props();
 </script>
 
 <div>
 	<a href={url} class="font-medium text-foreground hover:text-primary hover:underline">
 		{name}
 	</a>
-	{#if slug}
-		<div class="text-[11px] text-muted-foreground font-mono mt-0.5 truncate max-w-[200px]">/{slug}</div>
+	{#if path}
+		<div class="text-[11px] text-muted-foreground font-mono mt-0.5 truncate max-w-[200px]">{path}</div>
 	{/if}
 </div>

package/dist/admin/client/collection/entry-link.svelte.d.ts

@@ -1,7 +1,9 @@
 type Props = {
     name: string;
+    /** Admin edit link for this entry. */
     url: string;
-    slug?: string;
+    /** Public path of the entry — already absolute (`resolveEntryUrl`), never prefix it. */
+    path?: string;
 };
 declare const EntryLink: import("svelte").Component<Props, {}, "">;
 type EntryLink = ReturnType<typeof EntryLink>;

package/dist/admin/client/collection/status-badge.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import type { EntryStatus } from '../../../types/entries.js';
 	import type { OrderStatus } from '../../../shop/types.js';
+	import type { BookingStatus } from '../../../booking/state-machine.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	/**
-	 * StatusBadge accepts three usage modes (variants):
+	 * StatusBadge accepts four usage modes (variants):
 	 * - entry (default): pass `status` as `EntryStatus`
 	 * - order: pass `variant="order"` and `status` as `OrderStatus`
+	 * - booking: pass `variant="booking"` and `status` as `BookingStatus`
 	 * - boolean: pass `variant="boolean"` and `active: boolean`
 	 *
 	 * Type stays permissive (FlatProps) so consumers can pass any combination;
 	 * runtime narrows by `variant` and falls back to muted style on unknown.
 	 */
 	type Props = {
-		variant?: 'entry' | 'order' | 'boolean';
-		status?: EntryStatus | OrderStatus;
+		variant?: 'entry' | 'order' | 'boolean' | 'booking';
+		status?: EntryStatus | OrderStatus | BookingStatus;
 		active?: boolean;
 		activeLabel?: string;
 		inactiveLabel?: string;
@@ -92,6 +94,35 @@
 		}
 	};
 
+	const bookingStyles: Record<BookingStatus, StatusStyle> = {
+		draft: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		reserved: { dot: '●', classes: 'bg-info-bg text-info' },
+		partially_paid: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		paid: { dot: '●', classes: 'bg-success-bg text-success' },
+		completed: { dot: '●', classes: 'bg-success-bg text-success' },
+		cancelled: { dot: '○', classes: 'bg-muted text-muted-foreground' }
+	};
+
+	const bookingLabels: Record<InterfaceLanguage, Record<BookingStatus, string>> = {
+		en: {
+			draft: 'Awaiting deposit',
+			reserved: 'Reserved',
+			partially_paid: 'Partially paid',
+			paid: 'Paid',
+			completed: 'Completed',
+			cancelled: 'Cancelled'
+		},
+		pl: {
+			// „Szkic" nic nie mówi osobie prowadzącej rezerwacje — ona myśli „czeka na zaliczkę".
+			draft: 'Czeka na zaliczkę',
+			reserved: 'Zarezerwowane',
+			partially_paid: 'Częściowo opłacone',
+			paid: 'Opłacone',
+			completed: 'Zakończone',
+			cancelled: 'Anulowane'
+		}
+	};
+
 	const booleanDefaults: Record<InterfaceLanguage, { active: string; inactive: string }> = {
 		en: { active: 'Active', inactive: 'Inactive' },
 		pl: { active: 'Aktywny', inactive: 'Nieaktywny' }
@@ -106,6 +137,11 @@
 			if (!s || !(s in orderStyles)) return { style: fallbackStyle, label: String(s ?? '') };
 			return { style: orderStyles[s], label: orderLabels[lang][s] };
 		}
+		if (variant === 'booking') {
+			const s = status as BookingStatus | undefined;
+			if (!s || !(s in bookingStyles)) return { style: fallbackStyle, label: String(s ?? '') };
+			return { style: bookingStyles[s], label: bookingLabels[lang][s] };
+		}
 		if (variant === 'boolean') {
 			const isActive = active === true;
 			const fallback = booleanDefaults[lang];

package/dist/admin/client/collection/status-badge.svelte.d.ts

@@ -1,17 +1,19 @@
 import type { EntryStatus } from '../../../types/entries.js';
 import type { OrderStatus } from '../../../shop/types.js';
+import type { BookingStatus } from '../../../booking/state-machine.js';
 /**
- * StatusBadge accepts three usage modes (variants):
+ * StatusBadge accepts four usage modes (variants):
  * - entry (default): pass `status` as `EntryStatus`
  * - order: pass `variant="order"` and `status` as `OrderStatus`
+ * - booking: pass `variant="booking"` and `status` as `BookingStatus`
  * - boolean: pass `variant="boolean"` and `active: boolean`
  *
  * Type stays permissive (FlatProps) so consumers can pass any combination;
  * runtime narrows by `variant` and falls back to muted style on unknown.
  */
 type Props = {
-    variant?: 'entry' | 'order' | 'boolean';
-    status?: EntryStatus | OrderStatus;
+    variant?: 'entry' | 'order' | 'boolean' | 'booking';
+    status?: EntryStatus | OrderStatus | BookingStatus;
     active?: boolean;
     activeLabel?: string;
     inactiveLabel?: string;

package/dist/admin/client/entry/entry.svelte

@@ -33,6 +33,8 @@
 	import { getCollectionEntryDisplayLabel } from '../../utils/entryLabel.js';
 	import { getFieldsFromConfig, hasLayout } from '../../../core/fields/layoutUtils.js';
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
+	import { createPreviewViewsContext } from './preview-views-context.svelte.js';
+	import { normalizePreviews, buildPreviewUrl } from './preview-views.js';
 	import { onMount, setContext, tick } from 'svelte';
 	import { get } from 'svelte/store';
 	const contentLanguage = getContentLanguage();
@@ -111,6 +113,11 @@
 	let { collection } = entry;
 	const isArchived = $derived(!!entry.archivedAt);
 
+	// Preview views: `previewUrl` is normalized to a single view, so everything
+	// below only ever deals with an array. Empty array = collection has no preview.
+	const previewViews = createPreviewViewsContext(normalizePreviews(collection));
+	const hasPreview = previewViews.views.length > 0;
+
 	setContext('cms-path-template', collection.pathTemplate || null);
 	setContext('cms-entry-published', entry.publishedVersions[contentLanguage.current] != null);
 	setContext('cms-entry-id', entry.id);
@@ -431,9 +438,17 @@
 		}
 	}
 
-	const previewOrigin = collection.previewUrl
-		? getOriginFromUrl(collection.previewUrl)
-		: window.location.origin;
+	// Src of the active view — switching a view swaps the iframe src, which reloads
+	// the preview page; it then asks for the current (unsaved) form data via
+	// `preview-ready`, so nothing in the editor is lost.
+	const previewSrc = $derived(
+		previewViews.activeView
+			? buildPreviewUrl(previewViews.activeView, String(editingEntry.id))
+			: ''
+	);
+	const previewOrigin = $derived(
+		previewSrc ? getOriginFromUrl(previewSrc) : window.location.origin
+	);
 
 	const updatePreview = useDebounce(
 		async (window: Window, form: SuperForm<Record<string, unknown>>) => {
@@ -466,16 +481,16 @@
 
 	// Subscribe to form changes for preview updates
 	onMount(() => {
-		if (!collection.previewUrl) return;
+		if (!hasPreview) return;
 		const unsub = form.form.subscribe(() => {
 			onUpdate();
 		});
 		return () => unsub();
 	});
 
-	// Enable hybrid mode when collection has previewUrl
+	// Enable hybrid mode when the collection has at least one preview view
 	$effect(() => {
-		hybridContext.enabled = !!collection.previewUrl;
+		hybridContext.enabled = hasPreview;
 	});
 
 	// Send current form data + hybrid mode state to iframe
@@ -605,7 +620,7 @@
 	});
 
 	const t = $derived(lang[interfaceLanguage.current]);
-	const isHybrid = $derived(hybridContext.mode === 'hybrid' && !!collection.previewUrl);
+	const isHybrid = $derived(hybridContext.mode === 'hybrid' && hasPreview);
 
 	const errorPaths = $derived(new Set(validationErrors.map((e) => e.path)));
 
@@ -752,8 +767,10 @@
 							<div class="bg-accent h-full animate-pulse rounded-md"></div>
 						{:then { default: HybridPreview }}
 							<HybridPreview
-								{collection}
-								{editingEntry}
+								{previewSrc}
+								views={previewViews.views}
+								activeName={previewViews.activeName}
+								onSelectView={(name) => previewViews.select(name)}
 								bind:previewIframe
 								bind:sizePreset
 								{size}

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte

@@ -1,26 +1,59 @@
 <script lang="ts">
 	import * as ToggleGroup from '../../../../components/ui/toggle-group/index.js';
+	import * as Select from '../../../../components/ui/select/index.js';
 	import Button from '../../../../components/ui/button/button.svelte';
 	import DeviceTablet from '@tabler/icons-svelte/icons/device-tablet';
 	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
 	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
 	import ArrowsMaximize from '@tabler/icons-svelte/icons/arrows-maximize';
 	import Link from '@tabler/icons-svelte/icons/link';
-	import type { DbEntryVersion } from '../../../../types/entries.js';
+	import type { PreviewView } from '../../../../types/config.js';
+	import { getLocalizedLabel } from '../../../utils/collectionLabel.js';
+	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import type { ElementSize } from 'runed';
 
 	type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
 
 	type Props = {
-		collection: { previewUrl?: string };
-		editingEntry: DbEntryVersion;
+		/** Fully built preview URL of the active view. */
+		previewSrc: string;
+		views: PreviewView[];
+		activeName: string;
+		onSelectView: (name: string) => void;
 		previewIframe?: HTMLIFrameElement;
 		sizePreset: SizePreset;
 		size: ElementSize;
 		el?: HTMLElement;
 	};
 
-	let { collection, editingEntry, previewIframe = $bindable(), sizePreset = $bindable('responsive'), size, el = $bindable() }: Props = $props();
+	let {
+		previewSrc,
+		views,
+		activeName,
+		onSelectView,
+		previewIframe = $bindable(),
+		sizePreset = $bindable('responsive'),
+		size,
+		el = $bindable()
+	}: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang = {
+		pl: { view: 'Widok', openInNewTab: 'Otwórz podgląd w nowej karcie' },
+		en: { view: 'View', openInNewTab: 'Open preview in a new tab' }
+	} as const;
+
+	const t = $derived(lang[interfaceLanguage.current as 'pl' | 'en'] ?? lang.en);
+
+	function viewLabel(view: PreviewView): string {
+		return getLocalizedLabel(view.label, interfaceLanguage.current) || view.name;
+	}
+
+	const activeLabel = $derived.by(() => {
+		const view = views.find((v) => v.name === activeName) ?? views[0];
+		return view ? viewLabel(view) : '';
+	});
 
 	const sizePresets = {
 		responsive: null,
@@ -61,8 +94,36 @@
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
-	<div class="flex items-center justify-center gap-2 border-b px-2 py-1.5">
-		<ToggleGroup.Root type="single" bind:value={sizePreset} role="radiogroup">
+	<!--
+		Trzy strefy, nie jeden ciąg: kontekst (jaki widok) przy krawędzi wiodącej,
+		prezentacja (rozmiar urządzenia) na środku płótna, akcja poboczna (otwórz
+		w nowej karcie) przy końcowej. Grid `1fr auto 1fr` trzyma przełączniki
+		urządzeń dokładnie na środku niezależnie od długości nazwy widoku.
+	-->
+	<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-2 border-b px-2 py-1.5">
+		<div class="justify-self-start">
+			{#if views.length > 1}
+				<Select.Root type="single" value={activeName} onValueChange={onSelectView}>
+					<Select.Trigger
+						class="hover:bg-accent hover:text-accent-foreground h-8 w-auto gap-1.5 border-0 bg-transparent px-2 text-sm font-medium shadow-none"
+						aria-label={t.view}
+					>
+						{activeLabel}
+					</Select.Trigger>
+					<Select.Content align="start">
+						{#each views as view (view.name)}
+							<Select.Item value={view.name} label={viewLabel(view)} />
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/if}
+		</div>
+		<ToggleGroup.Root
+			type="single"
+			bind:value={sizePreset}
+			role="radiogroup"
+			class="justify-self-center"
+		>
 			<ToggleGroup.Item value="responsive" aria-label="Responsive view">
 				<ArrowsMaximize class="size-4" />
 			</ToggleGroup.Item>
@@ -79,8 +140,10 @@
 		<Button
 			variant="ghost"
 			size="icon"
-			href="{collection.previewUrl}?preview={editingEntry.id}"
+			href={previewSrc}
 			target="_blank"
+			aria-label={t.openInNewTab}
+			class="justify-self-end"
 		>
 			<Link class="size-4" />
 		</Button>
@@ -90,7 +153,7 @@
 			<iframe
 				bind:this={previewIframe}
 				class="h-full w-full border-0"
-				src="{collection.previewUrl}?preview={editingEntry.id}"
+				src={previewSrc}
 				title="preview"
 			></iframe>
 		{:else if sizePreset === 'desktop'}
@@ -101,7 +164,7 @@
 					class="shrink-0 border-0"
 					width={sizePresets.desktop[0]}
 					height={sizePresets.desktop[1]}
-					src="{collection.previewUrl}?preview={editingEntry.id}"
+					src={previewSrc}
 					title="preview"
 				></iframe>
 			</div>
@@ -142,7 +205,7 @@
 						"
 						width={iw}
 						height={ih}
-						src="{collection.previewUrl}?preview={editingEntry.id}"
+						src={previewSrc}
 						title="preview"
 					></iframe>
 				</div>

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { DbEntryVersion } from '../../../../types/entries.js';
+import type { PreviewView } from '../../../../types/config.js';
 import type { ElementSize } from 'runed';
 type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
 type Props = {
-    collection: {
-        previewUrl?: string;
-    };
-    editingEntry: DbEntryVersion;
+    /** Fully built preview URL of the active view. */
+    previewSrc: string;
+    views: PreviewView[];
+    activeName: string;
+    onSelectView: (name: string) => void;
     previewIframe?: HTMLIFrameElement;
     sizePreset: SizePreset;
     size: ElementSize;

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

@@ -0,0 +1,22 @@
+import type { PreviewView } from '../../../types/config.js';
+/**
+ * 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 declare function createPreviewViewsContext(views: PreviewView[]): {
+    readonly views: PreviewView[];
+    readonly activeName: string;
+    readonly activeView: PreviewView | undefined;
+    /** Manual pick — remember it for the tab the user is on. */
+    select(name: string): void;
+    /** A tab became active (on mount too, so a `?tab=` deep-link lands right). */
+    onTabActivate(tabValue: string, tabPreview?: string): void;
+};
+export type PreviewViewsContext = ReturnType<typeof createPreviewViewsContext>;
+/**
+ * Optional — layout components also render outside the entry editor (Storybook,
+ * forms), where no preview context exists.
+ */
+export declare function getPreviewViewsContext(): PreviewViewsContext | undefined;