package.json

@@ -66,6 +66,7 @@
   },
   "dependencies": {
     "@chenglou/pretext": "0.0.6",
-    "@tanstack/svelte-query": "6.1.28"
+    "@tanstack/svelte-query": "6.1.28",
+    "sv-router": "^0.16.3"
   }
 }

src/app/App.svelte

@@ -6,21 +6,22 @@
 /**
  * App Component
  *
- * Application entry point component. Wraps the main page route within the shared
+ * Application entry point component. Wraps the active route within the shared
  * layout shell. This is the root component mounted by the application.
  *
  * Structure:
  * - QueryProvider provides TanStack Query client for data fetching
  * - Layout provides sidebar, header/footer, and page container
- * - Page renders the current route content
+ * - Router renders the matched route component
  */
-import Page from '$routes/Page.svelte';
+import '$routes/router';
+import { Router } from 'sv-router';
 import { QueryProvider } from './providers';
 import Layout from './ui/Layout.svelte';
 </script>
 
 <QueryProvider>
     <Layout>
-        <Page />
+        <Router />
     </Layout>
 </QueryProvider>

src/routes/Home.svelte

@@ -1,6 +1,6 @@
 <!--
-    Component: Page
+    Component: Home
-    Description: The main page component of the application.
+    Root route — comparison workspace.
 -->
 <script lang="ts">
 import { ComparisonView } from '$widgets/ComparisonView';

src/routes/Redirect.svelte

@@ -0,0 +1,10 @@
+<!--
+    Component: Redirect
+    Mounts only when an unmatched route is hit; immediately replaces the URL
+    with the home route. Kept until additional routes exist.
+-->
+<script lang="ts">
+import { navigate } from './router';
+
+navigate('/', { replace: true });
+</script>

src/routes/index.ts

@@ -0,0 +1,7 @@
+export {
+    isActive,
+    navigate,
+    p,
+    preload,
+    route,
+} from './router';

src/routes/router.ts

@@ -0,0 +1,23 @@
+import { createRouter } from 'sv-router';
+import Home from './Home.svelte';
+import Redirect from './Redirect.svelte';
+
+/**
+ * Single-page router for glyphdiff.
+ *
+ * Currently exposes one route; structure exists so additional routes can be
+ * added without touching the app shell.
+ */
+export const {
+    isActive,
+    navigate,
+    p,
+    preload,
+    route,
+} = createRouter({
+    '/': Home,
+    /**
+     * Any unmatched path redirects to home until additional routes exist.
+     */
+    '*notfound': Redirect,
+});

yarn.lock

@@ -2382,7 +2382,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm-env@npm:^1.0.0, esm-env@npm:^1.1.2, esm-env@npm:^1.2.1":
+"esm-env@npm:^1.0.0, esm-env@npm:^1.1.2, esm-env@npm:^1.2.1, esm-env@npm:^1.2.2":
   version: 1.2.2
   resolution: "esm-env@npm:1.2.2"
   checksum: 10c0/3d25c973f2fd69c25ffff29c964399cea573fe10795ecc1d26f6f957ce0483d3254e1cceddb34bf3296a0d7b0f1d53a28992f064ba509dfe6366751e752c4166
@@ -2577,6 +2577,7 @@ __metadata:
     oxlint: "npm:1.62.0"
     playwright: "npm:1.59.1"
     storybook: "npm:10.3.6"
+    sv-router: "npm:^0.16.3"
     svelte: "npm:5.55.5"
     svelte-check: "npm:4.4.8"
     svelte-language-server: "npm:0.18.0"
@@ -3966,6 +3967,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sv-router@npm:^0.16.3":
+  version: 0.16.3
+  resolution: "sv-router@npm:0.16.3"
+  dependencies:
+    esm-env: "npm:^1.2.2"
+  peerDependencies:
+    svelte: ^5
+  bin:
+    sv-router: ./src/cli/index.js
+  checksum: 10c0/809263498b38828f869b613919946fd4ac899435cbb32396fdab43fba53aec612383f05f6661c1bfd0f5f78c395dc4fcf0b88b8bcd5da0e55a5280138ad884fb
+  languageName: node
+  linkType: hard
+
 "svelte-ast-print@npm:^0.4.0":
   version: 0.4.2
   resolution: "svelte-ast-print@npm:0.4.2"