refactor(QR, iconography): add `@lucide/svelte` and `qrcode` for various fixes/improvements

package-lock.json

···
 			"version": "0.0.1",
 			"dependencies": {
 				"@atproto/api": "^0.18.1",
+				"@lucide/svelte": "^0.555.0",
+				"qrcode": "^1.5.4",
 				"tldts": "^7.0.19"
 			},
 			"devDependencies": {
···
 				"@sveltejs/kit": "^2.49.0",
 				"@sveltejs/vite-plugin-svelte": "^6.2.1",
 				"@tailwindcss/vite": "^4.0.0",
+				"@types/qrcode": "^1.5.6",
 				"prettier": "^3.6.2",
 				"prettier-plugin-svelte": "^3.4.0",
 				"svelte": "^5.43.14",
···
 			"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",
···
 			"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",
···
 			"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"
···
 			"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/@lucide/svelte": {
+			"version": "0.555.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.555.0.tgz",
+			"integrity": "sha512-aqTOMjBjf/HNwrhggRdb83T0QslZdpJTyTwr/chtXTGw7u4Hcu4zQb/5uA+csF0KKawKWVnsNI1MdHEHeEXTcQ==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
···
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.7.tgz",
 			"integrity": "sha512-znp1A/Y1Jj4l/Zy7PX5DZKBE0ZNY+5QBngiE21NJkfSTyzzC5iKNWOtwFXKtIrn7MXEFBck4jD95iBNkGjK92Q==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
···
 			"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/node": {
+			"version": "24.10.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+			"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"undici-types": "~7.16.0"
+			}
+		},
+		"node_modules/@types/qrcode": {
+			"version": "1.5.6",
+			"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+			"integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/acorn": {
 			"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",
 			"peer": true,
 			"bin": {
···
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"license": "MIT",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
 		"node_modules/aria-query": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
···
 			"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"
 			}
 		},
+		"node_modules/camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
···
 				"url": "https://paulmillr.com/funding/"
 			}
 		},
+		"node_modules/cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
 		"node_modules/clsx": {
 			"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"
 			}
 		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"license": "MIT",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"license": "MIT"
+		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
···
 				}
 			}
 		},
+		"node_modules/decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/dijkstrajs": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+			"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+			"license": "MIT"
+		},
+		"node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"license": "MIT"
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.3",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
···
 			"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/esrap": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.3.tgz",
 			"integrity": "sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
···
 				}
 			}
 		},
+		"node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"license": "MIT",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
···
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"license": "ISC",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
 		"node_modules/graceful-fs": {
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
···
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/is-reference": {
 			"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"
···
 			"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": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"license": "MIT",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/magic-string": {
 			"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": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"license": "MIT",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"license": "MIT",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
···
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pngjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+			"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
···
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/qrcode": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+			"integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+			"license": "MIT",
+			"dependencies": {
+				"dijkstrajs": "^1.0.1",
+				"pngjs": "^5.0.0",
+				"yargs": "^15.3.1"
+			},
+			"bin": {
+				"qrcode": "bin/qrcode"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
···
 				"url": "https://paulmillr.com/funding/"
 			}
 		},
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+			"license": "ISC"
+		},
 		"node_modules/rollup": {
 			"version": "4.53.3",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"license": "ISC"
+		},
 		"node_modules/set-cookie-parser": {
 			"version": "2.7.2",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
···
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "5.43.15",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.15.tgz",
 			"integrity": "sha512-FYlfm3oyLBNUy2NGqaWfKPiGOamS6YB8BJwAcF9xSXVFUjfcl9Ded1YSMu1vXEf0y0lcmBj45UgnOY2ZxhW0Cw==",
-			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
···
 				"multiformats": "^9.4.2"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/unicode-segmenter": {
 			"version": "0.14.0",
 			"resolved": "https://registry.npmjs.org/unicode-segmenter/-/unicode-segmenter-0.14.0.tgz",
···
 				}
 			}
 		},
+		"node_modules/which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+			"license": "ISC"
+		},
+		"node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+			"license": "ISC"
+		},
+		"node_modules/yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"license": "MIT",
+			"dependencies": {
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"license": "ISC",
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/zimmerframe": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
 			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/zod": {

package.json

···
 	},
 	"dependencies": {
 		"@atproto/api": "^0.18.1",
+		"@lucide/svelte": "^0.555.0",
+		"qrcode": "^1.5.4",
 		"tldts": "^7.0.19"
 	},
 	"devDependencies": {
···
 		"@sveltejs/kit": "^2.49.0",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.0.0",
+		"@types/qrcode": "^1.5.6",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"svelte": "^5.43.14",

scripts/test-config.js

···
 }
 
 function success(message) {
-	log(`✓ ${message}`, 'green');
+	log(`${message}`, 'green');
 }
 
 function error(message) {

src/app.css

···
 	background-color: rgb(var(--color-background));
 	color: rgb(var(--color-text-primary));
 	min-height: 100vh;
+	transition:
+		background-color 0.3s ease,
+		color 0.3s ease;
 }
 
 body {
···
 	color: rgb(var(--color-text-primary));
 	min-height: 100vh;
 }
+
+/* Smooth transitions for color changes */
+* {
+	transition-property: background-color, border-color, color, fill, stroke;
+	transition-duration: 0.2s;
+	transition-timing-function: ease;
+}
+
+/* Preserve transform transitions */
+*:where([style*='transform']) {
+	transition-property: background-color, border-color, color, fill, stroke, transform;
+}

src/lib/components/ApiEndpoint.svelte

···
+<script lang="ts">
+	import { Globe } from '@lucide/svelte';
+	import CodeBlock from './CodeBlock.svelte';
+
+	interface Props {
+		method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+		path: string;
+		description: string;
+		href?: string;
+	}
+
+	let { method, path, description, href }: Props = $props();
+
+	let isHovered = $state(false);
+
+	const methodColors = {
+		GET: 'rgb(var(--color-success))',
+		POST: 'rgb(var(--color-primary))',
+		PUT: 'rgb(var(--color-primary))',
+		DELETE: 'rgb(var(--color-error))'
+	};
+</script>
+
+<li class="rounded-lg p-3" style="background-color: rgb(var(--color-surface))">
+	{#if href}
+		<a
+			{href}
+			class="flex items-center gap-4 no-underline"
+			style="color: rgb(var(--color-text-primary))"
+			onmouseenter={() => (isHovered = true)}
+			onmouseleave={() => (isHovered = false)}
+		>
+			<span
+				class="shrink-0 rounded px-2 py-1 text-xs font-bold"
+				style="background-color: {methodColors[method]}; color: white"
+			>
+				{method}
+			</span>
+			<CodeBlock>{path}</CodeBlock>
+			<span style="color: rgb(var(--color-text-secondary))">{description}</span>
+			{#if isHovered}
+				<Globe size={16} class="ml-auto shrink-0" style="color: rgb(var(--color-text-tertiary))" />
+			{/if}
+		</a>
+	{:else}
+		<div class="flex items-center gap-4" style="color: rgb(var(--color-text-primary))">
+			<span
+				class="shrink-0 rounded px-2 py-1 text-xs font-bold"
+				style="background-color: {methodColors[method]}; color: white"
+			>
+				{method}
+			</span>
+			<CodeBlock>{path}</CodeBlock>
+			<span style="color: rgb(var(--color-text-secondary))">{description}</span>
+		</div>
+	{/if}
+</li>

src/lib/components/CodeBlock.svelte

···
+<script lang="ts">
+	import { Code2 } from '@lucide/svelte';
+
+	interface Props {
+		children: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<code
+	class="inline-flex items-center gap-1.5 rounded px-2 py-1 font-mono text-sm"
+	style="background-color: rgb(var(--color-code-bg))"
+>
+	<Code2 size={14} style="color: rgb(var(--color-text-secondary))" />
+	{@render children()}
+</code>

src/lib/components/CopyButton.svelte

···
+<script lang="ts">
+	import { Copy, Check } from '@lucide/svelte';
+
+	interface Props {
+		text: string;
+		size?: number;
+	}
+
+	let { text, size = 16 }: Props = $props();
+
+	let copied = $state(false);
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(text);
+			copied = true;
+
+			// Clear existing timeout
+			if (timeout) clearTimeout(timeout);
+
+			// Reset after 2 seconds
+			timeout = setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch (err) {
+			console.error('Failed to copy:', err);
+		}
+	}
+</script>
+
+<button
+	onclick={copyToClipboard}
+	class="rounded p-1 transition-colors hover:bg-opacity-20"
+	style="color: rgb(var(--color-text-secondary))"
+	aria-label={copied ? 'Copied!' : 'Copy to clipboard'}
+	title={copied ? 'Copied!' : 'Copy to clipboard'}
+>
+	{#if copied}
+		<Check {size} style="color: rgb(var(--color-success))" />
+	{:else}
+		<Copy {size} />
+	{/if}
+</button>

src/lib/components/Link.svelte

···
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+
+	interface Props {
+		href: string;
+		children: import('svelte').Snippet;
+		external?: boolean;
+	}
+
+	let { href, children, external = false }: Props = $props();
+
+	let isHovered = $state(false);
+</script>
+
+<a
+	{href}
+	class="inline-flex items-center gap-1.5 no-underline transition-colors"
+	style="color: {isHovered ? 'rgb(var(--color-primary-hover))' : 'rgb(var(--color-primary))'}"
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+>
+	{@render children()}
+	{#if external}
+		<ExternalLink size={14} class="shrink-0" />
+	{/if}
+</a>

src/lib/components/QRCodeModal.svelte

···
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		url: string;
+		isOpen: boolean;
+		onClose: () => void;
+	}
+
+	let { url, isOpen, onClose }: Props = $props();
+
+	let qrCodeContainer: HTMLDivElement;
+
+	$effect(() => {
+		if (isOpen && qrCodeContainer && typeof window !== 'undefined') {
+			import('qrcode').then(({ default: QRCode }) => {
+				qrCodeContainer.innerHTML = '';
+				QRCode.toCanvas(url, {
+					errorCorrectionLevel: 'H',
+					margin: 2,
+					width: 256,
+					color: {
+						dark: '#000000',
+						light: '#FFFFFF'
+					}
+				}, (error: Error | null | undefined, canvas: HTMLCanvasElement) => {
+					if (error) {
+						console.error('QR Code generation error:', error);
+						return;
+					}
+					if (qrCodeContainer) {
+						qrCodeContainer.appendChild(canvas);
+					}
+				});
+			});
+		}
+	});
+</script>
+
+{#if isOpen}
+	<div
+		style="
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			width: 100vw;
+			height: 100vh;
+			background-color: rgba(0, 0, 0, 0.75);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 1rem;
+			z-index: 9999;
+		"
+		onclick={onClose}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="qr-modal-title"
+	>
+		<div
+			class="relative w-full max-w-md rounded-lg p-8 shadow-2xl"
+			style="background-color: rgb(var(--color-surface)); color: rgb(var(--color-text-primary))"
+			onclick={(e) => e.stopPropagation()}
+			role="document"
+		>
+			<button
+				onclick={onClose}
+				class="absolute right-4 top-4 rounded-lg p-2 transition-colors"
+				style="color: rgb(var(--color-text-secondary)); background-color: transparent;"
+				onmouseenter={(e) => {
+					e.currentTarget.style.backgroundColor = 'rgb(var(--color-surface-elevated))';
+				}}
+				onmouseleave={(e) => {
+					e.currentTarget.style.backgroundColor = 'transparent';
+				}}
+				aria-label="Close modal"
+			>
+				<X size={20} />
+			</button>
+
+			<h2
+				id="qr-modal-title"
+				class="mb-6 text-xl font-semibold"
+				style="color: rgb(var(--color-text-primary))"
+			>
+				QR Code
+			</h2>
+
+			<div class="flex flex-col items-center gap-4">
+				<div
+					bind:this={qrCodeContainer}
+					class="rounded-lg p-4"
+					style="background-color: white;"
+				></div>
+				<p
+					class="max-w-xs break-all text-center text-sm"
+					style="color: rgb(var(--color-text-secondary))"
+				>
+					{url}
+				</p>
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/components/Section.svelte

···
+<script lang="ts">
+	interface Props {
+		title: string;
+		children: import('svelte').Snippet;
+	}
+
+	let { title, children }: Props = $props();
+</script>
+
+<section class="mb-12">
+	<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
+		{title}
+	</h2>
+	{@render children()}
+</section>

src/lib/components/ShortLinkItem.svelte

···
+<script lang="ts">
+	import { Link as LinkIcon, ArrowRight, QrCode } from '@lucide/svelte';
+	import CodeBlock from './CodeBlock.svelte';
+	import CopyButton from './CopyButton.svelte';
+	import QRCodeModal from './QRCodeModal.svelte';
+
+	interface Props {
+		shortcode: string;
+		title: string;
+		emoji?: string;
+	}
+
+	let { shortcode, title, emoji }: Props = $props();
+
+	let isHovered = $state(false);
+	let showQRModal = $state(false);
+
+	// Get the full URL for copying
+	const fullUrl = typeof window !== 'undefined' ? `${window.location.origin}/${shortcode}` : '';
+</script>
+
+<li>
+	<div
+		class="flex items-center gap-3 rounded-lg p-3 transition-all"
+		style="background-color: {isHovered
+			? 'rgb(var(--color-surface-elevated))'
+			: 'rgb(var(--color-surface))'}; color: rgb(var(--color-text-primary))"
+		role="group"
+		onmouseenter={() => (isHovered = true)}
+		onmouseleave={() => (isHovered = false)}
+	>
+		{#if emoji}
+			<span class="shrink-0 text-2xl">{emoji}</span>
+		{:else}
+			<LinkIcon size={20} class="shrink-0" style="color: rgb(var(--color-text-secondary))" />
+		{/if}
+
+		<a href="/{shortcode}" class="flex items-center gap-2 no-underline">
+			<CodeBlock>/{shortcode}</CodeBlock>
+		</a>
+
+		<span class="flex-1" style="color: rgb(var(--color-text-secondary))">{title}</span>
+
+		{#if fullUrl}
+			<button
+				onclick={() => (showQRModal = true)}
+				class="flex items-center gap-1 rounded-lg px-2 py-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+				style="color: rgb(var(--color-text-tertiary))"
+				aria-label="Show QR code"
+				title="Show QR code"
+			>
+				<QrCode size={16} class="shrink-0" />
+			</button>
+
+			<CopyButton text={fullUrl} />
+		{/if}
+
+		<a
+			href="/{shortcode}"
+			class="flex items-center gap-1 no-underline transition-colors"
+			style="color: rgb(var(--color-text-tertiary))"
+		>
+			<ArrowRight
+				size={16}
+				class="shrink-0 transition-transform"
+				style="transform: translateX({isHovered ? '4px' : '0'})"
+			/>
+		</a>
+	</div>
+</li>
+
+<QRCodeModal url={fullUrl} isOpen={showQRModal} onClose={() => (showQRModal = false)} />

src/lib/components/Spinner.svelte

···
+<script lang="ts">
+	import { Loader2 } from '@lucide/svelte';
+
+	interface Props {
+		size?: number;
+		text?: string;
+	}
+
+	let { size = 24, text }: Props = $props();
+</script>
+
+<div class="flex items-center gap-3" style="color: rgb(var(--color-text-secondary))">
+	<Loader2 {size} class="animate-spin" />
+	{#if text}
+		<span>{text}</span>
+	{/if}
+</div>
+
+<style>
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	:global(.animate-spin) {
+		animation: spin 1s linear infinite;
+	}
+</style>

src/lib/components/StatusCard.svelte

···
+<script lang="ts">
+	import { CheckCircle2, AlertCircle } from '@lucide/svelte';
+
+	interface Props {
+		type: 'success' | 'error';
+		children: import('svelte').Snippet;
+	}
+
+	let { type, children }: Props = $props();
+
+	const styles = {
+		success: {
+			bg: 'rgb(var(--color-success-bg))',
+			border: 'rgb(var(--color-success-border))',
+			icon: CheckCircle2
+		},
+		error: {
+			bg: 'rgb(var(--color-error-bg))',
+			border: 'rgb(var(--color-error-border))',
+			icon: AlertCircle
+		}
+	};
+
+	const config = styles[type];
+	const Icon = config.icon;
+</script>
+
+<div
+	class="mb-4 rounded-lg border p-4"
+	style="background-color: {config.bg}; border-color: {config.border}"
+>
+	<div class="flex items-start gap-3">
+		<Icon size={24} class="shrink-0" style="color: rgb(var(--color-text-primary))" />
+		<div class="flex-1">
+			{@render children()}
+		</div>
+	</div>
+</div>

src/lib/components/ThemeToggle.svelte

···
+<script lang="ts">
+	import { Sun, Moon } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+
+	let isDark = $state(false);
+	let mounted = $state(false);
+
+	onMount(() => {
+		// Check initial theme
+		isDark = document.documentElement.classList.contains('dark');
+		mounted = true;
+	});
+
+	function toggleTheme() {
+		isDark = !isDark;
+		if (isDark) {
+			document.documentElement.classList.add('dark');
+			localStorage.setItem('theme', 'dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+			localStorage.setItem('theme', 'light');
+		}
+	}
+</script>
+
+{#if mounted}
+	<button
+		onclick={toggleTheme}
+		class="fixed bottom-6 right-6 rounded-full p-3 shadow-lg transition-all hover:scale-110"
+		style="background-color: rgb(var(--color-surface-elevated)); color: rgb(var(--color-text-primary))"
+		aria-label="Toggle theme"
+	>
+		{#if isDark}
+			<Sun size={20} />
+		{:else}
+			<Moon size={20} />
+		{/if}
+	</button>
+{/if}

src/lib/components/index.ts

···
+export { default as StatusCard } from './StatusCard.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Link } from './Link.svelte';
+export { default as ShortLinkItem } from './ShortLinkItem.svelte';
+export { default as ApiEndpoint } from './ApiEndpoint.svelte';
+export { default as Section } from './Section.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as CopyButton } from './CopyButton.svelte';

src/lib/components/types.ts

···
+/**
+ * Component prop types for the AT Protocol Shortlink application
+ */
+
+import type { Snippet } from 'svelte';
+
+/**
+ * StatusCard component props
+ */
+export interface StatusCardProps {
+	type: 'success' | 'error';
+	children: Snippet;
+}
+
+/**
+ * CodeBlock component props
+ */
+export interface CodeBlockProps {
+	children: Snippet;
+}
+
+/**
+ * Link component props
+ */
+export interface LinkProps {
+	href: string;
+	children: Snippet;
+	external?: boolean;
+}
+
+/**
+ * ShortLinkItem component props
+ */
+export interface ShortLinkItemProps {
+	shortcode: string;
+	title: string;
+	emoji?: string;
+}
+
+/**
+ * ApiEndpoint component props
+ */
+export interface ApiEndpointProps {
+	method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+	path: string;
+	description: string;
+	href?: string;
+}
+
+/**
+ * Section component props
+ */
+export interface SectionProps {
+	title: string;
+	children: Snippet;
+}
+
+/**
+ * Spinner component props
+ */
+export interface SpinnerProps {
+	size?: number;
+	text?: string;
+}
+
+/**
+ * ThemeToggle component has no props
+ */
+export interface ThemeToggleProps {}

src/lib/utils/encoding.ts

···
-import { SHORTCODE } from '$lib/constants';  // Import constants for shortcode configuration
-import { parse, getDomain } from 'tldts';  // Import utility functions for domain parsing
+import { SHORTCODE } from '$lib/constants'; // Import constants for shortcode configuration
+import { parse, getDomain } from 'tldts'; // Import utility functions for domain parsing
 
 // Constants related to the character set for encoding
-const BASE_CHARS = SHORTCODE.CHARS;  // Charset for the shortcode encoding
-const BASE = BASE_CHARS.length;     // Base (the number of unique characters in the charset)
+const BASE_CHARS = SHORTCODE.CHARS; // Charset for the shortcode encoding
+const BASE = BASE_CHARS.length; // Base (the number of unique characters in the charset)
 
 // Hashes a given string into a bigint value
 function hashString(text: string): bigint {
-	let hash = 1469598103934665603n;  // FNV-1a hash initialisation value
+	let hash = 1469598103934665603n; // FNV-1a hash initialisation value
 	for (let i = 0; i < text.length; i++) {
-		const char = BigInt(text.charCodeAt(i));  // Convert each character to a bigint
-		hash = (hash ^ char) * 1099511628211n;   // FNV-1a hashing algorithm
+		const char = BigInt(text.charCodeAt(i)); // Convert each character to a bigint
+		hash = (hash ^ char) * 1099511628211n; // FNV-1a hashing algorithm
 	}
-	return hash < 0n ? -hash : hash;  // Ensure the hash is positive
+	return hash < 0n ? -hash : hash; // Ensure the hash is positive
 }
 
 // Converts a number (bigint) into a base encoded string with a given length
 function toBase(num: bigint, length: number, seed = ''): string {
-	let encoded = '';  // The resulting encoded string
+	let encoded = ''; // The resulting encoded string
 	let n = num;
 	for (let i = 0; i < length; i++) {
 		let rem: bigint;
···
 			const fallback = hashString(num.toString() + '::' + seed + '::' + i.toString());
 			rem = fallback % BigInt(BASE);
 		}
-		encoded = BASE_CHARS[Number(rem)] + encoded;  // Prepend the character for this base value
+		encoded = BASE_CHARS[Number(rem)] + encoded; // Prepend the character for this base value
 	}
 	return encoded;
 }
···
 	try {
 		// Ensure the URL starts with 'https://' and parse it
 		const parsed = new URL(url.startsWith('http') ? url : `https://${url}`);
-		parsed.hash = '';  // Remove hash fragment
+		parsed.hash = ''; // Remove hash fragment
 
 		// Sort URL query parameters alphabetically
 		const sortedParams = [...parsed.searchParams.entries()].sort((a, b) =>
 			a[0].localeCompare(b[0])
 		);
-		parsed.search = '';  // Clear existing search parameters
-		for (const [key, value] of sortedParams) parsed.searchParams.append(key, value);  // Rebuild query string
+		parsed.search = ''; // Clear existing search parameters
+		for (const [key, value] of sortedParams) parsed.searchParams.append(key, value); // Rebuild query string
 
-		parsed.hostname = parsed.hostname.toLowerCase();  // Convert hostname to lowercase
-		parsed.protocol = 'https:';  // Ensure HTTPS protocol is used
-		return parsed.toString();  // Return the normalised URL as a string
+		parsed.hostname = parsed.hostname.toLowerCase(); // Convert hostname to lowercase
+		parsed.protocol = 'https:'; // Ensure HTTPS protocol is used
+		return parsed.toString(); // Return the normalised URL as a string
 	} catch (e) {
 		// If URL parsing fails, return the original URL (trimmed)
 		return url.trim();
···
 	// Validate and adjust the length of the shortcode
 	if (!Number.isInteger(length) || length < 3) length = SHORTCODE.DEFAULT_LENGTH;
 
-	const DOMAIN_PREFIX_LENGTH = 2;  // Number of characters used for the domain prefix
+	const DOMAIN_PREFIX_LENGTH = 2; // Number of characters used for the domain prefix
 
 	// Normalise the URL and extract the base domain
 	const normalised = normaliseUrl(url);
···
 	// Calculate the remaining length for the URL core and tail
 	const remaining = Math.max(1, length - DOMAIN_PREFIX_LENGTH);
 
-	let hostname = '';  // The hostname portion of the URL
+	let hostname = ''; // The hostname portion of the URL
 	try {
-		hostname = new URL(normalised).hostname.toLowerCase();  // Try to extract hostname from normalised URL
+		hostname = new URL(normalised).hostname.toLowerCase(); // Try to extract hostname from normalised URL
 	} catch (e) {
 		// Fallback if URL parsing fails
 		try {
 			hostname = new URL(url.startsWith('http') ? url : `https://${url}`).hostname.toLowerCase();
 		} catch {
-			hostname = '';  // If both parsing attempts fail, leave hostname empty
+			hostname = ''; // If both parsing attempts fail, leave hostname empty
 		}
 	}
 
 	let subLevels: string[] = [];
 	// If there is a subdomain, split it into separate levels
 	if (apex && hostname && hostname !== apex) {
-		const sub = hostname.replace(new RegExp(`\.${apex}$`), '');  // Remove the apex domain
-		subLevels = sub.split('.');  // Split subdomains by '.'
+		const sub = hostname.replace(new RegExp(`\.${apex}$`), ''); // Remove the apex domain
+		subLevels = sub.split('.'); // Split subdomains by '.'
 	}
 
 	// URL core length is determined based on the remaining space after the domain prefix
 	const MIN_URL_CORE = 1;
 	const MIN_TAIL = 1;
-	const tailLength = remaining;  // Length allocated to the tail portion of the shortcode
+	const tailLength = remaining; // Length allocated to the tail portion of the shortcode
 
 	// Hash the normalised URL for the URL core portion of the shortcode
 	const urlHash = hashString(normalised + '::url');
-	const urlCoreLength = remaining - subLevels.length;  // Account for subdomain levels
+	const urlCoreLength = remaining - subLevels.length; // Account for subdomain levels
 	const urlCore = toBase(urlHash, Math.max(MIN_URL_CORE, urlCoreLength), 'url');
 
 	// Generate subdomain-based tail (if applicable)
 	const subTail: string[] = [];
-	const reversedSubLevels = subLevels.slice().reverse();  // Reverse the subdomain levels for encoding
+	const reversedSubLevels = subLevels.slice().reverse(); // Reverse the subdomain levels for encoding
 	for (let i = 0; i < reversedSubLevels.length; i++) {
-		const h = hashString(reversedSubLevels[i] + '::sub');  // Hash the subdomain level
-		subTail.push(toBase(h, 1, 'sub' + i));  // Add to subTail
+		const h = hashString(reversedSubLevels[i] + '::sub'); // Hash the subdomain level
+		subTail.push(toBase(h, 1, 'sub' + i)); // Add to subTail
 	}
 
 	// If no subdomain tail is generated, use a fallback hash for the tail
···
 
 	// Combine domain prefix, URL core, and tail to form the final shortcode
 	let out = domainPrefix + urlCore + tail;
-	if (out.length > length) out = out.slice(0, length);  // Trim to the desired length
+	if (out.length > length) out = out.slice(0, length); // Trim to the desired length
 	if (out.length < length) {
 		// Pad the shortcode if it is too short
 		let pad = '';
···
 			pad += toBase(h, Math.min(4, length - out.length - pad.length), 'pad2' + i);
 			i++;
 		}
-		out += pad.slice(0, length - out.length);  // Append padding to reach the correct length
+		out += pad.slice(0, length - out.length); // Append padding to reach the correct length
 	}
 
 	// --- LOGGING MAX COMBINATIONS --- (for debugging purposes)
-	const maxCombinations = BigInt(BASE) ** BigInt(length);  // Calculate the max possible combinations for the shortcode
+	const maxCombinations = BigInt(BASE) ** BigInt(length); // Calculate the max possible combinations for the shortcode
 	console.log(`[Shortcode Info] URL: ${url}`);
 	console.log(`[Shortcode Info] Length: ${length}, Charset: ${BASE} chars`);
 	console.log(`[Shortcode Info] Max possible combinations: ${maxCombinations.toString()}`);
···
 		`[Shortcode Info] Domain prefix: ${domainPrefix}, URL core: ${urlCore}, Subdomain tail: ${tail}`
 	);
 
-	return out;  // Return the final encoded shortcode
+	return out; // Return the final encoded shortcode
 }
 
 // Function to validate if a given shortcode is valid (contains only alphanumeric characters)
···
 
 // Function to calculate the maximum number of possible combinations for a shortcode of a given length
 export function getMaxCombinations(length: number): number {
-	return Math.pow(BASE, length);  // BASE raised to the power of length
+	return Math.pow(BASE, length); // BASE raised to the power of length
 }

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
+	import { ThemeToggle } from '$lib/components';
 
 	let { children } = $props();
 </script>
···
 	<script>
 		// Prevent flash of unstyled content (FOUC) by applying theme before page renders
 		(function () {
+			const stored = localStorage.getItem('theme');
 			const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 			const htmlElement = document.documentElement;
 
-			if (prefersDark) {
+			// Use stored theme if available, otherwise use system preference
+			const shouldBeDark = stored === 'dark' || (!stored && prefersDark);
+
+			if (shouldBeDark) {
 				htmlElement.classList.add('dark');
 			} else {
 				htmlElement.classList.remove('dark');
···
 	style="min-height: 100vh; background-color: rgb(var(--color-background)); color: rgb(var(--color-text-primary))"
 >
 	{@render children()}
+	<ThemeToggle />
 </div>

src/routes/+page.svelte

···
 <script lang="ts">
+	import { Github, Link as LinkIcon } from '@lucide/svelte';
+	import {
+		StatusCard,
+		CodeBlock,
+		Link,
+		ShortLinkItem,
+		ApiEndpoint,
+		Section
+	} from '$lib/components';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
···
 </svelte:head>
 
 <main class="mx-auto max-w-3xl px-4 py-8 font-sans leading-relaxed">
-	<h1 class="mb-8 text-3xl font-bold" style="color: rgb(var(--color-text-primary))">
-		AT Protocol Link Shortener
-	</h1>
+	<header class="mb-8">
+		<h1 class="mb-2 text-3xl font-bold" style="color: rgb(var(--color-text-primary))">
+			AT Protocol Link Shortener
+		</h1>
+		<p style="color: rgb(var(--color-text-secondary))">
+			A self-hosted link shortening service powered by Linkat and AT Protocol
+		</p>
+	</header>
 
-	<section class="mb-12">
-		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
-			Service Status
-		</h2>
+	<Section title="Service Status">
 		{#if data.error}
-			<div
-				class="mb-4 rounded-lg border p-4"
-				style="background-color: rgb(var(--color-error-bg)); border-color: rgb(var(--color-error-border))"
-			>
-				<p class="font-bold" style="color: rgb(var(--color-text-primary))">
-					⚠️ Configuration Error
+			<StatusCard type="error">
+				<p class="mb-2 font-bold" style="color: rgb(var(--color-text-primary))">
+					Configuration Error
 				</p>
-				<p style="color: rgb(var(--color-text-primary))">{data.error}</p>
+				<p class="mb-2" style="color: rgb(var(--color-text-primary))">{data.error}</p>
+
 				{#if data.did === 'NOT_CONFIGURED'}
 					<div class="mt-4 border-t pt-4" style="border-color: rgb(var(--color-error-border))">
-						<p class="font-bold" style="color: rgb(var(--color-text-primary))">Quick Fix:</p>
-						<ol
-							class="ml-6 mt-2 list-decimal space-y-2 leading-8"
-							style="color: rgb(var(--color-text-primary))"
-						>
+						<p class="mb-3 font-bold" style="color: rgb(var(--color-text-primary))">Quick Fix:</p>
+						<ol class="ml-6 space-y-2" style="color: rgb(var(--color-text-primary))">
 							<li>
-								Create a <code
-									class="rounded px-2 py-1 font-mono text-sm"
-									style="background-color: rgb(var(--color-code-bg))">. env</code
-								> file in your project root
+								Create a <CodeBlock>.env</CodeBlock> file in your project root
 							</li>
 							<li>
-								Add: <code
-									class="rounded px-2 py-1 font-mono text-sm"
-									style="background-color: rgb(var(--color-code-bg))"
-									>ATPROTO_DID=did:plc:your-did-here</code
-								>
+								Add: <CodeBlock>ATPROTO_DID=did:plc:your-did-here</CodeBlock>
 							</li>
 							<li>
-								Find your DID at <a
-									href="https://pdsls.dev/"
-									target="_blank"
-									class="underline"
-									style="color: rgb(var(--color-error))">pdsls.dev</a
-								>
+								Find your DID at <Link href="https://pdsls.dev/" external>pdsls.dev</Link>
 							</li>
 							<li>
-								Run <code
-									class="rounded px-2 py-1 font-mono text-sm"
-									style="background-color: rgb(var(--color-code-bg))">npm run test:config</code
-								> to verify
+								Run <CodeBlock>npm run test:config</CodeBlock> to verify
 							</li>
 							<li>Restart the server</li>
 						</ol>
 					</div>
 				{/if}
-			</div>
+			</StatusCard>
 		{:else}
-			<div
-				class="mb-4 rounded-lg border p-4"
-				style="background-color: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border))"
-			>
-				<p style="color: rgb(var(--color-text-primary))">✓ Service is running</p>
-				<p style="color: rgb(var(--color-text-primary))">
-					✓ Configured DID: <code
-						class="rounded px-2 py-1 font-mono text-sm"
-						style="background-color: rgb(var(--color-code-bg))">{data.did}</code
-					>
-				</p>
-				<p style="color: rgb(var(--color-text-primary))">✓ Active links: {data.linkCount}</p>
-			</div>
+			<StatusCard type="success">
+				<div class="space-y-1" style="color: rgb(var(--color-text-primary))">
+					<p>Service is running</p>
+					<p class="flex items-center gap-2">
+						Configured DID: <CodeBlock>{data.did}</CodeBlock>
+					</p>
+					<p>Active links: {data.linkCount}</p>
+				</div>
+			</StatusCard>
 		{/if}
-	</section>
+	</Section>
 
-	<section class="mb-12">
-		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
-			Available Short Links
-		</h2>
+	<Section title="Available Short Links">
 		{#if data.links && data.links.length > 0}
-			<ul class="m-0 list-none p-0">
+			<ul class="m-0 space-y-2 list-none p-0">
 				{#each data.links as link}
-					<li class="mb-2">
-						<a
-							href="/{link.shortcode}"
-							class="flex items-center gap-3 rounded-lg p-3 no-underline transition-colors"
-							style="background-color: rgb(var(--color-surface)); color: rgb(var(--color-text-primary))"
-							onmouseenter={(e) => {
-								e.currentTarget.style.backgroundColor = `rgb(var(--color-surface-elevated))`;
-							}}
-							onmouseleave={(e) => {
-								e.currentTarget.style.backgroundColor = `rgb(var(--color-surface))`;
-							}}
-						>
-							{#if link.emoji}
-								<span class="shrink-0 text-2xl">{link.emoji}</span>
-							{/if}
-							<code
-								class="rounded px-2 py-1 font-mono text-sm"
-								style="background-color: rgb(var(--color-code-bg))">/{link.shortcode}</code
-							>
-							<span style="color: rgb(var(--color-text-secondary))">{link.title}</span>
-						</a>
-					</li>
+					<ShortLinkItem shortcode={link.shortcode} title={link.title} emoji={link.emoji} />
 				{/each}
 			</ul>
 		{:else if !data.error}
-			<p class="italic" style="color: rgb(var(--color-text-secondary))">
-				No short links configured yet. Add links to your <a
-					href="https://linkat.blue"
-					target="_blank"
-					class="no-underline hover:underline"
-					style="color: rgb(var(--color-primary))"
-					onmouseenter={(e) => {
-						e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
-					}}
-					onmouseleave={(e) => {
-						e.currentTarget.style.color = `rgb(var(--color-primary))`;
-					}}>Linkat board</a
-				>!
-			</p>
+			<div
+				class="rounded-lg border p-6 text-center"
+				style="background-color: rgb(var(--color-surface)); border-color: rgb(var(--color-border))"
+			>
+				<LinkIcon size={48} class="mx-auto mb-4" style="color: rgb(var(--color-text-tertiary))" />
+				<p class="mb-2" style="color: rgb(var(--color-text-primary))">
+					No short links configured yet
+				</p>
+				<p style="color: rgb(var(--color-text-secondary))">
+					Add links to your <Link href="https://linkat.blue" external>Linkat board</Link> to get started!
+				</p>
+			</div>
 		{/if}
-	</section>
+	</Section>
 
-	<section class="mb-12">
-		<h2 class="mb-4 mt-8 text-2xl font-semibold" style="color: rgb(var(--color-text-primary))">
-			API Endpoints
-		</h2>
-		<ul class="m-0 list-none p-0">
-			<li class="mb-3 rounded-lg p-3" style="background-color: rgb(var(--color-surface))">
-				<a
-					href="/api/links"
-					class="flex items-center gap-4 no-underline hover:underline"
-					style="color: rgb(var(--color-text-primary))"
-				>
-					<code
-						class="rounded px-2 py-1 font-mono text-sm"
-						style="background-color: rgb(var(--color-code-bg))">GET /api/links</code
-					>
-					<span style="color: rgb(var(--color-text-secondary))">List all short links (JSON)</span>
-				</a>
-			</li>
-			<li class="mb-3 rounded-lg p-3" style="background-color: rgb(var(--color-surface))">
-				<div class="flex items-center gap-4" style="color: rgb(var(--color-text-primary))">
-					<code
-						class="rounded px-2 py-1 font-mono text-sm"
-						style="background-color: rgb(var(--color-code-bg))">GET /:shortcode</code
-					>
-					<span style="color: rgb(var(--color-text-secondary))">Redirect to target URL (301)</span>
-				</div>
-			</li>
+	<Section title="API Endpoints">
+		<ul class="m-0 space-y-3 list-none p-0">
+			<ApiEndpoint
+				method="GET"
+				path="/api/links"
+				description="List all short links (JSON)"
+				href="/api/links"
+			/>
+			<ApiEndpoint method="GET" path="/:shortcode" description="Redirect to target URL (301)" />
 		</ul>
-	</section>
+	</Section>
 
 	<footer
-		class="mt-16 border-t pt-8 text-center text-sm"
+		class="mt-16 border-t pt-8 space-y-4 text-center text-sm"
 		style="border-color: rgb(var(--color-border)); color: rgb(var(--color-text-secondary))"
 	>
-		<p class="mb-2">
-			Powered by <a
-				href="https://linkat.blue"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="no-underline hover:underline"
-				style="color: rgb(var(--color-primary))"
-				onmouseenter={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
-				}}
-				onmouseleave={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary))`;
-				}}>Linkat</a
-			>,
-			<a
-				href="https://atproto.com"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="no-underline hover:underline"
-				style="color: rgb(var(--color-primary))"
-				onmouseenter={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
-				}}
-				onmouseleave={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary))`;
-				}}>AT Protocol</a
-			>, and
-			<a
-				href="https://slingshot.microcosm.blue"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="no-underline hover:underline"
-				style="color: rgb(var(--color-primary))"
-				onmouseenter={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
-				}}
-				onmouseleave={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary))`;
-				}}>Slingshot</a
-			>
+		<p>
+			Powered by
+			<Link href="https://linkat.blue" external>Linkat</Link>,
+			<Link href="https://atproto.com" external>AT Protocol</Link>, and
+			<Link href="https://slingshot.microcosm.blue" external>Slingshot</Link>
 		</p>
 		<p>
-			<a
-				href="https://github.com/ewanc26/atproto-shortlink"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="no-underline hover:underline"
-				style="color: rgb(var(--color-primary))"
-				onmouseenter={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary-hover))`;
-				}}
-				onmouseleave={(e) => {
-					e.currentTarget.style.color = `rgb(var(--color-primary))`;
-				}}>Source Code on GitHub</a
-			>
+			<Link href="https://github.com/ewanc26/atproto-shortlink" external>
+				<Github size={14} />
+				Source Code on GitHub
+			</Link>
 		</p>
 	</footer>
 </main>