includio-cms 0.5.2 → 0.5.5

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

@@ -1,16 +1,6 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import type { RelationFieldData, RelationField } from '../../../types/fields.js';
 	import type { CollectionConfig } from '../../../types/collections.js';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { buttonVariants } from '../../../components/ui/button/button.svelte';
 	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
@@ -43,27 +33,24 @@
 
 	type Props = {
 		field: RelationField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, RelationFieldData>;
+		value: RelationFieldData;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<RelationFieldData>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	const multiple = $derived(field.multiple === true);
 
 	// Ensure value is array when multiple
 	onMount(() => {
-		if (multiple && !Array.isArray($value)) {
-			$value = $value ? [$value] : [];
+		if (multiple && !Array.isArray(value)) {
+			value = value ? [value] : [];
 		}
 	});
 
 	// Helper to get current array value safely
 	function getArrayValue(): string[] {
-		if (Array.isArray($value)) return $value;
-		return $value ? [$value] : [];
+		if (Array.isArray(value)) return value;
+		return value ? [value] : [];
 	}
 
 	function isSelected(id: string): boolean {
@@ -73,14 +60,14 @@
 	function toggleItem(id: string) {
 		const arr = getArrayValue();
 		if (arr.includes(id)) {
-			$value = arr.filter((v) => v !== id);
+			value = arr.filter((v) => v !== id);
 		} else {
-			$value = [...arr, id];
+			value = [...arr, id];
 		}
 	}
 
 	function removeItem(id: string) {
-		$value = getArrayValue().filter((v) => v !== id);
+		value = getArrayValue().filter((v) => v !== id);
 	}
 
 	type RelationOption = { label: string; value: string };
@@ -95,16 +82,19 @@
 
 		untrack(() => {
 			loading = true;
-			Promise.all([
-				remotes.getCollection(collection),
-				remotes.getEntries({ slug: collection, language: currentLang })
-			]).then(([collectionConfig, entries]) => {
-				const options = entries.map((entry) => ({
-					label: getCollectionEntryLabel(entry, collectionConfig),
-					value: entry.id
-				}));
-				relationData = { collectionConfig, options };
-				loading = false;
+			remotes.getCollection(collection).then((collectionConfig) => {
+				const entriesParams: Record<string, unknown> = { slug: collection, language: currentLang };
+				if (collectionConfig.orderable) {
+					entriesParams.orderBy = { column: 'sortOrder', direction: 'asc' };
+				}
+				remotes.getEntries(entriesParams).then((entries) => {
+					const options = entries.map((entry) => ({
+						label: getCollectionEntryLabel(entry, collectionConfig),
+						value: entry.id
+					}));
+					relationData = { collectionConfig, options };
+					loading = false;
+				});
 			});
 		});
 	});
@@ -154,7 +144,6 @@
 				{/if}
 				<Selector class="opacity-50" />
 			</Popover.Trigger>
-			<input hidden value={JSON.stringify(getArrayValue())} name={path} />
 
 			<Popover.Content class="w-[200px] p-0">
 				<Command.Root>
@@ -199,7 +188,7 @@
 									const dropIndex = parseInt(state.targetContainer ?? '');
 
 									if (!isNaN(dragIndex) && !isNaN(dropIndex)) {
-										$value = [...arrayMove(getArrayValue(), dragIndex, dropIndex)];
+										value = [...arrayMove(getArrayValue(), dragIndex, dropIndex)];
 									}
 								}
 							}
@@ -231,7 +220,7 @@
 			</div>
 		{/if}
 	{:else}
-		<!-- Single-select mode (unchanged) -->
+		<!-- Single-select mode -->
 		<Popover.Root bind:open>
 			<Popover.Trigger
 				id={triggerId}
@@ -243,11 +232,10 @@
 				role="combobox"
 				{...props}
 			>
-				{options.find((f) => f.value === $value)?.label ??
+				{options.find((f) => f.value === value)?.label ??
 					`${lang[interfaceLanguage.current].select} ${getLocalizedLabel(collectionConfig.labels?.singular, interfaceLanguage.current) || collectionConfig.slug}`}
 				<Selector class="opacity-50" />
 			</Popover.Trigger>
-			<input hidden value={$value} name={path} />
 
 			<Popover.Content class="w-[200px] p-0">
 				<Command.Root>
@@ -265,12 +253,12 @@
 							<Command.Item
 								value={option.label}
 								onSelect={() => {
-									$value = option.value;
+									value = option.value;
 									closeAndFocusTrigger(triggerId);
 								}}
 							>
 								{option.label}
-								<Check class={cn('ml-auto', option.value !== $value && 'text-transparent')} />
+								<Check class={cn('ml-auto', option.value !== value && 'text-transparent')} />
 							</Command.Item>
 						{/each}
 					</Command.Group>

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

@@ -1,30 +1,8 @@
 import type { RelationFieldData, RelationField } from '../../../types/fields.js';
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: RelationField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, RelationFieldData>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+type Props = {
+    field: RelationField;
+    value: RelationFieldData;
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-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>>;
+declare const RelationField: import("svelte").Component<Props, {}, "value">;
+type RelationField = ReturnType<typeof RelationField>;
 export default RelationField;

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

@@ -1,26 +1,13 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
+<script lang="ts">
 	import Tiptap from '../tiptap.svelte';
 	import type { RichtextField } from '../../../types/fields.js';
 
 	type Props = {
 		field: RichtextField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string | undefined>;
+		value: string | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<string | undefined>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 </script>
 
-<Tiptap bind:value={$value} />
+<Tiptap bind:value />

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

@@ -1,30 +1,8 @@
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 import type { RichtextField } from '../../../types/fields.js';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: RichtextField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, string | undefined>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+type Props = {
+    field: RichtextField;
+    value: string | undefined;
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-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 RichtextField: $$IsomorphicComponent;
-type RichtextField<T extends Record<string, unknown>> = InstanceType<typeof RichtextField<T>>;
+declare const RichtextField: import("svelte").Component<Props, {}, "value">;
+type RichtextField = ReturnType<typeof RichtextField>;
 export default RichtextField;

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

@@ -1,49 +1,37 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import * as Select from '../../../components/ui/select/index.js';
 	import type { SelectField } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 
 	type Props = {
 		field: SelectField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string | string[] | undefined>;
+		value: string | string[] | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<string | string[] | undefined>;
 
 	// Get display label for current value(s)
 	function getDisplayLabel(): string {
-		if (!$value) return '';
-		if (field.multiple && Array.isArray($value)) {
-			return $value
+		if (!value) return '';
+		if (field.multiple && Array.isArray(value)) {
+			return value
 				.map((v) => {
 					const opt = field.options.find((o) => o.value === v);
 					return opt ? getLocalizedLabel(opt.label, interfaceLanguage.current) : v;
 				})
 				.join(', ');
 		}
-		const option = field.options.find((o) => o.value === $value);
-		return option ? getLocalizedLabel(option.label, interfaceLanguage.current) : ($value as string);
+		const option = field.options.find((o) => o.value === value);
+		return option ? getLocalizedLabel(option.label, interfaceLanguage.current) : (value as string);
 	}
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = field.multiple ? [] : '';
+		if (value === undefined) {
+			value = field.multiple ? [] : '';
 		}
 	});
 </script>
@@ -51,11 +39,10 @@
 {#if field.multiple}
 	<Select.Root
 		type="multiple"
-		bind:value={$value as string[]}
-		name={path}
+		bind:value={value as string[]}
 	>
 		<Select.Trigger {...props} class="w-full">
-			{#if Array.isArray($value) && $value.length > 0}
+			{#if Array.isArray(value) && value.length > 0}
 				{getDisplayLabel()}
 			{:else}
 				<span class="text-muted-foreground">Select...</span>
@@ -70,11 +57,10 @@
 {:else}
 	<Select.Root
 		type="single"
-		bind:value={$value as string}
-		name={path}
+		bind:value={value as string}
 	>
 		<Select.Trigger {...props} class="w-full">
-			{#if $value}
+			{#if value}
 				{getDisplayLabel()}
 			{:else}
 				<span class="text-muted-foreground">Select...</span>

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

@@ -1,30 +1,8 @@
 import type { SelectField } from '../../../types/fields.js';
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: SelectField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, string | string[] | undefined>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+type Props = {
+    field: SelectField;
+    value: string | string[] | undefined;
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-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 SelectField: $$IsomorphicComponent;
-type SelectField<T extends Record<string, unknown>> = InstanceType<typeof SelectField<T>>;
+declare const SelectField: import("svelte").Component<Props, {}, "value">;
+type SelectField = ReturnType<typeof SelectField>;
 export default SelectField;

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

@@ -1,12 +1,5 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
-	import {
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
+<script lang="ts">
+	import type { SuperForm } from 'sveltekit-superforms';
 	import FieldRenderer from './field-renderer.svelte';
 	import { joinPath } from '../../utils/objectPath.js';
 	import { getAtPath, setAtPath } from '../../utils/objectPath.js';
@@ -28,8 +21,8 @@
 
 	type Props = {
 		field: SeoField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, SeoFieldData | undefined>;
+		form: SuperForm<Record<string, unknown>>;
+		path: string;
 	};
 
 	let { field, form, path, ...props }: Props = $props();
@@ -261,7 +254,7 @@
 		<div>
 			<FieldRenderer
 				field={f}
-				form={form as SuperForm<Record<string, unknown>>}
+				{form}
 				path={joinPath(path, f.slug)}
 			/>
 			{#if f.slug === 'title'}

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

@@ -1,30 +1,10 @@
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-import type { SeoField, SeoFieldData } from '../../../types/fields.js';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: SeoField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, SeoFieldData | undefined>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+import type { SuperForm } from 'sveltekit-superforms';
+import type { SeoField } from '../../../types/fields.js';
+type Props = {
+    field: SeoField;
+    form: SuperForm<Record<string, unknown>>;
+    path: string;
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-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 SeoField: $$IsomorphicComponent;
-type SeoField<T extends Record<string, unknown>> = InstanceType<typeof SeoField<T>>;
+declare const SeoField: import("svelte").Component<Props, {}, "">;
+type SeoField = ReturnType<typeof SeoField>;
 export default SeoField;

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

@@ -1,16 +1,6 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import Button from '../../../components/ui/button/button.svelte';
 	import Input from '../../../components/ui/input/input.svelte';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import type { ArrayField, UrlFieldData } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
 	import CirclePlus from '@tabler/icons-svelte/icons/circle-plus';
@@ -23,21 +13,18 @@
 
 	type Props = {
 		field: ArrayField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T>;
+		value: unknown[] | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<unknown[] | undefined>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	onMount(() => {
-		if (!$value || !Array.isArray($value)) {
-			$value = [];
+		if (!value || !Array.isArray(value)) {
+			value = [];
 		}
 	});
 
-	const atMax = $derived(field.maxItems !== undefined && ($value?.length ?? 0) >= field.maxItems);
+	const atMax = $derived(field.maxItems !== undefined && (value?.length ?? 0) >= field.maxItems);
 
 	// --- Text ---
 	let textInput = $state('');
@@ -47,9 +34,9 @@
 		if (field.localized) {
 			const item: Record<string, string> = {};
 			item[contentLanguage.current] = textInput.trim();
-			$value = [...($value ?? []), item];
+			value = [...(value ?? []), item];
 		} else {
-			$value = [...($value ?? []), textInput.trim()];
+			value = [...(value ?? []), textInput.trim()];
 		}
 		textInput = '';
 	}
@@ -67,7 +54,7 @@
 	function addNumberItem() {
 		const num = Number(numberInput);
 		if (numberInput === '' || isNaN(num) || atMax) return;
-		$value = [...($value ?? []), num];
+		value = [...(value ?? []), num];
 		numberInput = '';
 	}
 
@@ -82,13 +69,13 @@
 	function addUrlItem() {
 		if (atMax) return;
 		const item: UrlFieldData = { url: {}, text: {}, newTab: false };
-		$value = [...($value ?? []), item];
+		value = [...(value ?? []), item];
 	}
 
 	// --- Common ---
 	function removeItem(index: number) {
-		if (!$value) return;
-		$value = $value.filter((_, i) => i !== index);
+		if (!value) return;
+		value = value.filter((_, i) => i !== index);
 	}
 
 	function getTextDisplay(item: unknown): string {
@@ -104,9 +91,9 @@
 {#if field.of === 'text'}
 	<!-- Tag chips for text items -->
 	<div class="space-y-3">
-		{#if $value && $value.length > 0}
+		{#if value && value.length > 0}
 			<div class="flex flex-wrap gap-2">
-				{#each $value as item, index}
+				{#each value as item, index}
 					<span
 						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
 					>
@@ -122,9 +109,9 @@
 									if (typeof item === 'object' && item !== null) {
 										const rec = { ...(item as Record<string, string>) };
 										rec[contentLanguage.current] = val;
-										const arr = [...($value ?? [])];
+										const arr = [...(value ?? [])];
 										arr[index] = rec;
-										$value = arr;
+										value = arr;
 									}
 								}}
 							/>
@@ -161,7 +148,7 @@
 
 		{#if field.maxItems !== undefined}
 			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
-				{$value?.length ?? 0} / {field.maxItems}
+				{value?.length ?? 0} / {field.maxItems}
 			</p>
 		{/if}
 	</div>
@@ -169,9 +156,9 @@
 {:else if field.of === 'number'}
 	<!-- Tag chips for number items -->
 	<div class="space-y-3">
-		{#if $value && $value.length > 0}
+		{#if value && value.length > 0}
 			<div class="flex flex-wrap gap-2">
-				{#each $value as item, index}
+				{#each value as item, index}
 					<span
 						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium tabular-nums"
 					>
@@ -206,7 +193,7 @@
 
 		{#if field.maxItems !== undefined}
 			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
-				{$value?.length ?? 0} / {field.maxItems}
+				{value?.length ?? 0} / {field.maxItems}
 			</p>
 		{/if}
 	</div>
@@ -214,9 +201,9 @@
 {:else if field.of === 'url'}
 	<!-- Compact list for URL items -->
 	<div class="space-y-3">
-		{#if $value && $value.length > 0}
+		{#if value && value.length > 0}
 			<div class="space-y-2">
-				{#each $value as item, index}
+				{#each value as item, index}
 					{@const urlItem = item as UrlFieldData}
 					<div class="flex items-start gap-2 rounded-xl border border-[#E2DFF0] bg-[#F4F2FA] p-3">
 						<div class="flex-1 space-y-2">
@@ -227,9 +214,9 @@
 								oninput={(e) => {
 									const val = e.currentTarget.value;
 									const updated = { ...urlItem, url: { ...(urlItem.url ?? {}), [contentLanguage.current]: val } };
-									const arr = [...($value ?? [])];
+									const arr = [...(value ?? [])];
 									arr[index] = updated;
-									$value = arr;
+									value = arr;
 								}}
 							/>
 							<div class="flex items-center gap-2">
@@ -241,9 +228,9 @@
 									oninput={(e) => {
 										const val = e.currentTarget.value;
 										const updated = { ...urlItem, text: { ...(urlItem.text ?? {}), [contentLanguage.current]: val } };
-										const arr = [...($value ?? [])];
+										const arr = [...(value ?? [])];
 										arr[index] = updated;
-										$value = arr;
+										value = arr;
 									}}
 								/>
 								<label class="flex items-center gap-1.5 text-xs text-[#555566] whitespace-nowrap">
@@ -252,9 +239,9 @@
 										checked={urlItem.newTab ?? false}
 										onchange={(e) => {
 											const updated = { ...urlItem, newTab: e.currentTarget.checked };
-											const arr = [...($value ?? [])];
+											const arr = [...(value ?? [])];
 											arr[index] = updated;
-											$value = arr;
+											value = arr;
 										}}
 										class="accent-[#5B4A9E]"
 									/>
@@ -282,7 +269,7 @@
 
 		{#if field.maxItems !== undefined}
 			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
-				{$value?.length ?? 0} / {field.maxItems}
+				{value?.length ?? 0} / {field.maxItems}
 			</p>
 		{/if}
 	</div>