From 9f1aba60ace2f865829f49096a9fe6e379beaa3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Sun, 31 Aug 2025 22:21:44 -0600
Subject: [PATCH] chore:  Update demo after navigation improvements

---
 demo/package-lock.json                        | 788 +++++++++++-------
 demo/package.json                             |   8 +-
 demo/src/App.svelte                           |  31 +-
 demo/src/lib/CodeSnippet.svelte               | 141 ++++
 demo/src/lib/NavBar.svelte                    |  15 +-
 demo/src/lib/Tooltip.svelte                   | 177 ++++
 demo/src/lib/hash-routing.ts                  |   4 +
 .../views/hash-routing/HashRoutingView.svelte | 417 +++++++--
 demo/src/lib/views/home/FeaturesTable.svelte  | 157 ++++
 demo/src/lib/views/home/Hero.svelte           |   2 +-
 demo/src/lib/views/home/HomeView.svelte       | 247 +++++-
 demo/src/lib/views/home/Quickstart.svelte     |  28 +-
 .../views/path-routing/views/HomeView.svelte  | 311 ++++++-
 13 files changed, 1897 insertions(+), 429 deletions(-)
 create mode 100644 demo/src/lib/CodeSnippet.svelte
 create mode 100644 demo/src/lib/Tooltip.svelte
 create mode 100644 demo/src/lib/views/home/FeaturesTable.svelte

diff --git a/demo/package-lock.json b/demo/package-lock.json
index b12fd75..4e750e3 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -8,37 +8,25 @@
       "name": "n-savant-demo",
       "version": "0.1.0",
       "dependencies": {
+        "@floating-ui/dom": "^1.7.4",
         "bootstrap": "^5.3.3",
-        "bootstrap-icons": "^1.11.3"
+        "bootstrap-icons": "^1.11.3",
+        "svelte-highlight": "^7.8.3"
       },
       "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
+        "@sveltejs/vite-plugin-svelte": "^6.1.3",
         "@tsconfig/svelte": "^5.0.4",
         "sass": "^1.83.4",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
         "typescript": "^5.7.3",
-        "vite": "^6.0.5"
-      }
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "vite": "^7.1.3"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz",
-      "integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
+      "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
       "cpu": [
         "ppc64"
       ],
@@ -53,9 +41,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.0.tgz",
-      "integrity": "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz",
+      "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
       "cpu": [
         "arm"
       ],
@@ -70,9 +58,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz",
-      "integrity": "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz",
+      "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
       "cpu": [
         "arm64"
       ],
@@ -87,9 +75,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.0.tgz",
-      "integrity": "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz",
+      "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==",
       "cpu": [
         "x64"
       ],
@@ -104,9 +92,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz",
-      "integrity": "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz",
+      "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==",
       "cpu": [
         "arm64"
       ],
@@ -121,9 +109,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz",
-      "integrity": "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz",
+      "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==",
       "cpu": [
         "x64"
       ],
@@ -138,9 +126,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz",
-      "integrity": "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==",
       "cpu": [
         "arm64"
       ],
@@ -155,9 +143,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz",
-      "integrity": "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz",
+      "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==",
       "cpu": [
         "x64"
       ],
@@ -172,9 +160,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz",
-      "integrity": "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz",
+      "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==",
       "cpu": [
         "arm"
       ],
@@ -189,9 +177,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz",
-      "integrity": "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz",
+      "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==",
       "cpu": [
         "arm64"
       ],
@@ -206,9 +194,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz",
-      "integrity": "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz",
+      "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==",
       "cpu": [
         "ia32"
       ],
@@ -223,9 +211,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz",
-      "integrity": "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz",
+      "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==",
       "cpu": [
         "loong64"
       ],
@@ -240,9 +228,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz",
-      "integrity": "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz",
+      "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==",
       "cpu": [
         "mips64el"
       ],
@@ -257,9 +245,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz",
-      "integrity": "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz",
+      "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==",
       "cpu": [
         "ppc64"
       ],
@@ -274,9 +262,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz",
-      "integrity": "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz",
+      "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==",
       "cpu": [
         "riscv64"
       ],
@@ -291,9 +279,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz",
-      "integrity": "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz",
+      "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==",
       "cpu": [
         "s390x"
       ],
@@ -308,9 +296,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz",
-      "integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz",
+      "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==",
       "cpu": [
         "x64"
       ],
@@ -325,9 +313,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz",
-      "integrity": "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==",
       "cpu": [
         "arm64"
       ],
@@ -342,9 +330,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz",
-      "integrity": "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==",
       "cpu": [
         "x64"
       ],
@@ -359,9 +347,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz",
-      "integrity": "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==",
       "cpu": [
         "arm64"
       ],
@@ -376,9 +364,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz",
-      "integrity": "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==",
       "cpu": [
         "x64"
       ],
@@ -392,10 +380,27 @@
         "node": ">=18"
       }
     },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz",
+      "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz",
-      "integrity": "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz",
+      "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==",
       "cpu": [
         "x64"
       ],
@@ -410,9 +415,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz",
-      "integrity": "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz",
+      "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==",
       "cpu": [
         "arm64"
       ],
@@ -427,9 +432,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz",
-      "integrity": "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz",
+      "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==",
       "cpu": [
         "ia32"
       ],
@@ -444,9 +449,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz",
-      "integrity": "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
+      "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==",
       "cpu": [
         "x64"
       ],
@@ -460,35 +465,57 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -496,16 +523,16 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.30",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -835,9 +862,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.9.tgz",
-      "integrity": "sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.0.tgz",
+      "integrity": "sha512-lVgpeQyy4fWN5QYebtW4buT/4kn4p4IJ+kDNB4uYNT5b8c8DLJDg6titg20NIg7E8RWwdWZORW6vUFfrLyG3KQ==",
       "cpu": [
         "arm"
       ],
@@ -849,9 +876,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.9.tgz",
-      "integrity": "sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.0.tgz",
+      "integrity": "sha512-2O73dR4Dc9bp+wSYhviP6sDziurB5/HCym7xILKifWdE9UsOe2FtNcM+I4xZjKrfLJnq5UR8k9riB87gauiQtw==",
       "cpu": [
         "arm64"
       ],
@@ -863,9 +890,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.0.tgz",
+      "integrity": "sha512-vwSXQN8T4sKf1RHr1F0s98Pf8UPz7pS6P3LG9NSmuw0TVh7EmaE+5Ny7hJOZ0M2yuTctEsHHRTMi2wuHkdS6Hg==",
       "cpu": [
         "arm64"
       ],
@@ -877,9 +904,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.0.tgz",
+      "integrity": "sha512-cQp/WG8HE7BCGyFVuzUg0FNmupxC+EPZEwWu2FCGGw5WDT1o2/YlENbm5e9SMvfDFR6FRhVCBePLqj0o8MN7Vw==",
       "cpu": [
         "x64"
       ],
@@ -891,9 +918,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.9.tgz",
-      "integrity": "sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.0.tgz",
+      "integrity": "sha512-UR1uTJFU/p801DvvBbtDD7z9mQL8J80xB0bR7DqW7UGQHRm/OaKzp4is7sQSdbt2pjjSS72eAtRh43hNduTnnQ==",
       "cpu": [
         "arm64"
       ],
@@ -905,9 +932,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.9.tgz",
-      "integrity": "sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.0.tgz",
+      "integrity": "sha512-G/DKyS6PK0dD0+VEzH/6n/hWDNPDZSMBmqsElWnCRGrYOb2jC0VSupp7UAHHQ4+QILwkxSMaYIbQ72dktp8pKA==",
       "cpu": [
         "x64"
       ],
@@ -919,9 +946,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.9.tgz",
-      "integrity": "sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.0.tgz",
+      "integrity": "sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==",
       "cpu": [
         "arm"
       ],
@@ -933,9 +960,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.9.tgz",
-      "integrity": "sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.0.tgz",
+      "integrity": "sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==",
       "cpu": [
         "arm"
       ],
@@ -947,9 +974,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.0.tgz",
+      "integrity": "sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==",
       "cpu": [
         "arm64"
       ],
@@ -961,9 +988,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.0.tgz",
+      "integrity": "sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==",
       "cpu": [
         "arm64"
       ],
@@ -975,9 +1002,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.9.tgz",
-      "integrity": "sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.0.tgz",
+      "integrity": "sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==",
       "cpu": [
         "loong64"
       ],
@@ -988,10 +1015,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.9.tgz",
-      "integrity": "sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==",
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.0.tgz",
+      "integrity": "sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==",
       "cpu": [
         "ppc64"
       ],
@@ -1003,9 +1030,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.9.tgz",
-      "integrity": "sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.0.tgz",
+      "integrity": "sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.0.tgz",
+      "integrity": "sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==",
       "cpu": [
         "riscv64"
       ],
@@ -1017,9 +1058,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.9.tgz",
-      "integrity": "sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.0.tgz",
+      "integrity": "sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==",
       "cpu": [
         "s390x"
       ],
@@ -1031,9 +1072,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.0.tgz",
+      "integrity": "sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==",
       "cpu": [
         "x64"
       ],
@@ -1045,9 +1086,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.0.tgz",
+      "integrity": "sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==",
       "cpu": [
         "x64"
       ],
@@ -1058,10 +1099,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.0.tgz",
+      "integrity": "sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.0.tgz",
+      "integrity": "sha512-q7cIIdFvWQoaCbLDUyUc8YfR3Jh2xx3unO8Dn6/TTogKjfwrax9SyfmGGK6cQhKtjePI7jRfd7iRYcxYs93esg==",
       "cpu": [
         "arm64"
       ],
@@ -1073,9 +1128,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.9.tgz",
-      "integrity": "sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.0.tgz",
+      "integrity": "sha512-XzNOVg/YnDOmFdDKcxxK410PrcbcqZkBmz+0FicpW5jtjKQxcW1BZJEQOF0NJa6JO7CZhett8GEtRN/wYLYJuw==",
       "cpu": [
         "ia32"
       ],
@@ -1087,9 +1142,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.0.tgz",
+      "integrity": "sha512-xMmiWRR8sp72Zqwjgtf3QbZfF1wdh8X2ABu3EaozvZcyHJeU0r+XAnXdKgs4cCAp6ORoYoCygipYP1mjmbjrsg==",
       "cpu": [
         "x64"
       ],
@@ -1111,63 +1166,63 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.3.tgz",
-      "integrity": "sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.1.3.tgz",
+      "integrity": "sha512-3pppgIeIZs6nrQLazzKcdnTJ2IWiui/UucEPXKyFG35TKaHQrfkWBnv6hyJcLxFuR90t+LaoecrqTs8rJKWfSQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
-        "debug": "^4.4.0",
+        "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+        "debug": "^4.4.1",
         "deepmerge": "^4.3.1",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.15",
-        "vitefu": "^1.0.4"
+        "magic-string": "^0.30.17",
+        "vitefu": "^1.1.1"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22"
+        "node": "^20.19 || ^22.12 || >=24"
       },
       "peerDependencies": {
         "svelte": "^5.0.0",
-        "vite": "^6.0.0"
+        "vite": "^6.3.0 || ^7.0.0"
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
-      "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-5.0.1.tgz",
+      "integrity": "sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.3.7"
+        "debug": "^4.4.1"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22"
+        "node": "^20.19 || ^22.12 || >=24"
       },
       "peerDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0",
         "svelte": "^5.0.0",
-        "vite": "^6.0.0"
+        "vite": "^6.3.0 || ^7.0.0"
       }
     },
     "node_modules/@tsconfig/svelte": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
-      "integrity": "sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.5.tgz",
+      "integrity": "sha512-48fAnUjKye38FvMiNOj0J9I/4XlQQiZlpe9xaNPfe8vy2Y1hFBt8g1yqf2EGjVvHavo4jf2lC+TQyENCr4BJBQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -1198,9 +1253,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
         {
           "type": "github",
@@ -1217,9 +1272,9 @@
       }
     },
     "node_modules/bootstrap-icons": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
-      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
       "funding": [
         {
           "type": "github",
@@ -1273,9 +1328,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1315,9 +1370,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz",
-      "integrity": "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
+      "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -1328,31 +1383,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.0",
-        "@esbuild/android-arm": "0.25.0",
-        "@esbuild/android-arm64": "0.25.0",
-        "@esbuild/android-x64": "0.25.0",
-        "@esbuild/darwin-arm64": "0.25.0",
-        "@esbuild/darwin-x64": "0.25.0",
-        "@esbuild/freebsd-arm64": "0.25.0",
-        "@esbuild/freebsd-x64": "0.25.0",
-        "@esbuild/linux-arm": "0.25.0",
-        "@esbuild/linux-arm64": "0.25.0",
-        "@esbuild/linux-ia32": "0.25.0",
-        "@esbuild/linux-loong64": "0.25.0",
-        "@esbuild/linux-mips64el": "0.25.0",
-        "@esbuild/linux-ppc64": "0.25.0",
-        "@esbuild/linux-riscv64": "0.25.0",
-        "@esbuild/linux-s390x": "0.25.0",
-        "@esbuild/linux-x64": "0.25.0",
-        "@esbuild/netbsd-arm64": "0.25.0",
-        "@esbuild/netbsd-x64": "0.25.0",
-        "@esbuild/openbsd-arm64": "0.25.0",
-        "@esbuild/openbsd-x64": "0.25.0",
-        "@esbuild/sunos-x64": "0.25.0",
-        "@esbuild/win32-arm64": "0.25.0",
-        "@esbuild/win32-ia32": "0.25.0",
-        "@esbuild/win32-x64": "0.25.0"
+        "@esbuild/aix-ppc64": "0.25.9",
+        "@esbuild/android-arm": "0.25.9",
+        "@esbuild/android-arm64": "0.25.9",
+        "@esbuild/android-x64": "0.25.9",
+        "@esbuild/darwin-arm64": "0.25.9",
+        "@esbuild/darwin-x64": "0.25.9",
+        "@esbuild/freebsd-arm64": "0.25.9",
+        "@esbuild/freebsd-x64": "0.25.9",
+        "@esbuild/linux-arm": "0.25.9",
+        "@esbuild/linux-arm64": "0.25.9",
+        "@esbuild/linux-ia32": "0.25.9",
+        "@esbuild/linux-loong64": "0.25.9",
+        "@esbuild/linux-mips64el": "0.25.9",
+        "@esbuild/linux-ppc64": "0.25.9",
+        "@esbuild/linux-riscv64": "0.25.9",
+        "@esbuild/linux-s390x": "0.25.9",
+        "@esbuild/linux-x64": "0.25.9",
+        "@esbuild/netbsd-arm64": "0.25.9",
+        "@esbuild/netbsd-x64": "0.25.9",
+        "@esbuild/openbsd-arm64": "0.25.9",
+        "@esbuild/openbsd-x64": "0.25.9",
+        "@esbuild/openharmony-arm64": "0.25.9",
+        "@esbuild/sunos-x64": "0.25.9",
+        "@esbuild/win32-arm64": "0.25.9",
+        "@esbuild/win32-ia32": "0.25.9",
+        "@esbuild/win32-x64": "0.25.9"
       }
     },
     "node_modules/esm-env": {
@@ -1363,9 +1419,9 @@
       "license": "MIT"
     },
     "node_modules/esrap": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.5.tgz",
-      "integrity": "sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.0.tgz",
+      "integrity": "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1401,10 +1457,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/immutable": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
       "dev": true,
       "license": "MIT"
     },
@@ -1472,13 +1537,13 @@
       "license": "MIT"
     },
     "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "version": "0.30.18",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
+      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/micromatch": {
@@ -1514,9 +1579,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "dev": true,
       "funding": [
         {
@@ -1562,9 +1627,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -1582,7 +1647,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -1605,13 +1670,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.9.tgz",
-      "integrity": "sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==",
+      "version": "4.50.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.0.tgz",
+      "integrity": "sha512-/Zl4D8zPifNmyGzJS+3kVoyXeDeT/GrsJM94sACNg9RtUE0hrHa1bNPtRSrfHTMH5HjRzce6K7rlTh3Khiw+pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.6"
+        "@types/estree": "1.0.8"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1621,25 +1686,27 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.34.9",
-        "@rollup/rollup-android-arm64": "4.34.9",
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-freebsd-arm64": "4.34.9",
-        "@rollup/rollup-freebsd-x64": "4.34.9",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.34.9",
-        "@rollup/rollup-linux-arm-musleabihf": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.34.9",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.9",
-        "@rollup/rollup-linux-riscv64-gnu": "4.34.9",
-        "@rollup/rollup-linux-s390x-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-ia32-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9",
+        "@rollup/rollup-android-arm-eabi": "4.50.0",
+        "@rollup/rollup-android-arm64": "4.50.0",
+        "@rollup/rollup-darwin-arm64": "4.50.0",
+        "@rollup/rollup-darwin-x64": "4.50.0",
+        "@rollup/rollup-freebsd-arm64": "4.50.0",
+        "@rollup/rollup-freebsd-x64": "4.50.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.50.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.50.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.50.0",
+        "@rollup/rollup-linux-arm64-musl": "4.50.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.50.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.50.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-musl": "4.50.0",
+        "@rollup/rollup-openharmony-arm64": "4.50.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.50.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.50.0",
+        "@rollup/rollup-win32-x64-msvc": "4.50.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -1657,9 +1724,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.85.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.85.1.tgz",
-      "integrity": "sha512-Uk8WpxM5v+0cMR0XjX9KfRIacmSG86RH4DCCZjLU2rFh5tyutt9siAXJ7G+YfxQ99Q6wrRMbMlVl6KqUms71ag==",
+      "version": "1.91.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.91.0.tgz",
+      "integrity": "sha512-aFOZHGf+ur+bp1bCHZ+u8otKGh77ZtmFyXDo4tlYvT7PWql41Kwd8wdkPqhhT+h2879IVblcHFglIMofsFd1EA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1688,13 +1755,13 @@
       }
     },
     "node_modules/svelte": {
-      "version": "5.22.5",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.22.5.tgz",
-      "integrity": "sha512-+2BDWVa/rqr34oM+5HFUSmCCPdBBeNqFv2Xc/SSB8kV4iQhWWBNvU9/nd5Dz3PkAGl7Bm/AndS1vY4fe1MgTKA==",
+      "version": "5.38.6",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.38.6.tgz",
+      "integrity": "sha512-ltBPlkvqk3bgCK7/N323atUpP3O3Y+DrGV4dcULrsSn4fZaaNnOmdplNznwfdWclAgvSr5rxjtzn/zJhRm6TKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
         "@sveltejs/acorn-typescript": "^1.0.5",
         "@types/estree": "^1.0.5",
@@ -1703,7 +1770,7 @@
         "axobject-query": "^4.1.0",
         "clsx": "^2.1.1",
         "esm-env": "^1.2.1",
-        "esrap": "^1.4.3",
+        "esrap": "^2.1.0",
         "is-reference": "^3.0.3",
         "locate-character": "^3.0.0",
         "magic-string": "^0.30.11",
@@ -1714,9 +1781,9 @@
       }
     },
     "node_modules/svelte-check": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.1.4.tgz",
-      "integrity": "sha512-v0j7yLbT29MezzaQJPEDwksybTE2Ups9rUxEXy92T06TiA0cbqcO8wAOwNUVkFW6B0hsYHA+oAX3BS8b/2oHtw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.1.tgz",
+      "integrity": "sha512-lkh8gff5gpHLjxIV+IaApMxQhTGnir2pNUAqcNgeKkvK5bT/30Ey/nzBxNLDlkztCH4dP7PixkMt9SWEKFPBWg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1738,11 +1805,14 @@
       }
     },
     "node_modules/svelte-check/node_modules/fdir": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -1753,9 +1823,9 @@
       }
     },
     "node_modules/svelte-check/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1767,6 +1837,63 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/svelte-highlight": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.8.4.tgz",
+      "integrity": "sha512-aVp+Q0hH9kI7PlSDrklmFTF4Uj7wYj7UGuqkREnkXlqpEffxr2g6esZcMMaTgECdg5rb2mJqM88+nwS10ecoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "highlight.js": "11.11.1"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1782,9 +1909,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -1796,21 +1923,24 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
-      "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
+      "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.14"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -1819,14 +1949,14 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@types/node": "^20.19.0 || >=22.12.0",
         "jiti": ">=1.21.0",
-        "less": "*",
+        "less": "^4.0.0",
         "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
         "terser": "^5.16.0",
         "tsx": "^4.8.1",
         "yaml": "^2.4.2"
@@ -1867,18 +1997,50 @@
         }
       }
     },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/vitefu": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
-      "integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
+      "integrity": "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==",
       "dev": true,
       "license": "MIT",
       "workspaces": [
         "tests/deps/*",
-        "tests/projects/*"
+        "tests/projects/*",
+        "tests/projects/workspace/packages/*"
       ],
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
       },
       "peerDependenciesMeta": {
         "vite": {
diff --git a/demo/package.json b/demo/package.json
index 91a1b3e..3b5c510 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -10,16 +10,18 @@
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@tsconfig/svelte": "^5.0.4",
     "sass": "^1.83.4",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
     "typescript": "^5.7.3",
-    "vite": "^6.0.5"
+    "vite": "^7.1.3"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
     "bootstrap": "^5.3.3",
-    "bootstrap-icons": "^1.11.3"
+    "bootstrap-icons": "^1.11.3",
+    "svelte-highlight": "^7.8.3"
   }
 }
diff --git a/demo/src/App.svelte b/demo/src/App.svelte
index 3af3319..b82424e 100644
--- a/demo/src/App.svelte
+++ b/demo/src/App.svelte
@@ -1,21 +1,42 @@
 <script lang="ts">
 	import './app.scss';
 	import NavBar from './lib/NavBar.svelte';
+	import Tooltip from './lib/Tooltip.svelte';
 	import { Router, Route, Fallback, RouterTrace } from '@wjfe/n-savant';
 	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';
-</script>
 
-<svelte:head>
-	<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-</svelte:head>
+	let showNavTooltip = $state(false);
+
+	// Show toolti<p after a short delay when app loads
+	$effect(() => {
+		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);
+		};
+	});
+</script>
 
 <div class="app">
 	<div class="d-flex flex-column h-100">
 		<Router id="root">
-			<NavBar />
+			<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">
diff --git a/demo/src/lib/CodeSnippet.svelte b/demo/src/lib/CodeSnippet.svelte
new file mode 100644
index 0000000..4d9c349
--- /dev/null
+++ b/demo/src/lib/CodeSnippet.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Highlight, { type LanguageType } from 'svelte-highlight';
+	import 'svelte-highlight/styles/github.css';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		language: LanguageType<string>;
+		code: string;
+		title?: string;
+		copyable?: boolean;
+	}
+
+	let { language, code, title, copyable = true, class: cssClass, ...restProps }: Props = $props();
+
+	let copied = $state(false);
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch (err) {
+			console.error('Failed to copy code: ', err);
+		}
+	}
+</script>
+
+<div class={['code-snippet', cssClass]} {...restProps}>
+	{#if title || copyable}
+		<div class="code-snippet-header">
+			{#if title}
+				<span class="code-snippet-title">{title}</span>
+			{/if}
+			{#if copyable}
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary copy-btn"
+					onclick={copyToClipboard}
+					disabled={copied}
+				>
+					{#if copied}
+						<i class="bi bi-check"></i> Copied!
+					{:else}
+						<i class="bi bi-clipboard"></i> Copy
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/if}
+	<div 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);
+		border-radius: var(--bs-border-radius);
+		background-color: var(--bs-body-bg);
+		margin: 1rem 0;
+		overflow: hidden;
+	}
+
+	.code-snippet-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		background-color: var(--bs-light);
+		border-bottom: 1px solid var(--bs-border-color);
+		font-size: 0.875rem;
+	}
+
+	.code-snippet-title {
+		font-weight: 600;
+		color: var(--bs-secondary);
+	}
+
+	.copy-btn {
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		transition: all 0.2s ease;
+	}
+
+	.copy-btn:disabled {
+		color: var(--bs-success);
+		border-color: var(--bs-success);
+	}
+
+	.code-snippet-content {
+		position: relative;
+	}
+
+	.code-snippet-content :global(pre) {
+		margin: 0 !important;
+		padding: 1rem !important;
+		background-color: transparent !important;
+		border: none !important;
+		border-radius: 0 !important;
+	}
+
+	.code-snippet-content :global(code) {
+		background-color: transparent !important;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.code-snippet-header {
+			background-color: var(--bs-dark);
+			border-bottom-color: var(--bs-secondary);
+		}
+	}
+</style>
diff --git a/demo/src/lib/NavBar.svelte b/demo/src/lib/NavBar.svelte
index d616cd3..3cabed2 100644
--- a/demo/src/lib/NavBar.svelte
+++ b/demo/src/lib/NavBar.svelte
@@ -2,23 +2,28 @@
 	import { Link, Route } from '@wjfe/n-savant';
 	import SubNav from './SubNav.svelte';
 	import { routingMode } from './hash-routing';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		...restProps
+	}: HTMLAttributes<HTMLElement> = $props();
 
 	const pathRoutingLinks = [
 		{ text: 'Home', href: '/path-routing' },
-		{ text: 'Demo', href: '/path-routing/demo' }
+		{ text: 'Start Demo', href: '/path-routing/demo' }
 	];
 	const hashRoutingLinks = [
 		{ text: 'Home', href: '/hash-routing' },
 		{
-			text: 'Demo',
+			text: 'Start Demo',
 			href: '/hash-routing#' + (routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')
 		}
 	];
 </script>
 
-<nav class="navbar navbar-expand-lg bg-primary-subtle">
+<nav class="navbar navbar-expand-lg bg-primary-subtle" {...restProps}>
 	<div class="container-fluid">
-		<Link class="navbar-brand fw-bold" href="/">
+		<Link class="navbar-brand fw-bold" href="/" id="logoLink">
 			<svg style:height="1.7em" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 				<!-- Outer circle -->
 				<circle cx="50" cy="50" r="48" stroke="black" stroke-width="2" fill="none" />
@@ -57,7 +62,7 @@
 		<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="/">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">
diff --git a/demo/src/lib/Tooltip.svelte b/demo/src/lib/Tooltip.svelte
new file mode 100644
index 0000000..0263c65
--- /dev/null
+++ b/demo/src/lib/Tooltip.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { computePosition, offset, arrow, type Placement, type Strategy } from "@floating-ui/dom";
+	import { fade } from 'svelte/transition';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		strategy?: Strategy;
+		placement?: Placement;
+		children?: Snippet;
+		reference: Snippet<[(refEl: HTMLElement) => () => void]>;
+		shown?: boolean;
+	}
+
+	let {
+		strategy = 'absolute',
+		placement = 'bottom',
+		children,
+		reference,
+		shown = false,
+		class: cssClass,
+		...restProps
+	}: Props = $props();
+
+	let refElement = $state<HTMLElement | null>(null);
+	let pos = $state<{ x: number; y: number } | undefined>();
+
+	function setReferenceElement(refEl: HTMLElement) {
+		refElement = refEl;
+		return () => {
+			refElement = null;
+			console.log('setReferenceElement cleaned up.');
+		}
+	}
+
+	function calculateTooltipPos(ttipEl: HTMLElement) {
+		console.log('calculateTooltipPos');
+		if (!refElement || !shown) {
+			return;
+		}
+		
+		computePosition(refElement, ttipEl, {
+			strategy,
+			placement,
+			middleware: [
+				offset(8)
+			],
+		}).then(result => {
+			console.log(result);
+			pos = {
+				x: result.x,
+				y: result.y
+			};
+		});
+	}
+
+	// Map floating-ui placement to Bootstrap tooltip classes
+	function getTooltipClass(placement: Placement): string {
+		if (placement.startsWith('top')) return 'bs-tooltip-top';
+		if (placement.startsWith('bottom')) return 'bs-tooltip-bottom';
+		if (placement.startsWith('left')) return 'bs-tooltip-start';
+		if (placement.startsWith('right')) return 'bs-tooltip-end';
+		return 'bs-tooltip-bottom';
+	}
+</script>
+
+<div>
+	{@render reference(setReferenceElement)}
+	{#if shown}
+		<div
+			class={[
+				"tooltip",
+				getTooltipClass(placement),
+				`tooltip-${strategy}`,
+				"show"
+			]}
+			role="tooltip"
+			{...restProps}
+			style:left="{pos?.x}px"
+			style:top="{pos?.y}px"
+			{@attach calculateTooltipPos}
+			transition:fade={{ duration: 220 }}
+		>
+			<div class="tooltip-arrow"></div>
+			<div class="tooltip-inner">
+				{@render children?.()}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tooltip {
+		z-index: 1070;
+		max-width: 200px;
+		
+		&.tooltip-absolute {
+			position: absolute;
+		}
+		
+		&.tooltip-fixed {
+			position: fixed;
+		}
+	}
+
+	/* Ensure Bootstrap tooltip arrow styles are applied */
+	:global(.tooltip .tooltip-arrow) {
+		position: absolute;
+		width: 0.4rem;
+		height: 0.4rem;
+	}
+
+	/* Force Bootstrap arrow styles for different placements */
+	:global(.tooltip.bs-tooltip-bottom .tooltip-arrow) {
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	:global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
+		content: "";
+		position: absolute;
+		border-left: 0.4rem solid transparent;
+		border-right: 0.4rem solid transparent;
+		border-bottom: 0.4rem solid var(--bs-tooltip-bg, #000);
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	:global(.tooltip.bs-tooltip-top .tooltip-arrow) {
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	:global(.tooltip.bs-tooltip-top .tooltip-arrow::before) {
+		content: "";
+		position: absolute;
+		border-left: 0.4rem solid transparent;
+		border-right: 0.4rem solid transparent;
+		border-top: 0.4rem solid var(--bs-tooltip-bg, #000);
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+</style>
+
+<!--
+@component
+# Tooltip
+A custom tooltip component using @floating-ui/dom and Svelte 5 attachments.
+
+## Props
+- `strategy` (Strategy, default: 'absolute'): Positioning strategy
+- `placement` (Placement, default: 'bottom'): Where to place the tooltip
+- `children` (Snippet, optional): Content of the tooltip
+- `reference` (Snippet): Snippet that provides the reference element
+- `shown` (boolean, default: false): Whether the tooltip is visible
+
+## Usage
+```svelte
+<script>
+    import Tooltip from './lib/Tooltip.svelte';
+    let shown = $state(false);
+</script>
+
+<Tooltip {shown}>
+    {#snippet reference(ref)}
+        <button {@attach ref} onmouseenter={() => shown = true} onmouseleave={() => shown = false}>
+            Hover me
+        </button>
+    {/snippet}
+    This is the tooltip content!
+</Tooltip>
+```
+-->
diff --git a/demo/src/lib/hash-routing.ts b/demo/src/lib/hash-routing.ts
index 580c437..fb2d47e 100644
--- a/demo/src/lib/hash-routing.ts
+++ b/demo/src/lib/hash-routing.ts
@@ -8,5 +8,9 @@ export const routingMode = globalThis.window.sessionStorage.getItem(routingModeK
 export function toggleRoutingMode() {
     const newMode: HashRoutingMode = routingMode === 'single' ? 'multi' : 'single';
     globalThis.window.sessionStorage.setItem(routingModeKey, newMode);
+    
+    // Clear the hash to avoid conflicts when switching modes
+    globalThis.window.location.hash = '';
+    
     globalThis.window.location.reload();
 }
diff --git a/demo/src/lib/views/hash-routing/HashRoutingView.svelte b/demo/src/lib/views/hash-routing/HashRoutingView.svelte
index 46010d4..032178f 100644
--- a/demo/src/lib/views/hash-routing/HashRoutingView.svelte
+++ b/demo/src/lib/views/hash-routing/HashRoutingView.svelte
@@ -1,14 +1,111 @@
 <script lang="ts">
 	import DemoView from '../../demo/DemoView.svelte';
 	import ViewSkeleton from '../ViewSkeleton.svelte';
+	import CodeSnippet from '../../CodeSnippet.svelte';
 	import { routingMode, toggleRoutingMode } from '../../hash-routing.js';
-	import { Route, Router } from '@wjfe/n-savant';
+	import { Route, Router, location } from '@wjfe/n-savant';
+	import typescript from 'svelte-highlight/languages/typescript';
+	import xml from 'svelte-highlight/languages/xml';
 
 	let {
 		basePath
 	}: {
 		basePath?: string;
 	} = $props();
+
+	// Modal state
+	let showCodeModal = $state(false);
+
+	// Simplified code example for the modal
+	const liveHashCode = `<scr` + `ipt lang="ts">
+  import { location } from '@wjfe/n-savant';
+
+  // Reactive hash display
+  const currentHash = $derived(() => {
+    return location.url.hash || '#(empty)';
+  });
+
+  // Parse routes for display
+  const routes = $derived(() => {
+    if (routingMode === 'multi') {
+      return location.hashPaths; // All hash paths
+    } else {
+      return { main: location.hashPaths.single || '' };
+    }
+  });
+</scr` + `ipt>
+
+<div class="hash-display">
+  <div class="current-hash">
+    Current hash: {currentHash}
+  </div>
+  
+  {#each Object.entries(routes) as [key, value]}
+    <div class="route-info">
+      <strong>{key}:</strong> {value || '(empty)'}
+    </div>
+  {/each}
+</div>`;
+
+	// Parsed routes for display
+	const parsedRoutes = $derived.by(() => {
+		if (routingMode === 'multi') {
+			// Return all hash paths in multi mode
+			return location.hashPaths;
+		} else {
+			// Return single hash as main route
+			return { main: location.hashPaths.single || '' };
+		}
+	});
+
+	const basicHashRouterCode = `<Router hash id="my-hash-router">
+  <Route hash key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route hash key="profile" path="/profile/:userId">
+    <ProfilePage />
+  </Route>
+</Router>`;
+
+	const multiHashRouterCode = `<!-- Multiple hash routers can coexist! -->
+<Router hash="sidebar" id="sidebar-router">
+  <Route hash="sidebar" key="nav" path="/nav">
+    <SidebarNavigation />
+  </Route>
+</Router>
+
+<Router hash="main" id="main-router">
+  <Route hash="main" key="dashboard" path="/dashboard">
+    <DashboardView />
+  </Route>
+</Router>`;
+
+	const hashUrlExamples = `// Single Hash Mode URLs:
+// https://example.com#/
+// https://example.com#/profile/123
+// https://example.com#/settings/account
+
+// Multi Hash Mode URLs:
+// https://example.com#sidebar=/nav;main=/dashboard
+// https://example.com#d1=/demo/routes;d2=/demo/links
+// https://example.com#nav=/home;content=/profile/123;modal=/settings`;
+
+	const pathAndHashCode = `<Router id="main-router">
+  <!-- Path routing -->
+  <Route key="app" path="/app/*">
+    <AppLayout />
+  </Route>
+</Router>
+
+<Router hash id="modal-router">
+  <!-- Hash routing for modals -->
+  <Route hash key="login" path="/login">
+    <LoginModal />
+  </Route>
+  <Route hash key="settings" path="/settings">
+    <SettingsModal />
+  </Route>
+</Router>`;
 </script>
 
 {#snippet demo(hash: boolean | string)}
@@ -22,85 +119,285 @@
 {/snippet}
 
 <div>
-	<h1>Hash Routing</h1>
-	<p>
-		Hash routing uses the value of the URL's hash to determine the route. This is an always-on
-		feature that can coexist with path routing. The hash value is the portion of the URL that
-		follows the `#` character.
+	<h1>🚀 Hash Routing</h1>
+	<p class="lead">
+		Navigate your app using URL fragments! Hash routing uses the portion after the `#` character 
+		to determine routes, perfect for client-side navigation that works everywhere.
 	</p>
-	<div class="row mt-5">
-		<div class="col-6">
-			<div class="card h-100">
-				<h3 class="card-header">Simultaneous Path and Hash Routing</h3>
+
+	<!-- Hero Section with Basic Concept -->
+	<div class="row mt-4">
+		<div class="col-lg-6">
+			<div class="card border-primary h-100">
+				<div class="card-header bg-primary text-white">
+					<h4 class="mb-0">✨ Basic Hash Routing</h4>
+				</div>
 				<div class="card-body">
 					<p>
-						The <code>@wjfe/n-savant</code> library allows both modes simultaneously by
-						specification of the Boolean <code>hash</code> property in both the
-						<code>&lt;Router&gt;</code>
-						and <code>&lt;Route&gt;</code> components.
-					</p>
-					<p>
-						The components make sure nothing gets mixed, but if you're consuming the
-						<code>RouterEngine</code> class in code, then you must make sure that any router hierarchies
-						you build operate in the same mode.
+						Hash routing is perfect for single-page applications. It works without server 
+						configuration and plays nicely with static hosting!
 					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={basicHashRouterCode} 
+						title="Basic Hash Router Setup"
+					/>
+					<div class="mt-3">
+						<small class="text-muted">
+							💡 Try changing the URL hash to see routing in action!
+						</small>
+					</div>
 				</div>
 			</div>
 		</div>
-		<div class="col-6">
-			<div class="card h-100">
-				<h3 class="card-header">Single or Multiple Hash Routes</h3>
+		<div class="col-lg-6">
+			<div class="card border-success h-100">
+				<div class="card-header bg-success text-white">
+					<h4 class="mb-0">🎯 URL Examples</h4>
+				</div>
+				<div class="card-body">
+					<p>See how URLs look in both single and multi-hash modes:</p>
+					<CodeSnippet 
+						language={typescript} 
+						code={hashUrlExamples} 
+						title="Hash URL Patterns"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Advanced Features -->
+	<div class="row mt-4">
+		<div class="col-lg-6">
+			<div class="card border-warning h-100">
+				<div class="card-header bg-warning text-dark">
+					<h4 class="mb-0">🔄 Multiple Hash Routers</h4>
+				</div>
 				<div class="card-body">
 					<p>
-						The library can operate in single or multiple hash mode. Single mode is what is found
-						virtually in any other routing library: The hash's entire value is the route. In
-						multiple mode, however, the hash value is interpreted as a semi-colon-separated list of
-						key/value pairs.
+						Run multiple independent hash routers simultaneously! Each router gets its own 
+						namespace in the hash value using key-value pairs.
 					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={multiHashRouterCode} 
+						title="Multi-Hash Router Example"
+					/>
+					<div class="alert alert-info mt-3">
+						<strong>Cool fact:</strong> Multi-hash mode uses semicolon-separated key/value 
+						pairs, so `#sidebar=/nav;main=/dashboard` runs two routers independently!
+					</div>
+					<div class="alert alert-success mt-2">
+						<strong>💡 Pro tip:</strong> Keep your multi-hash path names short to prevent URLs from growing too long!
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-lg-6">
+			<div class="card border-info h-100">
+				<div class="card-header bg-info text-white">
+					<h4 class="mb-0">🤝 Path + Hash Harmony</h4>
+				</div>
+				<div class="card-body">
 					<p>
-						Modes are mutually exclusive since they share the same hash value and it cannot be both
-						at the same time (not a Schrödinger hash). The mode is set in the library's
-						initialization options.
+						Mix path and hash routing! Use path routing for main navigation and hash 
+						routing for modals, tabs, or secondary navigation.
 					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={pathAndHashCode} 
+						title="Simultaneous Path & Hash Routing"
+					/>
+					<div class="alert alert-success mt-3">
+						<strong>Best practice:</strong> Use path routing for main content and hash 
+						routing for overlays and temporary UI states.
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
+
+	<!-- Interactive Demo Section -->
 	<div class="row mt-5">
-		<div class="col-6 offset-3">
-			<div class="card">
-				<h3 class="card-header">Hash Routing Demo</h3>
-				<ul class="list-group list-group-flush">
-					<li class="list-group-item">
-						<p>
-							<span class="fw-bold bg-warning-subtle px-3 py-1 rounded"
-								>Current Hash Mode: <code>{routingMode}</code></span
-							>
-						</p>
-						<p>
-							Switch modes to see the demo in <code
-								>{routingMode === 'single' ? 'multi' : 'single'}</code
-							>
-							mode. <strong>NOTE:</strong> The page will reload.
-						</p>
-						<button type="button" class="btn btn-warning" onclick={() => toggleRoutingMode()}>
-							Switch Mode
-						</button>
-					</li>
-				</ul>
+		<div class="col-lg-8 offset-lg-2">
+			<div class="card border-dark">
+				<div class="card-header bg-dark text-white text-center">
+					<h3 class="mb-0">🎮 Interactive Demo</h3>
+				</div>
+				<div class="card-body text-center">
+					<div class="mb-4">
+						<span class="badge bg-{routingMode === 'single' ? 'primary' : 'success'} fs-6 px-3 py-2">
+							Current Mode: <code class="text-white">{routingMode}</code>
+						</span>
+					</div>
+					<p class="lead">
+						Experience the difference between single and multi-hash routing modes!
+					</p>
+					<p>
+						Currently in <strong>{routingMode}</strong> mode. 
+						{#if routingMode === 'single'}
+							The entire hash value represents one route.
+						{:else}
+							The hash contains multiple key/value pairs for independent routers.
+						{/if}
+					</p>
+					<button 
+						type="button" 
+						class="btn btn-lg btn-{routingMode === 'single' ? 'success' : 'primary'}" 
+						onclick={() => toggleRoutingMode()}
+					>
+						🔄 Switch to {routingMode === 'single' ? 'Multi' : 'Single'} Mode
+					</button>
+					<div class="mt-3">
+						<small class="text-muted">
+							⚠️ Note: The page will reload to apply the new mode.
+						</small>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-	{#if routingMode === 'multi'}
-		<div class="row g-3">
-			<div class="col-xl-6">
-				{@render demo('d1')}
+
+	<!-- Live Demo -->
+	<div class="mt-5">
+		<h2 class="text-center mb-4">🎪 Live Demo</h2>
+		{#if routingMode === 'multi'}
+			<div class="row g-4">
+				<div class="col-xl-6">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="mb-0">🎯 Demo Router "d1"</h5>
+							<small class="text-muted">Hash key: d1</small>
+						</div>
+						<div class="card-body">
+							{@render demo('d1')}
+						</div>
+					</div>
+				</div>
+				<div class="col-xl-6">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="mb-0">🎪 Demo Router "d2"</h5>
+							<small class="text-muted">Hash key: d2</small>
+						</div>
+						<div class="card-body">
+							{@render demo('d2')}
+						</div>
+					</div>
+				</div>
 			</div>
-			<div class="col-xl-6">
-				{@render demo('d2')}
+			<div class="alert alert-info mt-4">
+				<h6>🔍 Live URL Hash</h6>
+				<p class="mb-2">
+					Watch how the URL hash updates in real-time as you navigate through both demos:
+				</p>
+				<div class="bg-dark text-light p-2 rounded font-monospace">
+					Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
+				</div>
+				{#if Object.keys(parsedRoutes).length > 0}
+					<div class="mt-2">
+						<small><strong>Parsed routes:</strong></small>
+						<ul class="mb-0 mt-1">
+							{#each Object.entries(parsedRoutes) as [key, value]}
+								<li><code>{key}</code>: <span class="text-info">{value || '(empty)'}</span></li>
+							{/each}
+						</ul>
+					</div>
+				{/if}
+				<div class="mt-3">
+					<button 
+						type="button" 
+						class="btn btn-sm btn-outline-primary"
+						onclick={() => showCodeModal = true}
+					>
+						📋 Show Code
+					</button>
+				</div>
 			</div>
-		</div>
-	{:else}
-		{@render demo(true)}
-	{/if}
+		{:else}
+			<div class="card">
+				<div class="card-header">
+					<h5 class="mb-0">🎯 Single Hash Demo</h5>
+					<small class="text-muted">The entire hash represents one route</small>
+				</div>
+				<div class="card-body">
+					{@render demo(true)}
+				</div>
+			</div>
+			<div class="alert alert-info mt-4">
+				<h6>🔍 Live URL Hash</h6>
+				<p class="mb-2">
+					In single mode, the entire hash represents one route:
+				</p>
+				<div class="bg-dark text-light p-2 rounded font-monospace">
+					Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
+				</div>
+				{#if parsedRoutes.main}
+					<div class="mt-2">
+						<small><strong>Current route:</strong> <span class="text-info">{parsedRoutes.main}</span></small>
+					</div>
+				{/if}
+				<div class="mt-3">
+					<button 
+						type="button" 
+						class="btn btn-sm btn-outline-primary"
+						onclick={() => showCodeModal = true}
+					>
+						📋 Show Code
+					</button>
+				</div>
+			</div>
+		{/if}
+	</div>
 </div>
+
+<!-- Code Modal -->
+{#if showCodeModal}
+	<div class="modal fade show" style="display: block;" tabindex="-1">
+		<div class="modal-dialog modal-lg">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">💻 Live Hash Display Code</h5>
+					<button 
+						type="button" 
+						class="btn-close" 
+						onclick={() => showCodeModal = false}
+						aria-label="Close this dialog box"
+					></button>
+				</div>
+				<div class="modal-body">
+					<p class="mb-3">
+						Here's a simplified example showing how to create a live hash display using 
+						<code>@wjfe/n-savant</code>'s reactive location object:
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={liveHashCode} 
+						title="Live Hash Display Component"
+						copyable={true}
+					/>
+					<div class="alert alert-info mt-3">
+						<strong>💡 Key points:</strong>
+						<ul class="mb-0 mt-2">
+							<li><code>location.url.hash</code> is reactive and updates automatically</li>
+							<li><code>location.hashPaths</code> provides parsed hash routes</li>
+							<li><code>$derived()</code> creates reactive computed values</li>
+							<li><strong>✨ No manual event listeners needed!</strong></li>
+						</ul>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button 
+						type="button" 
+						class="btn btn-primary" 
+						onclick={() => showCodeModal = false}
+					>
+						Got it! 👍
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-backdrop fade show"></div>
+{/if}
diff --git a/demo/src/lib/views/home/FeaturesTable.svelte b/demo/src/lib/views/home/FeaturesTable.svelte
new file mode 100644
index 0000000..773b505
--- /dev/null
+++ b/demo/src/lib/views/home/FeaturesTable.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	interface Feature {
+		name: string;
+		liteMode: boolean;
+		fullMode: boolean;
+	}
+
+	const features: Feature[] = [
+		{
+			name: "Always-on path and hash routing",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Multi hash routing",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Multiple route matching",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Router base paths",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Nesting routers",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Exact path matching",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Path specification via regular expression",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Route parameters",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Rest parameter",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Optional parameters",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Additional matching logic",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Disconnected UI pieces for routes and fallback",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Automatic active state in Link components",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Router tracing",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Reactive URL",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Reactive state",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Reactive hash paths",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Programmatic navigation",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Dynamic Routes",
+			liteMode: true,
+			fullMode: true
+		},
+		{
+			name: "Cancellable beforeNavigate event",
+			liteMode: false,
+			fullMode: true
+		},
+		{
+			name: "navigationCancelled event",
+			liteMode: false,
+			fullMode: true
+		},
+		{
+			name: "History API interception",
+			liteMode: false,
+			fullMode: true
+		}
+	];
+</script>
+
+<div class="card">
+	<h3 class="card-header">Features</h3>
+	<div class="card-body">
+		<div class="table-responsive">
+			<table class="table table-striped">
+				<thead>
+					<tr>
+						<th>Feature</th>
+						<th>Lite Mode</th>
+						<th>Full Mode</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each features as feature}
+						<tr>
+							<td>{feature.name}</td>
+							<td class={["feature-status", { 'table-success': feature.liteMode, 'table-danger': !feature.liteMode }]}>
+								{feature.liteMode ? '✔' : '✘'}
+							</td>
+							<td class={["feature-status", { 'table-success': feature.fullMode, 'table-danger': !feature.fullMode }]}>
+								{feature.fullMode ? '✔' : '✘'}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+
+<style>
+	.feature-status {
+		text-align: center;
+		font-weight: bold;
+	}
+</style>
diff --git a/demo/src/lib/views/home/Hero.svelte b/demo/src/lib/views/home/Hero.svelte
index 0e06f97..bed314a 100644
--- a/demo/src/lib/views/home/Hero.svelte
+++ b/demo/src/lib/views/home/Hero.svelte
@@ -1,6 +1,6 @@
 <script>
     const title = "@wjfe/n-savant Router";
-    const subtitle = "The small router for Svelte that could";
+    const subtitle = "The ultimate routing solution for Svelte PWA's and micro-frontends";
 </script>
 
 <div class="hero text-center p-5 text-bg-primary rounded">
diff --git a/demo/src/lib/views/home/HomeView.svelte b/demo/src/lib/views/home/HomeView.svelte
index 95b65fc..09a88c2 100644
--- a/demo/src/lib/views/home/HomeView.svelte
+++ b/demo/src/lib/views/home/HomeView.svelte
@@ -1,32 +1,226 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 	import Hero from './Hero.svelte';
 	import Quickstart from './Quickstart.svelte';
-	import { RouterTrace } from '@wjfe/n-savant';
+	import FeaturesTable from './FeaturesTable.svelte';
+	import CodeSnippet from '../../CodeSnippet.svelte';
+	import { RouterTrace, Link } from '@wjfe/n-savant';
+	import xml from 'svelte-highlight/languages/xml';
+	import typescript from 'svelte-highlight/languages/typescript';
+
+	const pathRoutingExample = `<Router id="app">
+  <Route key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route key="profile" path="/user/:id">
+    {#snippet children(params)}
+      <UserProfile userId={params.id} />
+    {/snippet}
+  </Route>
+</Router>`;
+
+	const hashRoutingExample = `// Initialize with hash as default mode
+init({ implicitMode: 'hash' });
+
+// Now you can omit the hash property!
+<Router id="modals">
+  <Route key="login" path="/login">
+    <LoginModal />
+  </Route>
+  <Route key="settings" path="/settings">
+    <SettingsModal />
+  </Route>
+</Router>`;
+
+	const multiHashExample = `<!-- Two independent hash routers! -->
+<Router hash="nav" id="sidebar">
+  <Route hash="nav" key="menu" path="/menu">
+    <SidebarMenu />
+  </Route>
+</Router>
+
+<Router hash="content" id="main">
+  <Route hash="content" key="dashboard" path="/dashboard">
+    <Dashboard />
+  </Route>
+</Router>`;
 </script>
 
 <div class="root" transition:fade={{ duration: 500 }}>
 	<Hero />
+	
+	<!-- Key Features Showcase -->
+	<div class="row mt-5 g-4">
+		<div class="col-lg-4">
+			<div class="card border-primary h-100" transition:fly={{ delay: 100, y: 50, duration: 600 }}>
+				<div class="card-header bg-primary text-white text-center">
+					<h4 class="mb-0">🛣️ Path Routing</h4>
+				</div>
+				<div class="card-body">
+					<p class="card-text">
+						Classic URL path-based routing with modern SPA performance. SEO-friendly, 
+						bookmarkable, and lightning fast!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={pathRoutingExample} 
+						title="Path Routing Example"
+					/>
+					<div class="text-center mt-3">
+						<Link href="/path-routing" class="btn btn-primary">
+							Try Path Routing →
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+		<div class="col-lg-4">
+			<div class="card border-success h-100" transition:fly={{ delay: 200, y: 50, duration: 600 }}>
+				<div class="card-header bg-success text-white text-center">
+					<h4 class="mb-0">🚀 Hash Routing</h4>
+				</div>
+				<div class="card-body">
+					<p class="card-text">
+						Fragment-based routing that works everywhere! Perfect for modals, 
+						overlays, and client-side navigation. Also works great in Electron apps!
+					</p>
+					<p class="small text-muted mb-3">
+						💡 <strong>Pro tip:</strong> Set <code>implicitMode: 'hash'</code> during initialization 
+						to avoid repeating <code>hash</code> on every component!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={hashRoutingExample} 
+						title="Hash Routing Example"
+					/>
+					<div class="text-center mt-3">
+						<Link href="/hash-routing" class="btn btn-success">
+							Try Hash Routing →
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+		<div class="col-lg-4">
+			<div class="card border-warning h-100" transition:fly={{ delay: 300, y: 50, duration: 600 }}>
+				<div class="card-header bg-warning text-dark text-center">
+					<h4 class="mb-0">🌟 Multi-Hash Magic</h4>
+				</div>
+				<div class="card-body">
+					<p class="card-text">
+						<strong>World's first!</strong> Multiple independent hash routers 
+						running simultaneously. Perfect for micro-frontends!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={multiHashExample} 
+						title="Multi-Hash Example"
+					/>
+					<div class="text-center mt-3">
+						<Link href="/hash-routing" class="btn btn-warning text-dark">
+							See Multi-Hash →
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Why Choose N-Savant -->
 	<div class="row mt-5">
-		<div class="col-md-6">
-			<h2 class="display-3">Routing Demo</h2>
-            <p>
-                This is a demo project for the <code>@wjfe/n-savant</code> router for Svelte v5.
-                Use the navigation links in the top bar to experience all of the router's features.
-            </p>
+		<div class="col-lg-8 offset-lg-2">
+			<div class="card border-info" transition:fly={{ delay: 400, y: 50, duration: 600 }}>
+				<div class="card-header bg-info text-white text-center">
+					<h3 class="mb-0">🎯 Why Choose @wjfe/n-savant?</h3>
+				</div>
+				<div class="card-body">
+					<div class="row">
+						<div class="col-md-6">
+							<h5 class="text-info">🚀 Performance</h5>
+							<ul class="list-unstyled">
+								<li>✅ Less than 1,200 lines of code</li>
+								<li>✅ Zero-config router setup</li>
+								<li>✅ Instant navigation</li>
+								<li>✅ No page reloads</li>
+							</ul>
+
+							<h5 class="text-info mt-4">🎪 Unique Features</h5>
+							<ul class="list-unstyled">
+								<li class="world-first">🥇 <strong>World's first</strong> multi-hash routing</li>
+								<li class="world-first">🥇 <strong>World's first</strong> simultaneous path + hash routing</li>
+								<li>✅ Multi-route matching</li>
+								<li>✅ Micro-frontend ready</li>
+							</ul>
+						</div>
+						<div class="col-md-6">
+							<h5 class="text-info">🛠️ Developer Experience</h5>
+							<ul class="list-unstyled">
+								<li>✅ Full TypeScript support</li>
+								<li>✅ Superb IntelliSense</li>
+								<li>✅ Reactive by design</li>
+								<li>✅ Easy learning curve - piggybacks on Svelte v5 reactivity</li>
+							</ul>
+
+							<h5 class="text-info mt-4">🌐 Production Ready</h5>
+							<ul class="list-unstyled">
+								<li>✅ SEO friendly</li>
+								<li>✅ Works with any hosting</li>
+								<li>✅ Browser back/forward support</li>
+								<li>✅ Deep linking support</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
-        <div class="col-md-6">
-            <Quickstart />
+	</div>
+
+	<!-- Quick Start and Features -->
+	<div class="row mt-5">
+        <div class="col-12 col-lg-6 col-xxl-4">
+            <div transition:fly={{ delay: 500, y: 50, duration: 600 }}>
+                <Quickstart />
+            </div>
         </div>
+        <div class="col-12 col-lg-6 col-xxl-8">
+            <div transition:fly={{ delay: 600, y: 50, duration: 600 }}>
+                <FeaturesTable />
+            </div>
+        </div>
+    </div>
+
+	<!-- Call to Action -->
+	<div class="row mt-5">
+		<div class="col-lg-10 offset-lg-1">
+			<div class="alert alert-primary text-center" transition:fly={{ delay: 700, y: 50, duration: 600 }}>
+				<h4 class="alert-heading">🎮 Ready to Get Started?</h4>
+				<p class="mb-3">
+					Explore the different routing modes and see the power of @wjfe/n-savant in action!
+				</p>
+				<div class="d-flex flex-wrap justify-content-center gap-3">
+					<Link href="/path-routing" class="btn btn-primary btn-lg">
+						🛣️ Path Routing Demo
+					</Link>
+					<Link href="/hash-routing" class="btn btn-success btn-lg">
+						🚀 Hash Routing Demo
+					</Link>
+				</div>
+			</div>
+		</div>
 	</div>
-    <div class="row mt-3">
+
+	<!-- Router Trace Section -->
+    <div class="row mt-5">
         <div class="col">
-            <div class="card">
-                <h3 class="card-header">About the Route Tracer</h3>
+            <div class="card" transition:fly={{ delay: 800, y: 50, duration: 600 }}>
+                <h3 class="card-header">🔍 About the Route Tracer</h3>
                 <div class="card-body">
                     <p>
-                        The following table will appear throughout the various demo pages once for 
-                        each <code>&lt;Router&gt;</code> component in the hierarchy of routers.
+                        The following trace shows the current router's state and will appear throughout 
+                        the demo pages. It's a powerful debugging tool that shows exactly how routes 
+                        are being matched and processed.
                     </p>
                     <RouterTrace />
                 </div>
@@ -39,4 +233,27 @@
     .root {
         z-index: 10;
     }
+
+    .card {
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .btn {
+        transition: all 0.2s ease;
+    }
+
+    .btn:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .world-first {
+        font-size: 1.1em;
+        font-weight: 500;
+    }
 </style>
diff --git a/demo/src/lib/views/home/Quickstart.svelte b/demo/src/lib/views/home/Quickstart.svelte
index 81836a0..4fa8088 100644
--- a/demo/src/lib/views/home/Quickstart.svelte
+++ b/demo/src/lib/views/home/Quickstart.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
     import type { HTMLAttributes } from "svelte/elements";
+    import CodeSnippet from "../../CodeSnippet.svelte";
+    import bash from "svelte-highlight/languages/bash";
+    import typescript from "svelte-highlight/languages/typescript";
+    
     type Props = HTMLAttributes<HTMLDivElement>;
 
     let {
@@ -14,9 +18,15 @@
     </div>
     <div class="card-body">
         <p>Install the package:</p>
-        <code><pre>npm install @wjfe/n-savant</pre></code>
+        <CodeSnippet 
+            language={bash} 
+            code="npm install @wjfe/n-savant"
+            title="Installation"
+        />
         <p>Then, in your Svelte app:</p>
-        <code><pre>{`${'<'}script lang="ts">
+        <CodeSnippet 
+            language={typescript} 
+            code={`<scr` + `ipt lang="ts">
     import { Router, Route } from '@wjfe/n-savant';
     import Hero from './lib/Hero.svelte';
     import Features from './lib/Features.svelte';
@@ -29,16 +39,8 @@
     <Route key="features" path="/features">
         <Features />
     </Route>
-</Router>`}</pre></code>
+</Router>`}
+            title="Basic Usage"
+        />
     </div>
 </div>
-
-<!--
-@component
-# Quickstart
-```svelte
-<script>
-    import Quickstart from './lib/Quickstart.svelte';
-</script>
-```
--->
diff --git a/demo/src/lib/views/path-routing/views/HomeView.svelte b/demo/src/lib/views/path-routing/views/HomeView.svelte
index 42ad624..2ffe1dc 100644
--- a/demo/src/lib/views/path-routing/views/HomeView.svelte
+++ b/demo/src/lib/views/path-routing/views/HomeView.svelte
@@ -1,20 +1,303 @@
 <script lang="ts">
+	import CodeSnippet from '../../../CodeSnippet.svelte';
+	import xml from 'svelte-highlight/languages/xml';
+	import typescript from 'svelte-highlight/languages/typescript';
 
+	const basicPathRouterCode = `<Router id="app-router" basePath="/app">
+  <Route key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route key="about" path="/about">
+    <AboutPage />
+  </Route>
+  <Route key="contact" path="/contact">
+    <ContactPage />
+  </Route>
+</Router>`;
+
+	const linkComponentCode = `<!-- ❌ Don't use regular anchor tags -->
+<a href="/profile/123">View Profile</a>
+
+<!-- ✅ Use the Link component instead -->
+<Link href="/profile/123">View Profile</Link>
+
+<!-- 🎯 Link with parameters -->
+<Link href="/settings/account" class="btn btn-primary">
+  Account Settings
+</Link>`;
+
+	const nestedRoutingCode = `<Router id="main-router">
+  <Route key="app" path="/app/*">
+    <AppLayout>
+      <!-- Nested router inside AppLayout -->
+      <Router id="app-sub-router" basePath="/app">
+        <Route key="dashboard" path="/dashboard">
+          <Dashboard />
+        </Route>
+        <Route key="profile" path="/profile/:id">
+          <UserProfile />
+        </Route>
+      </Router>
+    </AppLayout>
+  </Route>
+</Router>`;
+
+	const routeParametersCode = `<!-- Route with single parameter -->
+<Route key="user" path="/user/:id">
+  {#snippet children(params)}
+    <h1>User ID: {params.id}</h1>
+  {/snippet}
+</Route>
+
+<!-- Route with multiple parameters -->
+<Route key="post" path="/blog/:category/:slug">
+  {#snippet children(params)}
+    <BlogPost 
+      category={params.category} 
+      slug={params.slug} 
+    />
+  {/snippet}
+</Route>
+
+<!-- Route with rest parameter (catch-all) -->
+<Route key="files" path="/files/*">
+  {#snippet children(params)}
+    <FileExplorer path={params.rest} />
+  {/snippet}
+</Route>`;
+
+	const urlExamples = `// Basic routes:
+// /                    → Home page
+// /about               → About page
+// /contact             → Contact page
+
+// Parameterized routes:
+// /user/123            → User profile for ID 123
+// /blog/tech/svelte-5  → Blog post in tech category
+// /product/laptop/123  → Product page
+
+// Rest parameters:
+// /files/docs/readme.md     → File explorer
+// /admin/users/permissions  → Admin section`;
+
+	const routeGuardsCode = `<Route 
+  key="admin" 
+  path="/admin/*"
+  and={(params, location) => user.isAdmin}
+>
+  <AdminPanel />
+</Route>
+
+<Route 
+  key="profile" 
+  path="/profile/:userId"
+  and={(params) => params.userId === currentUser.id || user.canViewProfiles}
+>
+  <UserProfile />
+</Route>`;
 </script>
 
 <div class="container">
-    <div class="row">
-        <div class="col">
-            <h1>Path Routing</h1>
-            <p>
-                Path routing is <code>@wjfe/n-savant</code>'s default routing mode. It uses the path of the URL to 
-                determine which routes to render.
-            </p>
-            <p>
-                For this to work, regular links <strong>must</strong> be replaced with <code>&lt;Link&gt;</code> 
-                components from <code>@wjfe/n-savant</code>. This is because the <code>&lt;Link&gt;</code> component 
-                intercepts clicks and navigates to the new route without reloading the page.
-            </p>
-        </div>
-    </div>
+	<h1>🛣️ Path Routing</h1>
+	<p class="lead">
+		The classic way to navigate! Path routing uses the URL path to determine which components to render, 
+		just like traditional web applications but with SPA speed and smoothness.
+	</p>
+
+	<!-- Hero Section -->
+	<div class="row mt-4">
+		<div class="col-lg-6">
+			<div class="card border-primary h-100">
+				<div class="card-header bg-primary text-white">
+					<h4 class="mb-0">🏗️ Basic Path Routing</h4>
+				</div>
+				<div class="card-body">
+					<p>
+						Path routing is the default mode in <code>@wjfe/n-savant</code>. It feels natural 
+						because it works just like regular websites - but faster!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={basicPathRouterCode} 
+						title="Basic Path Router Setup"
+					/>
+					<div class="alert alert-info mt-3">
+						<strong>SEO Friendly:</strong> Search engines love path-based URLs! They're clean, 
+						predictable, and easy to understand.
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-lg-6">
+			<div class="card border-success h-100">
+				<div class="card-header bg-success text-white">
+					<h4 class="mb-0">🔗 Link Components</h4>
+				</div>
+				<div class="card-body">
+					<p>
+						Replace <code>&lt;a&gt;</code> tags with <code>&lt;Link&gt;</code> components for 
+						smooth navigation without page reloads!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={linkComponentCode} 
+						title="Using Link Components"
+					/>
+					<div class="alert alert-warning mt-3">
+						<strong>Important:</strong> Regular anchor tags will cause full page reloads. 
+						Always use <code>&lt;Link&gt;</code> for internal navigation!
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Advanced Features -->
+	<div class="row mt-4">
+		<div class="col-lg-6">
+			<div class="card border-warning h-100">
+				<div class="card-header bg-warning text-dark">
+					<h4 class="mb-0">🎯 Route Parameters</h4>
+				</div>
+				<div class="card-body">
+					<p>
+						Capture dynamic values from URLs using parameters. Perfect for user IDs, 
+						slugs, and dynamic content!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={routeParametersCode} 
+						title="Route Parameters & Rest Routes"
+					/>
+					<div class="alert alert-success mt-3">
+						<strong>Pro tip:</strong> Use rest parameters (<code>/*</code>) for file paths 
+						and hierarchical navigation!
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-lg-6">
+			<div class="card border-info h-100">
+				<div class="card-header bg-info text-white">
+					<h4 class="mb-0">🏢 Nested Routing</h4>
+				</div>
+				<div class="card-body">
+					<p>
+						Build complex layouts with nested routers. Perfect for admin panels, 
+						dashboards, and multi-level navigation!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={nestedRoutingCode} 
+						title="Nested Router Example"
+					/>
+					<div class="alert alert-info mt-3">
+						<strong>Powerful:</strong> Each router can have its own <code>basePath</code> 
+						and operates independently within its scope.
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- URL Examples -->
+	<div class="row mt-4">
+		<div class="col-lg-6">
+			<div class="card border-secondary h-100">
+				<div class="card-header bg-secondary text-white">
+					<h4 class="mb-0">🌐 URL Structure</h4>
+				</div>
+				<div class="card-body">
+					<p>See how different route patterns match real URLs:</p>
+					<CodeSnippet 
+						language={typescript} 
+						code={urlExamples} 
+						title="URL Matching Examples"
+					/>
+					<div class="mt-3">
+						<small class="text-muted">
+							💡 Notice how parameters and rest routes capture dynamic parts of the URL!
+						</small>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-lg-6">
+			<div class="card border-dark h-100">
+				<div class="card-header bg-dark text-white">
+					<h4 class="mb-0">🛡️ Route Guards</h4>
+				</div>
+				<div class="card-body">
+					<p>
+						Control access to routes with the <code>and</code> property. Perfect for 
+						authentication and authorization!
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={routeGuardsCode} 
+						title="Route Guard Examples"
+					/>
+					<div class="alert alert-danger mt-3">
+						<strong>Security:</strong> Route guards help protect sensitive areas but 
+						always validate permissions on the server too!
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Key Benefits -->
+	<div class="row mt-5">
+		<div class="col-lg-8 offset-lg-2">
+			<div class="card border-success">
+				<div class="card-header bg-success text-white text-center">
+					<h3 class="mb-0">🎉 Why Path Routing Rocks</h3>
+				</div>
+				<div class="card-body">
+					<div class="row">
+						<div class="col-md-6">
+							<h5>🚀 Performance Benefits</h5>
+							<ul class="list-unstyled">
+								<li>✅ No page reloads</li>
+								<li>✅ Instant navigation</li>
+								<li>✅ Preserved application state</li>
+								<li>✅ Smooth transitions</li>
+							</ul>
+						</div>
+						<div class="col-md-6">
+							<h5>🎯 User Experience</h5>
+							<ul class="list-unstyled">
+								<li>✅ Bookmarkable URLs</li>
+								<li>✅ Browser back/forward works</li>
+								<li>✅ SEO friendly</li>
+								<li>✅ Shareable links</li>
+							</ul>
+						</div>
+					</div>
+					<div class="text-center mt-4">
+						<p class="lead mb-0">
+							<strong>The best of both worlds:</strong> Traditional web navigation with modern SPA performance! 🎯
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Call to Action -->
+	<div class="row mt-5">
+		<div class="col-lg-10 offset-lg-1">
+			<div class="alert alert-primary text-center">
+				<h4>🎮 Ready to Try Path Routing?</h4>
+				<p class="mb-3">
+					Click the "Demo" link in the navigation above to see path routing in action! 
+					Watch how the URL changes as you navigate between different sections.
+				</p>
+				<p class="mb-0">
+					<strong>Pro tip:</strong> Open your browser's developer tools and watch the Network tab - 
+					notice how no full page requests are made when navigating! 🎉
+				</p>
+			</div>
+		</div>
+	</div>
 </div>
\ No newline at end of file