From f6911fbcca934bfd77ac5364d7a80e08410d4c49 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 18:31:56 +0300
Subject: [PATCH] feature: add sv-router, page structure and redirect to home
 from any other page

---
 package.json                            |  3 ++-
 src/app/App.svelte                      |  9 +++++----
 src/routes/{Page.svelte => Home.svelte} |  4 ++--
 src/routes/Redirect.svelte              | 10 ++++++++++
 src/routes/index.ts                     |  7 +++++++
 src/routes/router.ts                    | 23 +++++++++++++++++++++++
 yarn.lock                               | 16 +++++++++++++++-
 7 files changed, 64 insertions(+), 8 deletions(-)
 rename src/routes/{Page.svelte => Home.svelte} (81%)
 create mode 100644 src/routes/Redirect.svelte
 create mode 100644 src/routes/index.ts
 create mode 100644 src/routes/router.ts

diff --git a/package.json b/package.json
index 8ff3064..ef02d67 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/app/App.svelte b/src/app/App.svelte
index 38a8bce..6f9fccc 100644
--- a/src/app/App.svelte
+++ b/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>
diff --git a/src/routes/Page.svelte b/src/routes/Home.svelte
similarity index 81%
rename from src/routes/Page.svelte
rename to src/routes/Home.svelte
index 00481d6..dfd42ef 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Home.svelte
@@ -1,6 +1,6 @@
 <!--
-    Component: Page
-    Description: The main page component of the application.
+    Component: Home
+    Root route — comparison workspace.
 -->
 <script lang="ts">
 import { ComparisonView } from '$widgets/ComparisonView';
diff --git a/src/routes/Redirect.svelte b/src/routes/Redirect.svelte
new file mode 100644
index 0000000..d623410
--- /dev/null
+++ b/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>
diff --git a/src/routes/index.ts b/src/routes/index.ts
new file mode 100644
index 0000000..1cfa066
--- /dev/null
+++ b/src/routes/index.ts
@@ -0,0 +1,7 @@
+export {
+    isActive,
+    navigate,
+    p,
+    preload,
+    route,
+} from './router';
diff --git a/src/routes/router.ts b/src/routes/router.ts
new file mode 100644
index 0000000..49e21cd
--- /dev/null
+++ b/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,
+});
diff --git a/yarn.lock b/yarn.lock
index 992f596..be38bb9 100644
--- a/yarn.lock
+++ b/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"