demo: Remove the use of Route.when

This has restored functionality to the Fallback content in the demo.

Author: webJose

demo/src/App.svelte

@@ -15,12 +15,12 @@
 		const timer = setTimeout(() => {
 			showNavTooltip = true;
 		}, 2000);
-		
+
 		// Hide tooltip after 10 seconds or when user interacts
 		const hideTimer = setTimeout(() => {
 			showNavTooltip = false;
 		}, 12000);
-		
+
 		return () => {
 			clearTimeout(timer);
 			clearTimeout(hideTimer);
@@ -31,33 +31,35 @@
 <div class="app">
 	<div class="d-flex flex-column h-100">
 		<Router id="root">
-			<Tooltip shown={showNavTooltip} placement="bottom">
-				{#snippet reference(ref)}
-					<NavBar {@attach ref} />
-				{/snippet}
-				Use these navigation links to test-drive the routing capabilities of @wjfe/n-savant.
-			</Tooltip>
-			<main class="d-flex flex-column flex-fill overflow-auto mt-3">
-				<div class="container-fluid flex-fill d-flex flex-column">
-					<div class="grid flex-fill">
-						<Route key="home" path="/">
-							<HomeView />
-						</Route>
-						<Route key="pathRouting" path="/path-routing/*">
-							<PathRoutingView basePath="/path-routing" />
-						</Route>
-						<Route key="hashRouting" path="/hash-routing">
-							<HashRoutingView basePath="/hash-routing" />
-						</Route>
-						<Fallback>
-							<NotFound />
-						</Fallback>
+			{#snippet children(_, rs)}
+				<Tooltip shown={showNavTooltip} placement="bottom">
+					{#snippet reference(ref)}
+						<NavBar {@attach ref} />
+					{/snippet}
+					Use these navigation links to test-drive the routing capabilities of @wjfe/n-savant.
+				</Tooltip>
+				<main class="d-flex flex-column flex-fill overflow-auto mt-3">
+					<div class="container-fluid flex-fill d-flex flex-column">
+						<div class="grid flex-fill">
+							<Route key="home" path="/">
+								<HomeView />
+							</Route>
+							<Route key="pathRouting" path="/path-routing/*">
+								<PathRoutingView basePath="/path-routing" />
+							</Route>
+							<Route key="hashRouting" path="/hash-routing">
+								<HashRoutingView basePath="/hash-routing" />
+							</Route>
+							<Fallback>
+								<NotFound />
+							</Fallback>
+						</div>
 					</div>
-				</div>
-			</main>
-			<Route key="notHome" when={(rs) => !rs.home.match}>
-				<RouterTrace />
-			</Route>
+				</main>
+				{#if !rs.home.match}
+					<RouterTrace />
+				{/if}
+			{/snippet}
 		</Router>
 	</div>
 </div>

demo/src/lib/NavBar.svelte

@@ -4,9 +4,7 @@
 	import { routingMode } from './hash-routing';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	let {
-		...restProps
-	}: HTMLAttributes<HTMLElement> = $props();
+	let { ...restProps }: HTMLAttributes<HTMLElement> = $props();
 
 	const pathRoutingLinks = [
 		{ text: 'Home', href: '/path-routing' },
@@ -62,32 +60,45 @@
 		<div class="collapse navbar-collapse" id="navbarNav">
 			<ul class="navbar-nav">
 				<li class="nav-item">
-					<Link class="nav-link" activeState={{ class: 'active', key: 'home' }} href="/" id="homeLink">Home</Link>
+					<Link
+						class="nav-link"
+						activeState={{ class: 'active', key: 'home' }}
+						href="/"
+						id="homeLink">Home</Link
+					>
 				</li>
-				<Route key="homeMenuPr" when={(rs) => !rs.pathRouting?.match}>
-					<li class="nav-item">
-						<Link
-							class="nav-link"
-							activeState={{ class: 'active', key: 'pathRouting' }}
-							href="/path-routing"
-						>
-							Path Routing
-						</Link>
-					</li>
+				<Route key="homeMenuPr">
+					{#snippet children(rp, _, rs)}
+						{#if !rs.pathRouting?.match}
+							<li class="nav-item">
+								<Link
+									class="nav-link"
+									activeState={{ class: 'active', key: 'pathRouting' }}
+									href="/path-routing"
+								>
+									Path Routing
+								</Link>
+							</li>
+						{/if}
+					{/snippet}
 				</Route>
 				<Route key="pathRouting">
 					<SubNav title="Path Routing" links={pathRoutingLinks} />
 				</Route>
-				<Route key="homeMenuHr" when={(rs) => !rs.hashRouting?.match}>
-					<li class="nav-item">
-						<Link
-							class="nav-link"
-							activeState={{ class: 'active', key: 'hashRouting' }}
-							href="/hash-routing"
-						>
-							Hash Routing
-						</Link>
-					</li>
+				<Route key="homeMenuHr">
+					{#snippet children(rp, _, rs)}
+						{#if !rs.hashRouting?.match}
+							<li class="nav-item">
+								<Link
+									class="nav-link"
+									activeState={{ class: 'active', key: 'hashRouting' }}
+									href="/hash-routing"
+								>
+									Hash Routing
+								</Link>
+							</li>
+						{/if}
+					{/snippet}
 				</Route>
 				<Route key="hashRouting">
 					<SubNav title="Hash Routing" links={hashRoutingLinks} />