includio-cms 0.5.2 → 0.5.3

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

@@ -1,13 +1,8 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import * as Accordion from '../../../components/ui/accordion/index.js';
 	import Button from '../../../components/ui/button/button.svelte';
-	import SuperDebug, {
+	import {
 		formFieldProxy,
-		type FormFieldProxy,
 		type FormPathLeaves,
 		type SuperForm
 	} from 'sveltekit-superforms';
@@ -19,7 +14,6 @@
 	} from '../../../types/fields.js';
 	import FieldRenderer from './field-renderer.svelte';
 	import { onMount, tick } from 'svelte';
-	import * as Form from '../../../components/ui/form/index.js';
 	import CirclePlus from '@tabler/icons-svelte/icons/circle-plus';
 	import Badge from '../../../components/ui/badge/badge.svelte';
 	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
@@ -47,25 +41,31 @@
 
 	type Props = {
 		field: BlocksField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, ObjectFieldData[] | undefined>;
+		form: SuperForm<Record<string, unknown>>;
+		path: FormPathLeaves<Record<string, unknown>>;
 		focusedPath?: string | null;
 		flashingPath?: string | null;
 		depth?: number;
 	};
 
-	let { field, form, path, focusedPath = null, flashingPath = null, depth = 0, ...props }: Props = $props();
+	let {
+		field,
+		form,
+		path,
+		focusedPath = null,
+		flashingPath = null,
+		depth = 0,
+		...props
+	}: Props = $props();
 
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<
-		ObjectFieldData[] | undefined
-	>;
+	const { value } = formFieldProxy(form, path) as { value: import('svelte/store').Writable<ObjectFieldData[] | undefined> };
 
 	onMount(() => {
 		if (!$value) {
 			$value = [];
 		}
 
-		$value = $value.reduce((acc, item) => {
+		$value = $value.reduce((acc: ObjectFieldData[], item: ObjectFieldData) => {
 			if (!item.slug) return acc;
 			if (field.of.find((o) => o.slug === item.slug) === undefined) return acc;
 			acc.push(item);
@@ -215,9 +215,9 @@
 
 	const isFixedLength = $derived(
 		field.minItems !== undefined &&
-		field.maxItems !== undefined &&
-		field.minItems === field.maxItems &&
-		field.minItems > 0
+			field.maxItems !== undefined &&
+			field.minItems === field.maxItems &&
+			field.minItems > 0
 	);
 	const fixedCount = $derived(isFixedLength ? field.minItems! : 0);
 
@@ -226,11 +226,15 @@
 
 <div class="flex items-center justify-between gap-4">
 	<div class="flex items-center gap-2">
-		<RequiredLabel required={field.minItems !== undefined && field.minItems > 0} class="text-lg">{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
+		<RequiredLabel required={field.minItems !== undefined && field.minItems > 0} class="text-lg"
+			>{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel
+		>
 		{#if isFixedLength}
-			<span class="text-xs text-muted-foreground">{fixedCount} elementów</span>
+			<span class="text-muted-foreground text-xs">{fixedCount} elementów</span>
 		{:else if field.maxItems !== undefined}
-			<span class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">{$value?.length ?? 0} / {field.maxItems}</span>
+			<span class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}"
+				>{$value?.length ?? 0} / {field.maxItems}</span
+			>
 		{/if}
 	</div>
 
@@ -281,105 +285,119 @@
 							dndState.targetContainer = null;
 							dndState.targetElement = null;
 
-							setTimeout(() => { dropProcessing = false; }, 50);
+							setTimeout(() => {
+								dropProcessing = false;
+							}, 50);
 						}
 					}
 				}}
 				animate:flip={{ duration: 200 }}
 			>
-			{#key index}
-				{#if $value[index].data && $value[index].slug}
-					{@const item = $value[index]}
-					{@const objectField = field.of.find((option) => option.slug === item.slug)}
-
-					{#if objectField}
-						<Accordion.Item value={index.toString()} class="border-0" data-depth={depth + 1}>
-							<Accordion.Trigger
-								class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none"
-							>
-								<div class="flex grow items-center justify-between gap-4">
-									<div class="flex items-center gap-4">
-										{#if !isFixedLength || fixedCount > 1}
-										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<div
-											use:draggable={{ container: index.toString(), dragData: { id: item._id } }}
-											class="cursor-grab text-muted-foreground hover:text-foreground"
-											onmousedown={(e) => e.stopPropagation()}
-											onclick={(e) => e.stopPropagation()}
-										>
-											<GripVertical class="h-4 w-4" />
+				{#key index}
+					{#if $value[index].data && $value[index].slug}
+						{@const item = $value[index]}
+						{@const objectField = field.of.find((option) => option.slug === item.slug)}
+
+						{#if objectField}
+							<Accordion.Item value={index.toString()} class="border-0" data-depth={depth + 1}>
+								<Accordion.Trigger
+									class="items-center border px-4 text-base font-normal data-[state=open]:rounded-b-none"
+								>
+									<div class="flex grow items-center justify-between gap-4">
+										<div class="flex items-center gap-4">
+											{#if !isFixedLength || fixedCount > 1}
+												<!-- svelte-ignore a11y_no_static_element_interactions -->
+												<div
+													use:draggable={{
+														container: index.toString(),
+														dragData: { id: item._id }
+													}}
+													class="text-muted-foreground hover:text-foreground cursor-grab"
+													onmousedown={(e) => e.stopPropagation()}
+													onclick={(e) => e.stopPropagation()}
+												>
+													<GripVertical class="h-4 w-4" />
+												</div>
+											{/if}
+											<span>{index < 10 ? '0' : ''}{index + 1}</span>
+											<Badge variant="outline"
+												>{getLocalizedLabel(objectField.label, interfaceLanguage.current) ||
+													objectField.slug}</Badge
+											>
+											<span>{getAccordionLabel($value[index])}</span>
 										</div>
+
+										{#if !(isFixedLength && fixedCount <= 1)}
+											<DropdownMenu.Root>
+												<DropdownMenu.Trigger
+													class="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+												>
+													{#snippet child({ props })}
+														<Button variant="ghost" size="icon" {...props}>
+															<DotsVerticalIcon />
+															<span class="sr-only">Open menu</span>
+														</Button>
+													{/snippet}
+												</DropdownMenu.Trigger>
+												<DropdownMenu.Content align="end" class="w-32">
+													{#if !isFixedLength}
+														<DropdownMenu.Item
+															onclick={() => duplicateItem(index)}
+															disabled={atMax}
+														>
+															Duplicate
+														</DropdownMenu.Item>
+													{/if}
+													<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>
+													{#if !isFixedLength}
+														<DropdownMenu.Item
+															variant="destructive"
+															onclick={() => removeItem(index)}
+														>
+															Delete
+														</DropdownMenu.Item>
+													{/if}
+												</DropdownMenu.Content>
+											</DropdownMenu.Root>
 										{/if}
-										<span>{index < 10 ? '0' : ''}{index + 1}</span>
-										<Badge variant="outline">{getLocalizedLabel(objectField.label, interfaceLanguage.current) || objectField.slug}</Badge>
-										<span>{getAccordionLabel($value[index])}</span>
 									</div>
-
-									{#if !(isFixedLength && fixedCount <= 1)}
-									<DropdownMenu.Root>
-										<DropdownMenu.Trigger
-											class="data-[state=open]:bg-muted text-muted-foreground flex size-8"
-										>
-											{#snippet child({ props })}
-												<Button variant="ghost" size="icon" {...props}>
-													<DotsVerticalIcon />
-													<span class="sr-only">Open menu</span>
-												</Button>
-											{/snippet}
-										</DropdownMenu.Trigger>
-										<DropdownMenu.Content align="end" class="w-32">
-											{#if !isFixedLength}
-											<DropdownMenu.Item onclick={() => duplicateItem(index)} disabled={atMax}>
-												Duplicate
-											</DropdownMenu.Item>
-											{/if}
-											<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>
-											{#if !isFixedLength}
-											<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}>
-												Delete
-											</DropdownMenu.Item>
-											{/if}
-										</DropdownMenu.Content>
-									</DropdownMenu.Root>
-									{/if}
-								</div>
-							</Accordion.Trigger>
-							<Accordion.Content
-								class="space-y-4 rounded-b-md border border-t-0"
-								style="padding: {Math.max(4, 16 - depth * 3)}px;"
-							>
-								{@const itemPath = joinPath(path, index)}
-								<div data-field-path={itemPath}>
-									<FieldRenderer
-										objectFieldType="inline"
-										field={objectField}
-										form={form as SuperForm<Record<string, unknown>>}
-										path={itemPath as FormPathLeaves<T, ObjectFieldData>}
-										{focusedPath}
-										{flashingPath}
-										depth={depth + 1}
-									/>
-								</div>
-							</Accordion.Content>
-						</Accordion.Item>
+								</Accordion.Trigger>
+								<Accordion.Content class="space-y-4 rounded-b-md border border-t-0 p-4">
+									{@const itemPath = joinPath(path, index)}
+									<div data-field-path={itemPath}>
+										<FieldRenderer
+											objectFieldType="inline"
+											field={objectField}
+											{form}
+											path={itemPath}
+											{focusedPath}
+											{flashingPath}
+											depth={depth + 1}
+										/>
+									</div>
+								</Accordion.Content>
+							</Accordion.Item>
+						{:else}
+							<p class="text-red-500">
+								Invalid field configuration. Unknown slug:
+								{$value[index].slug}
+							</p>
+						{/if}
 					{:else}
-						<p class="text-red-500">
-							Invalid field configuration. Unknown slug:
-							{$value[index].slug}
-						</p>
+						<p class="text-red-500">Invalid field configuration. Index: {index}</p>
 					{/if}
-				{:else}
-					<p class="text-red-500">Invalid field configuration. Index: {index}</p>
-				{/if}
-			{/key}
+				{/key}
 			</div>
 		{/each}
 	{/if}
@@ -388,7 +406,13 @@
 {#if !isFixedLength}
 	{#if field.displayMode === 'blocks'}
 		<div class="mt-4">
-			<Button size="sm" type="button" variant="outline" disabled={atMax} onclick={() => (blockPickerOpen = true)}>
+			<Button
+				size="sm"
+				type="button"
+				variant="outline"
+				disabled={atMax}
+				onclick={() => (blockPickerOpen = true)}
+			>
 				<CirclePlus />
 				Add Block
 			</Button>
@@ -401,7 +425,13 @@
 	{:else}
 		<div class="mt-4 flex flex-wrap gap-2">
 			{#each field.of as option}
-				<Button size="sm" type="button" variant="outline" disabled={atMax} onclick={() => addItem(option)}>
+				<Button
+					size="sm"
+					type="button"
+					variant="outline"
+					disabled={atMax}
+					onclick={() => addItem(option)}
+				>
 					<CirclePlus />
 					{getLocalizedLabel(option.label, interfaceLanguage.current) || option.slug}
 				</Button>

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

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

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

@@ -1,58 +1,48 @@
-<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 { onMount } from 'svelte';
-	import type { BooleanField, ImageField } from '../../../types/fields.js';
-	import * as Form from '../../../components/ui/form/index.js';
-	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
+	import type { BooleanField } from '../../../types/fields.js';
+	import { Switch } from '../../../components/ui/switch/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 
 	type Props = {
 		field: BooleanField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, boolean | undefined>;
+		value: boolean | 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<boolean | undefined>;
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = field.defaultValue ?? false;
+		if (value === undefined) {
+			value = field.defaultValue ?? false;
 		}
 	});
+
+	const label = $derived(
+		getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug
+	);
+	const description = $derived(
+		field.description
+			? getLocalizedLabel(field.description, interfaceLanguage.current)
+			: undefined
+	);
 </script>
 
-{#if $value !== undefined}
-	<Form.Label
-		class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
-	>
-		<Checkbox
-			{...props}
-			bind:checked={$value}
-			class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-		/>
-		<div class="grid gap-1.5 font-normal">
-			<p class="text-sm leading-none font-medium">
-				{getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug}
+{#if value !== undefined}
+	<div class="flex items-center justify-between py-1.5">
+		<div class="flex flex-col gap-0.5">
+			<span class="text-[13px] font-medium leading-none">
+				{label}
 				{#if field.required}<span class="text-destructive ml-0.5">*</span>{/if}
-			</p>
-			{#if field.description}
-				<p class="text-muted-foreground text-sm">
-					{getLocalizedLabel(field.description, interfaceLanguage.current)}
-				</p>
+			</span>
+			{#if description}
+				<span class="text-muted-foreground text-[11px]">
+					{description}
+				</span>
 			{/if}
 		</div>
-	</Form.Label>
+		<Switch bind:checked={value} aria-label={label} />
+	</div>
 {/if}

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

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

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

@@ -1,14 +1,4 @@
-<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 { onMount } from 'svelte';
 	import type { CheckboxesField } from '../../../types/fields.js';
 	import * as Form from '../../../components/ui/form/index.js';
@@ -18,39 +8,37 @@
 
 	type Props = {
 		field: CheckboxesField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, string[] | undefined>;
+		value: 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[] | undefined>;
 
 	function isChecked(optionValue: string): boolean {
-		return Array.isArray($value) && $value.includes(optionValue);
+		return Array.isArray(value) && value.includes(optionValue);
 	}
 
 	function toggle(optionValue: string) {
-		if (!Array.isArray($value)) {
-			$value = [optionValue];
+		if (!Array.isArray(value)) {
+			value = [optionValue];
 			return;
 		}
-		if ($value.includes(optionValue)) {
-			$value = $value.filter((v) => v !== optionValue);
+		if (value.includes(optionValue)) {
+			value = value.filter((v) => v !== optionValue);
 		} else {
-			$value = [...$value, optionValue];
+			value = [...value, optionValue];
 		}
 	}
 
 	onMount(() => {
-		if ($value === undefined) {
-			$value = [];
+		if (value === undefined) {
+			value = [];
 		}
 	});
 </script>
 
-{#if $value !== undefined}
+{#if value !== undefined}
 	<div class="flex flex-col space-y-2">
 		{#each field.options as option}
 			<div class="flex items-center space-x-3">

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

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

package/dist/admin/components/fields/content-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>">
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
+<script lang="ts">
 	import ContentEditor from '../tiptap/content-editor.svelte';
 	import type { ContentField } from '../../../types/fields.js';
 	import type { StructuredContentDoc } from '../../../types/structured-content.js';
 
 	type Props = {
 		field: ContentField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, StructuredContentDoc | undefined>;
+		value: StructuredContentDoc | undefined;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
-
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<StructuredContentDoc | undefined>;
+	let { field, value = $bindable(), ...props }: Props = $props();
 </script>
 
-<ContentEditor bind:value={$value} inlineBlocks={field.inlineBlocks} />
+<ContentEditor bind:value inlineBlocks={field.inlineBlocks} />