add inital display vars

Reviewed-on: seth/ipv4.army#1

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"html.customData": ["./node_modules/mdui/html-data.en.json"],
+	"css.customData": ["./node_modules/mdui/css-data.en.json"]
+}

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.0.0-beta.4/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -7,15 +7,19 @@
 	},
 	"files": {
 		"ignoreUnknown": true,
-		"ignore": []
+		"includes": ["**", "!**/dist/**"]
 	},
 	"formatter": {
 		"enabled": true,
 		"indentStyle": "tab",
 		"lineEnding": "lf"
 	},
-	"organizeImports": {
-		"enabled": true
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
 	},
 	"css": {
 		"formatter": {
@@ -29,6 +33,19 @@
 			"recommended": true,
 			"correctness": {
 				"noUnusedImports": "error"
+			},
+			"style": {
+				"noParameterAssign": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useSelfClosingElements": "error",
+				"useConst": "error",
+				"useSingleVarDeclarator": "error",
+				"noUnusedTemplateLiteral": "error",
+				"useNumberNamespace": "error",
+				"noInferrableTypes": "error",
+				"noUselessElse": "error"
 			}
 		}
 	},

bun.lock

@@ -4,12 +4,19 @@
     "": {
       "name": "ipv4.army",
       "dependencies": {
+        "@fontsource/roboto": "^5.2.5",
+        "@fontsource/roboto-mono": "^5.2.5",
+        "@material/material-color-utilities": "^0.3.0",
+        "@mdui/icons": "^1.0.3",
         "@speed-highlight/core": "latest",
+        "mdui": "^2.1.4",
+        "purgecss": "^7.0.2",
         "reconnecting-websocket": "latest",
+        "terser": "^5.39.2",
         "tsx-dom": "latest",
       },
       "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
+        "@biomejs/biome": "^2.0.0-beta.4",
         "@types/bun": "latest",
       },
       "peerDependencies": {
@@ -18,34 +25,166 @@
     },
   },
   "packages": {
-    "@biomejs/biome": ["@biomejs/biome@1.9.4", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.4", "@biomejs/cli-darwin-x64": "1.9.4", "@biomejs/cli-linux-arm64": "1.9.4", "@biomejs/cli-linux-arm64-musl": "1.9.4", "@biomejs/cli-linux-x64": "1.9.4", "@biomejs/cli-linux-x64-musl": "1.9.4", "@biomejs/cli-win32-arm64": "1.9.4", "@biomejs/cli-win32-x64": "1.9.4" }, "bin": { "biome": "bin/biome" } }, "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog=="],
+    "@biomejs/biome": ["@biomejs/biome@2.0.0-beta.5", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.0.0-beta.5", "@biomejs/cli-darwin-x64": "2.0.0-beta.5", "@biomejs/cli-linux-arm64": "2.0.0-beta.5", "@biomejs/cli-linux-arm64-musl": "2.0.0-beta.5", "@biomejs/cli-linux-x64": "2.0.0-beta.5", "@biomejs/cli-linux-x64-musl": "2.0.0-beta.5", "@biomejs/cli-win32-arm64": "2.0.0-beta.5", "@biomejs/cli-win32-x64": "2.0.0-beta.5" }, "bin": { "biome": "bin/biome" } }, "sha512-1ldO4AepieVvg4aLi1ubZkA7NsefQT2UTNssbJbDiQTGem8kCHx/PZCwLxIR6UzFpGIjh0xsDzivyVvhnmqmuA=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@1.9.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.0.0-beta.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-pnJiaoDpwGo+ctGkMu4POcO8jgOgCErBdYbhutr+K9rxxJS+TlHLr0LR91GCEWbGV2O1oyZRFQcW21rYFoak4w=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@1.9.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.0.0-beta.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-WwEZpqcmsNoFpZkUFNQcbZo52WK4hLGQ0vZk3PQ8JlZ55gJsHiyhtv6aem6fVlyVCvZgpsC0sYPLE3VvFVKNAQ=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@1.9.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.0.0-beta.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-lAF1de+Ki0vnq14NwDXouKkAR/iviyMNrUngSHjTGFC4z8XGVEfIw0ZMSm7fAdJZ5fAWodt9HiYmEAVs5EtHQg=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@1.9.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.0.0-beta.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-4vxNkYx1uEt211W8hLdXddc7icRHQgYENb72g6uTd/tLVPSBvIwqUAxAOkU+9Ai1E/8R4sWy7HIxREgpuFgbNA=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@1.9.4", "", { "os": "linux", "cpu": "x64" }, "sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.0.0-beta.5", "", { "os": "linux", "cpu": "x64" }, "sha512-I0Pt1VHeL1mN8G7ZwV2u9AfzBd5ZKfbvHUI4x2wETUZbwcQlAu/nEzEa2LUe5HqSmnctTR36ig7RkkM9qbmIrA=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@1.9.4", "", { "os": "linux", "cpu": "x64" }, "sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.0.0-beta.5", "", { "os": "linux", "cpu": "x64" }, "sha512-nUeKGO517GtRCxziVD9les1HiCs2s2/WIVITMN9+9RRuLOko8r+T77E8ZXEmlfLOfOIOeE6z62WITqei3oNccA=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@1.9.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.0.0-beta.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-YXW6hgbrgBcWQ1SLO69ypWlluPchgQV5C1lTG4xOcBUWdCsfYuQirM64S6Dov7SFPqsMIoFC6LlQRW+n8qAyiA=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@1.9.4", "", { "os": "win32", "cpu": "x64" }, "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.0.0-beta.5", "", { "os": "win32", "cpu": "x64" }, "sha512-N7Yby52BJmvEdst1iMbclE5hxxefboaXKRJLm1tLfBYr4FeuoCe6j8HdiQSwhCRdIUGFFqBLaDXh//LLF6EReA=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
+
+    "@fontsource/roboto": ["@fontsource/roboto@5.2.5", "", {}, "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ=="],
+
+    "@fontsource/roboto-mono": ["@fontsource/roboto-mono@5.2.5", "", {}, "sha512-P1wrUBMFWfr+tuUIY10MzdRTBcl9f011CbZV1fXqcCk40Xmtn91l1V1daVuQ+JPctYEVYazabvaK+sUEThgnyw=="],
+
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
+
+    "@jridgewell/source-map": ["@jridgewell/source-map@0.3.6", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
+
+    "@lit-labs/ssr-dom-shim": ["@lit-labs/ssr-dom-shim@1.3.0", "", {}, "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="],
+
+    "@lit/localize": ["@lit/localize@0.12.2", "", { "dependencies": { "lit": "^3.2.0" } }, "sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ=="],
+
+    "@lit/reactive-element": ["@lit/reactive-element@2.1.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0" } }, "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA=="],
+
+    "@material/material-color-utilities": ["@material/material-color-utilities@0.3.0", "", {}, "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g=="],
+
+    "@mdui/icons": ["@mdui/icons@1.0.3", "", { "dependencies": { "@mdui/shared": "^1.0.8", "lit": "^3.3.0", "tslib": "^2.8.1" } }, "sha512-Jq9juUqIJMBvIRSTr0qBKiqnlbY5pVUzUP20EHSN8dT7GcqN7bq0AL8MASL5DxKs09kgcERq+z5bHJOkz/VDlA=="],
+
+    "@mdui/jq": ["@mdui/jq@3.0.3", "", { "dependencies": { "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-nI8QK9UPHhiIbECrC1aMdLXNxP6WgUtC9XwRPs/e56FtwduePyxPyloXmgU8VYw85i6TtYdgClHS9tW8JweNZA=="],
+
+    "@mdui/shared": ["@mdui/shared@1.0.8", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "@mdui/jq": "^3.0.3", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-YY863fjHBuk8KtiO4uLDm1YyIVdGrWv4xUxfv8jP32WqIQBkSTbV7HN8jnKXXIej0NFP7pU89yGr4GJYzVszPg=="],
 
     "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],
 
-    "@types/bun": ["@types/bun@1.2.12", "", { "dependencies": { "bun-types": "1.2.12" } }, "sha512-lY/GQTXDGsolT/TiH72p1tuyUORuRrdV7VwOTOjDOt8uTBJQOJc5zz3ufwwDl0VBaoxotSk4LdP0hhjLJ6ypIQ=="],
+    "@types/bun": ["@types/bun@1.2.14", "", { "dependencies": { "bun-types": "1.2.14" } }, "sha512-VsFZKs8oKHzI7zwvECiAJ5oSorWndIWEVhfbYqZd4HI/45kzW7PN2Rr5biAzvGvRuNmYLSANY+H59ubHq8xw7Q=="],
 
     "@types/node": ["@types/node@22.14.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw=="],
 
-    "bun-types": ["bun-types@1.2.12", "", { "dependencies": { "@types/node": "*" } }, "sha512-tvWMx5vPqbRXgE8WUZI94iS1xAYs8bkqESR9cxBB1Wi+urvfTrF1uzuDgBHFAdO0+d2lmsbG3HmeKMvUyj6pWA=="],
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
+    "acorn": ["acorn@8.14.1", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="],
+
+    "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
+
+    "ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
+
+    "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
+
+    "bun-types": ["bun-types@1.2.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-Kuh4Ub28ucMRWeiUUWMHsT9Wcbr4H3kLIO72RZZElSDxSu7vpetRvxIUDUaW6QtaIeixIpm7OXtNnZPf82EzwA=="],
+
+    "classcat": ["classcat@5.0.5", "", {}, "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
+    "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
+
+    "glob": ["glob@11.0.2", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^4.0.1", "minimatch": "^10.0.0", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ=="],
+
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "jackspeak": ["jackspeak@4.1.0", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" } }, "sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw=="],
+
+    "lit": ["lit@3.3.0", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", "lit-html": "^3.3.0" } }, "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw=="],
+
+    "lit-element": ["lit-element@4.2.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0", "@lit/reactive-element": "^2.1.0", "lit-html": "^3.3.0" } }, "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q=="],
+
+    "lit-html": ["lit-html@3.3.0", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw=="],
+
+    "lru-cache": ["lru-cache@11.1.0", "", {}, "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A=="],
+
+    "mdui": ["mdui@2.1.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.9", "@lit/localize": "^0.12.2", "@lit/reactive-element": "^2.1.0", "@material/material-color-utilities": "^0.3.0", "@mdui/jq": "^3.0.3", "@mdui/shared": "^1.0.8", "classcat": "^5.0.5", "is-promise": "^4.0.0", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-QtK5xia5HXtVO7yH30QjwvvNruw5JdrJL1MEc1k6S/ZfsbHOj6BxxdYjrdv2HiN5ikkGqt5CIbZdFyq6shaZyw=="],
+
+    "minimatch": ["minimatch@10.0.1", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ=="],
+
+    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-scurry": ["path-scurry@2.0.0", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
+
+    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
+
+    "purgecss": ["purgecss@7.0.2", "", { "dependencies": { "commander": "^12.1.0", "glob": "^11.0.0", "postcss": "^8.4.47", "postcss-selector-parser": "^6.1.2" }, "bin": { "purgecss": "bin/purgecss.js" } }, "sha512-4Ku8KoxNhOWi9X1XJ73XY5fv+I+hhTRedKpGs/2gaBKU8ijUiIKF/uyyIyh7Wo713bELSICF5/NswjcuOqYouQ=="],
 
     "reconnecting-websocket": ["reconnecting-websocket@4.4.0", "", {}, "sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng=="],
 
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
+    "source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
+
+    "ssr-window": ["ssr-window@5.0.0", "", {}, "sha512-3Iqawoo0DkAaUEScd80SYq3I5clEFDVy//DdzjHXACj/hqcKzsnMzRZ1yHRj+r5dW3UeXNs30ofnhP6YSWg5iA=="],
+
+    "string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "terser": ["terser@5.39.2", "", { "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.14.0", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "tsx-dom": ["tsx-dom@3.1.0", "", { "dependencies": { "tsx-dom-types": "2.1.0" } }, "sha512-PGN7iL6zNC4Jj7bA1groSIz5mFB3Rr+SeoywZk2g4+c9uV8wwzCf+5tFQ8SyZxQIBHech3ueB0KxV3OFieqhOA=="],
 
     "tsx-dom-types": ["tsx-dom-types@2.1.0", "", {}, "sha512-pZaMTrMRNom+D1b82K+1cWVMuogXrD/ANI42UYxilw27tF+tDCgj7GrD1XLmCxbHPDO2zxfmFuaz04KIEfWydQ=="],
@@ -53,5 +192,33 @@
     "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
 
     "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
+
+    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
   }
 }

bunfig.toml

@@ -1,2 +0,0 @@
-[loader]
-".woff2" = "file"

config.yml

@@ -0,0 +1 @@
+{}

package.json

@@ -8,7 +8,7 @@
 		"lint:fix": "bunx biome check --fix"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^1.9.4",
+		"@biomejs/biome": "^2.0.0-beta.5",
 		"@types/bun": "latest"
 	},
 	"peerDependencies": {
@@ -17,8 +17,15 @@
 	"private": true,
 	"type": "module",
 	"dependencies": {
+		"@fontsource/roboto": "^5.2.5",
+		"@fontsource/roboto-mono": "^5.2.5",
+		"@material/material-color-utilities": "^0.3.0",
+		"@mdui/icons": "^1.0.3",
 		"@speed-highlight/core": "latest",
+		"mdui": "^2.1.4",
+		"purgecss": "^7.0.2",
 		"reconnecting-websocket": "latest",
+		"terser": "^5.39.2",
 		"tsx-dom": "latest"
 	}
 }

public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><g filter="url(#a)"><g clip-path="url(#b)"><rect width="256" height="256" fill="#1a1a1a" rx="128"/><path stroke="#787878" stroke-width="10" d="m150.035 192 142 1"/><ellipse cx="87" cy="120" fill="#e8e8e8" rx="13" ry="8"/><path fill="#e8e8e8" fill-rule="evenodd" d="M101.139 38.263c-1.6764-7.0088-9.9916-9.9969-15.7458-5.6584L52.0779 57.7231c-.9878.7448-2.2162 1.0925-3.4501 1.0038-2.8433-.2042-5.7211-.3084-8.6278-.3084-52.5128 0-97 34.4995-97 79.1815 0 22.093 11.0445 44.911 28.4288 62.117C-11.1382 216.973 13.0784 229 40 229c9.3865 0 18.4441-1.462 27-4.098V251c0 2.762 2.2386 5 5 5h20.0132c2.5448 0 4.6836-1.911 4.9686-4.44l2.9543-26.219c.2799-2.489 2.3799-4.324 4.8249-4.861.724-.159 1.436-.353 2.132-.583 2.205-.729 4.208-1.797 5.895-3.144 1.688-1.346 3.027-2.945 3.94-4.704.377-.727.679-1.647.903-2.61.51-2.192 1.987-4.165 4.164-4.733l2.084-.544c.412-.107.837-.162 1.262-.162h10.218c.425 0 .85.055 1.262.162l10.258 2.676c.412.108.837.162 1.262.162H154c2.761 0 5-2.238 5-5v-18c0-2.761-2.239-5-5-5h-29.191C132.533 165.993 137 151.65 137 137.6c0-19.979-9.03-38.0624-23.615-51.8194-.73-.6885-1.255-1.5689-1.489-2.5447L101.139 38.263Zm11.793 140.755c.045-.012.092-.018.138-.018h11.739c-4.421 7.446-9.909 14.453-16.238 20.717C97.2163 210.956 82.9836 219.978 67 224.902v-10.524c13.1215-4.569 24.9171-12.247 34.536-21.768 4.28-4.235 8.099-8.806 11.396-13.592Zm0 0-22.3113 5.82c-.4121.108-.8363.162-1.2621.162H72c-2.7614 0-5 2.239-5 5v24.378C58.4813 217.344 49.4038 219 40 219c-23.8886 0-45.67204-10.687-61.5365-26.39C-37.4496 176.859-47 156.477-47 137.6c0-37.256 37.89237-69.1815 87-69.1815 3.8926 0 7.7237.2036 11.4777.5979 1.2591.1323 2.5215-.218 3.5324-.9802l30.3067-22.8501c2.8771-2.1693 7.0347-.6752 7.8729 2.8292l9.7033 40.5664c.241 1.0061.788 1.9129 1.565 2.5952C118.617 103.6 127 119.919 127 137.6c0 13.801-5.105 28.406-14.068 41.418Zm-11.601 33.945c-.257 2.282 1.628 4.279 3.809 3.558 1.65-.545 3.148-1.344 4.411-2.351 1.262-1.007 2.263-2.203 2.946-3.519.546-1.051.88-2.163.993-3.294.024-.245-.206-.431-.445-.369-.03.008-.061.012-.092.012h-6.482c-2.545 0-4.684 1.912-4.969 4.44l-.171 1.523Z" clip-rule="evenodd"/><g filter="url(#c)" opacity=".25"><path fill="#e8e8e8" fill-rule="evenodd" d="M114.139 38.263c-1.676-7.0088-9.992-9.9969-15.7458-5.6584L63.5434 58.8801c-3.4643-.3052-6.9821-.4616-10.5434-.4616-52.51276 0-97 34.4995-97 79.1815 0 22.093 11.0445 44.911 28.4288 62.117C1.86185 216.973 26.0784 229 53 229c9.3865 0 18.4441-1.462 27-4.098V256h29.481l3.945-35.005c2.22-.047 4.412-.419 6.467-1.098 2.205-.729 4.208-1.797 5.895-3.144 1.688-1.346 3.027-2.945 3.94-4.704.887-1.708 1.356-4.479 1.382-6.382L137.5 204H149l11.5 3H172v-28h-34.191C145.533 165.993 150 151.65 150 137.6c0-20.49-9.497-38.9861-24.745-52.8664L114.139 38.263Zm11.793 140.755L126 179h11.809c-4.421 7.446-9.909 14.453-16.238 20.717-11.355 11.239-25.5874 20.261-41.571 25.185v-10.524c13.1215-4.569 24.917-12.247 34.536-21.768 4.28-4.235 8.099-8.806 11.396-13.592Zm0 0L103 185H80v29.378C71.4813 217.344 62.4038 219 53 219c-23.8886 0-45.67204-10.687-61.53647-26.39C-24.4496 176.859-34 156.477-34 137.6c0-37.256 37.89237-69.1815 87-69.1815 3.8926 0 7.7237.2036 11.4777.5979l1.9593.2058 1.5731-1.186 36.4029-27.4468 11.48 47.9923.37 1.5465 1.195 1.0487C131.617 103.6 140 119.919 140 137.6c0 13.801-5.105 28.406-14.068 41.418Zm-12.092 38.305c1.476-.078 2.929-.349 4.3-.802 1.65-.545 3.148-1.344 4.411-2.351 1.262-1.007 2.263-2.203 2.946-3.519.625-1.204.973-2.487 1.027-3.788L126 207h-10.997l-1.163 10.323Z" clip-rule="evenodd"/></g></g></g><defs><filter id="a" width="276" height="256" x="-20" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-20"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_1591_192"/></filter><filter id="c" width="256" height="265.418" x="-64" y="10.582" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_1591_192" stdDeviation="10"/></filter><clipPath id="b"><rect width="256" height="256" fill="#fff" rx="128"/></clipPath></defs></svg>

src/back/index.ts

@@ -1,17 +1,28 @@
-import Hyperate from "./Sockets/Hyperate";
-import Lanyard from "./Sockets/Lanyard";
+import { PurgeCSS } from "purgecss";
+import Hyperate from "./utilities/sockets/Hyperate";
+import Lanyard from "./utilities/sockets/Lanyard";
 
 const development = process.env.NODE_ENV === "development";
 
 const build = async () => {
-	return await Bun.build({
+	await Bun.build({
 		entrypoints: ["./src/front/index.html"],
 		outdir: "./dist",
-		minify: !development,
-		sourcemap: development ? "inline" : "none",
 		splitting: true,
+		env: "inline",
+		sourcemap: "linked",
+		minify: true,
 		publicPath: "/assets/",
 	});
+
+	const result = await new PurgeCSS().purge({
+		content: ["dist/*.html", "dist/*.js"],
+		css: ["dist/*.css"],
+	});
+
+	for (const file of result) {
+		await Bun.write(file.file || "", file.css);
+	}
 };
 
 const respOptions = {
@@ -33,10 +44,14 @@ const Responses = {
 		return new Response(Bun.gzipSync(JSON.stringify(data)), respOptions);
 	},
 	file: async (file: Bun.BunFile) => {
+		const isHTML = file.type === "text/html";
+
 		return new Response(Bun.gzipSync(await file.arrayBuffer()), {
 			headers: {
 				"Content-Type": file.type,
-				"Cache-Control": "public, max-age=31536000",
+				...(isHTML
+					? { "Cache-Control": "no-cache" }
+					: { "Cache-Control": "public, max-age=31536000" }),
 				"Content-Encoding": "gzip",
 			},
 		});
@@ -45,21 +60,19 @@ const Responses = {
 
 const postAnalytics = async (
 	req: Request | Bun.BunRequest,
-	server: Bun.Server,
+	_server: Bun.Server,
 ) => {
+	const cfIp = req.headers.get("CF-Connecting-IP");
+	//const realIp = req.headers.get("X-Real-IP");
+	const forwardedIp = req.headers.get("X-Forwarded-For");
+	//const serverIp = server.requestIP(req)?.address;
+
 	return await fetch("https://plausible.creations.works/api/event", {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/json",
 			"User-Agent": req.headers.get("user-agent") || "",
-			"X-Forwarded-For": String(
-				req.headers.get("CF-Connecting-IP") ||
-					req.headers.get("X-Real-IP") ||
-					req.headers.get("X-Forwarded-For")?.split(",")[0] ||
-					(typeof server.requestIP(req) === "string"
-						? server.requestIP(req)
-						: server.requestIP(req)?.address || ""),
-			),
+			"X-Forwarded-For": String(cfIp || forwardedIp?.split(",")[0]),
 		},
 		body: JSON.stringify({
 			domain: "ipv4.army",

src/back/utilities/sockets/Hyperate.ts

@@ -37,7 +37,7 @@ export default class {
 						ref: 0,
 					}),
 				);
-			}, 10000);
+			}, 10000 - 1000);
 		};
 
 		this._socket.onmessage = ({ data }: MessageEvent) => {

src/back/utilities/sockets/Lanyard.ts

@@ -7,7 +7,7 @@ export default class {
 
 	constructor(callback: (data: LanyardData) => void) {
 		this._socket = new ReconnectingWebSocket(
-			"wss://lanyard.creations.works/socket",
+			"wss://lanyard.atums.world/socket",
 		);
 		this._keepAlive = null;
 		this._callback = callback;
@@ -41,7 +41,7 @@ export default class {
 								op: 3,
 							}),
 						);
-					}, data.d.heartbeat_interval);
+					}, data.d.heartbeat_interval - 1000);
 					break;
 				}
 			}
@@ -55,7 +55,7 @@ export default class {
 			}
 		};
 
-		this._socket.onclose = () => {
+		this._socket.onclose = (_e) => {
 			console.log("Lanyard socket closed");
 			if (this._keepAlive) {
 				clearInterval(this._keepAlive);

src/back/utilities/themer/index.ts

@@ -0,0 +1,111 @@
+import {
+	argbFromHex,
+	argbFromRgb,
+	argbFromRgba,
+	blueFromArgb,
+	CorePalette,
+	greenFromArgb,
+	redFromArgb,
+	Scheme,
+} from "@material/material-color-utilities";
+import { toKebabCase } from "@mdui/jq/shared/helper.js";
+
+const rgbFromArgb = (source: number): string => {
+	const red = redFromArgb(source);
+	const green = greenFromArgb(source);
+	const blue = blueFromArgb(source);
+
+	return [red, green, blue].join(",");
+};
+
+const getFromSource = (source: number): string => {
+	const scheme = Scheme.dark(source).toJSON();
+
+	const palette = CorePalette.of(source);
+
+	Object.assign(scheme, {
+		"surface-dim": palette.n1.tone(6),
+		"surface-bright": palette.n1.tone(24),
+		"surface-container-lowest": palette.n1.tone(4),
+		"surface-container-low": palette.n1.tone(10),
+		"surface-container": palette.n1.tone(12),
+		"surface-container-high": palette.n1.tone(17),
+		"surface-container-highest": palette.n1.tone(22),
+		"surface-tint-color": scheme.primary,
+	});
+
+	// 扩充自定义颜色
+
+	// 根据配色方案生成 css 变量
+	const colorVar = (callback: (token: string, rgb: string) => string) => {
+		return Object.entries(scheme)
+			.map(([key, value]) => callback(toKebabCase(key), rgbFromArgb(value)))
+			.join("");
+	};
+
+	// CSS 文本
+	const cssText = `${colorVar((token, rgb) => `--mdui-color-${token}:${rgb};`)}`;
+
+	return cssText;
+};
+
+export const getTheme = (color: string) => {
+	let source = argbFromHex("#FFF");
+
+	if (color.startsWith("#")) {
+		source = argbFromHex(color);
+	} else {
+		const [r, g, b, a] = color.split(",");
+
+		const red = r || "";
+		const redExists =
+			red.length > 0 &&
+			red.length < 4 &&
+			!Number.isNaN(Number.parseInt(red)) &&
+			Number.parseInt(red) >= 0 &&
+			Number.parseInt(red) <= 255;
+
+		const green = g || "";
+		const greenExists =
+			green.length > 0 &&
+			green.length < 4 &&
+			!Number.isNaN(Number.parseInt(green)) &&
+			Number.parseInt(green) >= 0 &&
+			Number.parseInt(green) <= 255;
+
+		const blue = b || "";
+		const blueExists =
+			blue.length > 0 &&
+			blue.length < 4 &&
+			!Number.isNaN(Number.parseInt(blue)) &&
+			Number.parseInt(blue) >= 0 &&
+			Number.parseInt(blue) <= 255;
+
+		const alpha = a || "";
+		const alphaExists =
+			alpha.length > 0 &&
+			alpha.length < 4 &&
+			!Number.isNaN(Number.parseFloat(alpha)) &&
+			Number.parseFloat(alpha) >= 0 &&
+			Number.parseFloat(alpha) <= 1;
+
+		if (redExists && greenExists && blueExists) {
+			if (alphaExists) {
+				source = argbFromRgba({
+					r: Number.parseInt(red),
+					g: Number.parseInt(green),
+					b: Number.parseInt(blue),
+					a: Number.parseFloat(alpha),
+				});
+			} else {
+				source = argbFromRgb(
+					Number.parseInt(red),
+					Number.parseInt(green),
+					Number.parseInt(blue),
+				);
+			}
+		}
+	}
+
+	return getFromSource(source);
+};

src/front/App.css

@@ -1,61 +0,0 @@
-.scanlines {
-	overflow: hidden;
-}
-
-.scanlines:before,
-.scanlines:after {
-	display: inherit;
-	pointer-events: none;
-	content: "";
-	position: absolute;
-}
-
-.scanlines:before {
-	width: 100%;
-	height: 2px;
-	z-index: 2147483649;
-	background: rgba(0, 0, 0, 0.3);
-	opacity: 0.75;
-	animation: scanline 6s linear infinite;
-}
-
-.scanlines:after {
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 2147483648;
-	background: linear-gradient(
-		to bottom,
-		transparent 50%,
-		rgba(0, 0, 0, 0.3) 51%
-	);
-	background-size: 100% 6px;
-	animation: scanlines 2s steps(30) infinite;
-}
-
-/* ANIMATE UNIQUE SCANLINE */
-@keyframes scanline {
-	0% {
-		transform: translate3d(0, 200000%, 0);
-	}
-}
-
-@keyframes scanlines {
-	0% {
-		background-position: 0 50%;
-	}
-}
-
-span.shj-syn-str:nth-child(2) {
-	color: var(--status-color, rgba(150, 150, 150, 0.1));
-}
-
-.shj-numbers {
-	padding: 0px;
-}
-
-.shj-lang-json {
-	padding: 0px;
-	background-color: transparent;
-}