includio-cms 0.5.2 → 0.5.3

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

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

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

@@ -1,27 +1,14 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import Input from '../../../components/ui/input/input.svelte';
 	import type { DateField } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 
 	type Props = {
 		field: DateField;
-		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();
 
 	// Convert ISO date to YYYY-MM-DD for input
 	function toInputFormat(iso: string | undefined): string {
@@ -35,21 +22,21 @@
 		return `${local}T00:00:00.000Z`;
 	}
 
-	let localValue = $state(toInputFormat($value));
+	let localValue = $state(toInputFormat(value));
 
 	$effect(() => {
-		localValue = toInputFormat($value);
+		localValue = toInputFormat(value);
 	});
 
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		localValue = target.value;
-		$value = target.value ? toIso(target.value) : '';
+		value = target.value ? toIso(target.value) : '';
 	}
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = '';
+		if (value === undefined) {
+			value = '';
 		}
 	});
 </script>

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

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

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

@@ -1,27 +1,14 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import Input from '../../../components/ui/input/input.svelte';
 	import type { DateTimeField } from '../../../types/fields.js';
 	import { onMount } from 'svelte';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 
 	type Props = {
 		field: DateTimeField;
-		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();
 
 	// Convert ISO datetime to datetime-local format (YYYY-MM-DDTHH:mm)
 	function toDatetimeLocal(iso: string | undefined): string {
@@ -37,21 +24,21 @@
 		return new Date(local).toISOString();
 	}
 
-	let localValue = $state(toDatetimeLocal($value));
+	let localValue = $state(toDatetimeLocal(value));
 
 	$effect(() => {
-		localValue = toDatetimeLocal($value);
+		localValue = toDatetimeLocal(value);
 	});
 
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		localValue = target.value;
-		$value = target.value ? toIso(target.value) : '';
+		value = target.value ? toIso(target.value) : '';
 	}
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = '';
+		if (value === undefined) {
+			value = '';
 		}
 	});
 </script>

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

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

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import * as Form from '../../../components/ui/form/index.js';
+	import { formFieldProxy, type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 
-	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
-	import SlugField from './slug-field.svelte';
 	import type { Field, FieldType } from '../../../types/fields.js';
 	import TextFieldWrapper from './text-field-wrapper.svelte';
 	import RequiredLabel from './required-label.svelte';
@@ -32,6 +31,10 @@
 
 	const interfaceLanguage = useInterfaceLanguage();
 
+	// Bridge: SuperForm store → $bindable for leaf components
+	// Cast to any: runtime types enforced by child components via $bindable
+	const { value } = formFieldProxy(form, path) as { value: import('svelte/store').Writable<any> };
+
 	const fieldsWithNoDescription: FieldType[] = ['boolean', 'object', 'blocks', 'seo'];
 	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'blocks', 'seo'];
 
@@ -74,7 +77,7 @@
 			{#if field.required}<span class="text-destructive ml-0.5">*</span>{/if}
 		</Form.Legend>
 
-		<RadioField {field} {form} {path} {...props} />
+		<RadioField {field} bind:value={$value} {...props} />
 
 		{#if field.description}
 			<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
@@ -88,7 +91,7 @@
 			{#if field.required}<span class="text-destructive ml-0.5">*</span>{/if}
 		</Form.Legend>
 
-		<CheckboxesField {field} {form} {path} {...props} />
+		<CheckboxesField {field} bind:value={$value} {...props} />
 
 		{#if field.description}
 			<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
@@ -116,35 +119,45 @@
 					{/if}
 
 					{#if field.type === 'image'}
-						<LazyField loader={() => import('./image-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-24" />
+						{#await import('./image-field.svelte') then { default: ImageField }}
+							<ImageField {field} bind:value={$value} />
+						{/await}
 					{:else if field.type === 'media'}
-						<LazyField loader={() => import('./media-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-24" />
+						{#await import('./media-field.svelte') then { default: MediaField }}
+							<MediaField {field} bind:value={$value} />
+						{/await}
 					{:else if field.type === 'file'}
-						<LazyField loader={() => import('./file-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-12" />
+						{#await import('./file-field.svelte') then { default: FileField }}
+							<FileField {field} bind:value={$value} />
+						{/await}
 					{:else if field.type === 'blocks'}
-						<LazyField loader={() => import('./blocks-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./blocks-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
 					{:else if field.type === 'array'}
-						<LazyField loader={() => import('./simple-array-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-12" />
+						{#await import('./simple-array-field.svelte') then { default: ArrayField }}
+							<ArrayField {field} bind:value={$value} />
+						{/await}
 					{:else if field.type === 'object'}
-						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
 					{:else if field.type === 'slug'}
-						<SlugField {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./slug-field.svelte')} props={{ field, form, path }} skeletonClass="h-10" />
 					{:else if field.type === 'boolean'}
-						<BooleanField {field} {form} {path} {...props} />
+						<BooleanField {field} bind:value={$value} />
 					{:else if field.type === 'number'}
-						<NumberField {field} {form} {path} {...props} />
+						<NumberField {field} bind:value={$value} />
 					{:else if field.type === 'seo'}
-						<LazyField loader={() => import('./seo-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-16" />
+						<LazyField loader={() => import('./seo-field.svelte')} props={{ field, form, path }} skeletonClass="h-16" />
 					{:else if field.type === 'url'}
-						<UrlFieldWrapper {field} {form} {path} {...props} />
+						<UrlFieldWrapper {field} {form} {path} />
 					{:else if field.type === 'relation'}
-						<LazyField loader={() => import('./relation-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-16" />
+						{#await import('./relation-field.svelte') then { default: RelationField }}
+							<RelationField {field} bind:value={$value} />
+						{/await}
 					{:else if field.type === 'date'}
-						<DateField {field} {form} {path} {...props} />
+						<DateField {field} bind:value={$value} />
 					{:else if field.type === 'datetime'}
-						<DateTimeField {field} {form} {path} {...props} />
+						<DateTimeField {field} bind:value={$value} />
 					{:else if field.type === 'select'}
-						<SelectField {field} {form} {path} {...props} />
+						<SelectField {field} bind:value={$value} />
 					{:else}
 						<p>Nieobsługiwany typ pola: {field.type}</p>
 					{/if}

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

@@ -1,4 +1,4 @@
-import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 import type { Field } from '../../../types/fields.js';
 type Props = {
     objectFieldType?: 'default' | 'inline';

package/dist/admin/components/fields/field-value-bridge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import { formFieldProxy, type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+	import type { Component } from 'svelte';
+
+	type Props = {
+		form: SuperForm<T>;
+		path: FormPathLeaves<T>;
+		component: Component<any>;
+		[key: string]: unknown;
+	};
+
+	let { form, path, component: Comp, ...rest }: Props = $props();
+
+	const { value } = formFieldProxy(form, path);
+</script>
+
+<Comp bind:value={$value} {...rest} />

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

@@ -0,0 +1,31 @@
+import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
+import type { Component } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        [key: string]: unknown;
+        form: SuperForm<T>;
+        path: FormPathLeaves<T>;
+        component: Component<any>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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 FieldValueBridge: $$IsomorphicComponent;
+type FieldValueBridge<T extends Record<string, unknown>> = InstanceType<typeof FieldValueBridge<T>>;
+export default FieldValueBridge;

package/dist/admin/components/fields/fields-form.svelte

@@ -4,6 +4,7 @@
 	import { cn } from '../../../utils.js';
 	import FieldRenderer from './field-renderer.svelte';
 	import type { Field } from '../../../types/fields.js';
+	import { evaluateCondition } from '../../utils/fieldCondition.js';
 	import { normalizePath } from '../../utils/objectPath.js';
 	import { tick } from 'svelte';
 
@@ -118,15 +119,17 @@
 	onclick={handleClick}
 >
 	{#each fields as field (field.slug)}
-		{@const showFlash = isFlashing(field.slug)}
-		<div
-			data-field-path={field.slug}
-			class={cn(
-				'rounded-lg transition-all duration-500',
-				showFlash && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-			)}
-		>
-			<FieldRenderer {field} {form} path={field.slug} {focusedPath} {flashingPath} />
-		</div>
+		{#if evaluateCondition(field.showWhen, (slug) => $formData[slug])}
+			{@const showFlash = isFlashing(field.slug)}
+			<div
+				data-field-path={field.slug}
+				class={cn(
+					'rounded-lg transition-all duration-500',
+					showFlash && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+				)}
+			>
+				<FieldRenderer {field} {form} path={field.slug} {focusedPath} {flashingPath} />
+			</div>
+		{/if}
 	{/each}
 </form>

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

@@ -1,15 +1,5 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import * as Dialog from '../../../components/ui/dialog/index.js';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { onMount } from 'svelte';
 	import FilePreview from '../media/file-preview.svelte';
 	import { buttonVariants } from '../../../components/ui/button/button.svelte';
@@ -19,36 +9,31 @@
 
 	type Props = {
 		field: FileField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string | string[] | undefined>;
+		value: string | string[] | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<
-		string | string[] | undefined
-	>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = field.multiple ? [] : '';
+		if (value === undefined) {
+			value = field.multiple ? [] : '';
 		}
 	});
 </script>
 
-{#if $value !== undefined}
+{#if value !== undefined}
 	<Dialog.Root>
 		<Dialog.Trigger type="button" class={buttonVariants({ variant: 'outline' })}
 			>Select File</Dialog.Trigger
 		>
 		<Dialog.Content class="max-h-[80vh] w-[80vw] !max-w-none overflow-y-scroll">
-			<MediaLibrary bind:selected={$value} multiple={field.multiple} accept={field.accept} />
+			<MediaLibrary bind:selected={value} multiple={field.multiple} accept={field.accept} />
 		</Dialog.Content>
 	</Dialog.Root>
 
 	<div class="flex flex-wrap gap-2">
-		{#if field.multiple && Array.isArray($value)}
-			{#each $value as item}
+		{#if field.multiple && Array.isArray(value)}
+			{#each value as item}
 				{#if z.string().uuid().safeParse(item).success}
 					<FilePreview
 						id={item}
@@ -56,10 +41,10 @@
 					/>
 				{/if}
 			{/each}
-		{:else if typeof $value === 'string'}
-			{#if z.string().uuid().safeParse($value).success}
+		{:else if typeof value === 'string'}
+			{#if z.string().uuid().safeParse(value).success}
 				<FilePreview
-					id={$value}
+					id={value}
 					class="aspect-square w-full max-w-[100px] object-cover object-center"
 				/>
 			{/if}

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

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

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

@@ -1,15 +1,5 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import * as Dialog from '../../../components/ui/dialog/index.js';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { onMount } from 'svelte';
 	import Button from '../../../components/ui/button/button.svelte';
 	import type { ImageField } from '../../../types/fields.js';
@@ -42,31 +32,26 @@
 
 	type Props = {
 		field: ImageField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string | string[] | undefined>;
+		value: string | string[] | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<
-		string | string[] | undefined
-	>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = field.multiple ? [] : '';
+		if (value === undefined) {
+			value = field.multiple ? [] : '';
 		}
 	});
 </script>
 
-{#if $value !== undefined}
+{#if value !== undefined}
 	<Dialog.Root>
 		<Dialog.Trigger>
 			{#snippet child({ props })}
-				{#if $value && ((typeof $value === 'string' && $value !== '') || (Array.isArray($value) && $value.length > 0))}
+				{#if value && ((typeof value === 'string' && value !== '') || (Array.isArray(value) && value.length > 0))}
 					<div class="group/dialog-trigger relative aspect-square max-w-64 overflow-hidden rounded-2xl border">
-						{#if typeof $value === 'string'}
-							{#await remotes.getFileById($value)}
+						{#if typeof value === 'string'}
+							{#await remotes.getFileById(value)}
 								<div class="animate-pulse bg-muted w-full h-full rounded-xl"></div>
 							{:then file}
 								{#if file}
@@ -83,8 +68,8 @@
 									</button>
 								{/if}
 							{/await}
-						{:else if Array.isArray($value) && $value.length > 0}
-							{@const valueArr = $value}
+						{:else if Array.isArray(value) && value.length > 0}
+							{@const valueArr = value}
 							{#await remotes.getMediaFiles({ data: { ids: valueArr } })}
 								<div class="animate-pulse bg-muted w-full h-full rounded-xl"></div>
 							{:then files}
@@ -151,7 +136,7 @@
 									class="h-8"
 									onclick={(e) => {
 										e.stopPropagation();
-										$value = field.multiple ? [] : '';
+										value = field.multiple ? [] : '';
 									}}
 								>
 									<X class="h-4 w-4" />
@@ -176,7 +161,7 @@
 			{/snippet}
 		</Dialog.Trigger>
 		<Dialog.Content class="h-[85vh] w-full max-w-6xl! sm:max-w-6xl! overflow-hidden p-0 flex flex-col">
-			<MediaSelector bind:selected={$value} multiple={field.multiple} accept="image/*" />
+			<MediaSelector bind:selected={value} multiple={field.multiple} accept="image/*" />
 		</Dialog.Content>
 	</Dialog.Root>