Add display options to PIS

Add styling to UI Components

.gitea/workflows/build-push.yaml

@@ -0,0 +1,39 @@
+name: Build and Push container image
+run-name: ${{ gitea.actor }} is building and pushing
+
+on:
+  create:
+    tags: '*'
+
+env:
+  GITEA_DOMAIN: git.fjla.uk
+  GITEA_REGISTRY_USER: owlbot
+  RESULT_IMAGE_NAME: owlboard/web-pwa
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+      options: --privileged
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.GITEA_DOMAIN }}
+          username: ${{ env.GITEA_REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+      - name: Build and Push image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: |
+            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:${{ gitea.ref_name }}
+            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+@owlboard:registry=https://git.fjla.uk/api/packages/OwlBoard/npm/

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM alpine:3.20
+WORKDIR /web-content
+
+LABEL org.opencontainers.image.description="SvelteKit Static build - Designed to be an InitContainer to copy files from to the output web server container's filesystem"
+
+COPY --from=builder /app/build ./
+CMD ["sh", "-c", "cp -R /web-content/* /target-dir/"]

package-lock.json

@@ -7,9 +7,13 @@
 		"": {
 			"name": "web-pwa",
 			"version": "0.0.1",
+			"dependencies": {
+				"@tabler/icons-svelte": "^3.40.0"
+			},
 			"devDependencies": {
 				"@eslint/compat": "^2.0.2",
 				"@eslint/js": "^9.39.2",
+				"@owlboard/owlboard-ts": "^3.0.0-dev.20260319T2004",
 				"@playwright/test": "^1.58.1",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
@@ -734,7 +738,6 @@
 			"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/sourcemap-codec": "^1.5.0",
@@ -745,7 +748,6 @@
 			"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",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -756,7 +758,6 @@
 			"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": {
 				"node": ">=6.0.0"
@@ -766,20 +767,35 @@
 			"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.31",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
 			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@owlboard/api-schema-types": {
+			"version": "3.0.1-alpha3",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.1-alpha3/api-schema-types-3.0.1-alpha3.tgz",
+			"integrity": "sha512-5CVm1k/C++/VrtAw4NkvclDunH+RmYLnDZZMSWTM1mm+WlEVnmD+MVnTgC/FhcsAmsNHV8swm66RCqkCuhbOnA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@owlboard/owlboard-ts": {
+			"version": "3.0.0-dev.20260319T2004",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0-dev.20260319T2004/owlboard-ts-3.0.0-dev.20260319t2004.tgz",
+			"integrity": "sha512-pphq1/l/8eOH4C0O7ocwBOUzt0HkCWGUlhy1itzKnQbmog7oPUEdyaxzS4Evw8onLsxZwkyqsLAyK7okYi+4XA==",
+			"dev": true,
+			"license": "GPL-3.0",
+			"dependencies": {
+				"@owlboard/api-schema-types": "^3.0.1-alpha3"
+			}
+		},
 		"node_modules/@playwright/test": {
 			"version": "1.58.2",
 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
@@ -804,9 +820,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
-			"integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+			"integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
 			"cpu": [
 				"arm"
 			],
@@ -818,9 +834,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
-			"integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+			"integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
 			"cpu": [
 				"arm64"
 			],
@@ -832,9 +848,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
-			"integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+			"integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
 			"cpu": [
 				"arm64"
 			],
@@ -846,9 +862,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
-			"integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+			"integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
 			"cpu": [
 				"x64"
 			],
@@ -860,9 +876,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-freebsd-arm64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
-			"integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+			"integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
 			"cpu": [
 				"arm64"
 			],
@@ -874,9 +890,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-freebsd-x64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
-			"integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+			"integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
 			"cpu": [
 				"x64"
 			],
@@ -888,9 +904,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
-			"integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+			"integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
 			"cpu": [
 				"arm"
 			],
@@ -902,9 +918,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
-			"integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+			"integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
 			"cpu": [
 				"arm"
 			],
@@ -916,9 +932,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
-			"integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+			"integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
 			"cpu": [
 				"arm64"
 			],
@@ -930,9 +946,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
-			"integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+			"integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
 			"cpu": [
 				"arm64"
 			],
@@ -944,9 +960,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-loong64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
-			"integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+			"integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
 			"cpu": [
 				"loong64"
 			],
@@ -958,9 +974,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-loong64-musl": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
-			"integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+			"integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
 			"cpu": [
 				"loong64"
 			],
@@ -972,9 +988,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
-			"integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+			"integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
 			"cpu": [
 				"ppc64"
 			],
@@ -986,9 +1002,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-ppc64-musl": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
-			"integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+			"integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
 			"cpu": [
 				"ppc64"
 			],
@@ -1000,9 +1016,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
-			"integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+			"integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
 			"cpu": [
 				"riscv64"
 			],
@@ -1014,9 +1030,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-riscv64-musl": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
-			"integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+			"integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
 			"cpu": [
 				"riscv64"
 			],
@@ -1028,9 +1044,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-s390x-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
-			"integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+			"integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
 			"cpu": [
 				"s390x"
 			],
@@ -1042,9 +1058,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
-			"integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+			"integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
 			"cpu": [
 				"x64"
 			],
@@ -1056,9 +1072,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
-			"integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+			"integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
 			"cpu": [
 				"x64"
 			],
@@ -1070,9 +1086,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-openbsd-x64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
-			"integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+			"integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
 			"cpu": [
 				"x64"
 			],
@@ -1084,9 +1100,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-openharmony-arm64": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
-			"integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+			"integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
 			"cpu": [
 				"arm64"
 			],
@@ -1098,9 +1114,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
-			"integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+			"integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
 			"cpu": [
 				"arm64"
 			],
@@ -1112,9 +1128,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
-			"integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+			"integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
 			"cpu": [
 				"ia32"
 			],
@@ -1126,9 +1142,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-x64-gnu": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
-			"integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+			"integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
 			"cpu": [
 				"x64"
 			],
@@ -1140,9 +1156,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
-			"integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+			"integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
 			"cpu": [
 				"x64"
 			],
@@ -1164,7 +1180,6 @@
 			"version": "1.0.9",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
 			"integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -1181,9 +1196,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.50.2",
+			"version": "2.55.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.50.2.tgz",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.55.0.tgz",
-			"integrity": "sha512-875hTUkEbz+MyJIxWbQjfMaekqdmEKUUfR7JyKcpfMRZqcGyrO9Gd+iS1D/Dx8LpE5FEtutWGOtlAh4ReSAiOA==",
+			"integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1192,12 +1207,11 @@
 				"@types/cookie": "^0.6.0",
 				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
-				"devalue": "^5.6.2",
+				"devalue": "^5.6.4",
 				"esm-env": "^1.2.2",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
-				"sade": "^1.8.1",
 				"set-cookie-parser": "^3.0.0",
 				"sirv": "^3.0.0"
 			},
@@ -1209,10 +1223,10 @@
 			},
 			"peerDependencies": {
 				"@opentelemetry/api": "^1.0.0",
-				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0 || ^7.0.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
 				"typescript": "^5.3.3",
-				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 || ^8.0.0"
 			},
 			"peerDependenciesMeta": {
 				"@opentelemetry/api": {
@@ -1262,6 +1276,32 @@
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@tabler/icons": {
+			"version": "3.40.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.40.0.tgz",
+			"integrity": "sha512-V/Q4VgNPKubRTiLdmWjV/zscYcj5IIk+euicUtaVVqF6luSC9rDngYWgST5/yh3Mrg/mYUwRv1YVTk71Jp0twQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			}
+		},
+		"node_modules/@tabler/icons-svelte": {
+			"version": "3.40.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.40.0.tgz",
+			"integrity": "sha512-7j8y7kPWGEmcTjcAry8JJK9RNnv8lLVN3c4GHRfRj/iu0+ovkaRM1lLplITYVPq/fbzhrK52P8i8JkEQBPj0hw==",
+			"license": "MIT",
+			"dependencies": {
+				"@tabler/icons": "3.40.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <6 || >=5.0.0-next.0"
+			}
+		},
 		"node_modules/@testing-library/svelte-core": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@testing-library/svelte-core/-/svelte-core-1.0.0.tgz",
@@ -1304,7 +1344,6 @@
 			"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/@types/json-schema": {
@@ -1324,6 +1363,12 @@
 				"undici-types": "~6.21.0"
 			}
 		},
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+			"license": "MIT"
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.55.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
@@ -1523,13 +1568,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-			"version": "9.0.5",
+			"version": "9.0.9",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
 			"dev": true,
 			"license": "ISC",
 			"dependencies": {
-				"brace-expansion": "^2.0.1"
+				"brace-expansion": "^2.0.2"
 			},
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -1742,7 +1787,6 @@
 			"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": {
 				"acorn": "bin/acorn"
@@ -1762,9 +1806,9 @@
 			}
 		},
 		"node_modules/ajv": {
-			"version": "6.12.6",
+			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1802,10 +1846,9 @@
 			"license": "Python-2.0"
 		},
 		"node_modules/aria-query": {
-			"version": "5.3.2",
+			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
-			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1825,7 +1868,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1906,7 +1948,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -2013,10 +2054,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.6.2",
+			"version": "5.6.4",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.4.tgz",
-			"integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==",
+			"integrity": "sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/es-module-lexer": {
@@ -2251,7 +2291,6 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/espree": {
@@ -2289,7 +2328,6 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.3.tgz",
 			"integrity": "sha512-8fOS+GIGCQZl/ZIlhl59htOlms6U8NvX6ZYgYHpRU/b6tVSh3uHkOHZikl3D4cMbYM0JlpBe+p/BkZEi8J9XIQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2432,9 +2470,9 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.3.3",
+			"version": "3.4.2",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-			"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
 			"dev": true,
 			"license": "ISC"
 		},
@@ -2553,7 +2591,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -2655,7 +2692,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/locate-path": {
@@ -2685,16 +2721,15 @@
 			"version": "0.30.21",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
 			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.5"
 			}
 		},
 		"node_modules/minimatch": {
-			"version": "3.1.2",
+			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
 			"dev": true,
 			"license": "ISC",
 			"dependencies": {
@@ -3142,9 +3177,9 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "4.57.1",
+			"version": "4.59.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
-			"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+			"integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3158,31 +3193,31 @@
 				"npm": ">=8.0.0"
 			},
 			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.57.1",
+				"@rollup/rollup-android-arm-eabi": "4.59.0",
-				"@rollup/rollup-android-arm64": "4.57.1",
+				"@rollup/rollup-android-arm64": "4.59.0",
-				"@rollup/rollup-darwin-arm64": "4.57.1",
+				"@rollup/rollup-darwin-arm64": "4.59.0",
-				"@rollup/rollup-darwin-x64": "4.57.1",
+				"@rollup/rollup-darwin-x64": "4.59.0",
-				"@rollup/rollup-freebsd-arm64": "4.57.1",
+				"@rollup/rollup-freebsd-arm64": "4.59.0",
-				"@rollup/rollup-freebsd-x64": "4.57.1",
+				"@rollup/rollup-freebsd-x64": "4.59.0",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
-				"@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+				"@rollup/rollup-linux-arm-musleabihf": "4.59.0",
-				"@rollup/rollup-linux-arm64-gnu": "4.57.1",
+				"@rollup/rollup-linux-arm64-gnu": "4.59.0",
-				"@rollup/rollup-linux-arm64-musl": "4.57.1",
+				"@rollup/rollup-linux-arm64-musl": "4.59.0",
-				"@rollup/rollup-linux-loong64-gnu": "4.57.1",
+				"@rollup/rollup-linux-loong64-gnu": "4.59.0",
-				"@rollup/rollup-linux-loong64-musl": "4.57.1",
+				"@rollup/rollup-linux-loong64-musl": "4.59.0",
-				"@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+				"@rollup/rollup-linux-ppc64-gnu": "4.59.0",
-				"@rollup/rollup-linux-ppc64-musl": "4.57.1",
+				"@rollup/rollup-linux-ppc64-musl": "4.59.0",
-				"@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+				"@rollup/rollup-linux-riscv64-gnu": "4.59.0",
-				"@rollup/rollup-linux-riscv64-musl": "4.57.1",
+				"@rollup/rollup-linux-riscv64-musl": "4.59.0",
-				"@rollup/rollup-linux-s390x-gnu": "4.57.1",
+				"@rollup/rollup-linux-s390x-gnu": "4.59.0",
-				"@rollup/rollup-linux-x64-gnu": "4.57.1",
+				"@rollup/rollup-linux-x64-gnu": "4.59.0",
-				"@rollup/rollup-linux-x64-musl": "4.57.1",
+				"@rollup/rollup-linux-x64-musl": "4.59.0",
-				"@rollup/rollup-openbsd-x64": "4.57.1",
+				"@rollup/rollup-openbsd-x64": "4.59.0",
-				"@rollup/rollup-openharmony-arm64": "4.57.1",
+				"@rollup/rollup-openharmony-arm64": "4.59.0",
-				"@rollup/rollup-win32-arm64-msvc": "4.57.1",
+				"@rollup/rollup-win32-arm64-msvc": "4.59.0",
-				"@rollup/rollup-win32-ia32-msvc": "4.57.1",
+				"@rollup/rollup-win32-ia32-msvc": "4.59.0",
-				"@rollup/rollup-win32-x64-gnu": "4.57.1",
+				"@rollup/rollup-win32-x64-gnu": "4.59.0",
-				"@rollup/rollup-win32-x64-msvc": "4.57.1",
+				"@rollup/rollup-win32-x64-msvc": "4.59.0",
 				"fsevents": "~2.3.2"
 			}
 		},
@@ -3315,21 +3350,21 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.50.2",
+			"version": "5.53.7",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.50.2.tgz",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.53.7.tgz",
-			"integrity": "sha512-WCxzm3BBf+Ase6RwiDPR4G36cM4Kb0NuhmLK6x44I+D6reaxizDDg8kBkk4jT/19+Rgmc44eZkOvMO6daoSFIw==",
+			"integrity": "sha512-uxck1KI7JWtlfP3H6HOWi/94soAl23jsGJkBzN2BAWcQng0+lTrRNhxActFqORgnO9BHVd1hKJhG+ljRuIUWfQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
 				"@types/estree": "^1.0.5",
+				"@types/trusted-types": "^2.0.7",
 				"acorn": "^8.12.1",
-				"aria-query": "^5.3.1",
+				"aria-query": "5.3.1",
 				"axobject-query": "^4.1.0",
 				"clsx": "^2.1.1",
-				"devalue": "^5.6.2",
+				"devalue": "^5.6.3",
 				"esm-env": "^1.2.1",
 				"esrap": "^2.2.2",
 				"is-reference": "^3.0.3",
@@ -3842,7 +3877,6 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
 			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}

package.json

@@ -19,6 +19,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
+		"@owlboard/owlboard-ts": "^3.0.0-dev.20260319T2004",
 		"@playwright/test": "^1.58.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
@@ -39,5 +40,8 @@
 		"vite": "^7.3.1",
 		"vitest": "^4.0.18",
 		"vitest-browser-svelte": "^2.0.2"
+	},
+	"dependencies": {
+		"@tabler/icons-svelte": "^3.40.0"
 	}
 }

src/app.html

@@ -3,6 +3,17 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="manifest" href="/manifest.webmanifest" />
+		<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
+		<meta
+			name="description"
+			content="Live station departures, Live train tracking, PIS Codes & more"
+		/>
+		<meta name="theme-color" content="#4fd1d1" />
+		<link rel="canonical" href="https://owlboard.info" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="https://owlboard.info" />
+		<title>OwlBoard</title>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/lib/assets/img/stop-error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 2496 3495"><path stroke="#000" stroke-miterlimit="10" d="M-29-28h2552v4439H-29z"/><path fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width=".9" d="M0 0h2495v3494H0z"/><path d="m814 2164-137 2q-2-28-11-46-28-54-120-54-52 0-83 21a65 65 0 0 0-32 56q0 27 18 40 21 17 97 26 158 19 213 65 61 51 61 137 0 97-71 154-71 56-193 56-124 0-199-62-77-62-80-167h140q3 52 41 82 37 29 102 29 56 0 90-23 33-22 33-61 0-17-9-31-20-31-93-40-122-16-167-33a175 175 0 0 1-117-164q0-92 68-146 69-54 181-54 122 0 192 57 72 57 76 156m104-216h126v154h108v101h-108v251q0 34 11 42 11 9 88 9h8v107l-36 1h-89q-61-4-88-37-12-17-16-41t-4-115v-217h-72v-101h72zm508 140q111 0 180 72t69 190q0 122-66 194-67 72-180 72-112 0-180-71-67-70-67-190 0-121 67-194 68-73 177-73m2 106q-57 0-91 44t-34 119q0 70 34 112 35 42 91 42 57 0 90-42 32-42 32-115t-33-117q-33-43-89-43m311-92h122v33q49-47 129-47 102 0 166 74 65 73 65 190 0 119-63 191-63 73-167 73-78 0-124-46v184h-128zm233 92q-66 0-91 51-16 31-16 121 0 61 16 94 25 50 95 50 56 0 88-41 32-42 32-115 0-74-34-117-33-43-90-43"/><circle cx="1247.7" cy="1049.7" r="708.7" fill="#e31837"/><path fill="#1a1a1a" d="M-17 2908h2530v42H-17z"/><path fill="#1a1a1a" d="M978 3051v46H857v77h94v44h-94v79h121v46H799v-292zm39 292v-219h33q9 0 12 3 4 4 5 11l3 22q10-18 23-29t30-11q15 0 24 7l-4 42-3 6-6 1-9-1-12-1-14 2-10 7q-5 4-9 10l-7 14v136zm161 0v-219h33q8 0 12 3 3 4 4 11l3 22q10-18 23-29t31-11q14 0 23 7l-4 42q0 4-3 6l-5 1-10-1-11-1q-8 0-14 2l-11 7q-5 4-8 10l-7 14v136zm252-222q24 0 44 8 20 7 34 22t21 36 8 46-8 47-21 36-34 22-44 8-44-8q-20-7-34-22-15-15-22-36-8-21-8-47t8-46 22-36 34-22 44-8m0 183q25 0 37-18t12-52-12-53-37-17-38 17-12 53 12 52 38 18m145 39v-219h33q8 0 12 3 3 4 4 11l3 22q10-18 23-29 14-11 31-11 14 0 24 7l-5 42q0 4-2 6l-6 1-10-1-11-1q-8 0-14 2l-11 7-8 10-7 14v136z" aria-label="Error" font-family="Carlito" font-size="451" font-weight="700" style="line-height:.9;-inkscape-font-specification:&quot;Carlito Bold&quot;;text-align:center;white-space:pre" text-anchor="middle"/></svg>

src/lib/components/ui/Button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+	type ButtonColor = 'brand' | 'accent' | 'bg';
+
+	interface Props {
+		children: import('svelte').Snippet;
+		href?: string;
+		color?: ButtonColor;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: any;
+	}
+
+	let { children, href, color = 'bg', onclick, ...rest }: Props = $props();
+
+	const isLink = $derived(!!href);
+	const isExternal = $derived(href?.startsWith('http'));
+</script>
+
+{#if isLink}
+	<a
+		{href}
+		class="btn {color}"
+		target={isExternal ? '_blank' : undefined}
+		rel={isExternal ? 'noopener noreferrer' : undefined}
+		{...rest}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button class="btn {color}" {onclick} {...rest}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.4rem 1.2rem;
+		width: fit-content;
+		min-width: 90px;
+		min-height: 48px;
+		border: none;
+		border-radius: 20px;
+		cursor: pointer;
+		text-decoration: none;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.05ch;
+		font-size: 1rem;
+		font-weight: 600;
+		transition: all 0.2s;
+		box-shadow: var(--shadow-std);
+		user-select: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+	}
+
+	.accent {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.brand {
+		background-color: var(--color-brand);
+		color: rgb(30, 30, 30);
+	}
+
+	.bg {
+		background-color: var(--color-bg-light);
+		color: var(--color-title);
+	}
+
+	.btn:hover {
+		filter: brightness(1.5);
+	}
+
+	.btn.active {
+		transform: scale(0.98);
+	}
+</style>

src/lib/components/ui/LocationSearchBox.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
+
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
+
+	let { value = $bindable() } = $props();
+
+	let showResults = $state(false);
+	let selectedIndex = $state(-1);
+
+	const MAX_RESULTS = 5;
+
+	function tokenize(query: string) {
+		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+	}
+
+	let results = $derived.by(() => {
+		if (value.length < 3) return [];
+
+		const tokens = tokenize(value);
+		const lowerQuery = value.toLowerCase().trim();
+
+		return LOCATIONS.data
+			.filter((r) => tokens.every((t) => r.s.includes(t)))
+			.sort((a, b) => {
+				// Check if query matches CRS
+				const aIsCrs = a.c?.toLowerCase() === lowerQuery;
+				const bIsCrs = b.c?.toLowerCase() === lowerQuery;
+
+				// Sort matching CRS first
+				if (aIsCrs && !bIsCrs) return -1;
+				if (!aIsCrs && bIsCrs) return 1;
+
+				// Alphabetical Sort
+				return a.n.localeCompare(b.n);
+			})
+			.slice(0, MAX_RESULTS);
+	});
+
+	$effect(() => {
+		if (results) selectedIndex = -1;
+	});
+
+	// Hide results when click outside of container
+	$effect(() => {
+		if (showResults) {
+			const onClick = (e: MouseEvent) => {
+				const target = e.target as HTMLElement;
+				if (!target.closest('.location-search')) {
+					showResults = false;
+				}
+			};
+
+			document.addEventListener('click', onClick);
+			return () => document.removeEventListener('click', onClick);
+		}
+	});
+
+	function choose(loc: LocationRecord) {
+		showResults = false;
+		selectedIndex = -1;
+		value = '';
+		console.log('Selected Location: ', JSON.stringify(loc));
+		const queryString = loc.c || loc.t;
+		goto(`/board?loc=${queryString.toLowerCase()}`);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (!results.length) return;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+		}
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			selectedIndex = Math.max(selectedIndex - 1, 0);
+		}
+
+		if (e.key === 'Enter' && selectedIndex >= 0) {
+			choose(results[selectedIndex]);
+		}
+	}
+</script>
+
+<div class="location-search">
+	<Textbox
+		bind:value
+		placeholder="Enter Location"
+		oninput={() => (showResults = true)}
+		onkeydown={handleKey}
+		capital
+	/>
+
+	{#if showResults && results.length}
+		<ul
+			id="location-results"
+			popover={showResults && results.length ? 'manual' : null}
+			role="listbox"
+			class="suggestions"
+			transition:fade={{ duration: 200 }}
+		>
+			{#each results as loc, i}
+				<li class="result-item" class:selected={i === selectedIndex} onclick={() => choose(loc)}>
+					<div class="crs-badge-container">
+						{#if loc.c}
+							<span class="crs-badge">{loc.c}</span>
+						{/if}
+					</div>
+					<div class="details">
+						<span class="name">{loc.n || loc.t}</span>
+						<span class="tiploc">{loc.t}</span>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.location-search {
+		position: relative;
+		width: 100%;
+	}
+
+	.suggestions[popover] {
+		position: absolute;
+		inset: unset;
+		margin: 0;
+		margin-top: 3px;
+		border: none;
+		border-radius: 5px;
+		padding: 0;
+		width: 100%;
+		max-height: 350px;
+		top: 100%;
+		background-color: var(--color-title);
+		color: var(--color-bg-dark);
+		box-shadow: var(--shadow-std);
+		display: block;
+		z-index: 9999;
+	}
+
+	.suggestions:not([popover]) {
+		display: none;
+	}
+
+	.result-item {
+		font-family: 'URW Gothic', sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+		min-height: 48px;
+		transition: all 0.15s;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.result-item.selected,
+	.result-item:hover {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.crs-badge {
+		font-family: ui-monospace, monospace;
+		font-size: 1.1rem;
+		font-weight: 700;
+		background: var(--color-accent);
+		color: var(--color-title);
+		padding: 3px 6px;
+		border-radius: 10px;
+		transition: all 0.1s;
+	}
+
+	.crs-badge.empty {
+		filter: opacity(0);
+	}
+
+	.result-item:hover .crs-badge {
+		filter: brightness(1.3);
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.name {
+		font-size: 1.1rem;
+		font-weight: 700;
+		text-align: right;
+	}
+
+	.tiploc {
+		text-align: right;
+		font-size: 0.8rem;
+	}
+</style>

src/lib/components/ui/Textbox.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLInputAttributes {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+		error?: string;
+		uppercase?: boolean;
+		[key: string]: any;
+	}
+
+	let {
+		value = $bindable(''),
+		label,
+		placeholder = '',
+		type = 'text',
+		error = '',
+		uppercase = false,
+		...rest
+	}: Props = $props();
+
+	let isFocussed = $state(false);
+</script>
+
+<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
+	{#if label}
+		<label for="adaptive-input">{label}</label>
+	{/if}
+
+	<input
+		id="adaptive-input"
+		class:all-caps={uppercase}
+		{type}
+		{placeholder}
+		bind:value
+		onfocus={() => (isFocussed = true)}
+		onblur={() => (isFocussed = false)}
+		{...rest}
+	/>
+
+	{#if error}
+		<span class="error-message" transition:fade>{error}</span>
+	{/if}
+</div>
+
+<style>
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
+	label {
+		font-size: 0.9rem;
+		font-weight: 400;
+		color: var(--color-title);
+	}
+
+	input {
+		min-height: 40px;
+		padding: 0 16px;
+		background-color: var(--color-title);
+		border: 2px solid transparent;
+		border-radius: 20px;
+		color: var(--color-bg-dark);
+		font-size: 1.2rem;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+		text-align: center;
+		box-shadow: var(--shadow-std);
+	}
+
+	.all-caps {
+		text-transform: uppercase;
+	}
+
+	.focussed input {
+		border-color: var(--color-bg-light);
+	}
+
+	.has-error input {
+		border-color: #ff4d4d;
+	}
+
+	.error-message {
+		color: #ff4d4d;
+		font-size: 1rem;
+		text-align: center;
+	}
+</style>

src/lib/components/ui/TocStyle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    interface Props {
+        toc: string;
+    }
+
+    let {
+        toc
+    }: Props = $props();
+
+    let code = $derived(toc.toUpperCase());
+</script>
+
+<div class="toc-container {code}">
+    {code}
+</div>
+
+<style>
+    .toc-container {
+        border-radius: 10px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 8px;
+        font-weight: 800;
+        background-color: #333;
+        color: #fff;
+    }
+
+    .GW { /* Great Western Railway */
+        background: #004225;
+        color: #E2E2E2;
+    }
+
+    .GR { /* LNER */
+        background-color: #C00000;
+        color: #FFFFFF;
+    }
+
+    .VT { /* Avanti West Coast */
+        background-color: #004354;
+        color: #FFFFFF;
+    }
+
+    .SW { /* South Western Railway */
+        background-color: #2A3389;
+        color: #FFFFFF;
+    }
+
+    .XC { /* CrossCountry */
+        background-color: #660000;
+        color: #E4D5B1;
+    }
+</style>

src/lib/components/ui/cards/BaseCard.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { slide } from 'svelte/transition';
+
+	interface Props {
+		children: Snippet;
+		header?: string;
+		helpText?: string;
+	}
+
+	let { children, header = '', helpText }: Props = $props();
+
+	let showHelp = $state(false);
+</script>
+
+<div class="card">
+	{#if header || helpText}
+		<header class="card-header">
+			<div class="header-content">
+				{header}
+			</div>
+			{#if helpText}
+				<button
+					type="button"
+					class="help-toggle"
+					onclick={() => (showHelp = !showHelp)}
+					aria-label="Show Help"
+				>
+					<IconHelpCircle
+						size={26}
+						stroke={2.25}
+						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
+					/>
+				</button>
+			{/if}
+		</header>
+
+		{#if showHelp && helpText}
+			<div class="help-drawer" transition:slide={{ duration: 400 }}>
+				<p>{helpText}</p>
+			</div>
+		{/if}
+	{/if}
+
+	<div class="card-body">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.card {
+		background: var(--color-accent);
+		position: relative;
+		border-radius: 20px;
+		overflow: visible;
+		width: 95%;
+		max-width: 600px;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+		color: var(--color-brand);
+		padding: 10px 0;
+		box-shadow: var(--shadow-std);
+	}
+
+	.header-content {
+		flex: 1;
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 600;
+	}
+
+	.help-toggle {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: help;
+		opacity: 0.6;
+		z-index: 2;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
+
+	.help-toggle:hover {
+		opacity: 1;
+		transform: scale(1.1);
+	}
+
+	.help-drawer {
+		background-color: var(--color-accent);
+		padding: 4px 16px;
+		font-size: 0.95rem;
+		line-height: 1.2;
+		margin: auto;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+		color: var(--color-title);
+	}
+</style>

src/lib/components/ui/cards/LocationBoardCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+
+	let locationValue = $state('');
+
+	function resetSearchBox() {
+		value = '';
+	}
+</script>
+
+<BaseCard header={'Live Arrivals & Departures'}>
+	<div class="card-content">
+		<LocationSearchBox bind:value={locationValue} />
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+</style>

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let { onsearch }: { onsearch: (c: string) => void } = $props();
+
+let codeValue = $state('');
+
+function resetValues(): void {
+    codeValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Code'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Code"} uppercase={true} type={'number'} max={9999} bind:value={codeValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
+
+
+let startValue = $state('');
+let endValue = $state('');
+
+function resetValues(): void {
+    startValue = '';
+    endValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Start/End CRS'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Start"} uppercase={true} maxLength={3} bind:value={startValue} />
+            </div>
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"End"} uppercase={true} maxLength={3} bind:value={endValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>

src/lib/global.css

@@ -0,0 +1,82 @@
+/* OwlBoard Global CSS */
+
+/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
+ * Copyright (c) 2014,2015 by (URW)++ Design & Development
+ */
+@font-face {
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-book-webfont.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
+ * Copyright (c) 2014,2015 by (URW)++ Design & Development
+ */
+@font-face {
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-bookoblique-webfont.woff2') format('woff2');
+	font-weight: 400;
+	font-style: italic;
+	font-display: swap;
+}
+
+/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
+ * Copyright (c) 2014,2015 by (URW)++ Design & Development
+ */
+@font-face {
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-demi-webfont.woff2') format('woff2');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
+ * Copyright (c) 2014,2015 by (URW)++ Design & Development
+ */
+@font-face {
+	font-family: 'URW Gothic';
+	src: url('/type/urwgothic/urwgothic-demioblique-webfont.woff2') format('woff2');
+	font-weight: 600;
+	font-style: italic;
+	font-display: swap;
+}
+
+:root {
+	/* Brand Colours */
+	--color-brand: #4fd1d1;
+	--color-accent: #3c6f79;
+	--color-title: #ebebeb;
+	--color-bg-light: #404c55;
+	--color-bg-dark: #2b343c;
+
+	/* Shadows */
+	--color-shadow: hsla(210, 20%, 5%, 0.35);
+	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-up: 0 -4px 12px var(--color-shadow);
+	--shadow-right: 4px 0 12px var(--color-shadow);
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--color-accent);
+	color: white;
+	-webkit-font-smoothing: antialiased;
+	-mos-osx-font-smoothing: grayscale;
+	overflow-x: hidden;
+}
+
+a {
+	color: var(--color-brand);
+}
+
+a:visited {
+	color: var(--color-brand);
+}
+
+a:hover {
+	color: var(--color-accent);
+}

src/lib/locations-object.svelte.ts

@@ -0,0 +1,37 @@
+interface LocationRecord {
+	n: string; // name
+	t: string; // tiploc
+	c?: string; // crs
+	s: string; // search string
+}
+
+class LocationStore {
+	data = $state<LocationRecord[]>([]);
+	loaded = $state(false);
+
+	async init(fetcher = fetch) {
+		if (this.loaded) return;
+
+		try {
+			const res = await fetcher('/api/tiplocs');
+			this.data = await res.json();
+			this.loaded = true;
+		} catch (err) {
+			console.error('Failed to load locations', err);
+		}
+	}
+
+	find(id: string | null): LocationRecord | undefined {
+		if (!id) return undefined;
+
+		const query = id.toUpperCase().trim();
+
+		console.log(query);
+
+		return this.data.find((loc) => {
+			return loc.t === query || loc.c === query;
+		});
+	}
+}
+
+export const LOCATIONS = new LocationStore();

src/lib/owlClient.ts

@@ -0,0 +1,21 @@
+import { OwlBoardClient, ValidationError, ApiError } from "@owlboard/owlboard-ts";
+import { browser, dev } from "$app/environment";
+
+// Import the runes containing the API Key config Here...
+
+const baseUrl: string = browser ? window.location.origin : '';
+
+const getBaseUrl = () => {
+    if (!browser) return '';
+
+    if (dev) return 'https://test.owlboard.info';
+
+    return window.location.origin;
+}
+
+export const OwlClient = new OwlBoardClient(
+    getBaseUrl(),
+    // API Key Here when ready!!!
+)
+
+export { ValidationError, ApiError };

src/routes/+error.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	import stopErr from '$lib/assets/img/stop-error.svg';
+	import Button from '$lib/components/ui/Button.svelte';
+</script>
+
+<div class="error-wrapper">
+	<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+
+	<h2 class="label">{page.status}</h2>
+
+	<p class="error-message">
+		{page.error?.message ?? 'An unexpected derailment occurred.'}
+	</p>
+
+	{#if page.error?.owlCode}
+		<div class="debug-info">
+			<code>Ref: {page.error.owlCode}</code>
+		</div>
+	{/if}
+
+	<Button href={'/'} color={'accent'}>Return to Home</Button>
+</div>
+
+<style>
+	.error-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: calc(100vh - 140px);
+		padding: 0;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
+	.err-img {
+		height: 40%;
+		width: auto;
+		max-width: 180px;
+		max-height: 252px;
+	}
+
+	@media (max-height: 600px), (max-width: 270px) {
+		.err-img {
+			display: none;
+		}
+	}
+
+	.label {
+		color: #ff4444;
+		letter-spacing: 0.2rem;
+		margin-bottom: 0px;
+	}
+
+	.error-message {
+		font-size: 1.1rem;
+		color: var(--color-title);
+		max-width: 300px;
+		margin-top: 5px;
+		margin-bottom: 20px;
+	}
+
+	.debug-info {
+		background: rgba(255, 255, 255, 0.05);
+		padding: 5px 15px;
+		margin-top: 0;
+		margin-bottom: 20px;
+		border-radius: 4px;
+		font-size: 0.8rem;
+		opacity: 0.6;
+	}
+</style>

src/routes/+layout.svelte

@@ -1,11 +1,335 @@
 <script lang="ts">
+	import { page } from '$app/state';
+	import { slide, fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
+
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
+
+	import '$lib/global.css';
+
+	import logoText from '$lib/assets/round-logo-text.svg';
+	import logoPlain from '$lib/assets/round-logo.svg';
 	import favicon from '$lib/assets/round-logo.svg';
 
+	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
+
+	onMount(() => LOCATIONS.init(fetch));
+
 	let { children } = $props();
+
+	// Navigation State
+
+	const moreIcon = IconDots;
+
+	const navItems = [
+		{ label: 'Home', path: '/', icon: IconHome },
+		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
+		{ label: 'Options', path: '/preferences/', icon: IconSettings },
+		{ label: 'About', path: '/about/', icon: IconHelp }
+	];
+
+	let navWidth = $state(0);
+	let menuOpen = $state(false);
+	const ITEM_WIDTH = 70;
+	const MORE_BUTTON_WIDTH = 70;
+
+	const activePath = $derived(page.url?.pathname ?? '');
+
+	const visibleCount = $derived.by(() => {
+		if (navWidth === 0) return navItems.length;
+		const available = navWidth;
+		const totalItems = navItems.length;
+		const countWithoutMore = Math.floor(available / ITEM_WIDTH);
+
+		if (countWithoutMore >= totalItems) return totalItems;
+
+		const availableWithMore = navWidth - MORE_BUTTON_WIDTH;
+		const countWithMore = Math.floor(availableWithMore / ITEM_WIDTH);
+
+		if (totalItems - countWithMore === 1) {
+			if (available >= (countWithMore + 1) * ITEM_WIDTH) {
+				return totalItems;
+			}
+		}
+
+		return countWithMore;
+	});
+
+	const visibleItems = $derived(navItems.slice(0, visibleCount));
+	const hiddenItems = $derived(navItems.slice(visibleCount));
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children()}
+<header>
+	<a href="/" aria-label="OwlBoard Home" class="logo-link">
+		{#if page.data.title}
+			<img src={logoPlain} alt="OwlBoard Icon" height="55" />
+		{:else}
+			<img src={logoText} alt="OwlBoard Logo" height="55" />
+		{/if}
+	</a>
+	{#if page.data.title}
+		<h1 class="page-title">{page.data.title}</h1>
+	{/if}
+</header>
+
+<main>
+	{@render children()}
+</main>
+
+<nav bind:clientWidth={navWidth}>
+	<!-- Dynamic Nav Elements Here! -->
+	{#each visibleItems as item}
+		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+		<a
+			href={item.path}
+			class="nav-item"
+			class:active={isActive}
+			aria-current={isActive ? 'page' : undefined}
+			onclick={() => (menuOpen = false)}
+		>
+			<item.icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />
+
+			<span class="label">{item.label}</span>
+		</a>
+	{/each}
+	{#if hiddenItems.length > 0}
+		<div class="more-menu-wrapper">
+			<button
+				class="nav-item more-btn"
+				onclick={() => (menuOpen = !menuOpen)}
+				aria-expanded={menuOpen}
+			>
+				<IconDots size={24} />
+				<span class="label">More</span>
+			</button>
+		</div>
+		{#if menuOpen}
+			<div
+				class="backdrop"
+				onclick={() => (menuOpen = false)}
+				transition:fade={{ duration: 150 }}
+			></div>
+			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
+				{#each hiddenItems as item}
+					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+					<a
+						href={item.path}
+						class="menu-popover-item"
+						onclick={() => (menuOpen = false)}
+						class:active={isActive}
+						aria-current={isActive ? 'page' : undefined}
+					>
+						<item.icon size={20} />
+						<span>{item.label}</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</nav>
+
+<div class="viewport-guard">
+	<img src={logoPlain} alt="OwlBoard Logo" width="100" height="100" />
+	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
+	<p>
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
+		Please expand your view to at least 300px to view the app.
+	</p>
+</div>
+
+<style>
+	header {
+		top: 0;
+		height: 80px;
+		box-shadow: var(--shadow-std);
+	}
+	.logo-link {
+		width: auto;
+		display: block;
+		height: 55px;
+	}
+
+	.logo-link img {
+		height: 55px;
+		width: auto;
+		display: block;
+	}
+
+	.page-title {
+		font-family: 'URW Gothic', sans-serif;
+		font-weight: 600;
+		font-size: clamp(0.9rem, 2.5vw + 0.8rem, 2rem);
+		font-style: normal;
+		margin-left: 5px;
+		padding-bottom: 2px;
+		color: var(--color-title);
+	}
+	header,
+	nav {
+		flex-shrink: 0;
+		width: 100%;
+		background-color: var(--color-accent);
+		box-sizing: border-box;
+		left: 0;
+		position: fixed;
+		align-items: center;
+		padding: 0 1rem;
+		display: flex;
+		z-index: 100;
+		align-items: center;
+		gap: 0rem;
+	}
+
+	main {
+		padding-top: 80px;
+		padding-bottom: 60px;
+		min-height: 100dvh;
+		box-sizing: border-box;
+		background-color: var(--color-bg-dark);
+		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
+	}
+
+	nav {
+		display: flex;
+		bottom: 0;
+		height: 60px;
+		box-shadow: var(--shadow-up);
+	}
+
+	.nav-item,
+	.more-menu-wrapper {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		width: 70px;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		position: relative;
+		cursor: pointer;
+		height: 100%;
+		border: 0;
+		color: var(--color-title);
+		background: none;
+		padding: 0;
+		border: none;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.nav-item:hover,
+	.menu-popover-item:hover {
+		filter: brightness(1.9);
+		background-color: #ffffff1a;
+	}
+
+	.nav-item.active,
+	.menu-popover-item.active {
+		color: #ffffff;
+		background: rgba(255, 255, 255, 0.05);
+	}
+
+	.nav-item.active::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		width: 40%;
+		height: 3px;
+		background-color: var(--color-brand);
+		border-radius: 0 0 4px 4px;
+		box-shadow: var(--shadow-std);
+	}
+
+	.nav-item.active .label,
+	.menu-popover-item.active .label {
+		font-weight: 600;
+	}
+
+	.label {
+		font-size: 0.85rem;
+		font-family: 'URW Gothic', sans-serif;
+		font-weight: 400;
+		margin-top: 4px;
+		letter-spacing: 0.05rem;
+	}
+
+	.backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 60px;
+		width: 100vw;
+		height: calc(100dvh - 60px);
+		background: rgba(0, 0, 0, 0.4);
+		backdrop-filter: blur(2px);
+		z-index: 999;
+	}
+
+	.menu-popover {
+		position: absolute;
+		bottom: 100%;
+		right: 10px;
+
+		background-color: var(--color-accent);
+		border-radius: 12px 12px 0 0;
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+		min-width: 140px;
+		z-index: 1000;
+		overflow: hidden;
+	}
+
+	.menu-popover-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		position: relative;
+		min-height: 48px;
+		padding: 12px 16px;
+		text-decoration: none;
+		color: var(--color-title);
+	}
+
+	.menu-popover-item.active::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 4px;
+		height: 60%;
+		background-color: var(--color-brand);
+		border-radius: 0 4px 4px 0;
+		box-shadow: var(--shadow-right);
+	}
+
+	.viewport-guard {
+		display: none;
+	}
+
+	@media (max-width: 299px) {
+		.viewport-guard {
+			display: block;
+			position: fixed;
+			text-align: center;
+			font-family: 'URW Gothic', sans-serif;
+			margin-top: 1rem;
+			font-size: 1.2rem;
+			color: var(--color-title);
+		}
+
+		.viewport-guard p {
+			width: 90%;
+			margin: auto;
+			padding-top: 30px;
+		}
+
+		header,
+		main,
+		nav {
+			display: none;
+		}
+	}
+</style>

src/routes/+layout.ts

@@ -0,0 +1,4 @@
+export const prerender = true;
+export const trailingSlash = 'always';
+export const csr = true;
+export const ssr = false;

src/routes/+page.svelte

@@ -1,2 +1,18 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
+</script>
+
+<div class="card-container">
+	<LocationBoardCard />
+</div>
+
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import logo from '$lib/assets/round-logo.svg';
+
+	let isSpinning = $state(false);
+
+	function handleLogoTap() {
+		if (isSpinning) return;
+		isSpinning = true;
+		setTimeout(() => (isSpinning = false), 800);
+	}
+</script>
+
+<div class="logo-container">
+	<img
+		class="logo"
+		src={logo}
+		alt="OwlBoard Logo"
+		onclick={handleLogoTap}
+		class:animate={isSpinning}
+	/>
+</div>
+
+<section class="about">
+	<p class="copy">&copy; 2022-2026 Frederick Boniface</p>
+	<p class="tagline">Created by train crew, for train crew</p>
+	<p class="amble">
+		OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger
+		departure boards. The aim was to provide fast and easy access to the information we need on a
+		daily basis.
+	</p>
+	<p class="amble">
+		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
+		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the
+		app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with
+		many of the sculptures still in the area.
+	</p>
+	<p class="opensource">
+		Some components that combine to form OwlBoard are open-source, see the <a
+			href="https://git.fjla.uk"
+			target="_blank"
+			rel="noopener">Git reposititories</a
+		> for more info.
+	</p>
+</section>
+
+<section class="data-sourcing">
+	<p>
+		Data is sourced from multiple providers, including <a
+			href="https://nationalrail.co.uk"
+			target="_blank"
+			rel="noopener noreferrer">National Rail Enquiries</a
+		> and Network Rail along side OwlBoard's own data
+	</p>
+</section>
+
+<style>
+	.logo-container {
+		width: 100%;
+		text-align: center;
+	}
+
+	@keyframes owl-spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		15% {
+			transform: rotate(-20deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.logo {
+		padding-top: 25px;
+		margin: auto;
+		height: auto;
+		width: clamp(80px, 20vw, 200px);
+	}
+
+	.logo.animate {
+		animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+	}
+
+	section {
+		margin: auto;
+		width: 90%;
+		max-width: 650px;
+		font-family: 'URW Gothic', sans-serif;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	section:last-child {
+		padding-bottom: 15px;
+	}
+
+	.tagline {
+		font-weight: 600;
+		font-style: italic;
+	}
+</style>

src/routes/about/+page.ts

@@ -0,0 +1,5 @@
+export const load = () => {
+	return {
+		title: 'About'
+	};
+};

src/routes/board/+page.svelte

@@ -0,0 +1,13 @@
+<section>Live board are not yet implemented on the server</section>
+
+<style>
+	section {
+		font-family: 'URW Gothic', sans-serif;
+		text-align: center;
+		font-size: 2rem;
+		width: 90%;
+		margin: auto;
+		padding-top: 25px;
+		max-width: 500px;
+	}
+</style>

src/routes/board/+page.ts

@@ -0,0 +1,37 @@
+import { LOCATIONS } from '$lib/locations-object.svelte';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ url }) => {
+	const locId = url.searchParams.get('loc');
+
+	if (!LOCATIONS.loaded) {
+		await LOCATIONS.init(fetch);
+	}
+
+	let title: string = '';
+
+	if (!locId) {
+		error(400, {
+			message: 'Location not provided',
+			owlCode: 'NO_LOCATION_IN_PATH'
+		});
+	}
+
+	if (locId) {
+		const location = LOCATIONS.find(locId);
+
+		if (location) {
+			title = location.n || location.t;
+		} else {
+			error(404, {
+				message: `Location (${locId.toUpperCase()}) not found`,
+				owlCode: 'INVALID_LOCATION_CODE'
+			});
+		}
+	}
+	return {
+		title,
+		location
+	};
+};

src/routes/pis/+page.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
+    import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
+    import Button from '$lib/components/ui/Button.svelte';
+    import type { PisObjects } from '@owlboard/api-schema-types';
+    import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+    import TocStyle from '$lib/components/ui/TocStyle.svelte';
+
+    let results = $state<PisObjects[]>([]);
+    let resultsLoaded = $state<boolean>(false);
+    let errorState = $state<{status: number, message: string} | null>(null);
+
+    async function handleStartEndSearch(start: string, end: string): Promise<void> {
+        console.log(`PIS Search: ${start}-${end}`);
+        errorState = null;
+
+        try {
+            const response = await OwlClient.pis.getByStartEndCrs(start, end);
+            results = await response.data || [];
+        } catch (e) {
+            if (e instanceof ValidationError) {
+                errorState = { status: 400, message: e.message };
+            } else if (e instanceof ApiError) {
+                console.log(e)
+                errorState = { status: 20, message: e.message };
+            } else {
+                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+            }
+        } finally {
+            resultsLoaded = true;
+        }
+    }
+
+    async function handleCodeSearch(code: string) {
+        console.log(`PIS Search: ${code}`);
+        errorState = null;
+        try {
+            const response = await OwlClient.pis.getByCode(code);
+            results = response.data || []
+        } catch (e) {
+            if (e instanceof ValidationError) {
+                errorState = { status: 400, message: e.message };
+            } else if (e instanceof ApiError) {
+                console.log(e)
+                errorState = { status: 20, message: e.message };
+            } else {
+                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+            }
+        } finally {
+            resultsLoaded = true;
+        }
+    }
+
+    function clearResults() {
+        console.log('Clearing Results');
+        resultsLoaded = false;
+        results = [];
+    }
+</script>
+
+{#if !resultsLoaded}
+    <div class="card-container">
+        <PisStartEndCard onsearch={handleStartEndSearch} />
+        <PisCode onsearch={handleCodeSearch} />
+    </div>
+{:else}
+    <div class="result-container">
+        {#if errorState}
+            <span class="errCode">Error: {errorState.status}</span>
+            <span class="errMsg">{errorState.message}</span>
+        {:else}
+            {#if results.length}
+                <h2 class="result-title">{results.length} Result{#if results.length > 1}s{/if} found</h2>
+                <table class="result-table">
+                    <thead>
+                    <tr>
+                        <th style="width:16%">TOC</th>
+                        <th style="width:14%">Code</th>
+                        <th style="width:70%">Locations</th>
+                    </tr></thead>
+                    {#each results as result}
+                        <tbody><tr>
+                            <td><TocStyle toc={result.toc} /></td>
+                            <td>{result.code}</td>
+                            <td class="locations-row">{result.crsStops.join(' ')}</td>
+                        </tr></tbody>
+                    {/each}
+                </table>
+            {:else}
+                <p class="no-results">No matching results</p>
+            {/if}
+        {/if}
+        <div class="reset-button-container">
+        <Button onclick={clearResults}>Reset</Button>
+</div>    </div>
+{/if}
+
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+
+    .result-container {
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.2rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 5px;
+        justify-content: center;
+        background: var(--color-accent);
+        border-radius: 15px;
+        padding: 20px 0 20px 0;
+        margin: auto;
+        margin-top: 25px;
+        margin-bottom: 25px;
+        width: 90%;
+        max-width: 500px;
+		box-shadow: var(--shadow-std);
+    }
+
+    .result-title {
+        color: var(--color-brand);
+    }
+
+    .result-table {
+        width: 90%;
+        max-width: 350px;
+        margin: auto;
+        text-align: center;
+        table-layout: fixed;
+        border-collapse: separate;
+        border-spacing: 0 20px;
+        font-weight: 400;
+    }
+
+    .locations-row {
+        font-family:'Courier New', Courier, monospace;
+        text-align: left;
+        padding-left: 20px;
+    }
+
+    .errCode {
+        color: rgb(255, 54, 54);
+        font-weight: 600;
+        font-size: 2rem;
+    }
+
+    .reset-button-container {
+        padding: 20px 0 3px 0;
+    }
+</style>

src/routes/pis/+page.ts

@@ -0,0 +1,5 @@
+export const load = () => {
+	return {
+		title: 'PIS Codes'
+	};
+};

static/api/tiplocs

@@ -0,0 +1,106 @@
+[
+  {"n":"Manchester Piccadilly","t":"MANPICD","c":"MAN","s":"manchester piccadilly man manpicd"},
+  {"n":"Manchester Victoria","t":"MCV","c":"MCV","s":"manchester victoria mcv"},
+  {"n":"Manchester Oxford Road","t":"MCOR","c":"MCO","s":"manchester oxford road mco mcor"},
+  {"n":"Manchester Airport","t":"MANAPTL","c":"MIA","s":"manchester airport mia manaptl"},
+  {"n":"London Euston","t":"EUSTON","c":"EUS","s":"london euston eus euston"},
+  {"n":"London Kings Cross","t":"KGX","c":"KGX","s":"london kings cross kgx kingscross"},
+  {"n":"London St Pancras International","t":"STPANCR","c":"STP","s":"london st pancras international stp stpancr"},
+  {"n":"London Paddington","t":"PADTON","c":"PAD","s":"london paddington pad padton"},
+  {"n":"London Victoria","t":"VIC","c":"VIC","s":"london victoria vic"},
+  {"n":"London Liverpool Street","t":"LIVST","c":"LST","s":"london liverpool street lst livst"},
+  {"n":"London Bridge","t":"LONGBR","c":"LBG","s":"london bridge lbg longbr"},
+  {"n":"Birmingham New Street","t":"BHMNEWST","c":"BHM","s":"birmingham new street bhm bhmnewst bham"},
+  {"n":"Birmingham Moor Street","t":"BHMMRS","c":"BMO","s":"birmingham moor street bmo bhmmrs"},
+  {"n":"Birmingham Snow Hill","t":"BHMSH","c":"BSW","s":"birmingham snow hill bsw bhmsh"},
+  {"n":"Leeds","t":"LEEDS","c":"LDS","s":"leeds lds"},
+  {"n":"York","t":"YORK","c":"YRK","s":"york yrk"},
+  {"n":"Liverpool Lime Street","t":"LIVLST","c":"LIV","s":"liverpool lime street liv livlst"},
+  {"n":"Liverpool Central","t":"LIVCEN","c":"LVC","s":"liverpool central lvc livcen"},
+  {"n":"Sheffield","t":"SHEFFLD","c":"SHF","s":"sheffield shf sheffld"},
+  {"n":"Nottingham","t":"NOTTM","c":"NOT","s":"nottingham not nottm"},
+  {"n":"Derby","t":"DERBY","c":"DBY","s":"derby dby"},
+  {"n":"Leicester","t":"LEICEST","c":"LEI","s":"leicester lei leicest"},
+  {"n":"Bristol Temple Meads","t":"BRSTLTM","c":"BRI","s":"bristol temple meads bri brstltm"},
+  {"n":"Cardiff Central","t":"CDFCEN","c":"CDF","s":"cardiff central cdf cdfcen"},
+  {"n":"Newcastle","t":"NEWCAST","c":"NCL","s":"newcastle ncl newcast"},
+  {"n":"Edinburgh Waverley","t":"EDINBUR","c":"EDB","s":"edinburgh waverley edb edinbur"},
+  {"n":"Glasgow Central","t":"GLASCEN","c":"GLC","s":"glasgow central glc glascen"},
+  {"n":"Glasgow Queen Street","t":"GLAQS","c":"GLQ","s":"glasgow queen street glq glaqs"},
+  {"n":"Reading","t":"READING","c":"RDG","s":"reading rdg"},
+  {"n":"Oxford","t":"OXFORD","c":"OXF","s":"oxford oxf"},
+  {"n":"Cambridge","t":"CAMBRDG","c":"CBG","s":"cambridge cbg cambrdg"},
+  {"n":"Peterborough","t":"PBOUGH","c":"PBO","s":"peterborough pbo pbough"},
+  {"n":"Doncaster","t":"DONCAST","c":"DON","s":"doncaster don doncast"},
+  {"n":"Crewe","t":"CREWE","c":"CRE","s":"crewe cre"},
+  {"n":"Preston","t":"PRESTON","c":"PRE","s":"preston pre"},
+  {"n":"Blackpool North","t":"BPLNOR","c":"BPN","s":"blackpool north bpn bplnor"},
+  {"n":"Bolton","t":"BOLTON","c":"BON","s":"bolton bon"},
+  {"n":"Huddersfield","t":"HUDDSFD","c":"HUD","s":"huddersfield hud huddsfd"},
+  {"n":"Stockport","t":"STOCKPT","c":"SPT","s":"stockport spt stockpt"},
+  {"n":"Wigan North Western","t":"WIGNW","c":"WGN","s":"wigan north western wgn wignw"},
+    {"n":"Bath Spa","t":"BATHSPA","c":"BTH","s":"bath spa bth bathspa"},
+ {"n":"Exeter St Davids","t":"EXD","c":"EXD","s":"exeter st davids exd"},
+  {"n":"Plymouth","t":"PLYMTH","c":"PLY","s":"plymouth ply plymth"},
+  {"n":"Truro","t":"TRURO","c":"TRU","s":"truro tru"},
+  {"n":"Aberdeen","t":"ABERDN","c":"ABD","s":"aberdeen abd aberdn"},
+  {"n":"Inverness","t":"INVNESS","c":"INV","s":"inverness inv invness"},
+  {"n":"Perth","t":"PERTH","c":"PTH","s":"perth pth"},
+  {"n":"Dundee","t":"DUNDEE","c":"DEE","s":"dundee dee"},
+  {"n":"Stirling","t":"STIRLNG","c":"STG","s":"stirling stg stirlng"},
+  {"n":"Falkirk Grahamston","t":"FLKGRA","c":"FKG","s":"falkirk grahamston fkg flkgra"},
+  {"n":"Motherwell","t":"MOTHRWL","c":"MTH","s":"motherwell mth mothrwl"},
+  {"n":"Paisley Gilmour Street","t":"PAISGL","c":"PYG","s":"paisley gilmour street pyg paisgl"},
+  {"n":"Greenock Central","t":"GRNOCK","c":"GKC","s":"greenock central gkc grnock"},
+  {"n":"Ayr","t":"AYR","c":"AYR","s":"ayr"},
+  {"n":"Carlisle","t":"CARLISL","c":"CAR","s":"carlisle car carlisl"},
+  {"n":"Penrith North Lakes","t":"PNRITH","c":"PNR","s":"penrith north lakes pnr pnrith"},
+  {"n":"Kendal","t":"KENDAL","c":"KEN","s":"kendal ken"},
+  {"n":"Windermere","t":"WNDRMRE","c":"WDM","s":"windermere wdm wndrme"},
+  {"n":"Lancaster","t":"LANCAST","c":"LAN","s":"lancaster lan lancast"},
+  {"n":"Chester","t":"CHESTER","c":"CTR","s":"chester ctr"},
+  {"n":"Warrington Bank Quay","t":"WRRGBQ","c":"WBQ","s":"warrington bank quay wbq wrrgbq"},
+  {"n":"Warrington Central","t":"WRRGCN","c":"WAC","s":"warrington central wac wrrgcn"},
+  {"n":"Runcorn","t":"RUNCORN","c":"RUN","s":"runcorn run"},
+  {"n":"Widnes","t":"WIDNES","c":"WID","s":"widnes wid"},
+  {"n":"Southport","t":"STHPORT","c":"SOP","s":"southport sop sthport"},
+  {"n":"Ormskirk","t":"ORMSKRK","c":"OMS","s":"ormskirk oms ormskrk"},
+  {"n":"Blackburn","t":"BLKBRN","c":"BBN","s":"blackburn bbn blkbrn"},
+  {"n":"Burnley Manchester Road","t":"BURNMR","c":"BYM","s":"burnley manchester road bym burnmr"},
+  {"n":"Rochdale","t":"ROCHDAL","c":"RCD","s":"rochdale rcd rochdal"},
+  {"n":"Oldham Mumps","t":"OLDMUM","c":"OMM","s":"oldham mumps omm oldmum"},
+  {"n":"Ashton-under-Lyne","t":"ASHTON","c":"AHN","s":"ashton under lyne ahn ashton"},
+  {"n":"Stalybridge","t":"STALYBG","c":"SYB","s":"stalybridge syb stalybg"},
+  {"n":"Macclesfield","t":"MACCLFD","c":"MAC","s":"macclesfield mac macclfd"},
+  {"n":"Congleton","t":"CONGLTN","c":"CNG","s":"congleton cng conglt"},
+  {"n":"Stoke-on-Trent","t":"STOKETR","c":"SOT","s":"stoke on trent sot stoketr"},
+  {"n":"Stafford","t":"STAFFRD","c":"STA","s":"stafford sta staffrd"},
+  {"n":"Tamworth","t":"TAMWTH","c":"TAM","s":"tamworth tam tamwth"},
+  {"n":"Nuneaton","t":"NUNEATN","c":"NUN","s":"nuneaton nun nuneatn"},
+  {"n":"Coventry","t":"COVNTRY","c":"COV","s":"coventry cov covntry"},
+  {"n":"Rugby","t":"RUGBY","c":"RUG","s":"rugby rug"},
+  {"n":"Milton Keynes Central","t":"MKCEN","c":"MKC","s":"milton keynes central mkc mkcen"},
+  {"n":"Birmingham Washwood Heath Junction","t":"BWHJCT","c":"","s":"birmingham washwood heath junction bwhjct"},
+  {"n":"Manchester Trafford Park Yard","t":"MTRYD","c":"","s":"manchester trafford park yard mtryd"},
+  {"n":"London Willesden Junction","t":"WLSDJCT","c":"","s":"london willesden junction wlsdjct"},
+  {"n":"Leeds Neville Hill Depot","t":"NVHLDP","c":"","s":"leeds neville hill depot nvhldp"},
+  {"n":"York Holgate Junction","t":"YHGJCT","c":"","s":"york holgate junction yhgjct"},
+  {"n":"Crewe Basford Hall Junction","t":"CBHJCT","c":"","s":"crewe basford hall junction cbhjct"},
+  {"n":"Doncaster Decoy Sidings","t":"DCDSID","c":"","s":"doncaster decoy sidings dcdsid"},
+  {"n":"Liverpool Edge Hill Yard","t":"LEHYD","c":"","s":"liverpool edge hill yard lehyd"},
+  {"n":"Bristol East Junction","t":"BREJCT","c":"","s":"bristol east junction brejct"},
+  {"n":"Glasgow Polmadie Depot","t":"GLPDEP","c":"","s":"glasgow polmadie depot glpdep"},
+  {"n":"Newcastle Manors Junction","t":"NCMJCT","c":"","s":"newcastle manors junction ncmjct"},
+  {"n":"Edinburgh Haymarket Sidings","t":"EHSID","c":"","s":"edinburgh haymarket sidings ehsid"},
+  {"n":"Reading South Junction","t":"RDSJCT","c":"","s":"reading south junction rdsjct"},
+  {"n":"Oxford Rewley Road Depot","t":"OXRDEP","c":"","s":"oxford rewley road depot oxrdep"},
+  {"n":"Cambridge Coldham Lane Junction","t":"CCLJCT","c":"","s":"cambridge coldham lane junction ccljct"},
+  {"n":"Watford North Junction","t":"WFNJCT","c":"","s":"watford north junction wfnjct"},
+  {"n":"Luton Airport Sidings","t":"LUTSID","c":"","s":"luton airport sidings lutsid"},
+  {"n":"Stevenage Hitchin Junction","t":"STHJC","c":"","s":"stevenage hitchin junction sthjc"},
+  {"n":"Chelmsford New Hall Junction","t":"CHNJCT","c":"","s":"chelmsford new hall junction chnjct"},
+  {"n":"","t":"BPWY532","c":"","s":"bpwy532"},
+  {"n":"Ipswich Derby Road Depot","t":"IPDRDP","c":"","s":"ipswich derby road depot ipdrdp"},
+  {"n":"Rhoose Cardiff International Airport","c":"RIA","t":"RHOOSE","s":"rhoose cardiff international airport ria"},
+  {"n":"Southampton Airport Parkway","c":"SOA","t":"SOTAPT","s":"southampton airport parkway soa sotapt"}
+]

static/type/urwgothic/LICENSE

@@ -0,0 +1,93 @@
+Copyright (c) 2014,2015 by (URW)++ Design & Development
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

svelte.config.js

@@ -1,6 +1,20 @@
 import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
-const config = { kit: { adapter: adapter() } };
+const config = {
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: 'true',
+			strict: 'true'
+		}),
+		prerender: {
+			// Temporary option during testing
+			handleHttpError: 'ignore'
+		}
+	}
+};
 
 export default config;