refactor(web): replace controller prop drilling with svelte context

packages/web/package.json

@@ -21,7 +21,7 @@
 		"@sveltejs/kit": "2.43.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
 		"@tailwindcss/vite": "4.1.14",
-		"svelte": "5.39.8",
+		"svelte": "5.56.4",
 		"svelte-check": "4.3.2",
 		"tailwindcss": "4.1.14",
 		"typescript": "5.9.3",

packages/web/src/lib/components/TagAutoCompleteInput.svelte

@@ -2,6 +2,7 @@
   import * as parsers from '$lib/parsers.ts'
   import type { Forager } from '@forager/core'
   import type { BaseController } from "$lib/base_controller.ts";
+  import { get_controller } from '$lib/contexts/controller.ts'
   import Tag from '$lib/components/Tag.svelte'
 
   const debounce = <Args>(fn: (...args: Args[]) => void, pause: number) => {
@@ -84,7 +85,6 @@
   type TagModel = Awaited<ReturnType<Forager['tag']['search']>>['results'][0]
 
   let {
-    controller,
     kind,
     sort_by = 'media_reference_count',
     search_string = $bindable(),
@@ -94,7 +94,6 @@
     contextual_query,
   }: {
     sort_by?: 'updated_at' | 'media_reference_count'
-    controller: BaseController
     search_string: string
     kind: 'search' | 'details'
     placeholder?: string
@@ -104,6 +103,8 @@
     contextual_query?: {}
   } = $props()
 
+  const controller = get_controller<BaseController>()
+
   let root_element: HTMLDivElement
   let input_element: HTMLInputElement
   let suggestions_element: HTMLUListElement | null = $state(null)

packages/web/src/lib/contexts/controller.ts

@@ -0,0 +1,23 @@
+import { createContext } from 'svelte'
+import type { BaseController } from '$lib/base_controller.ts'
+
+const [get_controller_context, set_controller_context] = createContext<BaseController>()
+
+/**
+ * Store the route's controller in component context so descendants can read it
+ * without prop drilling. Returns the controller for ergonomic assignment.
+ */
+function set_controller<T extends BaseController>(controller: T): T {
+  set_controller_context(controller)
+  return controller
+}
+
+/**
+ * Read the controller provided by an ancestor via {@link set_controller}. Pass
+ * the concrete controller type for the current route to narrow the return type.
+ */
+function get_controller<T extends BaseController = BaseController>(): T {
+  return get_controller_context() as T
+}
+
+export { set_controller, get_controller }

packages/web/src/routes/browse/+page.svelte

@@ -7,27 +7,28 @@
   import Header from '$lib/components/Header.svelte'
 
   import { BrowseController } from './controller.ts'
+  import { set_controller } from '$lib/contexts/controller.ts'
 
 	/** @type {import('./$types').PageProps} */
   let props  = $props()
 
-  const controller = new BrowseController(props.data.config)
+  const controller = set_controller(new BrowseController(props.data.config))
   let { dimensions, focus, queryparams } = controller.runes
   focus.stack({component: 'BrowsePage', focus: 'page'})
 </script>
 
 <div class="h-dvh">
   <Header title={queryparams.human_readable_summary || 'Forager'} bind:height={dimensions.heights.header} >
-    <SearchParams {controller} />
+    <SearchParams />
   </Header>
   <div class="grid grid-cols-[auto_1fr]">
-    <MediaDetails {controller} />
+    <MediaDetails />
     <div class="relative">
-      <MediaView {controller} />
-      <MediaList {controller} />
+      <MediaView />
+      <MediaList />
     </div>
   </div>
-  <Footer {controller} bind:height={dimensions.heights.footer} />
+  <Footer bind:height={dimensions.heights.footer} />
 </div>
 
 <svelte:window

packages/web/src/routes/browse/components/Footer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import * as theme from '$lib/theme.ts'
   import type { BrowseController } from '../controller.ts'
+  import { get_controller } from '$lib/contexts/controller.ts'
 
-  let {controller, height = $bindable()}: {controller: BrowseController, height: number} = $props()
+  let {height = $bindable()}: {height: number} = $props()
+  const controller = get_controller<BrowseController>()
 
 
   function human_readable_number(n: number) {

packages/web/src/routes/browse/components/MediaDetailEntry.svelte

@@ -2,9 +2,7 @@
   import * as datetime from '@std/datetime'
   import type { Json } from '@andykais/ts-rpc/adapters/sveltekit.ts'
 
-  import { BrowseController } from '../controller.ts'
-  let {controller, ...props}: {
-    controller: BrowseController
+  let props: {
     label: string
     content: string | number | Date | null | Json
     type?: "text" | "datetime-local"