WJSoftware · webJose · Nov 24, 2025 · Nov 24, 2025
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/App.svelte b/demo/src/App.svelte
@@ -2,13 +2,26 @@
 	import './app.scss';
 	import NavBar from './lib/NavBar.svelte';
 	import Tooltip from './lib/Tooltip.svelte';
-	import { Router, Route, Fallback, RouterTrace, activeBehavior } from '@svelte-router/core';
+	import { Router, Route, Fallback, RouterTrace, Redirector } from '@svelte-router/core';
 	import NotFound from './lib/NotFound.svelte';
 	import HomeView from './lib/views/home/HomeView.svelte';
 	import PathRoutingView from './lib/views/path-routing/PathRoutingView.svelte';
 	import HashRoutingView from './lib/views/hash-routing/HashRoutingView.svelte';
+	import DemoBc from './lib/DemoBc.svelte';
+	import { initTitleContext } from './lib/state/title.svelte';
+	import HrInCodeView from './lib/views/hash-routing/InCodeView.svelte';
+	import RedirectedView from './lib/views/redirected/RedirectedView.svelte';
 
+	initTitleContext();
 	let showNavTooltip = $state(false);
+	const redirector = new Redirector();
+	redirector.redirections.push({
+		pattern: '/deprecated-path',
+		href: '/new-path',
+		options: {
+			state: { redirected: true },
+		}
+	});
 
 	// Show tooltip after a short delay when app loads
 	$effect(() => {
@@ -39,21 +52,7 @@
 						{/snippet}
 						Use these navigation links to test-drive the routing capabilities of @svelte-router/core.
 					</Tooltip>
-					<div class="breadcrumb">
-						<span>
-							<span {@attach activeBehavior(rs, { key: 'home', class: 'bc-active' })}>Home</span>
-						</span>
-						<span>
-							<span {@attach activeBehavior(rs, { key: 'pathRouting', class: 'bc-active' })}
-								>Path Routing</span
-							>
-						</span>
-						<span>
-							<span {@attach activeBehavior(rs, { key: 'hashRouting', class: 'bc-active' })}
-								>Hash Routing</span
-							>
-						</span>
-					</div>
+					<DemoBc {rs} />
 				</header>
 				<main class="d-flex flex-column flex-fill overflow-auto mt-3">
 					<div class="container-fluid flex-fill d-flex flex-column">
@@ -67,14 +66,22 @@
 							<Route key="hashRouting" path="/hash-routing">
 								<HashRoutingView basePath="/hash-routing" />
 							</Route>
+							<Route key="hr-in-code" path="/hash-routing/in-code">
+								<HrInCodeView />
+							</Route>
+							<Route key="redirected" path="/new-path">
+								<RedirectedView />
+							</Route>
 							<Fallback>
 								<NotFound />
 							</Fallback>
 						</div>
 					</div>
 				</main>
 				{#if !rs.home.match}
-					<RouterTrace />
+					<div class="table-responsive-lg">
+						<RouterTrace class="table table-striped table-hover" />
+					</div>
 				{/if}
 			{/snippet}
 		</Router>
@@ -107,27 +114,4 @@
 			}
 		}
 	}
-	.breadcrumb {
-		padding: 0.5em 1em;
-		background-color: #f8f9fa;
-		border-bottom: 1px solid #dee2e6;
-		font-size: 0.9em;
-		display: flex;
-		flex-direction: row;
-		gap: 0.5em;
-		& > *:after {
-			content: '>';
-			flex-grow: 1;
-			margin-left: 0.5em;
-		}
-		& > *:last-child:after {
-			content: '';
-			flex-grow: 0;
-			margin-left: 0;
-		}
-	}
-	:global .bc-active {
-		font-weight: bold;
-		text-decoration: underline;
-	}
 </style>
diff --git a/demo/src/app.scss b/demo/src/app.scss
@@ -2,3 +2,19 @@
 
 $bootstrap-icons-font-dir: 'bootstrap-icons/font/fonts';
 @import 'bootstrap-icons/font/bootstrap-icons';
+
+.router-property {
+    border-radius: 0.5em;
+    background-color: var(--bs-gray-200);
+    padding: 0.1em 0.7em;
+}
+
+[data-bs-theme=dark] .router-property {
+    background-color: var(--bs-gray-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+    .router-property {
+        background-color: var(--bs-gray-dark);
+    }
+}
diff --git a/demo/src/lib/Breadcrumb.svelte b/demo/src/lib/Breadcrumb.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+    type Props = HTMLAttributes<HTMLElement> & {
+        divider?: string;
+    };
+
+    let {
+        divider = ">",
+        class: cssClass,
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<nav
+    class={["breadcrumb", cssClass]}
+    style:--bs-breadcrumb-divider={`'${divider}'`}
+    aria-label="breadcrumb"
+    {...restProps}
+>
+    <ol class="breadcrumb">
+        {@render children?.()}
+    </ol>
+</nav>
diff --git a/demo/src/lib/BreadcrumbItem.svelte b/demo/src/lib/BreadcrumbItem.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+
+    type Props = HTMLLiAttributes;
+
+    let {
+        class: cssClass,
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<li class={["breadcrumb-item", cssClass]} {...restProps}>
+    {@render children?.()}
+</li>
diff --git a/demo/src/lib/CodeSnippet.svelte b/demo/src/lib/CodeSnippet.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 	import Highlight, { type LanguageType } from 'svelte-highlight';
-	import 'svelte-highlight/styles/github.css';
+	import 'svelte-highlight/styles/atelier-dune-light.css';
+	// import 'svelte-highlight/styles/github.css';
+	import { clsx } from 'clsx';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		language: LanguageType<string>;
@@ -13,6 +15,24 @@
 	let { language, code, title, copyable = true, class: cssClass, ...restProps }: Props = $props();
 
 	let copied = $state(false);
+	let codeNode = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		const root = codeNode?.querySelector('.hljs');
+		if (!root) return;
+		styleDirectTextChildren(root, 'orphan-text-node');
+	});
+
+	function styleDirectTextChildren(root: Node, cssClass: ClassValue) {
+		for (const node of root.childNodes) {
+			if (node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim()) {
+				const span = document.createElement('span');
+				span.textContent = node.nodeValue;
+				span.classList.add(clsx(cssClass));
+				root.replaceChild(span, node);
+			}
+		}
+	}
 
 	async function copyToClipboard() {
 		try {
@@ -49,37 +69,11 @@
 			{/if}
 		</div>
 	{/if}
-	<div class="code-snippet-content">
+	<div bind:this={codeNode} class="code-snippet-content">
 		<Highlight {language} {code} />
 	</div>
 </div>
 
-<!--
-@component
-# CodeSnippet
-A syntax-highlighted code block with optional title and copy functionality.
-
-## Props
-- `language` (LanguageType): The language for syntax highlighting
-- `code` (string): The code content to display
-- `title` (string, optional): Optional title for the code snippet
-- `copyable` (boolean, default: true): Whether to show the copy button
-
-## Usage
-```svelte
-<script>
-    import CodeSnippet from './lib/CodeSnippet.svelte';
-    import typescript from "svelte-highlight/languages/typescript";
-</script>
-
-<CodeSnippet 
-    language={typescript}
-    code="console.log('Hello, world!');"
-    title="Example"
-/>
-```
--->
-
 <style>
 	.code-snippet {
 		border: 1px solid var(--bs-border-color);
@@ -99,6 +93,10 @@ A syntax-highlighted code block with optional title and copy functionality.
 		font-size: 0.875rem;
 	}
 
+	:global([data-bs-theme='dark']) .code-snippet-header {
+		background-color: var(--bs-gray-800);
+	}
+
 	.code-snippet-title {
 		font-weight: 600;
 		color: var(--bs-secondary);
@@ -134,8 +132,11 @@ A syntax-highlighted code block with optional title and copy functionality.
 	/* Dark mode support */
 	@media (prefers-color-scheme: dark) {
 		.code-snippet-header {
-			background-color: var(--bs-dark);
-			border-bottom-color: var(--bs-secondary);
+			background-color: var(--bs-gray-800);
 		}
 	}
+
+	:global .orphan-text-node {
+		color: var(--bs-body-color);
+	}
 </style>
diff --git a/demo/src/lib/DemoBc.svelte b/demo/src/lib/DemoBc.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { activeBehavior, type RouteStatus } from '@svelte-router/core';
+	import Breadcrumb from './Breadcrumb.svelte';
+	import BreadcrumbItem from './BreadcrumbItem.svelte';
+
+	type Props = {
+		rs: Record<string, RouteStatus>;
+	};
+
+	let { rs }: Props = $props();
+</script>
+
+<Breadcrumb divider="|" class="ps-3">
+	<BreadcrumbItem {@attach activeBehavior(rs, { key: 'home', class: ['active', 'bc-active'] })}
+		>Home</BreadcrumbItem
+	>
+	<BreadcrumbItem
+		{@attach activeBehavior(rs, { key: 'pathRouting', class: ['active', 'bc-active'] })}
+		>Path Routing</BreadcrumbItem
+	>
+	<BreadcrumbItem
+		{@attach activeBehavior(rs, { key: 'hashRouting', class: ['active', 'bc-active'] })}
+		>Hash Routing</BreadcrumbItem
+	>
+</Breadcrumb>
+
+<style>
+	:global .bc-active {
+		/* font-weight: bold; */
+		text-decoration: underline;
+	}
+</style>
diff --git a/demo/src/lib/NavBar.svelte b/demo/src/lib/NavBar.svelte
@@ -1,30 +1,37 @@
 <script lang="ts">
 	import { Link, LinkContext, Route } from '@svelte-router/core';
 	import logo from '@svelte-router/core/logo64';
-	import SubNav from './SubNav.svelte';
+	import SubNav, { type LinkItem } from './SubNav.svelte';
 	import { routingMode } from './hash-routing';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import ThemeSwitch from './ThemeSwitch.svelte';
 
 	let { ...restProps }: HTMLAttributes<HTMLElement> = $props();
 
 	const pathRoutingLinks = [
 		{ text: 'Home', href: '/path-routing' },
 		{ text: 'Start Demo', href: '/path-routing/demo' }
 	];
-	const hashRoutingLinks = [
+	const hashRoutingLinks: LinkItem[] = [
 		{ text: 'Home', href: '/hash-routing' },
 		{
 			text: 'Start Demo',
 			href: `#${routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo'}`
-		}
+		},
+		{
+			text: 'In Code',
+			href: '/hash-routing/in-code',
+			activeFor: 'hr-in-code',
+			activeState: { class: 'active', aria: { 'aria-current': 'page' } }
+		},
 	];
 </script>
 
 <nav class="navbar navbar-expand-lg bg-primary-subtle" {...restProps}>
 	<div class="container-fluid">
 		<Link class="navbar-brand fw-bold" href="/" id="logoLink">
 			<img src={logo} alt="N-Savant Compass Logo" style:height="1.7em" />
-			@svelte-router/core
+			webJose's Svelte Router
 		</Link>
 		<button
 			class="navbar-toggler"
@@ -38,7 +45,7 @@
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbarNav">
-			<LinkContext activeState={{ class: 'active', aria: { 'aria-current': 'page' } }}>
+			<LinkContext activeState={{ class: 'active', aria: { current: 'page' } }}>
 				<ul class="navbar-nav">
 					<li class="nav-item">
 						<Link class="nav-link" activeFor="home" href="/" id="homeLink">Home</Link>
@@ -74,13 +81,22 @@
 					<li class="nav-item">
 						<Link class="nav-link" activeFor="pricing" href="/pricing">404</Link>
 					</li>
+					<li class="nav-item">
+						<Link class="nav-link" href="/deprecated-path">Deprecated Link</Link>
+					</li>
+					<li class="nav-item">
+						<Link class="nav-link" activeFor="redirected" href="/new-path">New Link</Link>
+					</li>
 					<li class="nav-item">
 						<Link class="nav-link disabled" href="/disabled" tabindex={-1} aria-disabled="true">
 							Disabled
 						</Link>
 					</li>
 				</ul>
 			</LinkContext>
+			<div class="ms-auto">
+				<ThemeSwitch />
+			</div>
 		</div>
 	</div>
 </nav>