fix: silence state_referenced_locally in vendored ui components

frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -3,6 +3,7 @@
 -->
 
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { cn } from '$lib/utils';
 	import UploadIcon from '@lucide/svelte/icons/upload';
 	import { displaySize } from '.';
@@ -26,11 +27,14 @@
 		...rest
 	}: FileDropZoneProps = $props();
 
+	// A one-off sanity check at init, not a reactive concern.
+	untrack(() => {
 		if (maxFiles !== undefined && fileCount === undefined) {
 			console.warn(
 				'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
 			);
 		}
+	});
 
 	let uploading = $state(false);
 

frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte

@@ -9,6 +9,7 @@
 		SIDEBAR_WIDTH_ICON
 	} from './constants.js';
 	import { setSidebar } from './context.svelte.js';
+	import { untrack } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -36,7 +37,7 @@
 			// This sets the cookie to keep the sidebar state.
 			document.cookie = `${SIDEBAR_COOKIE_NAME}_${contextKey}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
-		contextKey: contextKey
+		contextKey: untrack(() => contextKey)
 	});
 </script>
 

frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte

@@ -2,6 +2,7 @@
 	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { useSidebar } from './context.svelte.js';
+	import { untrack } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +14,8 @@
 		contextKey?: string;
 	} = $props();
 
-	const sidebar = useSidebar(contextKey);
+	// contextKey selects which sidebar this rail drives; fixed per instance.
+	const sidebar = useSidebar(untrack(() => contextKey));
 </script>
 
 <button

frontend/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -23,9 +23,16 @@
 		...restProps
 	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
 
+	// Getters rather than values: consumers read `ctx.variant` / `ctx.size` as
+	// plain properties, so this stays source-compatible while making the props
+	// actually reactive — passing them by value captured the initial ones.
 	setToggleGroupCtx({
-		variant,
+		get variant() {
-		size
+			return variant;
+		},
+		get size() {
+			return size;
+		}
 	});
 </script>