includio-cms 0.0.67 → 0.0.69

package/CHANGELOG.md

@@ -0,0 +1,157 @@
+# Changelog
+
+All notable changes to includio-cms are documented here.
+Generated from `src/lib/updates/` — do not edit manually.
+
+## 0.0.69 — 2026-02-17
+
+DnD array reordering, nav-search batch fetch
+
+### Added
+- Drag-and-drop reordering in array fields with arrayMove utility
+
+### Fixed
+- Nav-search: batch-fetch data before rendering Command dialog — fixes missing data on open
+
+## 0.0.68 — 2026-02-11
+
+Fix EXIF/blur/focal bugs, expand type exports, add utility functions
+
+### Added
+- Export Entry, EntryType, CMSConfig, CollectionConfig, SingleConfig, FormConfig, FormSubmission, Language, Localized, MediaFileType, ImageStyle, MediaTag from includio-cms/types
+- Add getLink() utility for resolving URL field data to strings
+- Add isImageFieldData() / isVideoFieldData() type guards for media fields
+
+### Fixed
+- Blur placeholder (LQIP) now removed after image loads — fixes visible blur behind transparent PNGs
+- Focal point change now awaits style regeneration before returning — fixes stale/missing styles after save
+- Explicit .rotate() in sharp pipeline — fixes upside-down WebP/JPEG when source has EXIF orientation
+- Use oriented dimensions (post-EXIF) for focal crop calculation — fixes wrong crop on rotated images
+- Codegen: media field type now generates ImageFieldData | VideoFieldData instead of any
+- Codegen: hyphenated collection slugs now produce correct PascalCase (article-category → ArticleCategory)
+- Codegen: generated interfaces now include id and slug fields
+- Preview deep merge now preserves resolved references without url (e.g. category relations)
+
+## 0.0.67 — 2026-02-11
+
+Image quality, LQIP, focal point, responsive srcset, auto-downscale
+
+### Added
+- Image styles: configurable quality parameter for format output
+- LQIP: auto-generated blur placeholder (base64 WebP) on image upload
+- LQIP: lazy backfill for existing images without blur placeholder
+- Image component: LQIP blur placeholder via background-image on img element
+- Focal point picker in media file details
+- Smart crop: styles with crop=true use focal point to calculate crop region
+- Style cache invalidation on focal point change
+- Default WebP/AVIF styles auto-generate 640/1024/1920w srcset variants
+- Custom styles support srcset[] and sizes config
+- Image component renders srcset + sizes on <source> elements
+- Image component: sizes prop to override style-level sizes on <source> elements
+- Skips srcset widths larger than original image
+- CMSConfig: media.maxOriginalWidth / maxOriginalHeight settings
+- Auto-downscale oversized images on upload (fit: inside)
+- SVG and non-image files are not affected
+- Auto-format expansion: styles without explicit format auto-expand to AVIF/WebP/original
+- Eager background generation of default image styles on upload/replace/focal-point change
+
+### Fixed
+- Case-insensitive SVG extension check in upload/downscale/LQIP
+- Quality value clamped to 1-100 in generateImageStyle
+- Silent errors replaced with console.warn for LQIP/downscale/file cleanup
+- Remove hardcoded sizes: 100vw from default image styles
+- Lazy load skeleton + error handling for hybrid layout imports
+- AVIF <source> rendered before WebP for correct browser priority
+- Cache-busting suffix in generated style filenames prevents stale CDN/browser cache
+
+### Breaking
+- getImageStyles() now returns { styles, blurDataUrl } instead of plain styles record
+
+### Migration
+
+```sql
+ALTER TABLE image_styles ADD COLUMN IF NOT EXISTS quality INTEGER;
+ALTER TABLE media_file ADD COLUMN IF NOT EXISTS blur_data_url TEXT;
+ALTER TABLE media_file ADD COLUMN IF NOT EXISTS focal_x REAL;
+ALTER TABLE media_file ADD COLUMN IF NOT EXISTS focal_y REAL;
+```
+
+## 0.0.66 — 2025-02-10
+
+Fix URL field validation for linked entries
+
+### Fixed
+- URL field: linked entries no longer require manual URL per language to save
+
+## 0.0.65 — 2025-02-09
+
+Move publish logic to entry table, replace folder-based media with tags
+
+### Added
+- Account settings page with session management
+- Redesigned sidebar with collapsible groups
+- Tag-based media library replacing folder structure
+- Unified UI components and styling
+
+### Breaking
+- Media folders replaced with tags — existing folder assignments will be lost
+
+### Migration
+
+```sql
+-- Move publish logic from entry_version to entry
+
+ALTER TABLE entry ADD COLUMN published_at TIMESTAMP;
+ALTER TABLE entry ADD COLUMN published_version_id UUID
+  REFERENCES entry_version(id) ON DELETE SET NULL;
+ALTER TABLE entry ADD COLUMN published_by TEXT;
+
+UPDATE entry e SET
+  published_version_id = latest.id,
+  published_at = first_pub.first_published_at,
+  published_by = latest.published_by
+FROM (
+  SELECT DISTINCT ON (entry_id) id, entry_id, published_by
+  FROM entry_version
+  WHERE published_at IS NOT NULL AND published_at <= NOW()
+  ORDER BY entry_id, version_number DESC
+) latest
+JOIN (
+  SELECT entry_id, MIN(published_at) as first_published_at
+  FROM entry_version
+  WHERE published_at IS NOT NULL AND published_at <= NOW()
+  GROUP BY entry_id
+) first_pub ON first_pub.entry_id = latest.entry_id
+WHERE e.id = latest.entry_id;
+
+UPDATE entry e SET
+  published_version_id = COALESCE(e.published_version_id, sub.id),
+  published_at = CASE WHEN e.published_at IS NULL THEN sub.published_at ELSE e.published_at END,
+  published_by = COALESCE(e.published_by, sub.published_by)
+FROM (
+  SELECT DISTINCT ON (entry_id) id, entry_id, published_at, published_by
+  FROM entry_version
+  WHERE published_at IS NOT NULL AND published_at > NOW()
+  ORDER BY entry_id, published_at ASC
+) sub
+WHERE e.id = sub.entry_id AND e.published_version_id IS NULL;
+
+-- Replace folder-based media with tag-based media
+
+CREATE TABLE IF NOT EXISTS media_tag (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  name TEXT NOT NULL UNIQUE,
+  color TEXT NOT NULL DEFAULT '#3b82f6',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS media_file_tag (
+  file_id UUID NOT NULL REFERENCES media_file(id) ON DELETE CASCADE,
+  tag_id UUID NOT NULL REFERENCES media_tag(id) ON DELETE CASCADE,
+  PRIMARY KEY (file_id, tag_id)
+);
+
+ALTER TABLE media_file DROP COLUMN IF EXISTS folder_id;
+
+DROP TABLE IF EXISTS media_folder;
+```

package/ROADMAP.md

@@ -0,0 +1,73 @@
+# Roadmap
+
+> `- [ ]` planned | `- [~]` in-progress | `- [x]` done
+> `[feature]` `[fix]` `[breaking]` `[chore]`
+> `[P0]` critical | `[P1]` important | `[P2]` nice-to-have
+> `<!-- files: path/to/file.ts -->` optionally linked files
+>
+> **Versioning:** 0.0.69 is the last `0.0.x` release. From 0.1.0 onward: `0.MINOR.0` = features/changes, `0.MINOR.PATCH` = fixes.
+
+## 0.0.69 _(last 0.0.x)_
+
+- [x] `[feature]` `[P1]` DnD reordering in array fields + arrayMove utility <!-- files: src/cms/fields/array-field -->
+- [x] `[fix]` `[P1]` Nav-search: batch-fetch data before rendering Command dialog <!-- files: src/cms/nav-search -->
+
+## 0.1.0 — Stabilization
+
+- [ ] `[fix]` `[P0]` Collection table pagination — server-side, persistent page state, archived tab <!-- files: src/lib/admin/client/collection/collection-entries.svelte, src/lib/admin/client/collection/table-pagination.svelte -->
+- [ ] `[fix]` `[P0]` Language switcher — reactive globally without reload, remove hardcoded en/pl <!-- files: src/lib/admin/state/interface-language.svelte.ts, src/lib/admin/components/layout/header-actions.svelte -->
+- [ ] `[fix]` `[P0]` User account section — email change, aria-pressed on prefs, avatar upload, clean up 2FA stub <!-- files: src/lib/admin/client/account/ -->
+- [ ] `[fix]` `[P0]` Media tag counts always 0 — pass actual files to TagSidebar <!-- files: src/lib/admin/components/media/media-library.svelte, src/lib/admin/components/media/tag-sidebar.svelte -->
+- [ ] `[fix]` `[P0]` Hybrid target — don't render `data-hybrid-path` for non-logged-in users <!-- files: src/lib/sveltekit/components/hybrid-target.svelte -->
+
+## 0.1.1 — Input integrity
+
+- [ ] `[fix]` `[P1]` Input constraints UI — HTML maxlength, character counter, pattern feedback <!-- files: src/lib/admin/components/fields/text-field.svelte -->
+- [ ] `[fix]` `[P1]` Array field maxItems — disable Add button when max reached <!-- files: src/lib/admin/components/fields/array-field.svelte -->
+- [ ] `[feature]` `[P1]` Array field fixed length — fixed item count, no add/remove, reorder only
+- [ ] `[feature]` `[P1]` Field constraint info display — show constraints before validation error (WCAG/ATAG)
+
+## 0.2.0 — Plugin system
+
+- [ ] `[feature]` `[P0]` Wire plugin hooks into CRUD operations (before/afterCreate, Update, Delete) <!-- files: src/lib/types/plugins.ts, src/lib/core/server/entries/operations/ -->
+- [ ] `[feature]` `[P0]` Plugin registration API — public surface for external plugins
+- [ ] `[chore]` `[P1]` Plugin system documentation
+
+## 0.2.1 — CMS API improvements
+
+- [ ] `[feature]` `[P1]` Server-side pagination API (formalize 0.1.0 fix)
+- [ ] `[feature]` `[P1]` Improved type generation <!-- files: src/lib/core/server/generator/ -->
+- [ ] `[feature]` `[P1]` Proper filtering API (SQL-level, not JS post-query)
+
+## 0.3.0 — Admin experience
+
+- [ ] `[feature]` `[P1]` Admin overlay — built-in admin bar on site (quick edit, preview, audit)
+- [ ] `[feature]` `[P1]` Media gallery virtualization/pagination <!-- files: src/lib/admin/components/media/files-list.svelte -->
+- [ ] `[feature]` `[P2]` Image styles UI — preview generated variants in editor
+
+## 0.3.1 — SEO module
+
+- [ ] `[feature]` `[P1]` SERP preview + character limits for title/description <!-- files: src/lib/admin/components/fields/seo-field.svelte -->
+- [ ] `[feature]` `[P1]` Global SEO settings
+- [ ] `[feature]` `[P1]` Dedicated frontend SEO components <!-- files: src/lib/sveltekit/components/seo.svelte -->
+- [ ] `[feature]` `[P2]` Sitemap generation
+
+## 0.4.0 — WCAG/ATAG compliance
+
+- [ ] `[chore]` `[P0]` Full WCAG/ATAG audit
+- [ ] `[feature]` `[P0]` Accessibility rework based on audit findings
+
+## Security hardening
+
+- [ ] `[feature]` `[P1]` `sanitizeHTML` utility — general HTML sanitization outside richtext (text fields, SEO fields)
+- [ ] `[feature]` `[P1]` CSP headers — Content-Security-Policy middleware
+- [ ] `[feature]` `[P1]` CSRF protection — tokens for mutating operations
+- [ ] `[feature]` `[P1]` Rate limiting — API/auth endpoints
+- [ ] `[chore]` `[P1]` Security audit — review `{@html}` usage, innerHTML, injection vectors
+- [ ] `[chore]` `[P1]` Input sanitization audit — review all fields for XSS
+
+## Backlog
+
+- [ ] `[feature]` `[P2]` Alternative richtext editor — Word-like mode, single richtext field instead of blocks
+- [ ] `[chore]` `[P2]` Caching/performance layer (scope TBD)
+- [ ] `[feature]` `[P2]` API/CLI for configuration (setup DX for less technical users)

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

@@ -4,7 +4,7 @@
 	import type { SuperForm } from 'sveltekit-superforms';
 
 	type Props = {
-		form: SuperForm<any>;
+		form: SuperForm<Record<string, unknown>>;
 		entry: RawEntry;
 		focusedPath?: string | null;
 		onPathSelect?: (path: string) => void;

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

@@ -1,7 +1,7 @@
 import type { RawEntry } from '../../../types/entries.js';
 import type { SuperForm } from 'sveltekit-superforms';
 type Props = {
-    form: SuperForm<any>;
+    form: SuperForm<Record<string, unknown>>;
     entry: RawEntry;
     focusedPath?: string | null;
     onPathSelect?: (path: string) => void;

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

@@ -290,8 +290,18 @@
 
 	let sizePreset: SizePreset = $state('responsive');
 
+	function getOriginFromUrl(url: string): string {
+		try {
+			return new URL(url, window.location.origin).origin;
+		} catch {
+			return window.location.origin;
+		}
+	}
+
+	const previewOrigin = collection.previewUrl ? getOriginFromUrl(collection.previewUrl) : window.location.origin;
+
 	const updatePreview = useDebounce(
-		async (window: Window, form: SuperForm<any>) => {
+		async (window: Window, form: SuperForm<Record<string, unknown>>) => {
 			const data = await form.validateForm();
 
 			if (data.valid) {
@@ -306,7 +316,7 @@
 						type: 'preview-update',
 						data: updatedData
 					},
-					'*'
+					previewOrigin
 				);
 			}
 		},
@@ -340,7 +350,7 @@
 		// Send hybrid mode state first
 		previewIframe.contentWindow.postMessage(
 			{ type: 'hybrid-mode-enable', enabled: hybridContext.mode === 'hybrid' },
-			'*'
+			previewOrigin
 		);
 
 		// Then send form data
@@ -353,7 +363,7 @@
 			});
 			previewIframe.contentWindow.postMessage(
 				{ type: 'preview-update', data: updatedData },
-				'*'
+				previewOrigin
 			);
 		}
 	}
@@ -369,6 +379,7 @@
 	// Listen for messages from iframe
 	onMount(() => {
 		function handleMessage(e: MessageEvent) {
+			if (e.origin !== previewOrigin) return;
 			// Click on preview element - debounced to prevent scroll jumping
 			if (e.data.type === 'hybrid-focus' && e.data.path) {
 				debouncedSetFocusPath(e.data.path);
@@ -387,7 +398,7 @@
 		if (previewIframe?.contentWindow) {
 			previewIframe.contentWindow.postMessage(
 				{ type: 'hybrid-highlight', path: hybridContext.focusedPath },
-				'*'
+				previewOrigin
 			);
 		}
 	});
@@ -400,7 +411,7 @@
 			if (previewIframe?.contentWindow) {
 				previewIframe.contentWindow.postMessage(
 					{ type: 'hybrid-mode-enable', enabled: hybridContext.mode === 'hybrid' },
-					'*'
+					previewOrigin
 				);
 			}
 		}

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

@@ -5,6 +5,7 @@ export declare function createHybridContext(): {
     enabled: boolean;
     toggle(): void;
 };
+export type HybridContext = ReturnType<typeof createHybridContext>;
 export declare function getHybridContext(): {
     mode: HybridViewMode;
     focusedPath: string | null;

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

@@ -30,6 +30,10 @@
 	import RequiredLabel from './required-label.svelte';
 	import { cn } from '../../../utils.js';
 	import BlockPickerModal from './block-picker-modal.svelte';
+	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
+	import { droppable, draggable, dndState } from '@thisux/sveltednd';
+	import { flip } from 'svelte/animate';
+	import { arrayMove } from '../../utils/arrayMove.js';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -119,6 +123,17 @@
 		});
 	}
 
+	let dropProcessing = false;
+
+	function moveItem(from: number, to: number) {
+		if (!$value || from === to) return;
+		$value = arrayMove($value, from, to);
+
+		tick().then(() => {
+			openAndCloseOthers(to);
+		});
+	}
+
 	function removeItem(index: number) {
 		if (!$value) return;
 
@@ -208,80 +223,120 @@
 <Accordion.Root type="multiple" class="w-full space-y-4" bind:value={accordionOpenState}>
 	{#if $value && $value.length > 0}
 		{#each $value as item, index (item._id ?? 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 dark:bg-slate-800/30 dark:hover:bg-slate-700/40 dark:border-white/[0.08]"
-						>
-							<div class="flex grow items-center justify-between gap-4">
-								<div class="flex items-center gap-4">
-									<span>{index < 10 ? '0' : ''}{index + 1}</span>
-									<Badge variant="outline">{getLocalizedLabel(objectField.label, interfaceLanguage.current) || objectField.slug}</Badge>
-									<span>{getAccordionLabel($value[index])}</span>
-								</div>
-
-								<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">
-										<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}
+			<div
+				use:droppable={{
+					container: index.toString(),
+					callbacks: {
+						onDrop: (state) => {
+							if (dropProcessing) return;
+							dropProcessing = true;
+
+							const dragIndex = parseInt(state.sourceContainer ?? '');
+							const dropIndex = parseInt(state.targetContainer ?? '');
+							if (!isNaN(dragIndex) && !isNaN(dropIndex)) {
+								moveItem(dragIndex, dropIndex);
+							}
+
+							// {#key index} destroys the old draggable before dragend fires,
+							// leaving isDragging stuck at true. Reset manually.
+							dndState.isDragging = false;
+							dndState.draggedItem = null;
+							dndState.sourceContainer = '';
+							dndState.targetContainer = null;
+							dndState.targetElement = null;
+
+							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 dark:bg-slate-800/30 dark:hover:bg-slate-700/40 dark:border-white/[0.08]"
+							>
+								<div class="flex grow items-center justify-between gap-4">
+									<div class="flex items-center gap-4">
+										<!-- 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()}
 										>
-											Move down
-										</DropdownMenu.Item>
-										<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}>
-											Delete
-										</DropdownMenu.Item>
-									</DropdownMenu.Content>
-								</DropdownMenu.Root>
-							</div>
-						</Accordion.Trigger>
-						<Accordion.Content
-							class="space-y-4 rounded-b-md border border-t-0 dark:bg-slate-900/30 dark:shadow-[inset_0_2px_4px_rgb(0_0_0/0.1)] dark:border-white/[0.08]"
-							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>
+											<GripVertical class="h-4 w-4" />
+										</div>
+										<span>{index < 10 ? '0' : ''}{index + 1}</span>
+										<Badge variant="outline">{getLocalizedLabel(objectField.label, interfaceLanguage.current) || objectField.slug}</Badge>
+										<span>{getAccordionLabel($value[index])}</span>
+									</div>
+
+									<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">
+											<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>
+							</Accordion.Trigger>
+							<Accordion.Content
+								class="space-y-4 rounded-b-md border border-t-0 dark:bg-slate-900/30 dark:shadow-[inset_0_2px_4px_rgb(0_0_0/0.1)] dark:border-white/[0.08]"
+								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>
+					{: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}
+			</div>
 		{/each}
 	{/if}
 </Accordion.Root>

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

@@ -27,8 +27,8 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
-	import { droppable } from '@thisux/sveltednd';
-	import { draggable } from '@thisux/sveltednd';
+	import { droppable, draggable } from '@thisux/sveltednd';
+	import { arrayMove } from '../../utils/arrayMove.js';
 	import { flip } from 'svelte/animate';
 	import { fade } from 'svelte/transition';
 
@@ -195,15 +195,11 @@
 							container: index.toString(),
 							callbacks: {
 								onDrop: (state) => {
-									const { targetContainer, sourceContainer } = state;
-									const dragIndex = parseInt(sourceContainer ?? '0');
-									const dropIndex = parseInt(targetContainer ?? '0');
+									const dragIndex = parseInt(state.sourceContainer ?? '');
+									const dropIndex = parseInt(state.targetContainer ?? '');
 
-									if (dragIndex !== -1 && !isNaN(dropIndex)) {
-										const arr = getArrayValue();
-										const [moved] = arr.splice(dragIndex, 1);
-										arr.splice(dropIndex, 0, moved);
-										$value = [...arr];
+									if (!isNaN(dragIndex) && !isNaN(dropIndex)) {
+										$value = [...arrayMove(getArrayValue(), dragIndex, dropIndex)];
 									}
 								}
 							}