includio-cms 0.0.26 → 0.0.27

package/dist/admin/assets/logo.svg

@@ -0,0 +1,14 @@
+<svg width="144" height="32" viewBox="0 0 144 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.06697 18.4123V31.7521H0V18.4123H4.06697ZM4.06697 13.2054V16.8998H0V13.2054H4.06697Z" fill="#263754"/>
+<path d="M19.7916 23.2225V31.7521H15.7495V24.2639C15.7495 22.5035 15.0303 21.7596 13.9392 21.7596C12.9472 21.7596 11.5833 22.6275 11.0129 24.1152V31.7521H6.94598V18.4123H10.6162V20.6687C11.6329 19.0074 13.3688 18.1644 15.7991 18.1644C19.1965 18.1644 19.7916 20.9166 19.7916 23.2225Z" fill="#263754"/>
+<path d="M28.9695 32C24.2826 32 21.8275 28.6031 21.8275 25.0822C21.8275 21.2637 24.5553 18.1644 28.9695 18.1644C31.9453 18.1644 34.1276 19.5033 35.2187 21.6853L31.2758 22.9002C30.755 22.0324 29.9614 21.6109 28.9447 21.6109C27.3328 21.6109 25.9937 22.8754 25.9937 25.0822C25.9937 27.2641 27.3576 28.5783 28.9447 28.5783C29.9614 28.5783 30.755 28.132 31.3006 27.2641L35.2435 28.4791C34.326 30.4875 32.2181 32 28.9695 32Z" fill="#263754"/>
+<path d="M40.776 31.9752C38.4945 31.9752 37.1306 30.785 37.1306 28.4295L36.9995 17.6942H41.1976V27.0162C41.1976 28.0328 41.6191 28.5287 42.4871 28.5287C42.9087 28.5287 43.355 28.4047 43.851 28.1816L44.3718 31.2066C43.1567 31.7273 41.9415 31.9752 40.776 31.9752Z" fill="#263754"/>
+<path d="M49.8299 32C47.0276 32 45.6637 30.2147 45.6637 26.9418V18.4123H49.7307V26.074C49.7307 27.7352 50.3506 28.5535 51.5906 28.5783C52.8057 28.5783 53.7728 27.9336 54.5168 26.6443V18.4123H58.559V27.1898C58.559 27.9584 58.8565 28.3303 59.4269 28.3303V31.7521C58.7573 31.876 58.187 31.9504 57.7158 31.9504C56.2527 31.9504 55.4343 31.3801 55.2111 30.2644L55.1368 29.4461C53.9216 31.157 52.1609 32 49.8299 32Z" fill="#263754"/>
+<path d="M67.3648 32C65.5049 32 63.9922 31.3305 62.8267 30.0164C61.6612 28.6775 61.066 27.041 61.066 25.0822C61.066 23.1234 61.6116 21.4869 62.7027 20.1728C63.8186 18.8338 65.2322 18.1644 66.9433 18.1644C68.8031 18.1644 70.3903 19.1066 71.2086 20.5943V13.2054H75.2756V27.1898C75.2756 27.9584 75.5732 28.3303 76.1435 28.3303V31.7521C75.5236 31.876 74.9532 31.9504 74.4076 31.9504C72.9445 31.9504 72.1014 31.3801 71.9278 30.2396L71.8534 29.5453C70.8614 31.2314 69.1503 32 67.3648 32ZM68.456 28.5783C69.5471 28.5783 70.663 27.9088 71.2334 26.7186V23.9416C70.663 22.4787 69.3983 21.6109 68.2328 21.6109C67.5632 21.6109 66.9929 21.8092 66.5217 22.2307C65.6785 22.9498 65.257 23.9416 65.257 25.1566C65.257 27.3137 66.6705 28.5783 68.456 28.5783Z" fill="#263754"/>
+<path d="M82.5935 18.4123V31.7521H78.5266V18.4123H82.5935ZM82.5935 13.2054V16.8998H78.5266V13.2054H82.5935Z" fill="#263754"/>
+<path d="M91.821 32C87.1093 32 84.7038 28.6031 84.7038 25.107C84.7038 21.3877 87.3324 18.1644 91.821 18.1644C96.2847 18.1644 98.963 21.3877 98.963 25.107C98.963 28.7518 96.4583 32 91.821 32ZM91.821 28.5783C92.7137 28.5783 93.4329 28.2311 93.9537 27.5617C94.4992 26.8674 94.772 26.0492 94.772 25.107C94.772 22.9994 93.5073 21.6109 91.821 21.6109C91.0274 21.6109 90.3083 21.9332 89.6883 22.5779C89.1427 23.2721 88.87 24.1152 88.87 25.107C88.87 27.2145 90.0603 28.5783 91.821 28.5783Z" fill="#263754"/>
+<path d="M110.502 31.7149C106.708 31.7706 103.918 28.1444 103.956 24.7413C103.956 23.5697 104.272 22.4168 104.904 21.2824C105.537 20.148 106.504 19.2554 107.806 18.6045C108.624 18.214 109.554 18.0095 110.614 18.0095C113.199 18.0095 115.003 19.2368 115.878 20.9662L113.85 22.3424C113.125 20.8733 111.823 20.334 110.54 20.334C108.01 20.334 106.615 22.5283 106.615 24.8157C106.615 26.0988 106.987 27.1774 107.75 28.07C108.512 28.944 109.442 29.3903 110.577 29.3903C111.916 29.3903 113.292 28.7395 113.906 27.3447L116.064 28.5721C115.599 29.5763 114.836 30.3573 113.739 30.8966C112.66 31.4359 111.581 31.7149 110.502 31.7149Z" fill="#263754"/>
+<path d="M131.482 18.0838V31.6033H128.86V22.6585L125.363 29.3159H123.931L120.453 22.6585V31.6033H117.83V18.0838H120.639L124.638 25.7827L128.674 18.0838H131.482Z" fill="#263754"/>
+<path d="M138.996 31.7521C136.932 31.7521 135.034 31.1756 133.323 30.004L134.476 27.7353C134.923 28.1816 136.894 29.3903 139.033 29.3903C140.465 29.3903 141.191 28.9254 141.191 27.9956C141.191 26.8984 139.945 26.5079 137.88 25.95L137.694 25.8942C135.239 25.2248 133.863 24.3694 133.863 22.2308C133.863 19.4971 136.057 17.9909 138.791 17.9909C140.521 17.9909 142.083 18.493 143.516 19.4971L142.362 21.6171C142.046 21.2638 140.41 20.2968 138.717 20.2968C137.285 20.2968 136.578 20.7803 136.578 21.7659C136.578 22.3424 136.839 22.7701 137.341 23.0118C137.861 23.2536 138.643 23.4953 139.666 23.7371C142.158 24.3694 143.999 25.1876 143.999 27.7353C144.055 30.7107 141.47 31.7149 138.996 31.7521Z" fill="#263754"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.005 3.7459C31.2491 3.7459 36.9995 9.61754 36.9995 16.8606H41.2076C41.2076 7.43918 33.4278 0 24.005 0C14.5823 0 6.9436 7.43918 6.9436 16.8606H10.6138C10.6138 9.61754 16.7609 3.7459 24.005 3.7459Z" fill="#4975AE"/>
+</svg>

package/dist/admin/client/admin/admin-layout.svelte

@@ -7,7 +7,7 @@
 	let { children }: { children: Snippet } = $props();
 </script>
 
-<ModeWatcher />
+<ModeWatcher  />
 <Toaster />
 
 <svelte:boundary>

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

@@ -10,6 +10,7 @@
 	import { getRemotes } from '../../context/remotes.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { getAtPath } from '../../utils/objectPath.js';
+	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
 
 	const remotes = getRemotes();
 
@@ -41,9 +42,7 @@
 				.map((entry) => ({
 					id: entry.id,
 					collection: entry.slug,
-					name: collection.entryAdminTitle
-						? getAtPath(entry.data, collection.entryAdminTitle)[getContentLanguage()] || entry.id
-						: entry.id,
+					name: getCollectionEntryLabel(entry, collection, getContentLanguage()),
 					url: `/admin/entries/${entry.id}`,
 					status: entry.status,
 					createdAt: entry.createdAt,

package/dist/admin/client/form/columns.d.ts

@@ -0,0 +1,7 @@
+import type { ColumnDef } from '@tanstack/table-core';
+export interface FormSubmissionsDataTableRow {
+    id: string;
+    createdAt: Date;
+    url: string;
+}
+export declare const columns: ColumnDef<FormSubmissionsDataTableRow>[];

package/dist/admin/client/form/columns.js

@@ -0,0 +1,21 @@
+import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+import SubmissionLink from './submission-link.svelte';
+export const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        cell: (info) => {
+            return renderComponent(SubmissionLink, {
+                name: info.row.original.id,
+                url: info.row.original.url
+            });
+        }
+    },
+    {
+        accessorKey: 'createdAt',
+        header: 'Created At',
+        cell: (info) => {
+            return new Date(info.row.original.createdAt).toLocaleString('pl');
+        }
+    }
+];

package/dist/admin/client/form/data-table.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="TData, TValue">
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '../../../components/ui/data-table/index.js';
+	import * as Table from '../../../components/ui/table/index.js';
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+	};
+
+	let { data, columns }: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		columns,
+		getCoreRowModel: getCoreRowModel()
+	});
+</script>
+
+<div class="rounded-md border">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && 'selected'}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>

package/dist/admin/client/form/data-table.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type ColumnDef } from '@tanstack/table-core';
+type DataTableProps<TData, TValue> = {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+};
+declare function $$render<TData, TValue>(): {
+    props: DataTableProps<TData, TValue>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue> {
+    props(): ReturnType<typeof $$render<TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue>['props']>, ReturnType<__sveltets_Render<TData, TValue>['events']>, ReturnType<__sveltets_Render<TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    <TData, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<TData, TValue> = InstanceType<typeof DataTable<TData, TValue>>;
+export default DataTable;

package/dist/admin/client/form/form-page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import DataTable from './data-table.svelte';
+	import { columns } from './columns.js';
+
+	import { breadcrumbs } from '../../state/breadcrumbs.svelte';
+	import { getRemotes } from '../../context/remotes.js';
+
+	const remotes = getRemotes();
+
+	const formConfig = $derived(await remotes.getForm(page.params.form || ''));
+
+	const formSubmissionsQuery = $derived(remotes.getFormSubmissions(formConfig.slug));
+
+	$effect(() => {
+		breadcrumbs.state = [
+			{
+				label: formConfig.label || formConfig.slug
+			}
+		];
+	});
+</script>
+
+{#if formConfig}
+	<div class="p-4 md:p-6">
+		{#await formSubmissionsQuery then submissions}
+			{@const items = submissions.map((submission) => ({
+				id: submission.id,
+				createdAt: submission.createdAt,
+				url: `/admin/form-submissions/${submission.id}`
+			}))}
+			<DataTable data={items} {columns} />
+		{/await}
+	</div>
+{/if}

package/dist/admin/client/form/form-page.svelte.d.ts

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

package/dist/admin/client/form/form-submission/form-submission-page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	import { getRemotes } from '../../../context/remotes.js';
+	import FormSubmission from './form-submission.svelte';
+
+	const remotes = getRemotes();
+
+	let formSubmissionQuery = $derived(remotes.getFormSubmission(page.params.submissionId || ''));
+</script>
+
+{#key page.url}
+	{#await formSubmissionQuery}
+		Loading...
+	{:then submission}
+		{#if submission === null}
+			<p>Form submission not found.</p>
+		{:else}
+			<FormSubmission {submission} />
+		{/if}
+	{/await}
+{/key}

package/dist/admin/client/form/form-submission/form-submission-page.svelte.d.ts

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

package/dist/admin/client/form/form-submission/form-submission.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { PUBLIC_URL } from '$env/static/public';
+	import FieldsForm from '../../../components/fields/fields-form.svelte';
+	import slugify from '../../../imports/slugify.js';
+	import { breadcrumbs } from '../../../state/breadcrumbs.svelte';
+	import { isCollection } from '../../../utils/is-collection.js';
+	import Button from '../../../../components/ui/button/button.svelte';
+	import { generateZodSchemaFromFields } from '../../../../core/fields/fieldSchemaToTs.js';
+	import type { RawEntry } from '../../../../types/entries.js';
+
+	import { toast } from 'svelte-sonner';
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod, zodClient } from 'sveltekit-superforms/adapters';
+
+	import { getRemotes } from '../../../context/remotes.js';
+	import {
+		getContentLanguage,
+		setContentLanguage
+	} from '../../../state/content-language.svelte.js';
+
+	import * as DropdownMenu from '../../../../components/ui/dropdown-menu/index.js';
+	import * as ToggleGroup from '../../../../components/ui/toggle-group/index.js';
+	import DotsVerticalIcon from '@tabler/icons-svelte/icons/dots-vertical';
+	import { page } from '$app/state';
+	import { getAtPath } from '../../../utils/objectPath.js';
+	import type { FormSubmission } from '../../../../types/forms.js';
+
+	const remotes = getRemotes();
+
+	type Props = {
+		submission: FormSubmission;
+	};
+
+	let { submission }: Props = $props();
+
+	let form = await remotes.getForm(submission.formSlug);
+</script>
+
+<div class="space-y-4">
+	{#each form.fields as field}
+		<p>{field.label}: {submission.data[field.slug]}</p>
+	{/each}
+</div>

package/dist/admin/client/form/form-submission/form-submission.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FormSubmission } from '../../../../types/forms.js';
+type Props = {
+    submission: FormSubmission;
+};
+declare const FormSubmission: import("svelte").Component<Props, {}, "">;
+type FormSubmission = ReturnType<typeof FormSubmission>;
+export default FormSubmission;

package/dist/admin/client/form/submission-link.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	type Props = {
+		name: string;
+		url: string;
+	};
+
+	let { name, url }: Props = $props();
+</script>
+
+<a href={url} class="hover:underline">
+	{name}
+</a>

package/dist/admin/client/form/submission-link.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    name: string;
+    url: string;
+};
+declare const SubmissionLink: import("svelte").Component<Props, {}, "">;
+type SubmissionLink = ReturnType<typeof SubmissionLink>;
+export default SubmissionLink;

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

@@ -5,3 +5,5 @@ export { default as CollectionPage } from './collection/collection-page.svelte';
 export { default as DashboardPage } from './admin/dashboard-page.svelte';
 export { default as LoginPage } from './login/login-page.svelte';
 export { default as MediaPage } from './media/media-page.svelte';
+export { default as FormPage } from './form/form-page.svelte';
+export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';

package/dist/admin/client/index.js

@@ -5,3 +5,5 @@ export { default as CollectionPage } from './collection/collection-page.svelte';
 export { default as DashboardPage } from './admin/dashboard-page.svelte';
 export { default as LoginPage } from './login/login-page.svelte';
 export { default as MediaPage } from './media/media-page.svelte';
+export { default as FormPage } from './form/form-page.svelte';
+export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';

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

@@ -77,6 +77,22 @@
 		openAndCloseOthers(index + 1);
 	}
 
+	function moveItemUp(index: number) {
+		if (!$value || index <= 0) return;
+		const newValue = [...$value];
+		[newValue[index - 1], newValue[index]] = [newValue[index], newValue[index - 1]];
+		$value = newValue;
+		openAndCloseOthers(index - 1);
+	}
+
+	function moveItemDown(index: number) {
+		if (!$value || index >= $value.length - 1) return;
+		const newValue = [...$value];
+		[newValue[index], newValue[index + 1]] = [newValue[index + 1], newValue[index]];
+		$value = newValue;
+		openAndCloseOthers(index + 1);
+	}
+
 	function removeItem(index: number) {
 		if (!$value) return;
 
@@ -169,12 +185,21 @@
 										{/snippet}
 									</DropdownMenu.Trigger>
 									<DropdownMenu.Content align="end" class="w-32">
-										<DropdownMenu.Item onclick={() => duplicateItem(index)}
-											>Duplicate</DropdownMenu.Item
-										>
-										<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}
-											>Delete</DropdownMenu.Item
+										<DropdownMenu.Item onclick={() => duplicateItem(index)}>
+											Duplicate
+										</DropdownMenu.Item>
+										<DropdownMenu.Item onclick={() => moveItemUp(index)} disabled={index === 0}>
+											Move up
+										</DropdownMenu.Item>
+										<DropdownMenu.Item
+											onclick={() => moveItemDown(index)}
+											disabled={$value && index === $value.length - 1}
 										>
+											Move down
+										</DropdownMenu.Item>
+										<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}>
+											Delete
+										</DropdownMenu.Item>
 									</DropdownMenu.Content>
 								</DropdownMenu.Root>
 							</div>

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

@@ -14,6 +14,7 @@
 	import NumberField from './number-field.svelte';
 	import SeoField from './seo-field.svelte';
 	import UrlField from './url-field.svelte';
+	import RelationField from './relation-field.svelte';
 
 	type Props = {
 		objectFieldType?: 'default' | 'inline';
@@ -87,6 +88,8 @@
 						<SeoField {field} {form} {path} {...props} />
 					{:else if field.type === 'url'}
 						<UrlField {field} {form} {path} {...props} />
+					{:else if field.type === 'relation'}
+						<RelationField {field} {form} {path} {...props} />
 					{:else}
 						<p>Nieobsługiwany typ pola: {field.type}</p>
 					{/if}

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

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { RelationFieldData, RelationField } from '../../../types/fields.js';
+	import {
+		formFieldProxy,
+		type FormFieldProxy,
+		type FormPathLeaves,
+		type SuperForm
+	} from 'sveltekit-superforms';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import Button, { buttonVariants } from '../../../components/ui/button/button.svelte';
+	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import { tick } from 'svelte';
+	import { useId } from 'bits-ui';
+	import * as Popover from '../../../components/ui/popover/index.js';
+	import * as Command from '../../../components/ui/command/index.js';
+	import { cn } from '../../../utils.js';
+	import Selector from '@tabler/icons-svelte/icons/selector';
+	import Check from '@tabler/icons-svelte/icons/check';
+
+	const remotes = getRemotes();
+
+	type Props = {
+		field: RelationField;
+		form: SuperForm<T>;
+		path: FormPathLeaves<T, RelationFieldData>;
+	};
+
+	let { field, form, path, ...props }: Props = $props();
+
+	let collectionConfig = await remotes.getCollection(field.collection);
+
+	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<RelationFieldData>;
+
+	async function getOptionsQuery(): Promise<{ label: string; value: string }[]> {
+		const entries = await remotes.getRawCollectionEntries(field.collection);
+
+		return entries.map((entry) => ({
+			label: getCollectionEntryLabel(entry, collectionConfig, getContentLanguage()),
+			value: entry.id
+		}));
+	}
+
+	let open = $state(false);
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger(triggerId: string) {
+		open = false;
+		tick().then(() => {
+			document.getElementById(triggerId)?.focus();
+		});
+	}
+	const triggerId = useId();
+</script>
+
+{#await getOptionsQuery() then options}
+	<Popover.Root bind:open>
+		<Popover.Trigger
+			id={triggerId}
+			class={cn(
+				buttonVariants({ variant: 'outline' }),
+				'w-[200px] justify-between',
+				!value && 'text-muted-foreground'
+			)}
+			role="combobox"
+			{...props}
+		>
+			{options.find((f) => f.value === $value)?.label ??
+				`Select ${collectionConfig.labels?.singular}`}
+			<Selector class="opacity-50" />
+		</Popover.Trigger>
+		<input hidden value={$value} name={path} />
+
+		<Popover.Content class="w-[200px] p-0">
+			<Command.Root>
+				<Command.Input
+					autofocus
+					placeholder="Search {collectionConfig.labels?.plural}..."
+					class="h-9"
+				/>
+				<Command.Empty>No {collectionConfig.labels?.plural} found.</Command.Empty>
+				<Command.Group value="options">
+					{#each options as option (option.value)}
+						<Command.Item
+							value={option.label}
+							onSelect={() => {
+								$value = option.value;
+								closeAndFocusTrigger(triggerId);
+							}}
+						>
+							{option.label}
+							<Check class={cn('ml-auto', option.value !== $value && 'text-transparent')} />
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Root>
+{/await}

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

@@ -0,0 +1,30 @@
+import type { RelationFieldData, RelationField } from '../../../types/fields.js';
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+declare function $$render<T extends Record<string, unknown>>(): Promise<{
+    props: {
+        field: RelationField;
+        form: SuperForm<T>;
+        path: FormPathLeaves<T, RelationFieldData>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+}>;
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): Awaited<ReturnType<typeof $$render<T>>>['props'];
+    events(): Awaited<ReturnType<typeof $$render<T>>>['events'];
+    slots(): Awaited<ReturnType<typeof $$render<T>>>['slots'];
+    bindings(): "";
+    exports(): Promise<{}>;
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RelationField: $$IsomorphicComponent;
+type RelationField<T extends Record<string, unknown>> = InstanceType<typeof RelationField<T>>;
+export default RelationField;