fix: resolve all linter errors and a11y warnings

- Fix TS errors: editMode property order, implicit any, string|undefined
- Add $state() to bind:this element refs (IconGrid, EntityPicker, etc.)
- Fix a11y: labels, aria-labels, roles, tabindex on dialogs
- Remove unused imports (tick, svelte-i18n)
- Make AutocompleteInput/TagsInput accept optional string values

src/lib/components/ui/AutocompleteInput.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-
 	interface Props {
 		id?: string;
 		name?: string;
-		value: string;
+		value: string | undefined;
 		suggestions: string[];
 		placeholder?: string;
 		class?: string;
@@ -25,7 +23,7 @@
 	let containerEl: HTMLDivElement | undefined = $state();
 
 	const filtered = $derived.by(() => {
-		const q = value.trim().toLowerCase();
+		const q = (value ?? '').trim().toLowerCase();
 		if (!q) return suggestions;
 		return suggestions.filter((s) => s.toLowerCase().includes(q));
 	});

src/lib/components/ui/ConfirmDialog.svelte

@@ -46,6 +46,7 @@
 		onclick={(e) => e.stopPropagation()}
 		transition:scale={{ start: 0.95, duration: 150 }}
 		role="alertdialog"
+		tabindex="-1"
 		aria-labelledby="confirm-dialog-title"
 		aria-describedby="confirm-dialog-message"
 	>

src/lib/components/ui/EntityPicker.svelte

@@ -34,8 +34,8 @@
 	let open = $state(false);
 	let query = $state('');
 	let highlightIdx = $state(0);
-	let listEl: HTMLDivElement;
-	let inputEl: HTMLInputElement;
+	let listEl = $state<HTMLDivElement>();
+	let inputEl = $state<HTMLInputElement>();
 
 	const selectedItem = $derived(items.find((i) => i.value === value));
 

src/lib/components/ui/IconGrid.svelte

@@ -21,8 +21,8 @@
 		$props();
 
 	let open = $state(false);
-	let triggerEl: HTMLButtonElement;
-	let popupEl: HTMLDivElement;
+	let triggerEl = $state<HTMLButtonElement>();
+	let popupEl = $state<HTMLDivElement>();
 	let filterQuery = $state('');
 
 	const selectedItem = $derived(items.find((i) => i.value === value));
@@ -135,6 +135,7 @@
 	>
 		{#if showFilter}
 			<div class="border-b border-border px-3 py-2">
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					type="text"
 					bind:value={filterQuery}

src/lib/components/ui/TagsInput.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { t } from 'svelte-i18n';
-
 	interface Props {
 		id?: string;
 		name?: string;
-		value: string;
+		value: string | undefined;
 		suggestions: string[];
 		placeholder?: string;
 		class?: string;
@@ -25,11 +23,11 @@
 	let containerEl: HTMLDivElement | undefined = $state();
 
 	// Parse comma-separated tags
-	const tags = $derived(value.split(',').map((t) => t.trim()).filter(Boolean));
+	const tags = $derived((value ?? '').split(',').map((t) => t.trim()).filter(Boolean));
 
 	// Get the current partial tag being typed (after last comma)
 	const currentPartial = $derived.by(() => {
-		const parts = value.split(',');
+		const parts = (value ?? '').split(',');
 		return parts[parts.length - 1]?.trim() ?? '';
 	});
 
@@ -53,7 +51,7 @@
 
 	function selectItem(item: string) {
 		// Replace the current partial with the selected tag
-		const parts = value.split(',').map((p) => p.trim());
+		const parts = (value ?? '').split(',').map((p) => p.trim());
 		parts[parts.length - 1] = item;
 		value = parts.join(',') + ',';
 		open = false;