Route Soma scroll area hide timer

src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts

@@ -8,7 +8,7 @@ import { isBrowser } from '$adom';
 
 import { scrollAreaMorfo } from '../../../morfo/components/scroll-area';
 import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte';
-
+import type { TimerHandle } from '$timer';
 
 export type ScrollAreaType = 'hover' | 'scroll' | 'auto' | 'always';
 
@@ -232,7 +232,7 @@ export class ScrollAreaScrollbarProvider {
 
 	// Visibility state
 	visible = $state(false);
-	private hideTimer: ReturnType<typeof setTimeout> | null = null;
+	private hideTimer: TimerHandle | null = null;
 	private mounted = false;
 	hovering = $state(false);
 	dragging = $state(false);
@@ -321,20 +321,30 @@ export class ScrollAreaScrollbarProvider {
 	scheduleHide() {
 		this.clearHideTimer();
 		const delay = this.provider.opts.scrollHideDelay.current;
-		this.hideTimer = setTimeout(() => {
-			if (!this.hovering && !this.dragging) {
-				this.visible = false;
-			}
-		}, delay);
+		this.hideTimer = this.provider.soma.uix.timers.schedule(
+			this.hideTimerKey,
+			delay,
+			() => {
+				this.hideTimer = null;
+				if (!this.hovering && !this.dragging) {
+					this.visible = false;
+				}
+			},
+			{ replace: true, meta: { component: 'scroll-area', action: 'hide-scrollbar' } }
+		);
 	}
 
 	private clearHideTimer() {
 		if (this.hideTimer) {
-			clearTimeout(this.hideTimer);
+			this.hideTimer.cancel();
 			this.hideTimer = null;
 		}
 	}
 
+	private get hideTimerKey() {
+		return `soma:scroll-area:${this.opts.id.current}:hide:${this.opts.orientation.current}`;
+	}
+
 	readonly onpointerenter = () => {
 		this.hovering = true;
 		this.show();