attempt with turso: still fails

bun.lock

@@ -4,19 +4,23 @@
   "workspaces": {
     "": {
       "name": "amqtrain",
+      "dependencies": {
+        "@libsql/client": "^0.17.0",
+      },
       "devDependencies": {
         "@biomejs/biome": "^2.3.14",
         "@internationalized/date": "^3.10.0",
         "@lucide/svelte": "^0.561.0",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/adapter-cloudflare": "^7.2.6",
+        "@sveltejs/adapter-node": "^5.5.2",
         "@sveltejs/kit": "^2.50.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.4",
         "@tailwindcss/vite": "^4.1.18",
         "@types/node": "^25.2.0",
-        "better-sqlite3": "^12.6.2",
         "bits-ui": "^2.14.4",
         "clsx": "^2.1.1",
+        "dotenv": "^17.2.4",
         "drizzle-kit": "^0.31.8",
         "drizzle-orm": "^0.45.1",
         "lefthook": "^2.1.0",
@@ -29,7 +33,6 @@
         "tailwindcss": "^4.1.18",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5.9.3",
-        "vaul-svelte": "^1.0.0-next.7",
         "vite": "^7.3.1",
         "wrangler": "^4.62.0",
         "zod": "^4.3.6",
@@ -204,8 +207,36 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@libsql/client": ["@libsql/client@0.17.0", "", { "dependencies": { "@libsql/core": "^0.17.0", "@libsql/hrana-client": "^0.9.0", "js-base64": "^3.7.5", "libsql": "^0.5.22", "promise-limit": "^2.7.0" } }, "sha512-TLjSU9Otdpq0SpKHl1tD1Nc9MKhrsZbCFGot3EbCxRa8m1E5R1mMwoOjKMMM31IyF7fr+hPNHLpYfwbMKNusmg=="],
+
+    "@libsql/core": ["@libsql/core@0.17.0", "", { "dependencies": { "js-base64": "^3.7.5" } }, "sha512-hnZRnJHiS+nrhHKLGYPoJbc78FE903MSDrFJTbftxo+e52X+E0Y0fHOCVYsKWcg6XgB7BbJYUrz/xEkVTSaipw=="],
+
+    "@libsql/darwin-arm64": ["@libsql/darwin-arm64@0.5.22", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4B8ZlX3nIDPndfct7GNe0nI3Yw6ibocEicWdC4fvQbSs/jdq/RC2oCsoJxJ4NzXkvktX70C1J4FcmmoBy069UA=="],
+
+    "@libsql/darwin-x64": ["@libsql/darwin-x64@0.5.22", "", { "os": "darwin", "cpu": "x64" }, "sha512-ny2HYWt6lFSIdNFzUFIJ04uiW6finXfMNJ7wypkAD8Pqdm6nAByO+Fdqu8t7sD0sqJGeUCiOg480icjyQ2/8VA=="],
+
+    "@libsql/hrana-client": ["@libsql/hrana-client@0.9.0", "", { "dependencies": { "@libsql/isomorphic-ws": "^0.1.5", "cross-fetch": "^4.0.0", "js-base64": "^3.7.5", "node-fetch": "^3.3.2" } }, "sha512-pxQ1986AuWfPX4oXzBvLwBnfgKDE5OMhAdR/5cZmRaB4Ygz5MecQybvwZupnRz341r2CtFmbk/BhSu7k2Lm+Jw=="],
+
+    "@libsql/isomorphic-ws": ["@libsql/isomorphic-ws@0.1.5", "", { "dependencies": { "@types/ws": "^8.5.4", "ws": "^8.13.0" } }, "sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg=="],
+
+    "@libsql/linux-arm-gnueabihf": ["@libsql/linux-arm-gnueabihf@0.5.22", "", { "os": "linux", "cpu": "arm" }, "sha512-3Uo3SoDPJe/zBnyZKosziRGtszXaEtv57raWrZIahtQDsjxBVjuzYQinCm9LRCJCUT5t2r5Z5nLDPJi2CwZVoA=="],
+
+    "@libsql/linux-arm-musleabihf": ["@libsql/linux-arm-musleabihf@0.5.22", "", { "os": "linux", "cpu": "arm" }, "sha512-LCsXh07jvSojTNJptT9CowOzwITznD+YFGGW+1XxUr7fS+7/ydUrpDfsMX7UqTqjm7xG17eq86VkWJgHJfvpNg=="],
+
+    "@libsql/linux-arm64-gnu": ["@libsql/linux-arm64-gnu@0.5.22", "", { "os": "linux", "cpu": "arm64" }, "sha512-KSdnOMy88c9mpOFKUEzPskSaF3VLflfSUCBwas/pn1/sV3pEhtMF6H8VUCd2rsedwoukeeCSEONqX7LLnQwRMA=="],
+
+    "@libsql/linux-arm64-musl": ["@libsql/linux-arm64-musl@0.5.22", "", { "os": "linux", "cpu": "arm64" }, "sha512-mCHSMAsDTLK5YH//lcV3eFEgiR23Ym0U9oEvgZA0667gqRZg/2px+7LshDvErEKv2XZ8ixzw3p1IrBzLQHGSsw=="],
+
+    "@libsql/linux-x64-gnu": ["@libsql/linux-x64-gnu@0.5.22", "", { "os": "linux", "cpu": "x64" }, "sha512-kNBHaIkSg78Y4BqAdgjcR2mBilZXs4HYkAmi58J+4GRwDQZh5fIUWbnQvB9f95DkWUIGVeenqLRFY2pcTmlsew=="],
+
+    "@libsql/linux-x64-musl": ["@libsql/linux-x64-musl@0.5.22", "", { "os": "linux", "cpu": "x64" }, "sha512-UZ4Xdxm4pu3pQXjvfJiyCzZop/9j/eA2JjmhMaAhe3EVLH2g11Fy4fwyUp9sT1QJYR1kpc2JLuybPM0kuXv/Tg=="],
+
+    "@libsql/win32-x64-msvc": ["@libsql/win32-x64-msvc@0.5.22", "", { "os": "win32", "cpu": "x64" }, "sha512-Fj0j8RnBpo43tVZUVoNK6BV/9AtDUM5S7DF3LB4qTYg1LMSZqi3yeCneUTLJD6XomQJlZzbI4mst89yspVSAnA=="],
+
     "@lucide/svelte": ["@lucide/svelte@0.561.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-vofKV2UFVrKE6I4ewKJ3dfCXSV6iP6nWVmiM83MLjsU91EeJcEg7LoWUABLp/aOTxj1HQNbJD1f3g3L0JQgH9A=="],
 
+    "@neon-rs/load": ["@neon-rs/load@0.0.4", "", {}, "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw=="],
+
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
     "@poppinss/colors": ["@poppinss/colors@4.1.6", "", { "dependencies": { "kleur": "^4.1.5" } }, "sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg=="],
@@ -214,6 +245,14 @@
 
     "@poppinss/exception": ["@poppinss/exception@1.2.3", "", {}, "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw=="],
 
+    "@rollup/plugin-commonjs": ["@rollup/plugin-commonjs@28.0.9", "", { "dependencies": { "@rollup/pluginutils": "^5.0.1", "commondir": "^1.0.1", "estree-walker": "^2.0.2", "fdir": "^6.2.0", "is-reference": "1.2.1", "magic-string": "^0.30.3", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^2.68.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA=="],
+
+    "@rollup/plugin-json": ["@rollup/plugin-json@6.1.0", "", { "dependencies": { "@rollup/pluginutils": "^5.1.0" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA=="],
+
+    "@rollup/plugin-node-resolve": ["@rollup/plugin-node-resolve@16.0.3", "", { "dependencies": { "@rollup/pluginutils": "^5.0.1", "@types/resolve": "1.20.2", "deepmerge": "^4.2.2", "is-module": "^1.0.0", "resolve": "^1.22.1" }, "peerDependencies": { "rollup": "^2.78.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg=="],
+
+    "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.57.1", "", { "os": "android", "cpu": "arm" }, "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.57.1", "", { "os": "android", "cpu": "arm64" }, "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w=="],
@@ -278,6 +317,8 @@
 
     "@sveltejs/adapter-cloudflare": ["@sveltejs/adapter-cloudflare@7.2.6", "", { "dependencies": { "@cloudflare/workers-types": "^4.20250507.0", "worktop": "0.8.0-next.18" }, "peerDependencies": { "@sveltejs/kit": "^2.0.0", "wrangler": "^4.0.0" } }, "sha512-PmaWW6EdMue8s24bUwa9EMsnjMaCS1HroM8HwlvwSxO8Cq5LldAxnnaUS5cnJ3RdVRorJZtL71eMTs+wbuXHgw=="],
 
+    "@sveltejs/adapter-node": ["@sveltejs/adapter-node@5.5.2", "", { "dependencies": { "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.0", "rollup": "^4.9.5" }, "peerDependencies": { "@sveltejs/kit": "^2.4.0" } }, "sha512-L15Djwpr7HrSAPj/Z8PYfc0pa9A1tllrr18phKI0WJHJeoWw45yinPf0IGgVTmakqx1B3JQ+C/OFl9ZwmxHU1Q=="],
+
     "@sveltejs/kit": ["@sveltejs/kit@2.50.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.6.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^3.0.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.3.3", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api", "typescript"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-875hTUkEbz+MyJIxWbQjfMaekqdmEKUUfR7JyKcpfMRZqcGyrO9Gd+iS1D/Dx8LpE5FEtutWGOtlAh4ReSAiOA=="],
 
     "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="],
@@ -322,6 +363,10 @@
 
     "@types/node": ["@types/node@25.2.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w=="],
 
+    "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
+
+    "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
+
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
     "@ungap/with-resolvers": ["@ungap/with-resolvers@0.1.0", "", {}, "sha512-g7f0IkJdPW2xhY7H4iE72DAsIyfuwEFc6JWc2tYFwKDMWWAF699vGjrM348cwQuOXgHpe1gWFe+Eiyjx/ewvvw=="],
@@ -358,8 +403,14 @@
 
     "coincident": ["coincident@1.2.3", "", { "dependencies": { "@ungap/structured-clone": "^1.2.0", "@ungap/with-resolvers": "^0.1.0", "gc-hook": "^0.3.1", "proxy-target": "^3.0.2" }, "optionalDependencies": { "ws": "^8.16.0" } }, "sha512-Uxz3BMTWIslzeWjuQnizGWVg0j6khbvHUQ8+5BdM7WuJEm4ALXwq3wluYoB+uF68uPBz/oUOeJnYURKyfjexlA=="],
 
+    "commondir": ["commondir@1.0.1", "", {}, "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="],
+
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
+    "cross-fetch": ["cross-fetch@4.1.0", "", { "dependencies": { "node-fetch": "^2.7.0" } }, "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw=="],
+
+    "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -374,6 +425,8 @@
 
     "devalue": ["devalue@5.6.2", "", {}, "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg=="],
 
+    "dotenv": ["dotenv@17.2.4", "", {}, "sha512-mudtfb4zRB4bVvdj0xRo+e6duH1csJRM8IukBqfTRvHotn9+LBXB8ynAidP9zHqoRC/fsllXgk4kCKlR21fIhw=="],
+
     "drizzle-kit": ["drizzle-kit@0.31.8", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.25.4", "esbuild-register": "^3.5.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-O9EC/miwdnRDY10qRxM8P3Pg8hXe3LyU4ZipReKOgTwn4OqANmftj8XJz1UPUAS6NMHf0E2htjsbQujUTkncCg=="],
 
     "drizzle-orm": ["drizzle-orm@0.45.1", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1.13", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@upstash/redis": ">=1.34.7", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@upstash/redis", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-Te0FOdKIistGNPMq2jscdqngBRfBpC8uMFVwqjf6gtTVJHIQ/dosgV/CLBU2N4ZJBsXL5savCba9b0YJskKdcA=="],
@@ -392,16 +445,24 @@
 
     "esrap": ["esrap@2.2.2", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-zA6497ha+qKvoWIK+WM9NAh5ni17sKZKhbS5B3PoYbBvaYHZWoS33zmFybmyqpn07RLUxSmn+RCls2/XF+d0oQ=="],
 
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
     "expand-template": ["expand-template@2.0.3", "", {}, "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fetch-blob": ["fetch-blob@3.2.0", "", { "dependencies": { "node-domexception": "^1.0.0", "web-streams-polyfill": "^3.0.3" } }, "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ=="],
+
     "file-uri-to-path": ["file-uri-to-path@1.0.0", "", {}, "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="],
 
+    "formdata-polyfill": ["formdata-polyfill@4.0.10", "", { "dependencies": { "fetch-blob": "^3.1.2" } }, "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g=="],
+
     "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
+
     "gc-hook": ["gc-hook@0.3.1", "", {}, "sha512-E5M+O/h2o7eZzGhzRZGex6hbB3k4NWqO0eA+OzLRLXxhdbYPajZnynPwAtphnh+cRHPwsj5Z80dqZlfI4eK55A=="],
 
     "get-tsconfig": ["get-tsconfig@4.13.1", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-EoY1N2xCn44xU6750Sx7OjOIT59FkmstNc3X6y5xpz7D5cBtZRe/3pSlTkDJgqsOk3WwZPkWfonhhUJfttQo3w=="],
@@ -410,6 +471,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
+
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
@@ -418,10 +481,16 @@
 
     "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
 
+    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
+
+    "is-module": ["is-module@1.0.0", "", {}, "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="],
+
     "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
 
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
+    "js-base64": ["js-base64@3.7.8", "", {}, "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow=="],
+
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
 
     "lefthook": ["lefthook@2.1.0", "", { "optionalDependencies": { "lefthook-darwin-arm64": "2.1.0", "lefthook-darwin-x64": "2.1.0", "lefthook-freebsd-arm64": "2.1.0", "lefthook-freebsd-x64": "2.1.0", "lefthook-linux-arm64": "2.1.0", "lefthook-linux-x64": "2.1.0", "lefthook-openbsd-arm64": "2.1.0", "lefthook-openbsd-x64": "2.1.0", "lefthook-windows-arm64": "2.1.0", "lefthook-windows-x64": "2.1.0" }, "bin": { "lefthook": "bin/index.js" } }, "sha512-+vS+yywGQW6CN1J1hbGkez//6ixGHIQqfxDN/d3JDm531w9GfGt2lAWTDfZTw/CEl80XsN0raFcnEraR3ldw9g=="],
@@ -446,6 +515,8 @@
 
     "lefthook-windows-x64": ["lefthook-windows-x64@2.1.0", "", { "os": "win32", "cpu": "x64" }, "sha512-XbO/5nAZQLpUn0tPpgCYfFBFJHnymSglQ73jD6wymNrR1j8I5EcXGlP6YcLhnZ83yzsdLC+gup+N6IqUeiyRdw=="],
 
+    "libsql": ["libsql@0.5.22", "", { "dependencies": { "@neon-rs/load": "^0.0.4", "detect-libc": "2.0.2" }, "optionalDependencies": { "@libsql/darwin-arm64": "0.5.22", "@libsql/darwin-x64": "0.5.22", "@libsql/linux-arm-gnueabihf": "0.5.22", "@libsql/linux-arm-musleabihf": "0.5.22", "@libsql/linux-arm64-gnu": "0.5.22", "@libsql/linux-arm64-musl": "0.5.22", "@libsql/linux-x64-gnu": "0.5.22", "@libsql/linux-x64-musl": "0.5.22", "@libsql/win32-x64-msvc": "0.5.22" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "arm", "x64", "arm64", ] }, "sha512-NscWthMQt7fpU8lqd7LXMvT9pi+KhhmTHAJWUB/Lj6MWa0MKFv0F2V4C6WKKpjCVZl0VwcDz4nOI3CyaT1DDiA=="],
+
     "lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
@@ -496,10 +567,16 @@
 
     "node-abi": ["node-abi@3.87.0", "", { "dependencies": { "semver": "^7.3.5" } }, "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ=="],
 
+    "node-domexception": ["node-domexception@1.0.0", "", {}, "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="],
+
+    "node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
+
     "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
+    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
+
     "path-to-regexp": ["path-to-regexp@6.3.0", "", {}, "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="],
 
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
@@ -512,6 +589,8 @@
 
     "prebuild-install": ["prebuild-install@7.1.3", "", { "dependencies": { "detect-libc": "^2.0.0", "expand-template": "^2.0.3", "github-from-package": "0.0.0", "minimist": "^1.2.3", "mkdirp-classic": "^0.5.3", "napi-build-utils": "^2.0.0", "node-abi": "^3.3.0", "pump": "^3.0.0", "rc": "^1.2.7", "simple-get": "^4.0.0", "tar-fs": "^2.0.0", "tunnel-agent": "^0.6.0" }, "bin": { "prebuild-install": "bin.js" } }, "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug=="],
 
+    "promise-limit": ["promise-limit@2.7.0", "", {}, "sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw=="],
+
     "proxy-target": ["proxy-target@3.0.2", "", {}, "sha512-FFE1XNwXX/FNC3/P8HiKaJSy/Qk68RitG/QEcLy/bVnTAPlgTAWPZKh0pARLAnpfXQPKyalBhk009NRTgsk8vQ=="],
 
     "pump": ["pump@3.0.3", "", { "dependencies": { "end-of-stream": "^1.1.0", "once": "^1.3.1" } }, "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA=="],
@@ -524,6 +603,8 @@
 
     "regexparam": ["regexparam@3.0.0", "", {}, "sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q=="],
 
+    "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
+
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
     "rollup": ["rollup@4.57.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.57.1", "@rollup/rollup-android-arm64": "4.57.1", "@rollup/rollup-darwin-arm64": "4.57.1", "@rollup/rollup-darwin-x64": "4.57.1", "@rollup/rollup-freebsd-arm64": "4.57.1", "@rollup/rollup-freebsd-x64": "4.57.1", "@rollup/rollup-linux-arm-gnueabihf": "4.57.1", "@rollup/rollup-linux-arm-musleabihf": "4.57.1", "@rollup/rollup-linux-arm64-gnu": "4.57.1", "@rollup/rollup-linux-arm64-musl": "4.57.1", "@rollup/rollup-linux-loong64-gnu": "4.57.1", "@rollup/rollup-linux-loong64-musl": "4.57.1", "@rollup/rollup-linux-ppc64-gnu": "4.57.1", "@rollup/rollup-linux-ppc64-musl": "4.57.1", "@rollup/rollup-linux-riscv64-gnu": "4.57.1", "@rollup/rollup-linux-riscv64-musl": "4.57.1", "@rollup/rollup-linux-s390x-gnu": "4.57.1", "@rollup/rollup-linux-x64-gnu": "4.57.1", "@rollup/rollup-linux-x64-musl": "4.57.1", "@rollup/rollup-openbsd-x64": "4.57.1", "@rollup/rollup-openharmony-arm64": "4.57.1", "@rollup/rollup-win32-arm64-msvc": "4.57.1", "@rollup/rollup-win32-ia32-msvc": "4.57.1", "@rollup/rollup-win32-x64-gnu": "4.57.1", "@rollup/rollup-win32-x64-msvc": "4.57.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A=="],
@@ -562,6 +643,8 @@
 
     "supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
 
+    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
+
     "svelte": ["svelte@5.49.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.6.2", "esm-env": "^1.2.1", "esrap": "^2.2.2", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-PYLwnngYzyhKzqDlGVlCH4z+NVI8mC0/bTv15vw25CcdOhxENsOHIbQ36oj5DIf3oBazM+STbCAvaskpxtBmWA=="],
 
     "svelte-check": ["svelte-check@4.3.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-uBkz96ElE3G4pt9E1Tw0xvBfIUQkeH794kDQZdAUk795UVMr+NJZpuFSS62vcmO/DuSalK83LyOwhgWq8YGU1Q=="],
@@ -586,6 +669,8 @@
 
     "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
 
+    "tr46": ["tr46@0.0.3", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],
+
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "tunnel-agent": ["tunnel-agent@0.6.0", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w=="],
@@ -602,12 +687,16 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
-    "vaul-svelte": ["vaul-svelte@1.0.0-next.7", "", { "dependencies": { "runed": "^0.23.2", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-7zN7Bi3dFQixvvbUJY9uGDe7Ws/dGZeBQR2pXdXmzQiakjrxBvWo0QrmsX3HK+VH+SZOltz378cmgmCS9f9rSg=="],
-
     "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
 
     "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
 
+    "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
+
+    "webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],
+
+    "whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],
+
     "workerd": ["workerd@1.20260131.0", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260131.0", "@cloudflare/workerd-darwin-arm64": "1.20260131.0", "@cloudflare/workerd-linux-64": "1.20260131.0", "@cloudflare/workerd-linux-arm64": "1.20260131.0", "@cloudflare/workerd-windows-64": "1.20260131.0" }, "bin": { "workerd": "bin/workerd" } }, "sha512-4zZxOdWeActbRfydQQlj7vZ2ay01AjjNC4K3stjmWC3xZHeXeN3EAROwsWE83SZHhtw4rn18srrhtXoQvQMw3Q=="],
 
     "worktop": ["worktop@0.8.0-next.18", "", { "dependencies": { "mrmime": "^2.0.0", "regexparam": "^3.0.0" } }, "sha512-+TvsA6VAVoMC3XDKR5MoC/qlLqDixEfOBysDEKnPIPou/NvoPWCAuXHXMsswwlvmEuvX56lQjvELLyLuzTKvRw=="],
@@ -630,6 +719,8 @@
 
     "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
 
+    "@rollup/plugin-commonjs/is-reference": ["is-reference@1.2.1", "", { "dependencies": { "@types/estree": "*" } }, "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -644,12 +735,12 @@
 
     "bits-ui/runed": ["runed@0.35.1", "", { "dependencies": { "dequal": "^2.0.3", "esm-env": "^1.0.0", "lz-string": "^1.5.0" }, "peerDependencies": { "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0" }, "optionalPeers": ["@sveltejs/kit"] }, "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q=="],
 
+    "cross-fetch/node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],
+
+    "libsql/detect-libc": ["detect-libc@2.0.2", "", {}, "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw=="],
+
     "svelte-toolbelt/runed": ["runed@0.35.1", "", { "dependencies": { "dequal": "^2.0.3", "esm-env": "^1.0.0", "lz-string": "^1.5.0" }, "peerDependencies": { "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0" }, "optionalPeers": ["@sveltejs/kit"] }, "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q=="],
 
-    "vaul-svelte/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
-
-    "vaul-svelte/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
-
     "vite/esbuild": ["esbuild@0.27.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.2", "@esbuild/android-arm": "0.27.2", "@esbuild/android-arm64": "0.27.2", "@esbuild/android-x64": "0.27.2", "@esbuild/darwin-arm64": "0.27.2", "@esbuild/darwin-x64": "0.27.2", "@esbuild/freebsd-arm64": "0.27.2", "@esbuild/freebsd-x64": "0.27.2", "@esbuild/linux-arm": "0.27.2", "@esbuild/linux-arm64": "0.27.2", "@esbuild/linux-ia32": "0.27.2", "@esbuild/linux-loong64": "0.27.2", "@esbuild/linux-mips64el": "0.27.2", "@esbuild/linux-ppc64": "0.27.2", "@esbuild/linux-riscv64": "0.27.2", "@esbuild/linux-s390x": "0.27.2", "@esbuild/linux-x64": "0.27.2", "@esbuild/netbsd-arm64": "0.27.2", "@esbuild/netbsd-x64": "0.27.2", "@esbuild/openbsd-arm64": "0.27.2", "@esbuild/openbsd-x64": "0.27.2", "@esbuild/openharmony-arm64": "0.27.2", "@esbuild/sunos-x64": "0.27.2", "@esbuild/win32-arm64": "0.27.2", "@esbuild/win32-ia32": "0.27.2", "@esbuild/win32-x64": "0.27.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw=="],
 
     "wrangler/esbuild": ["esbuild@0.27.0", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.0", "@esbuild/android-arm": "0.27.0", "@esbuild/android-arm64": "0.27.0", "@esbuild/android-x64": "0.27.0", "@esbuild/darwin-arm64": "0.27.0", "@esbuild/darwin-x64": "0.27.0", "@esbuild/freebsd-arm64": "0.27.0", "@esbuild/freebsd-x64": "0.27.0", "@esbuild/linux-arm": "0.27.0", "@esbuild/linux-arm64": "0.27.0", "@esbuild/linux-ia32": "0.27.0", "@esbuild/linux-loong64": "0.27.0", "@esbuild/linux-mips64el": "0.27.0", "@esbuild/linux-ppc64": "0.27.0", "@esbuild/linux-riscv64": "0.27.0", "@esbuild/linux-s390x": "0.27.0", "@esbuild/linux-x64": "0.27.0", "@esbuild/netbsd-arm64": "0.27.0", "@esbuild/netbsd-x64": "0.27.0", "@esbuild/openbsd-arm64": "0.27.0", "@esbuild/openbsd-x64": "0.27.0", "@esbuild/openharmony-arm64": "0.27.0", "@esbuild/sunos-x64": "0.27.0", "@esbuild/win32-arm64": "0.27.0", "@esbuild/win32-ia32": "0.27.0", "@esbuild/win32-x64": "0.27.0" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA=="],

package.json

@@ -8,6 +8,8 @@
 		"build": "vite build",
 		"preview": "bun run build && wrangler dev",
 		"db:push": "drizzle-kit push",
+		"db:generate": "drizzle-kit generate",
+		"db:migrate": "drizzle-kit migrate",
 		"db:import": "bun run src/lib/db/import-amq.ts",
 		"format": "biome check --write",
 		"prepare": "svelte-kit sync || echo ''",
@@ -22,13 +24,14 @@
 		"@lucide/svelte": "^0.561.0",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.6",
+		"@sveltejs/adapter-node": "^5.5.2",
 		"@sveltejs/kit": "^2.50.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/node": "^25.2.0",
-		"better-sqlite3": "^12.6.2",
 		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
+		"dotenv": "^17.2.4",
 		"drizzle-kit": "^0.31.8",
 		"drizzle-orm": "^0.45.1",
 		"lefthook": "^2.1.0",
@@ -41,12 +44,14 @@
 		"tailwindcss": "^4.1.18",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.9.3",
-		"vaul-svelte": "^1.0.0-next.7",
 		"vite": "^7.3.1",
 		"wrangler": "^4.62.0",
 		"zod": "^4.3.6"
 	},
 	"patchedDependencies": {
 		"runed@0.37.1": "patches/runed@0.37.1.patch"
+	},
+	"dependencies": {
+		"@libsql/client": "^0.17.0"
 	}
 }

src/app.html

@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en">
-
+	<head>
-<head>
+		<meta charset="utf-8" />
-	<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
-	%sveltekit.head%
+	</head>
-</head>
+	<body
-
+		data-sveltekit-preload-data="hover"
-<body data-sveltekit-preload-data="hover" class="flex min-h-screen flex-col items-center gap-8">
+		class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
-	<div style="display: contents">%sveltekit.body%</div>
+	>
-</body>
+		<div style="display: contents">%sveltekit.body%</div>
-
+	</body>
-</html>
+</html>

src/lib/components/SongEntry.svelte

@@ -6,9 +6,14 @@
 		SkipForward,
 		Trash2,
 	} from "@lucide/svelte";
-	import { player } from "$lib/player/store.svelte";
+	import {
+		addToQueue,
+		hasTrack,
+		play,
+		playNext,
+		removeTrack,
+	} from "$lib/player/player.svelte";
 	import { type SongType, trackFromSongRow } from "$lib/player/types";
-	import { songTypeNumberLabel } from "$lib/utils/amq";
 	import { Button } from "./ui/button";
 
 	type SongEntryProps = {
@@ -19,9 +24,7 @@
 		songName: string;
 		artistName: string | null;
 		fileName?: string | null;
-		globalPercent: number;
+		globalPercent: number | null;
-		dub: boolean;
-		rebroadcast: boolean;
 	};
 
 	let {
@@ -33,11 +36,16 @@
 		artistName,
 		fileName = null,
 		globalPercent,
-		dub,
-		rebroadcast,
 	}: SongEntryProps = $props();
 
-	const displayTypeNumber = $derived(songTypeNumberLabel(type, number));
+	const typeLabelMap: Record<number, string> = {
+		1: "OP",
+		2: "ED",
+		3: "INS",
+	};
+
+	const typeLabel = $derived(typeLabelMap[type] ?? `T${type}`);
+	const displayTypeNumber = $derived(`${typeLabel}${number || ""}`);
 
 	const artistDisplay = $derived.by(
 		() => artistName?.trim() || "Unknown Artist",
@@ -52,13 +60,10 @@
 			songName,
 			artistName,
 			fileName,
-			dub,
-			rebroadcast,
-			globalPercent,
 		}),
 	);
 
-	const isQueued = $derived(player.hasTrack(annSongId));
+	const isQueued = $derived(hasTrack(annSongId));
 
 	function requestGlobalAutoplay() {
 		if (typeof window === "undefined") return;
@@ -86,16 +91,12 @@
 	<div class="flex flex-col">
 		<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
 			{animeName}
-			<span class="tag">{displayTypeNumber}</span>
+			<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-			<span class="text-muted-foreground">
+				>{displayTypeNumber}</span
+			>
+			<span class=" text-muted-foreground">
 				{globalPercent}%
 			</span>
-			{#if dub}
-				<span title="Dub" class="tag">DUB</span>
-			{/if}
-			{#if rebroadcast}
-				<span title="Rebroadcast" class="tag">RB</span>
-			{/if}
 		</div>
 
 		<div class="mt-1 w-fit text-foreground/80">
@@ -114,7 +115,7 @@
 					class="btn-icon"
 					title="Remove from queue"
 					aria-label="Remove from queue"
-					onclick={() => player.remove(annSongId)}
+					onclick={() => removeTrack(annSongId)}
 				>
 					<Trash2 class="icon-btn" />
 				</button>
@@ -127,7 +128,7 @@
 				aria-label="Play"
 				onclick={() => {
 					if (!track) return;
-					player.add(track, true);
+					play(track);
 					requestGlobalAutoplay();
 				}}
 			>
@@ -142,7 +143,7 @@
 				aria-label="Play next"
 				onclick={() => {
 					if (!track) return;
-					player.playNext(track);
+					playNext(track);
 					requestGlobalAutoplay();
 				}}
 			>
@@ -157,7 +158,7 @@
 				aria-label="Add to queue"
 				onclick={() => {
 					if (!track) return;
-					player.add(track);
+					addToQueue(track);
 				}}
 			>
 				<ListPlus class="icon-btn" />

src/lib/components/inputs/anime-list-input/AnimeListInput.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { AnimeListCodec } from "./schema";
-  import { ChipGroup } from "$lib/components/ui/chip-group";
-  import { AnimeListWatchStatus } from "$lib/utils/list";
-  import NativeSelect from "$lib/components/ui/native-select/native-select.svelte";
-  import NativeSelectOption from "$lib/components/ui/native-select/native-select-option.svelte";
-  import Input from "$lib/components/ui/input/input.svelte";
-  import { Label } from "$lib/components/ui/label";
-  import { z } from "zod";
-
-  let { value = $bindable() }: { value: z.infer<typeof AnimeListCodec> } =
-    $props();
-</script>
-
-<div class="flex flex-col gap-2">
-  <Label for="list-kind">Kind</Label>
-  <NativeSelect id="list-kind" bind:value={value.kind}>
-    <NativeSelectOption value="mal">MAL</NativeSelectOption>
-    <NativeSelectOption value="anilist">AniList</NativeSelectOption>
-    <NativeSelectOption value="kitsu">Kitsu</NativeSelectOption>
-  </NativeSelect>
-</div>
-<div class="flex flex-col gap-2">
-  <Label for="list-username">Username</Label>
-  <Input id="list-username" bind:value={value.username} />
-</div>
-<div class="flex flex-col gap-2">
-  <Label for="list-status">Status</Label>
-  <ChipGroup
-    items={AnimeListWatchStatus.options.map((v) => ({
-      label: v.toUpperCase(),
-      value: v,
-    }))}
-    bind:value={value.status}
-  />
-</div>

src/lib/components/inputs/anime-list-input/index.ts

@@ -1,2 +0,0 @@
-export { default as AnimeListInput } from "./AnimeListInput.svelte";
-export * from "./schema";

src/lib/components/inputs/anime-list-input/schema.ts

@@ -1,16 +0,0 @@
-import { AnimeList, AnimeListWatchStatus } from "$lib/utils/list";
-import { z } from "zod";
-
-const SEP_FIELD = ":";
-const SEP_VALUE = ",";
-
-export const AnimeListCodec = z.codec(z.string(), AnimeList, {
-  decode: (s) => {
-    const [kind, ...rest] = decodeURIComponent(s).split(SEP_FIELD);
-    const statusStr = rest.pop();
-    const status = statusStr ? statusStr.split(SEP_VALUE).map((v) => AnimeListWatchStatus.parse(v)) : [];
-    const username = rest.join("");
-    return AnimeList.parse({ kind, username, status });
-  },
-  encode: (list) => encodeURIComponent(`${list.kind}${SEP_FIELD}${list.username}${SEP_FIELD}${list.status.join(SEP_VALUE)}`),
-});

src/lib/components/player/Controls.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-	import {
-		Pause,
-		Play,
-		Repeat,
-		Repeat1,
-		Shuffle,
-		SkipBack,
-		SkipForward,
-	} from "@lucide/svelte";
-	import { Button } from "$lib/components/ui/button";
-	import { player } from "$lib/player/store.svelte";
-	import { getAudioContext } from "./ctx.svelte";
-
-	let audio = getAudioContext();
-
-	// Derived state for icons/labels
-	let isPlaying = $derived(!audio.paused);
-	let shuffleMode = $derived(player.isShuffled);
-	let repeatMode = $derived(player.repeatMode);
-</script>
-
-<div class="flex items-center gap-2">
-    <!-- Shuffle -->
-    <Button
-        variant="ghost"
-        size="icon"
-        class={shuffleMode
-            ? "text-primary hover:bg-primary/20 hover:text-primary"
-            : "text-muted-foreground"}
-        onclick={() => player.toggleShuffle()}
-        title="Toggle Shuffle"
-    >
-        <Shuffle class="h-4 w-4" />
-    </Button>
-
-    <!-- Prev -->
-    <Button
-        variant="ghost"
-        size="icon"
-        onclick={() => {
-            if (audio.currentTime > 3) {
-                audio.seek(0);
-            } else {
-                player.prev();
-            }
-        }}
-        disabled={player.history.length <= 1 && audio.currentTime <= 3}
-        title="Previous"
-    >
-        <SkipBack class="h-5 w-5" />
-    </Button>
-
-    <!-- Play/Pause -->
-    <Button
-        variant="outline"
-        size="icon"
-        class="h-10 w-10 rounded-full"
-        onclick={() => audio.toggle()}
-        disabled={!player.currentTrack}
-        title={isPlaying ? "Pause" : "Play"}
-    >
-        {#if isPlaying}
-            <Pause class="h-5 w-5" />
-        {:else}
-            <Play class="h-5 w-5 ml-0.5" />
-        {/if}
-    </Button>
-
-    <!-- Next -->
-    <Button
-        variant="ghost"
-        size="icon"
-        onclick={() => player.next()}
-        disabled={player.queue.length === 0}
-        title="Next"
-    >
-        <SkipForward class="h-5 w-5" />
-    </Button>
-
-    <!-- Repeat -->
-    <Button
-        variant="ghost"
-        size="icon"
-        class={repeatMode !== "off"
-            ? "text-primary hover:bg-primary/20 hover:text-primary"
-            : "text-muted-foreground"}
-        onclick={() => player.toggleRepeat()}
-        title="Toggle Repeat"
-    >
-        {#if repeatMode === "one"}
-            <Repeat1 class="h-4 w-4" />
-        {:else}
-            <Repeat class="h-4 w-4" />
-        {/if}
-    </Button>
-</div>

src/lib/components/player/PlayerDesktop.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-	import { Disc, Volume1, Volume2, VolumeX } from "@lucide/svelte";
-
-	import { player } from "$lib/player/store.svelte";
-	import { songTypeNumberLabel } from "$lib/utils/amq";
-	import Controls from "./Controls.svelte";
-	import { getAudioContext } from "./ctx.svelte";
-	import Queue from "./Queue.svelte";
-	import { formatTime } from "./utils";
-
-	const audio = getAudioContext();
-
-	const displayTypeNumber = $derived(
-		player.currentTrack
-			? songTypeNumberLabel(
-					player.currentTrack.type,
-					player.currentTrack.number,
-				)
-			: "",
-	);
-</script>
-
-<div
-	class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full"
->
-	{#if player.currentTrack}
-		<div class="p-4 space-y-4 shrink-0">
-			<!-- Track Info -->
-			<div class="space-y-1.5">
-				<h2 class="text-lg font-bold leading-tight">
-					{player.currentTrack.animeName}
-					<span class="tag">{displayTypeNumber}</span>
-				</h2>
-				<p class="text-foreground/80 font-medium text-l">
-					{player.currentTrack.title}
-					<span class="text-muted-foreground"> · </span>
-					<span class="text-muted-foreground"
-						>{player.currentTrack.globalPercent}%</span
-					>
-				</p>
-				<p class="text-sm text-muted-foreground">
-					{player.currentTrack.artist}
-				</p>
-			</div>
-
-			<!-- Progress -->
-			<div class="space-y-2">
-				<input
-					type="range"
-					bind:value={audio.currentTime}
-					max={audio.duration || 100}
-					class="w-full"
-				/>
-				<div
-					class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums px-1"
-				>
-					<span>{formatTime(audio.currentTime)}</span>
-					<span>{formatTime(audio.duration)}</span>
-				</div>
-			</div>
-
-			<!-- Controls -->
-			<div class="flex justify-center gap-4 divide-x divide-accent">
-				<Controls />
-				<!-- Volume -->
-				<div class="flex items-center gap-3 min-w-0">
-					<button
-						onclick={() => player.toggleMute()}
-						class="text-muted-foreground hover:text-foreground transition-colors"
-						title={player.isMuted ? "Unmute" : "Mute"}
-					>
-						{#if player.isMuted || player.volume === 0}
-							<VolumeX class="h-4 w-4" />
-						{:else if player.volume < 0.5}
-							<Volume1 class="h-4 w-4" />
-						{:else}
-							<Volume2 class="h-4 w-4" />
-						{/if}
-					</button>
-					<input
-						type="range"
-						bind:value={player.volume}
-						max={1}
-						step={0.05}
-						class="flex-1 min-w-0"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<!-- Divider -->
-		<div class="h-px bg-border mx-6"></div>
-
-		<!-- Queue (Scrollable) -->
-		<div class="flex-1 overflow-hidden relative p-4">
-			<div class="absolute inset-0 p-4 pt-0">
-				<div class="h-full overflow-hidden rounded-lg border bg-muted/20">
-					<Queue visible={!!player.currentTrack} />
-				</div>
-			</div>
-		</div>
-	{:else}
-		<div
-			class="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4 p-8 text-center"
-		>
-			<div
-				class="h-16 w-16 rounded-full bg-muted flex items-center justify-center"
-			>
-				<Disc class="h-8 w-8 opacity-50" />
-			</div>
-			<p>No track playing</p>
-			<p class="text-xs max-w-xs opacity-70">
-				Pick a song from the library to start listening.
-			</p>
-		</div>
-	{/if}
-</div>

src/lib/components/player/PlayerMobile.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { Disc } from "@lucide/svelte";
-	import * as Drawer from "$lib/components/ui/drawer";
-	import { player } from "$lib/player/store.svelte";
-	import { songTypeNumberLabel } from "$lib/utils/amq";
-	import Controls from "./Controls.svelte";
-	import { getAudioContext } from "./ctx.svelte";
-	import Queue from "./Queue.svelte";
-	import { formatTime } from "./utils";
-
-	const audio = getAudioContext();
-	let open = $state(false);
-
-	const displayTypeNumber = $derived(
-		player.currentTrack
-			? songTypeNumberLabel(
-					player.currentTrack.type,
-					player.currentTrack.number,
-				)
-			: "",
-	);
-</script>
-
-<div class="z-50 border-t bg-background/95 backdrop-blur shadow-2xl">
-	<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
-		<!-- Mini Player Info -->
-		<button
-			type="button"
-			class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
-			onclick={() => (open = true)}
-		>
-			<div class="flex flex-col overflow-hidden">
-				<div class="text-sm font-medium truncate leading-tight">
-					{player.currentTrack?.animeName || "Unknown"}
-					<span class="tag">{displayTypeNumber}</span>
-				</div>
-				<div class="text-xs text-muted-foreground truncate leading-tight">
-					{player.currentTrack?.title || "Unknown Title"}
-					<span class="text-muted-foreground"> · </span>
-					<span class="text-muted-foreground"
-						>{player.currentTrack?.globalPercent}%</span
-					>
-				</div>
-			</div>
-		</button>
-
-		<!-- Mini Controls -->
-		<div class="flex items-center gap-1">
-			<Controls />
-			<!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
-			<!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
-			<!-- Let's just use simplified controls here for now, or just Play/Pause -->
-		</div>
-	</div>
-
-	<!-- Progress Bar (thin line at top of bar) -->
-	<div class="absolute top-0 left-0 right-0 h-1 bg-muted">
-		<div
-			class="h-full bg-primary transition-all duration-100 ease-linear"
-			style="width: {(audio.currentTime / audio.duration) * 100}%"
-		></div>
-	</div>
-</div>
-
-<Drawer.Root bind:open>
-	<Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
-		<div class="mx-auto w-full max-w-xl flex-1 flex flex-col p-4 gap-4">
-			<!-- Track Info -->
-			<div class="text-center space-y-1">
-				<h2 class="text-xl font-bold leading-tight">
-					{player.currentTrack?.animeName}
-					<span class="tag">{displayTypeNumber}</span>
-				</h2>
-				<p class="text-foreground/80 font-medium text-lg line-clamp-1">
-					{player.currentTrack?.title}
-					<span class="text-muted-foreground"> · </span>
-					<span class="text-muted-foreground"
-						>{player.currentTrack?.globalPercent}%</span
-					>
-				</p>
-				<p class="text-sm text-muted-foreground">
-					{player.currentTrack?.artist}
-				</p>
-			</div>
-
-			<!-- Progress -->
-			<div class="space-y-2">
-				<input
-					type="range"
-					bind:value={audio.currentTime}
-					max={audio.duration || 100}
-					class="w-full"
-				/>
-				<div
-					class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
-				>
-					<span>{formatTime(audio.currentTime)}</span>
-					<span>{formatTime(audio.duration)}</span>
-				</div>
-			</div>
-
-			<!-- Main Controls -->
-			<div class="flex justify-center">
-				<Controls />
-			</div>
-
-			<!-- Volume? Or Queue toggle? -->
-			<!-- Queue -->
-			<div class="flex-1 overflow-hidden relative mt-auto">
-				<div class="absolute inset-0">
-					<Queue visible={open} />
-				</div>
-			</div>
-		</div>
-	</Drawer.Content>
-</Drawer.Root>

src/lib/components/player/PlayerRoot.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-	import { onMount, setContext } from "svelte";
-	import artwork from "$lib/assets/artwork.jpg";
-	import { player } from "$lib/player/store.svelte";
-	import { songTypeNumberLabel } from "$lib/utils/amq";
-	import { AudioContext } from "./ctx.svelte";
-	import PlayerDesktop from "./PlayerDesktop.svelte";
-	import PlayerMobile from "./PlayerMobile.svelte";
-
-	// Initialize context
-	const audioCtx = new AudioContext();
-	setContext("amqtrain:player:audio-ctx", audioCtx);
-
-	let audioEl: HTMLAudioElement;
-
-	import { loadState, saveState } from "$lib/player/persist";
-
-	onMount(() => {
-		audioCtx.setElement(audioEl);
-
-		// Load state
-		const saved = loadState();
-		if (saved) {
-			player.init(saved);
-		}
-
-		// Setup MediaSession actions
-		if ("mediaSession" in navigator) {
-			navigator.mediaSession.setActionHandler("play", () => audioCtx.play());
-			navigator.mediaSession.setActionHandler("pause", () => audioCtx.pause());
-			navigator.mediaSession.setActionHandler("previoustrack", () =>
-				player.prev(),
-			);
-			navigator.mediaSession.setActionHandler("nexttrack", () => player.next());
-		}
-	});
-
-	// Update MediaSession metadata when track changes
-	$effect(() => {
-		const track = player.currentTrack;
-		if ("mediaSession" in navigator) {
-			if (track) {
-				const typeLabel = songTypeNumberLabel(track.type, track.number);
-				navigator.mediaSession.metadata = new MediaMetadata({
-					title: `${track.animeName} (${typeLabel}) — ${track.title}`,
-					artist: track.artist,
-					album: track.animeName ?? "",
-					artwork: [{ src: artwork }],
-				});
-			} else {
-				navigator.mediaSession.metadata = null;
-			}
-		}
-	});
-
-	$effect(() => {
-		const track = player.currentTrack;
-		if (audioEl) {
-			if (track) {
-				const newSrc = track.src;
-				const currentSrc = audioEl.currentSrc;
-
-				if (currentSrc !== newSrc) {
-					audioEl.src = newSrc;
-					audioEl.play().catch((e) => {
-						console.warn("Autoplay blocked or failed", e);
-					});
-				}
-			} else {
-				audioEl.removeAttribute("src");
-			}
-
-			// Update MediaSession playback state
-			if ("mediaSession" in navigator) {
-				navigator.mediaSession.playbackState = audioEl.paused
-					? "paused"
-					: "playing";
-			}
-		}
-	});
-
-	// ... existing callbacks ...
-
-	// Bindings and Event Listeners
-	function onEnded() {
-		player.next();
-	}
-
-	// Sync MediaSession playback state with bound paused state
-	$effect(() => {
-		if ("mediaSession" in navigator) {
-			navigator.mediaSession.playbackState = audioCtx.paused
-				? "paused"
-				: "playing";
-		}
-	});
-</script>
-
-<audio
-	bind:this={audioEl}
-	bind:currentTime={audioCtx.currentTime}
-	bind:duration={audioCtx.duration}
-	bind:paused={audioCtx.paused}
-	bind:volume={player.volume}
-	bind:muted={player.isMuted}
-	onended={onEnded}
-	class="hidden"
-></audio>
-
-<div class="contents">
-	<div class="lg:hidden w-full sticky bottom-0">
-		<PlayerMobile />
-	</div>
-	<div class="hidden lg:block sticky top-12 h-[calc(100dvh-4rem)]">
-		<PlayerDesktop />
-	</div>
-</div>

src/lib/components/player/Queue.svelte

@@ -1,202 +0,0 @@
-<script lang="ts">
-	import { GripVertical, LocateFixed, Play, X } from "@lucide/svelte";
-	import { tick } from "svelte";
-	import * as AlertDialog from "$lib/components/ui/alert-dialog";
-	import { Button } from "$lib/components/ui/button";
-	import VirtualList from "$lib/components/ui/VirtualList.svelte";
-	import { player } from "$lib/player/store.svelte";
-	import type { Track } from "$lib/player/types";
-	import { songTypeNumberLabel } from "$lib/utils/amq";
-
-	let { visible = true }: { visible?: boolean } = $props();
-
-	let virtualList: ReturnType<typeof VirtualList>;
-
-	function scrollToCurrentlyPlaying() {
-		if (player.currentId == null) return;
-		const index = player.displayQueue.findIndex(
-			(t) => t.id === player.currentId,
-		);
-		if (index !== -1) virtualList?.scrollToIndex(index);
-	}
-
-	$effect(() => {
-		if (visible) {
-			tick().then(() => scrollToCurrentlyPlaying());
-		}
-	});
-
-	const ITEM_HEIGHT = 64;
-
-	function onRemove(id: number) {
-		player.remove(id);
-	}
-
-	function onJump(track: Track) {
-		player.playId(track.id);
-	}
-
-	let dragOverIndex = $state<number | null>(null);
-
-	function onDragStart(e: DragEvent, index: number) {
-		if (!e.dataTransfer) return;
-		e.dataTransfer.effectAllowed = "move";
-		e.dataTransfer.setData("text/plain", index.toString());
-	}
-
-	function onDragOver(e: DragEvent, index: number) {
-		e.preventDefault();
-		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-		dragOverIndex = index;
-	}
-
-	function onDrop(e: DragEvent, toIndex: number) {
-		e.preventDefault();
-		dragOverIndex = null;
-		const fromIndexStr = e.dataTransfer?.getData("text/plain");
-		if (fromIndexStr) {
-			const fromIndex = parseInt(fromIndexStr, 10);
-			player.move(fromIndex, toIndex);
-		}
-	}
-</script>
-
-<div
-	class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
->
-	<div
-		class="px-4 py-3 border-b flex text-sm items-center justify-between bg-muted/20"
-	>
-		<div class="flex items-center gap-1">
-			<h3 class="font-semibold">Up Next</h3>
-			{#if player.displayQueue.length > 0}
-				<span class="text-muted-foreground font-normal ml-1"
-					>({player.displayQueue.length})</span
-				>
-				<Button
-					variant="ghost"
-					size="sm"
-					class="h-6 w-6 p-0"
-					aria-label="Scroll to currently playing"
-					onclick={scrollToCurrentlyPlaying}
-				>
-					<LocateFixed class="h-3 w-3" />
-				</Button>
-			{/if}
-		</div>
-		<AlertDialog.Root>
-			<AlertDialog.Trigger>
-				{#snippet child({ props })}
-					<Button variant="ghost" size="sm" class="h-6 w-6 p-0" {...props}>
-						<X class="h-3 w-3" aria-label="Clear" />
-					</Button>
-				{/snippet}
-			</AlertDialog.Trigger>
-			<AlertDialog.Content>
-				<AlertDialog.Header>
-					<AlertDialog.Title>Clear queue?</AlertDialog.Title>
-					<AlertDialog.Description>
-						This will remove all {player.displayQueue.length} songs from the queue.
-					</AlertDialog.Description>
-				</AlertDialog.Header>
-				<AlertDialog.Footer>
-					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-					<AlertDialog.Action onclick={() => player.clearQueue()}
-						>Clear</AlertDialog.Action
-					>
-				</AlertDialog.Footer>
-			</AlertDialog.Content>
-		</AlertDialog.Root>
-	</div>
-
-	<VirtualList
-		bind:this={virtualList}
-		items={player.displayQueue}
-		itemHeight={ITEM_HEIGHT}
-		overscan={5}
-		class="p-2"
-		key={(track) => track.id}
-	>
-		{#snippet row({ item: track, index: i })}
-			<div
-				role="button"
-				tabindex="0"
-				draggable="true"
-				ondragstart={(e) => onDragStart(e, i)}
-				ondragover={(e) => onDragOver(e, i)}
-				ondrop={(e) => onDrop(e, i)}
-				onclick={() => onJump(track)}
-				onkeydown={(e) => e.key === "Enter" && onJump(track)}
-				class="group flex items-center gap-2 px-3 h-full rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
-				class:active={player.currentId === track.id}
-				class:border-t-2={dragOverIndex === i}
-				class:border-primary={dragOverIndex === i}
-			>
-				<div
-					class="w-6 shrink-0 flex items-center justify-center text-xs text-muted-foreground/60 font-mono"
-				>
-					<div
-						class="group-hover:hidden flex items-center justify-center w-full h-full"
-					>
-						{#if player.currentId === track.id}
-							<div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
-						{:else}
-							<span>{i + 1}</span>
-						{/if}
-					</div>
-
-					<div
-						class="[@media(hover:hover)]:hidden group-hover:flex items-center justify-center w-full h-full cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground"
-						aria-label="Drag to reorder"
-					>
-						<GripVertical class="h-4 w-4" />
-					</div>
-				</div>
-
-				<div class="flex-1 min-w-0">
-					<div
-						class="font-medium line-clamp-2 leading-tight"
-						class:text-primary={player.currentId === track.id}
-					>
-						{track.animeName}
-						<span class="tag"
-							>{songTypeNumberLabel(track.type, track.number)}</span
-						>
-						<span class="text-muted-foreground font-normal"
-							>{track.globalPercent}%</span
-						>
-					</div>
-					<div class="text-xs text-foreground/80 truncate">
-						{track.title} —
-						<span class="text-muted-foreground">{track.artist}</span>
-					</div>
-				</div>
-
-				<Button
-					variant="ghost"
-					size="icon"
-					class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity shrink-0"
-					onclick={(e) => {
-						e.stopPropagation();
-						onRemove(track.id);
-					}}
-				>
-					<X class="h-3 w-3" />
-				</Button>
-			</div>
-		{/snippet}
-
-		{#snippet empty()}
-			<div class="text-center py-8 text-muted-foreground text-sm">
-				Queue is empty
-			</div>
-		{/snippet}
-	</VirtualList>
-</div>
-
-<style>
-	@reference "../../../routes/layout.css";
-	.active {
-		@apply bg-muted/40;
-	}
-</style>

src/lib/components/player/ctx.svelte.ts

@@ -1,46 +0,0 @@
-import { getContext, setContext } from "svelte";
-
-const AUDIO_CTX_KEY = "amqtrain:player:audio-ctx";
-
-export class AudioContext {
-	currentTime = $state(0);
-	duration = $state(0);
-	paused = $state(true);
-
-	private audioEl: HTMLAudioElement | null = null;
-
-	setElement(el: HTMLAudioElement) {
-		this.audioEl = el;
-	}
-
-	// Bindings will handle state updates, but we need methods to control play/pause
-	// from other components.
-	// Since we bind to `this.paused`, toggling it here will trigger the audio element.
-
-	play() {
-		this.paused = false;
-	}
-
-	pause() {
-		this.paused = true;
-	}
-
-	toggle() {
-		this.paused = !this.paused;
-	}
-
-	seek(time: number) {
-		// Seeking is done by updating currentTime, which is bound to the audio element.
-		this.currentTime = Math.max(0, Math.min(time, this.duration));
-	}
-}
-
-export function setAudioContext() {
-	const ctx = new AudioContext();
-	setContext(AUDIO_CTX_KEY, ctx);
-	return ctx;
-}
-
-export function getAudioContext() {
-	return getContext<AudioContext>(AUDIO_CTX_KEY);
-}

src/lib/components/player/utils.ts

@@ -1,7 +0,0 @@
-export function formatTime(seconds: number) {
-	if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
-	const s = Math.floor(seconds);
-	const m = Math.floor(s / 60);
-	const r = s % 60;
-	return `${m}:${String(r).padStart(2, "0")}`;
-}

src/lib/components/ui/VirtualList.svelte

@@ -1,109 +0,0 @@
-<!--
-  Generic fixed-height virtual list.
-  Usage:
-    <VirtualList items={myArray} itemHeight={64} overscan={5}>
-      {#snippet row({ item, index })}
-        <div>…</div>
-      {/snippet}
-    </VirtualList>
--->
-<script lang="ts" generics="T">
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    items: T[];
-    itemHeight: number;
-    overscan?: number;
-    class?: string;
-    row: Snippet<[{ item: T; index: number }]>;
-    empty?: Snippet;
-    key?: (item: T, index: number) => unknown;
-  };
-
-  let {
-    items,
-    itemHeight,
-    overscan = 5,
-    class: className = "",
-    row,
-    empty,
-    key,
-  }: Props = $props();
-
-  let containerEl = $state<HTMLDivElement | null>(null);
-  let scrollTop = $state(0);
-  let containerHeight = $state(0);
-
-  const totalHeight = $derived(items.length * itemHeight);
-
-  const startIndex = $derived(
-    Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),
-  );
-  const endIndex = $derived(
-    Math.min(
-      items.length,
-      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan,
-    ),
-  );
-  const visibleItems = $derived(
-    items.slice(startIndex, endIndex).map((item, i) => ({
-      item,
-      index: startIndex + i,
-    })),
-  );
-
-  function onScroll(e: Event) {
-    scrollTop = (e.target as HTMLDivElement).scrollTop;
-  }
-
-  export function scrollToIndex(index: number) {
-    if (!containerEl) return;
-    containerEl.scrollTop = Math.max(
-      0,
-      index * itemHeight - containerHeight / 2 + itemHeight / 2,
-    );
-  }
-
-  $effect(() => {
-    if (!containerEl) return;
-    const ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        containerHeight = entry.contentRect.height;
-      }
-    });
-    ro.observe(containerEl);
-    return () => ro.disconnect();
-  });
-</script>
-
-<div
-  class="virtual-list-container {className}"
-  bind:this={containerEl}
-  onscroll={onScroll}
->
-  {#if items.length === 0}
-    {@render empty?.()}
-  {:else}
-    <div
-      class="virtual-list-sentinel"
-      style="height: {totalHeight}px; position: relative;"
-    >
-      {#each visibleItems as entry (key ? key(entry.item, entry.index) : entry.index)}
-        <div
-          class="virtual-list-item"
-          style="position: absolute; top: {entry.index *
-            itemHeight}px; left: 0; right: 0; height: {itemHeight}px;"
-        >
-          {@render row(entry)}
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .virtual-list-container {
-    overflow-y: auto;
-    flex: 1;
-  }
-</style>

src/lib/components/ui/chip-group/chip-group.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { cn } from "$lib/utils";
-
-    type Item = {
-        label: string;
-        value: any;
-    };
-
-    let {
-        label,
-        items,
-        value = $bindable(),
-        type = "checkbox",
-        class: className,
-        ...rest
-    }: {
-        label?: string;
-        items: Item[];
-        value: any;
-        type?: "checkbox" | "radio";
-        class?: string;
-    } = $props();
-</script>
-
-<div class={cn("flex flex-col gap-2", className)}>
-    {#if label}
-        <span class="scn-label">{label}</span>
-    {/if}
-    <div class="chip-group" {...rest}>
-        {#each items as item}
-            <label class="chip">
-                {#if type === "checkbox"}
-                    <input
-                        type="checkbox"
-                        bind:group={value}
-                        value={item.value}
-                    />
-                {:else}
-                    <input type="radio" bind:group={value} value={item.value} />
-                {/if}
-                <span>{item.label}</span>
-            </label>
-        {/each}
-    </div>
-</div>

src/lib/components/ui/chip-group/index.ts

@@ -1 +0,0 @@
-export { default as ChipGroup } from "./chip-group.svelte";

src/lib/components/ui/dialog/dialog-close.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
-</script>
-
-<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import DialogPortal from "./dialog-portal.svelte";
-	import XIcon from "@lucide/svelte/icons/x";
-	import type { Snippet } from "svelte";
-	import * as Dialog from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		portalProps,
-		children,
-		showCloseButton = true,
-		...restProps
-	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
-		children: Snippet;
-		showCloseButton?: boolean;
-	} = $props();
-</script>
-
-<DialogPortal {...portalProps}>
-	<Dialog.Overlay />
-	<DialogPrimitive.Content
-		bind:ref
-		data-slot="dialog-content"
-		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-			className
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-		{#if showCloseButton}
-			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-			>
-				<XIcon />
-				<span class="sr-only">Close</span>
-			</DialogPrimitive.Close>
-		{/if}
-	</DialogPrimitive.Content>
-</DialogPortal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DialogPrimitive.DescriptionProps = $props();
-</script>
-
-<DialogPrimitive.Description
-	bind:ref
-	data-slot="dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
-	{...restProps}
-/>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DialogPrimitive.OverlayProps = $props();
-</script>
-
-<DialogPrimitive.Overlay
-	bind:ref
-	data-slot="dialog-overlay"
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-		className
-	)}
-	{...restProps}
-/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-
-	let { ...restProps }: DialogPrimitive.PortalProps = $props();
-</script>
-
-<DialogPrimitive.Portal {...restProps} />

src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DialogPrimitive.TitleProps = $props();
-</script>
-
-<DialogPrimitive.Title
-	bind:ref
-	data-slot="dialog-title"
-	class={cn("text-lg leading-none font-semibold", className)}
-	{...restProps}
-/>

src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
-</script>
-
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

src/lib/components/ui/dialog/dialog.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-
-	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
-</script>
-
-<DialogPrimitive.Root bind:open {...restProps} />

src/lib/components/ui/dialog/index.ts

@@ -1,34 +0,0 @@
-import Root from "./dialog.svelte";
-import Portal from "./dialog-portal.svelte";
-import Title from "./dialog-title.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-import Trigger from "./dialog-trigger.svelte";
-import Close from "./dialog-close.svelte";
-
-export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	Close,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription,
-	Close as DialogClose,
-};

src/lib/components/ui/drawer/drawer-close.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
-</script>
-
-<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

src/lib/components/ui/drawer/drawer-content.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import DrawerPortal from "./drawer-portal.svelte";
-	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		portalProps,
-		children,
-		...restProps
-	}: DrawerPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
-	} = $props();
-</script>
-
-<DrawerPortal {...portalProps}>
-	<DrawerOverlay />
-	<DrawerPrimitive.Content
-		bind:ref
-		data-slot="drawer-content"
-		class={cn(
-			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm",
-			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm",
-			className
-		)}
-		{...restProps}
-	>
-		<div
-			class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
-		></div>
-		{@render children?.()}
-	</DrawerPrimitive.Content>
-</DrawerPortal>

src/lib/components/ui/drawer/drawer-description.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DrawerPrimitive.DescriptionProps = $props();
-</script>
-
-<DrawerPrimitive.Description
-	bind:ref
-	data-slot="drawer-description"
-	class={cn("text-muted-foreground text-sm", className)}
-	{...restProps}
-/>

src/lib/components/ui/drawer/drawer-footer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="drawer-footer"
-	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

src/lib/components/ui/drawer/drawer-header.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="drawer-header"
-	class={cn("flex flex-col gap-1.5 p-4", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

src/lib/components/ui/drawer/drawer-nested.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let {
-		shouldScaleBackground = true,
-		open = $bindable(false),
-		activeSnapPoint = $bindable(null),
-		...restProps
-	}: DrawerPrimitive.RootProps = $props();
-</script>
-
-<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />

src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DrawerPrimitive.OverlayProps = $props();
-</script>
-
-<DrawerPrimitive.Overlay
-	bind:ref
-	data-slot="drawer-overlay"
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-		className
-	)}
-	{...restProps}
-/>

src/lib/components/ui/drawer/drawer-portal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
-</script>
-
-<DrawerPrimitive.Portal {...restProps} />

src/lib/components/ui/drawer/drawer-title.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DrawerPrimitive.TitleProps = $props();
-</script>
-
-<DrawerPrimitive.Title
-	bind:ref
-	data-slot="drawer-title"
-	class={cn("text-foreground font-semibold", className)}
-	{...restProps}
-/>

src/lib/components/ui/drawer/drawer-trigger.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
-</script>
-
-<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />

src/lib/components/ui/drawer/drawer.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-
-	let {
-		shouldScaleBackground = true,
-		open = $bindable(false),
-		activeSnapPoint = $bindable(null),
-		...restProps
-	}: DrawerPrimitive.RootProps = $props();
-</script>
-
-<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />

src/lib/components/ui/drawer/index.ts

@@ -1,38 +0,0 @@
-import Root from "./drawer.svelte";
-import Content from "./drawer-content.svelte";
-import Description from "./drawer-description.svelte";
-import Overlay from "./drawer-overlay.svelte";
-import Footer from "./drawer-footer.svelte";
-import Header from "./drawer-header.svelte";
-import Title from "./drawer-title.svelte";
-import NestedRoot from "./drawer-nested.svelte";
-import Close from "./drawer-close.svelte";
-import Trigger from "./drawer-trigger.svelte";
-import Portal from "./drawer-portal.svelte";
-
-export {
-	Root,
-	NestedRoot,
-	Content,
-	Description,
-	Overlay,
-	Footer,
-	Header,
-	Title,
-	Trigger,
-	Portal,
-	Close,
-
-	//
-	Root as Drawer,
-	NestedRoot as DrawerNestedRoot,
-	Content as DrawerContent,
-	Description as DrawerDescription,
-	Overlay as DrawerOverlay,
-	Footer as DrawerFooter,
-	Header as DrawerHeader,
-	Title as DrawerTitle,
-	Trigger as DrawerTrigger,
-	Portal as DrawerPortal,
-	Close as DrawerClose,
-};

src/lib/components/ui/label/label.svelte

@@ -12,6 +12,9 @@
 <LabelPrimitive.Root
 	bind:ref
 	data-slot="label"
-	class={cn("scn-label", className)}
+	class={cn(
+		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		className
+	)}
 	{...restProps}
 />

src/lib/db/client-db/index.ts

@@ -9,17 +9,29 @@ import { browser } from "$app/environment";
  * Exported to allow query helpers to accept the specific type without
  * creating circular type references.
  */
-export type ClientDb = ReturnType<typeof drizzle>;
 
 // this is kinda mid
-export const sqlocal = browser ? await initDb() : null;
+export const sqlocal = !import.meta.env.SSR ? await initDb() : null;
-export const db = sqlocal ? drizzle(sqlocal.driver, sqlocal.batchDriver) : null;
+// wacky typecasting, but it works to give type hints for db queries
+export const db = sqlocal
+	? drizzle(sqlocal.driver, sqlocal.batchDriver)
+	: ((await serverDb()) as unknown as ReturnType<typeof drizzle>);
+
+export type ClientDb = typeof db;
 
 async function initDb() {
 	const { SQLocalDrizzle } = await import("sqlocal/drizzle");
 	return new SQLocalDrizzle("database.sqlite3");
 }
 
+async function serverDb() {
+	if (!import.meta.env.SSR) return null;
+	const { building } = await import("$app/environment");
+	if (building) return null;
+	const { initDb } = await import("../server");
+	return initDb();
+}
+
 export function getClientDb() {
 	if (!sqlocal || !db) throw "Client DB can only be accessed from the browser";
 	return {

src/lib/db/client-db/queries.ts

@@ -118,8 +118,6 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 			annSongId: animeSongLinks.annSongId,
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
-			dub: animeSongLinks.dub,
-			rebroadcast: animeSongLinks.rebroadcast,
 
 			songName: songs.name,
 			fileName: songs.fileName,
@@ -141,8 +139,6 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 			annSongId: r.annSongId,
 			type: r.type,
 			number: r.number,
-			dub: r.dub,
-			rebroadcast: r.rebroadcast,
 			songName: r.songName,
 			fileName: r.fileName,
 			globalPercent: r.globalPercent,
@@ -177,8 +173,6 @@ export async function getSongsForMalAnimeIds(
 			annSongId: animeSongLinks.annSongId,
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
-			dub: animeSongLinks.dub,
-			rebroadcast: animeSongLinks.rebroadcast,
 
 			songName: songs.name,
 			fileName: songs.fileName,
@@ -239,8 +233,6 @@ export async function getSongsWithFilters(
 
 			type: animeSongLinks.type,
 			number: animeSongLinks.number,
-			dub: animeSongLinks.dub,
-			rebroadcast: animeSongLinks.rebroadcast,
 
 			animeAnnId: anime.annId,
 			animeMainName: anime.mainName,

src/lib/db/client-db/seed.ts

@@ -14,7 +14,7 @@ import { getClientDb } from "$lib/db/client-db";
  * This is intended for READ-ONLY browsing. Bump the version when you ship a new
  * snapshot so clients refresh.
  */
-export const AMQ_DB_SEED_VERSION = 4;
+export const AMQ_DB_SEED_VERSION = 3;
 
 const SEED_ASSET_PATH = "/data/amq.sqlite";
 const seededStorageKey = (version: number) => `amq.sqlocal.seeded.v${version}`;
@@ -41,6 +41,7 @@ function ensureBrowser() {
 export async function ensureSeeded(
 	opts: { version?: number; force?: boolean; fetch?: typeof fetch } = {},
 ): Promise<void> {
+	if (!browser) return;
 	ensureBrowser();
 
 	const version = opts.version ?? AMQ_DB_SEED_VERSION;

src/lib/db/import-amq.ts

@@ -1,3 +1,4 @@
+import "dotenv/config";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 import {
@@ -12,7 +13,6 @@ import amqArtistsJson from "../../../data/amq-artists.json" with {
 };
 import amqGroupsJson from "../../../data/amq-groups.json" with { type: "json" };
 import amqSongsJson from "../../../data/amq-songs.json" with { type: "json" };
-import { db } from "./index";
 import {
 	anime,
 	animeGenres,
@@ -30,6 +30,7 @@ import {
 	songs,
 	tags,
 } from "./schema";
+import { initDb } from "./server";
 
 /**
  * AMQ JSON import routine
@@ -90,7 +91,7 @@ function zodErrorSummary(prefix: string, err: z.ZodError): string {
 	return `${prefix}\n${lines.join("\n")}${more}`;
 }
 
-function _categoryNumberToText(
+function categoryNumberToText(
 	v: number | string | null | undefined,
 ): string | null {
 	if (v === null || v === undefined) return null;
@@ -182,6 +183,7 @@ export async function importAmqData(
 	}
 
 	// 2) Apply inserts in a transaction
+	const db = await initDb();
 	db.transaction(() => {
 		if (wipeFirst) {
 			// Child tables first, then parents (respect FKs)

src/lib/db/index.ts

@@ -1,4 +0,0 @@
-// import 'dotenv/config';
-import { drizzle } from "drizzle-orm/bun-sqlite";
-
-export const db = drizzle(process.env.DB_FILE_NAME);

src/lib/db/schema/tables/songs.ts

@@ -37,7 +37,7 @@ export const songs = sqliteTable(
 		fileName: text("file_name"),
 		fileName480: text("file_name_480"),
 		fileName720: text("file_name_720"),
-		globalPercent: integer("global_percent").notNull(),
+		globalPercent: integer("global_percent"),
 		meanVolume: real("mean_volume"),
 
 		/**

src/lib/db/server.ts

@@ -0,0 +1,34 @@
+import type { LibSQLDatabase } from "drizzle-orm/libsql";
+import { browser, dev } from "$app/environment";
+export async function initDb() {
+	// await import("dotenv/config");
+	// import type { BunSQLiteDatabase } from "drizzle-orm/bun-sqlite";
+
+	let _db: LibSQLDatabase;
+
+	if (dev)
+		process.env.DB_FILE_NAME = "libsql://amq-v1-yurat.aws-us-west-2.turso.io";
+
+	if (!process.env.DB_FILE_NAME) {
+		console.error("[DEBUG] Environment check failed. DB_FILE_NAME is missing.");
+		console.error("[DEBUG] PWD:", process.cwd());
+		// Only log keys to avoid leaking secrets, filtering for DB_
+		console.error(
+			"[DEBUG] Keys in env:",
+			Object.keys(process.env).filter((k) => k.includes("DB")),
+		);
+		throw new Error("DB_FILE_NAME is not set");
+	}
+
+	console.info("Using LibSQL");
+	const { createClient } = await import("@libsql/client");
+	const { drizzle } = await import("drizzle-orm/libsql");
+	const client = createClient({
+		url: process.env.DB_FILE_NAME,
+		authToken:
+			"eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJhIjoicm8iLCJpYXQiOjE3NzA2ODcyMDQsImlkIjoiODI5Y2ZjZmUtNWI1YS00ZWE0LTg5ZTctYWY2ZDY4MzgzZjQ2IiwicmlkIjoiYzY3MWY1NmUtZTQ2MS00NTg1LTk4ZWQtNjk5N2RjMmFhMTJmIn0.QPphfziaAAi4br397gqpptEtk212ArpQdGWJ2BcVFYQxw5ANJf4LNX4JqXuAMAKAcxS6zNPd_xtr8EsI6K38AA",
+	});
+	_db = drizzle(client);
+
+	return _db;
+}

src/lib/player/media-session.ts

@@ -0,0 +1,204 @@
+import { browser } from "$app/environment";
+import type { Track } from "./types";
+
+export type MediaSessionHandlers = {
+	play: () => void;
+	pause: () => void;
+	next: () => void;
+	prev: () => void;
+	seekTo?: (timeSeconds: number) => void;
+	seekBy?: (deltaSeconds: number) => void;
+};
+
+export type MediaSessionBindings = {
+	/**
+	 * Call whenever the current track changes.
+	 */
+	setTrack: (track: Track | null) => void;
+
+	/**
+	 * Call on play/pause changes if you want to keep Media Session "active" state
+	 * aligned with your app (handlers still work regardless).
+	 */
+	setPlaybackState: (state: "none" | "paused" | "playing") => void;
+
+	/**
+	 * Call reasonably often (e.g. on `timeupdate`, `loadedmetadata`, `ratechange`)
+	 * to keep lockscreen / OS UI in sync.
+	 */
+	updatePositionState: (args: {
+		duration: number;
+		position: number;
+		playbackRate?: number;
+	}) => void;
+
+	/**
+	 * Unregisters handlers. Optional — layout-scoped players typically never unmount.
+	 */
+	destroy: () => void;
+};
+
+function canUseMediaSession() {
+	return (
+		browser &&
+		typeof navigator !== "undefined" &&
+		"mediaSession" in navigator &&
+		typeof (navigator as Navigator).mediaSession !== "undefined"
+	);
+}
+
+function canUseMetadata() {
+	return typeof MediaMetadata !== "undefined";
+}
+
+export function createMediaSessionBindings(
+	handlers: MediaSessionHandlers,
+): MediaSessionBindings {
+	const mediaSession = canUseMediaSession()
+		? (navigator as Navigator).mediaSession
+		: null;
+
+	const setActionHandler = (
+		action: MediaSessionAction,
+		handler: MediaSessionActionHandler | null,
+	) => {
+		if (!mediaSession) return;
+		try {
+			mediaSession.setActionHandler(action, handler);
+		} catch {
+			// Some browsers throw for unsupported actions; ignore.
+		}
+	};
+
+	const safeNumber = (n: number) => (Number.isFinite(n) ? n : 0);
+
+	const setTrack = (track: Track | null) => {
+		if (!mediaSession) return;
+		if (!canUseMetadata()) return;
+
+		if (!track) {
+			// Keep it simple: clear metadata.
+			mediaSession.metadata = null;
+			return;
+		}
+
+		function typeNumberLabel(t: Track) {
+			const type = t.type;
+			const n = Number(t.number ?? 0);
+
+			let typeLabel: string | null = null;
+			if (typeof type === "number") {
+				if (type === 1) typeLabel = "OP";
+				else if (type === 2) typeLabel = "ED";
+				else if (type === 3) typeLabel = "INS";
+				else typeLabel = `T${type}`;
+			}
+
+			if (!typeLabel) return null;
+			return `${typeLabel}${n ? String(n) : ""}`;
+		}
+		mediaSession.metadata = new MediaMetadata({
+			title: `${track.animeName} (${typeNumberLabel(track)}) — ${track.title}`,
+			artist: track.artist,
+			album: track.album,
+			// You can add artwork later if/when you have it:
+			// artwork: [{ src: "/some.png", sizes: "512x512", type: "image/png" }]
+		});
+	};
+
+	const setPlaybackState = (state: "none" | "paused" | "playing") => {
+		if (!mediaSession) return;
+		try {
+			mediaSession.playbackState = state;
+		} catch {
+			// Some browsers may not implement playbackState; ignore.
+		}
+	};
+
+	const updatePositionState = (args: {
+		duration: number;
+		position: number;
+		playbackRate?: number;
+	}) => {
+		if (!mediaSession) return;
+
+		const anySession = mediaSession as unknown as {
+			setPositionState?: (state: {
+				duration: number;
+				playbackRate?: number;
+				position: number;
+			}) => void;
+		};
+
+		if (typeof anySession.setPositionState !== "function") return;
+
+		const duration = Math.max(0, safeNumber(args.duration));
+		const position = Math.max(0, safeNumber(args.position));
+		const playbackRate = args.playbackRate ?? 1;
+
+		try {
+			anySession.setPositionState({
+				duration,
+				position: Math.min(position, duration || position),
+				playbackRate,
+			});
+		} catch {
+			// iOS Safari and some Chromium variants can throw on invalid values.
+		}
+	};
+
+	const installHandlers = () => {
+		if (!mediaSession) return;
+
+		setActionHandler("play", () => handlers.play());
+		setActionHandler("pause", () => handlers.pause());
+		setActionHandler("previoustrack", () => handlers.prev());
+		setActionHandler("nexttrack", () => handlers.next());
+
+		// Seeking (optional)
+		setActionHandler("seekto", (details) => {
+			if (!handlers.seekTo) return;
+			const d = details as MediaSessionActionDetails & { seekTime?: number };
+			if (typeof d.seekTime !== "number") return;
+			handlers.seekTo(d.seekTime);
+		});
+
+		setActionHandler("seekbackward", (details) => {
+			const d = details as MediaSessionActionDetails & { seekOffset?: number };
+			const offset = typeof d.seekOffset === "number" ? d.seekOffset : 10;
+			if (handlers.seekBy) handlers.seekBy(-offset);
+			else if (handlers.seekTo) handlers.seekTo(0); // fallback-ish
+		});
+
+		setActionHandler("seekforward", (details) => {
+			const d = details as MediaSessionActionDetails & { seekOffset?: number };
+			const offset = typeof d.seekOffset === "number" ? d.seekOffset : 10;
+			if (handlers.seekBy) handlers.seekBy(offset);
+		});
+
+		// Stop isn't as universally supported; map to pause.
+		setActionHandler("stop", () => handlers.pause());
+	};
+
+	const destroy = () => {
+		if (!mediaSession) return;
+		// Clear handlers we set.
+		setActionHandler("play", null);
+		setActionHandler("pause", null);
+		setActionHandler("previoustrack", null);
+		setActionHandler("nexttrack", null);
+		setActionHandler("seekto", null);
+		setActionHandler("seekbackward", null);
+		setActionHandler("seekforward", null);
+		setActionHandler("stop", null);
+	};
+
+	installHandlers();
+
+	return {
+		setTrack,
+		setPlaybackState,
+		updatePositionState,
+		destroy,
+	};
+}

src/lib/player/persist.ts

@@ -1,33 +1,232 @@
+import { z } from "zod";
 import { browser } from "$app/environment";
 import type { Track } from "./types";
 
-const STORAGE_KEY = "amqtrain:player:v2";
+/**
+ * Persistence for the global player.
+ *
+ * Persisted:
+ * - queue
+ * - currentIndex
+ * - shuffleEnabled
+ * - wrapEnabled
+ * - shuffle traversal bookkeeping (order/history/cursor)
+ * - volume
+ * - uiOpen
+ *
+ * Not persisted by design:
+ * - currentTime / playback position
+ * - isPlaying (we always restore paused)
+ */
 
-export type PersistedState = {
+const STORAGE_KEY = "amqtrain:player:v1";
+const STORAGE_VERSION = 1;
+
+const TrackSchema = z
+	.object({
+		id: z.number().int().nonnegative(),
+		src: z.string().min(1),
+		title: z.string().default(""),
+		artist: z.string().default(""),
+		album: z.string().default(""),
+
+		animeName: z.string().optional(),
+		type: z.number().optional(),
+		number: z.number().optional(),
+		fileName: z.string().nullable().optional(),
+	})
+	.strict();
+
+const PersistedSnapshotSchema = z
+	.object({
+		version: z.literal(STORAGE_VERSION),
+
+		queue: z.array(TrackSchema).default([]),
+		currentIndex: z.number().int().nullable().default(null),
+
+		shuffleEnabled: z.boolean().default(false),
+		wrapEnabled: z.boolean().default(false),
+
+		/**
+		 * Shuffle traversal:
+		 * - order: upcoming indices into `queue` in the order they will be visited
+		 * - history: visited indices into `queue` in visit order
+		 * - cursor: index into `history` pointing at the current item
+		 */
+		order: z.array(z.number().int().nonnegative()).default([]),
+		history: z.array(z.number().int().nonnegative()).default([]),
+		cursor: z.number().int().default(0),
+
+		volume: z.number().min(0).max(1).default(1),
+		uiOpen: z.boolean().default(false),
+	})
+	.strict();
+
+export type PersistedSnapshot = z.infer<typeof PersistedSnapshotSchema>;
+
+export type PersistablePlayerState = {
 	queue: Track[];
-	currentId: number | null;
+	currentIndex: number | null;
+
+	shuffleEnabled: boolean;
+	wrapEnabled: boolean;
+
+	order: number[];
+	history: number[];
+	cursor: number;
+
 	volume: number;
-	isMuted: boolean;
+	uiOpen: boolean;
-	minimized: boolean;
 };
 
-export function loadState(): PersistedState | null {
+export function loadPersistedPlayerState(): PersistablePlayerState | null {
 	if (!browser) return null;
+
 	try {
 		const raw = localStorage.getItem(STORAGE_KEY);
 		if (!raw) return null;
-		return JSON.parse(raw);
+
-	} catch (e) {
+		const parsed = PersistedSnapshotSchema.safeParse(JSON.parse(raw));
-		console.error("Failed to load player state", e);
+		if (!parsed.success) return null;
+
+		return sanitizePersistedState(parsed.data);
+	} catch {
 		return null;
 	}
 }
 
-export function saveState(state: PersistedState) {
+export function savePersistedPlayerState(state: PersistablePlayerState): void {
 	if (!browser) return;
+
+	const snapshot: PersistedSnapshot = {
+		version: STORAGE_VERSION,
+
+		queue: state.queue,
+		currentIndex: state.currentIndex,
+
+		shuffleEnabled: state.shuffleEnabled,
+		wrapEnabled: state.wrapEnabled,
+
+		order: state.order,
+		history: state.history,
+		cursor: state.cursor,
+
+		volume: clamp01(state.volume),
+		uiOpen: state.uiOpen,
+	};
+
 	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
-	} catch (e) {
+	} catch {
-		console.error("Failed to save player state", e);
+		// Ignore quota/security errors; persistence is a best-effort feature.
 	}
 }
+
+/**
+ * Throttled saver (simple debounce). Call this from reactive effects.
+ */
+export function createPersistScheduler(delayMs = 250) {
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	return (state: PersistablePlayerState) => {
+		if (!browser) return;
+
+		if (timeout) clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			timeout = null;
+			savePersistedPlayerState(state);
+		}, delayMs);
+	};
+}
+
+export function clearPersistedPlayerState(): void {
+	if (!browser) return;
+	try {
+		localStorage.removeItem(STORAGE_KEY);
+	} catch {
+		// ignore
+	}
+}
+
+function sanitizePersistedState(
+	snapshot: PersistedSnapshot,
+): PersistablePlayerState {
+	const queue = dedupeById(snapshot.queue);
+
+	const maxIndex = queue.length - 1;
+	const currentIndex =
+		snapshot.currentIndex == null
+			? null
+			: snapshot.currentIndex >= 0 && snapshot.currentIndex <= maxIndex
+				? snapshot.currentIndex
+				: null;
+
+	const order = filterValidIndices(snapshot.order, queue.length);
+	const history = filterValidIndices(snapshot.history, queue.length);
+
+	// cursor points into history; if history is empty, cursor should be 0
+	const cursor =
+		history.length === 0
+			? 0
+			: Math.max(0, Math.min(snapshot.cursor, history.length - 1));
+
+	// If we have a currentIndex but history doesn't reflect it, try to repair:
+	// put currentIndex at end and point cursor there.
+	let repairedHistory = history;
+	let repairedCursor = cursor;
+
+	if (currentIndex != null) {
+		if (history.length === 0 || history[cursor] !== currentIndex) {
+			repairedHistory = [...history, currentIndex];
+			repairedCursor = repairedHistory.length - 1;
+		}
+	}
+
+	// Ensure order doesn't contain items already visited up through cursor.
+	const visitedSet =
+		repairedHistory.length === 0
+			? new Set<number>()
+			: new Set(repairedHistory.slice(0, repairedCursor + 1));
+	const repairedOrder = order.filter((i) => !visitedSet.has(i));
+
+	return {
+		queue,
+		currentIndex,
+
+		shuffleEnabled: snapshot.shuffleEnabled,
+		wrapEnabled: snapshot.wrapEnabled,
+
+		order: repairedOrder,
+		history: repairedHistory,
+		cursor: repairedCursor,
+
+		volume: clamp01(snapshot.volume),
+		uiOpen: snapshot.uiOpen,
+	};
+}
+
+function filterValidIndices(indices: number[], length: number) {
+	const out: number[] = [];
+	for (const i of indices) {
+		if (Number.isInteger(i) && i >= 0 && i < length) out.push(i);
+	}
+	return out;
+}
+
+function dedupeById(tracks: Track[]) {
+	const seen = new Set<number>();
+	const out: Track[] = [];
+	for (const t of tracks) {
+		const id = Number(t.id);
+		if (!Number.isFinite(id)) continue;
+		if (seen.has(id)) continue;
+		seen.add(id);
+		out.push(t);
+	}
+	return out;
+}
+
+function clamp01(n: number) {
+	if (!Number.isFinite(n)) return 1;
+	return Math.max(0, Math.min(1, n));
+}

src/lib/player/player.svelte.ts

@@ -0,0 +1,893 @@
+import { browser } from "$app/environment";
+import {
+	createPersistScheduler,
+	loadPersistedPlayerState,
+	type PersistablePlayerState,
+} from "./persist";
+import {
+	buildInitialShuffleOrder,
+	injectNextIntoShuffleOrder,
+	reindexAfterMoveOrRemove,
+} from "./shuffle";
+import type { Track } from "./types";
+
+/**
+ * Global audio player state + queue/shuffle actions (Svelte 5 runes).
+ *
+ * This module is intended to be imported from UI components and pages.
+ * The actual <audio> element lives in a single GlobalPlayer component, which
+ * binds to the state here and calls actions.
+ *
+ * Canonical dedupe id: Track.id === annSongId (number).
+ *
+ * NOTE: Do NOT use module-level `$effect` here — consumers (e.g. GlobalPlayer)
+ * should subscribe via `subscribe()` and drive any side-effects (like persistence).
+ */
+
+export type InsertMode = "play" | "playNext" | "add" | "jump";
+
+export type PlayerSnapshot = {
+	queue: Track[];
+	currentIndex: number | null;
+
+	// derived-ish convenience
+	currentTrack: Track | null;
+
+	shuffleEnabled: boolean;
+	wrapEnabled: boolean;
+
+	// shuffle traversal
+	order: number[];
+	history: number[];
+	cursor: number;
+
+	volume: number;
+
+	// UI
+	uiOpen: boolean;
+};
+
+export type PlayerSubscriber = (snapshot: PlayerSnapshot) => void;
+export type Unsubscribe = () => void;
+
+const DEFAULT_VOLUME = 1;
+
+function isMobileLike() {
+	if (!browser) return false;
+	return window.matchMedia?.("(max-width: 1023px)")?.matches ?? false;
+}
+
+function clamp01(n: number) {
+	if (!Number.isFinite(n)) return DEFAULT_VOLUME;
+	return Math.max(0, Math.min(1, n));
+}
+
+function arrayRemoveAt<T>(arr: T[], index: number) {
+	if (index < 0 || index >= arr.length) return arr;
+	return [...arr.slice(0, index), ...arr.slice(index + 1)];
+}
+
+function arrayInsertAt<T>(arr: T[], index: number, item: T) {
+	const i = Math.max(0, Math.min(index, arr.length));
+	return [...arr.slice(0, i), item, ...arr.slice(i)];
+}
+
+function arrayMove<T>(arr: T[], from: number, to: number) {
+	if (from === to) return arr;
+	if (from < 0 || from >= arr.length) return arr;
+	if (to < 0 || to >= arr.length) return arr;
+
+	const copy = [...arr];
+	const [item] = copy.splice(from, 1);
+	copy.splice(to, 0, item);
+	return copy;
+}
+
+function dedupeTracks(tracks: Track[]) {
+	const seen = new Set<number>();
+	const out: Track[] = [];
+	for (const t of tracks) {
+		const id = Number(t.id);
+		if (!Number.isFinite(id)) continue;
+		if (seen.has(id)) continue;
+		seen.add(id);
+		out.push(t);
+	}
+	return out;
+}
+
+function visitedSet(history: number[], cursor: number) {
+	if (history.length === 0) return new Set<number>();
+	const end = Math.max(0, Math.min(cursor, history.length - 1));
+	return new Set(history.slice(0, end + 1));
+}
+
+function persistableState(): PersistablePlayerState {
+	return {
+		queue,
+		currentIndex,
+
+		shuffleEnabled,
+		wrapEnabled,
+
+		order,
+		history,
+		cursor,
+
+		volume,
+		uiOpen,
+	};
+}
+
+/** --- Initialize state (restore persisted if present) --- */
+
+const persisted = browser ? loadPersistedPlayerState() : null;
+
+let queue = $state<Track[]>(persisted?.queue ?? []);
+let currentIndex = $state<number | null>(persisted?.currentIndex ?? null);
+
+let shuffleEnabled = $state<boolean>(persisted?.shuffleEnabled ?? false);
+let wrapEnabled = $state<boolean>(persisted?.wrapEnabled ?? false);
+
+let order = $state<number[]>(persisted?.order ?? []);
+let history = $state<number[]>(persisted?.history ?? []);
+let cursor = $state<number>(persisted?.cursor ?? 0);
+
+let volume = $state<number>(clamp01(persisted?.volume ?? DEFAULT_VOLUME));
+
+let uiOpen = $state<boolean>(
+	// Default based on the current viewport:
+	// - mobile: closed
+	// - desktop: open
+	//
+	// Note: we intentionally do NOT default from persisted `uiOpen`, so the UI
+	// always follows the current device/viewport expectation.
+	!isMobileLike(),
+);
+
+const currentTrack = $derived<Track | null>(
+	currentIndex == null ? null : (queue[currentIndex] ?? null),
+);
+
+const snapshot = $derived<PlayerSnapshot>({
+	queue,
+	currentIndex,
+	currentTrack,
+	shuffleEnabled,
+	wrapEnabled,
+	order,
+	history,
+	cursor,
+	volume,
+	uiOpen,
+});
+
+/** --- Lightweight subscription API (to avoid polling) --- */
+const subscribers = new Set<PlayerSubscriber>();
+
+function notifySubscribers() {
+	// Read `snapshot` here so every subscriber sees a consistent value.
+	const s = snapshot;
+	for (const fn of subscribers) fn(s);
+}
+
+/**
+ * Subscribe to player snapshot changes.
+ *
+ * - Calls `fn` immediately with the current snapshot
+ * - Returns an `unsubscribe` function
+ */
+export function subscribe(fn: PlayerSubscriber): Unsubscribe {
+	subscribers.add(fn);
+	fn(snapshot);
+
+	return () => {
+		subscribers.delete(fn);
+	};
+}
+
+/**
+ * Notify subscribers at the end of the current microtask.
+ * This coalesces multiple mutations within the same tick into one update.
+ */
+let notifyQueued = false;
+function queueNotify() {
+	if (notifyQueued) return;
+	notifyQueued = true;
+	queueMicrotask(() => {
+		notifyQueued = false;
+		notifySubscribers();
+	});
+}
+
+/**
+ * Persistence
+ *
+ * Persistence must be driven from a component (e.g. GlobalPlayer) via `subscribe()`
+ * to avoid orphaned module-level effects.
+ */
+const schedulePersist = createPersistScheduler(250);
+
+export function schedulePersistNow(): void {
+	if (!browser) return;
+	schedulePersist(persistableState());
+}
+
+/** --- Public reads --- */
+
+export function getSnapshot(): PlayerSnapshot {
+	return snapshot;
+}
+
+export function hasTrack(id: number): boolean {
+	const wanted = Number(id);
+	return queue.some((t) => t.id === wanted);
+}
+
+export function indexOfTrack(id: number): number {
+	const wanted = Number(id);
+	return queue.findIndex((t) => t.id === wanted);
+}
+
+/** --- Queue traversal helpers --- */
+
+function ensureTraversalStateForCurrent() {
+	// Ensure history/cursor reflect currentIndex when possible.
+	if (currentIndex == null) {
+		history = [];
+		cursor = 0;
+		return;
+	}
+
+	if (history.length === 0) {
+		history = [currentIndex];
+		cursor = 0;
+		return;
+	}
+
+	const cur = history[cursor];
+	if (cur !== currentIndex) {
+		// Repair without rewriting past: append and move cursor to it.
+		history = [...history, currentIndex];
+		cursor = history.length - 1;
+	}
+}
+
+function rebuildShuffleOrderPreservingPast() {
+	if (!shuffleEnabled) {
+		order = [];
+		return;
+	}
+
+	ensureTraversalStateForCurrent();
+
+	const visited = visitedSet(history, cursor);
+	order = buildInitialShuffleOrder(queue.length, visited);
+}
+
+/**
+ * Get the next queue index according to shuffle/linear mode.
+ * Returns null if there is no next item (and wrap is disabled).
+ */
+function computeNextIndex(): number | null {
+	if (queue.length === 0) return null;
+
+	if (currentIndex == null) return 0;
+
+	if (!shuffleEnabled) {
+		const next = currentIndex + 1;
+		if (next < queue.length) return next;
+		return wrapEnabled ? 0 : null;
+	}
+
+	ensureTraversalStateForCurrent();
+
+	// If user went backwards in history and presses next, prefer moving forward in history.
+	if (cursor < history.length - 1) {
+		return history[cursor + 1] ?? null;
+	}
+
+	if (order.length === 0) {
+		if (!wrapEnabled) return null;
+
+		// Wrap in shuffle mode: keep past history, but allow revisiting by
+		// generating a fresh future order excluding "past" only up through cursor.
+		// Since at end, visited is all history; to wrap, we treat visited as empty
+		// and start a new cycle, but we MUST NOT mutate history.
+		// Easiest: generate an order containing all indices except current first,
+		// then inject current out.
+		const all = new Set<number>();
+		// visited empty for wrap cycle
+		order = buildInitialShuffleOrder(queue.length, all);
+		order = order.filter((i) => i !== history[cursor]);
+	}
+
+	return order[0] ?? null;
+}
+
+/**
+ * Get the previous queue index according to shuffle history or linear mode.
+ * Returns null if there is no previous item (and wrap is disabled).
+ */
+function computePrevIndex(currentTimeSeconds = 0): number | null {
+	if (queue.length === 0) return null;
+	if (currentIndex == null) return null;
+
+	// Standard behavior: if you've listened a bit, restart track.
+	if (currentTimeSeconds > 3) return currentIndex;
+
+	if (!shuffleEnabled) {
+		const prev = currentIndex - 1;
+		if (prev >= 0) return prev;
+		return wrapEnabled ? queue.length - 1 : null;
+	}
+
+	ensureTraversalStateForCurrent();
+
+	if (cursor > 0) return history[cursor - 1] ?? null;
+	if (!wrapEnabled) return null;
+
+	// Wrap backwards in shuffle mode:
+	// We can jump to the last item in history if it exists, otherwise pick any.
+	if (history.length > 0) return history[history.length - 1] ?? null;
+	return 0;
+}
+
+function applyCurrentIndex(next: number | null) {
+	currentIndex = next;
+
+	if (next == null) {
+		// stop traversal, but keep queue
+		return;
+	}
+
+	if (!shuffleEnabled) return;
+
+	// Ensure traversal exists and is anchored at *this* currentIndex.
+	// This is important for jump-to-index behavior in shuffle mode.
+	ensureTraversalStateForCurrent();
+
+	// If we jumped to an index that's not reflected at the current cursor,
+	// align cursor/history so that prev/next work relative to the jumped item.
+	// Strategy:
+	// - if next is already somewhere in history, move cursor there
+	// - otherwise, append it and set cursor to the end
+	const existingPos = history.indexOf(next);
+	if (existingPos !== -1) {
+		cursor = existingPos;
+	} else if (history[cursor] !== next) {
+		history = [...history, next];
+		cursor = history.length - 1;
+	}
+
+	// If this index was scheduled in the future order, remove it so we don't revisit.
+	order = order.filter((i) => i !== next);
+
+	// If it was at the head, that's implicitly consumed as well.
+	if (order[0] === next) order = order.slice(1);
+}
+
+/** --- Public traversal actions --- */
+
+export function next(): void {
+	const idx = computeNextIndex();
+	if (idx == null) {
+		currentIndex = null;
+		queueNotify();
+		return;
+	}
+	applyCurrentIndex(idx);
+	queueNotify();
+}
+
+export function prev(currentTimeSeconds = 0): void {
+	const idx = computePrevIndex(currentTimeSeconds);
+	if (idx == null) return;
+
+	// If idx === currentIndex, we interpret that as "restart track"
+	applyCurrentIndex(idx);
+	queueNotify();
+}
+
+/** Jump to an existing queued track by id (does not reorder). */
+export function jumpToTrack(id: number): void {
+	const i = indexOfTrack(id);
+	if (i === -1) return;
+	applyCurrentIndex(i);
+	queueNotify();
+}
+
+/** --- Queue mutation primitives (keep traversal state consistent) --- */
+
+function removeAt(index: number) {
+	if (index < 0 || index >= queue.length) return;
+
+	queue = arrayRemoveAt(queue, index);
+
+	// Fix currentIndex
+	if (currentIndex != null) {
+		if (currentIndex === index) {
+			// Removing current track -> advance to next if possible else stop
+			currentIndex = null;
+		} else if (currentIndex > index) {
+			currentIndex = currentIndex - 1;
+		}
+	}
+
+	if (shuffleEnabled) {
+		const re = reindexAfterMoveOrRemove({
+			order,
+			history,
+			cursor,
+			currentIndex,
+			fromIndex: index,
+			toIndex: null,
+		});
+		order = re.order;
+		history = re.history;
+		cursor = re.cursor;
+		currentIndex = re.currentIndex;
+	}
+
+	// If current was removed, attempt to advance
+	if (currentIndex == null && queue.length > 0) {
+		const idx = computeNextIndex();
+		if (idx != null) applyCurrentIndex(idx);
+	}
+}
+
+function moveIndex(from: number, to: number) {
+	if (from === to) return;
+	if (from < 0 || from >= queue.length) return;
+	if (to < 0 || to >= queue.length) return;
+
+	queue = arrayMove(queue, from, to);
+
+	// Fix currentIndex (linear)
+	if (currentIndex != null) {
+		if (currentIndex === from) currentIndex = to;
+		else if (to < from) {
+			// moved earlier
+			if (currentIndex >= to && currentIndex < from) currentIndex += 1;
+		} else {
+			// moved later
+			if (currentIndex > from && currentIndex <= to) currentIndex -= 1;
+		}
+	}
+
+	if (shuffleEnabled) {
+		const re = reindexAfterMoveOrRemove({
+			order,
+			history,
+			cursor,
+			currentIndex,
+			fromIndex: from,
+			toIndex: to,
+		});
+		order = re.order;
+		history = re.history;
+		cursor = re.cursor;
+		currentIndex = re.currentIndex;
+	}
+}
+
+/** Insert a new track (that is NOT currently in queue) at index. */
+function insertNewAt(index: number, track: Track) {
+	queue = arrayInsertAt(queue, index, track);
+
+	// Fix currentIndex if insertion occurs before/at current
+	if (currentIndex != null && index <= currentIndex) {
+		currentIndex += 1;
+	}
+
+	if (!shuffleEnabled) return;
+
+	// When shuffle is enabled, new item should be eligible for future play.
+	// We do not touch past history.
+	ensureTraversalStateForCurrent();
+
+	// We inserted at `index`, which shifts all existing indices >= index by +1.
+	// Reindex traversal state for a conceptual move "fromIndex = -1" doesn't fit,
+	// so perform a manual shift.
+	const shiftUp = (i: number) => (i >= index ? i + 1 : i);
+
+	history = history.map(shiftUp);
+	order = order.map(shiftUp);
+
+	// New track is at `index`. By default it should appear in the remaining order.
+	// We'll append; specific actions (play/playNext) will inject it as needed.
+	order = [...order, index];
+}
+
+/** --- Public queue actions --- */
+
+export function clearQueue(): void {
+	queue = [];
+	currentIndex = null;
+
+	order = [];
+	history = [];
+	cursor = 0;
+
+	queueNotify();
+}
+
+export function removeTrack(id: number): void {
+	const i = indexOfTrack(id);
+	if (i === -1) return;
+	removeAt(i);
+	queueNotify();
+}
+
+/**
+ * Reorder an existing queued track by id.
+ *
+ * Semantics depend on shuffle:
+ * - Linear (shuffle off): reorder the underlying `queue` and adjust `currentIndex`.
+ * - Shuffle (shuffle on): reorder the UPCOMING play order (the `order` list), not the
+ *   underlying `queue`, because the UI is presenting a shuffled traversal that users
+ *   expect to be able to rearrange.
+ *
+ * In shuffle mode this only affects tracks that are still in the future schedule
+ * (`order`). Already-played history is left intact.
+ *
+ * Notes:
+ * - `toIndex` is a queue index when shuffle is OFF (destination position in `queue`).
+ * - `toIndex` is a queue index when shuffle is ON too, but it is interpreted as
+ *   "place this track before the track currently at queue index `toIndex` in the
+ *   UPCOMING order", i.e. it changes `order`, not `queue`.
+ */
+export function reorderTrackById(id: number, toIndex: number): void {
+	const from = indexOfTrack(id);
+	if (from === -1) return;
+
+	const clampedTo = Math.max(
+		0,
+		Math.min(queue.length - 1, Math.floor(toIndex)),
+	);
+
+	// Shuffle: reorder upcoming traversal schedule, not underlying queue.
+	if (shuffleEnabled) {
+		// Ensure traversal state exists
+		ensureTraversalStateForCurrent();
+
+		// Only reorder within the future schedule (`order`).
+		// If the dragged track isn't in `order`, it's either current, already played, or unscheduled.
+		const fromPos = order.indexOf(from);
+		if (fromPos === -1) {
+			queueNotify();
+			return;
+		}
+
+		// Determine insertion position relative to the target queue index within `order`.
+		// If target isn't currently in `order`, we clamp to the end of the future schedule.
+		let toPos = order.indexOf(clampedTo);
+		if (toPos === -1) toPos = order.length;
+
+		// Moving an item forward past itself needs an index adjustment after removal.
+		const without = order.filter((i) => i !== from);
+		if (toPos > fromPos) toPos = Math.max(0, toPos - 1);
+
+		const nextPos = Math.max(0, Math.min(without.length, toPos));
+		order = [...without.slice(0, nextPos), from, ...without.slice(nextPos)];
+
+		queueNotify();
+		return;
+	}
+
+	// Linear: reorder the underlying queue
+	if (from === clampedTo) return;
+
+	moveIndex(from, clampedTo);
+	queueNotify();
+}
+
+/**
+ * Core insertion behavior per your rules.
+ *
+ * - "jump": jump to an existing queued track (does not reorder)
+ * - "play": move/insert to right-after-current and then skip to it
+ * - "playNext": move/insert to right-after-current but don't skip
+ * - "add": append (deduped)
+ *
+ * Dedupe semantics:
+ * - If exists, we MOVE it instead of duplicating (except "jump", which never moves).
+ */
+export function insertTrack(track: Track, mode: InsertMode): void {
+	// Normalize + basic guard
+	if (!track || !Number.isFinite(track.id) || !track.src) return;
+
+	// Clicking an already-queued song should MOVE PLAYHEAD to that queue position,
+	// not reshuffle the queue around the current track.
+	if (mode === "jump") {
+		const i = indexOfTrack(track.id);
+		if (i === -1) return;
+
+		applyCurrentIndex(i);
+
+		// In shuffle mode, make sure the future order is still valid relative to the
+		// new cursor position (i.e., "next" should come from order after this jump).
+		// We rebuild the remaining order while preserving already-played history.
+		if (shuffleEnabled) {
+			rebuildShuffleOrderPreservingPast();
+		}
+
+		queueNotify();
+		return;
+	}
+
+	// If the user hits "Play" / "Play next" on the *currently playing* track,
+	// treat it as a no-op. This avoids trying to move the current track to
+	// "right after itself" and then skipping, which can produce confusing
+	// queue changes (and in some cases corrupt traversal state).
+	//
+	// NOTE: "Add to queue" still dedupes below, but we early-return there too.
+	if (currentIndex != null && queue[currentIndex]?.id === track.id) {
+		queueNotify();
+		return;
+	}
+
+	// Empty queue behavior
+	if (queue.length === 0) {
+		queue = [track];
+		currentIndex = 0;
+
+		// Initialize traversal state
+		if (shuffleEnabled) {
+			history = [0];
+			cursor = 0;
+			order = [];
+		} else {
+			history = [];
+			cursor = 0;
+			order = [];
+		}
+
+		if (mode === "add" || mode === "playNext") {
+			// If user only adds, do not auto-start; but we still set currentIndex?
+			// Per your desired behavior: "start the queue if it's empty" occurs on Play,
+			// not necessarily on Add/PlayNext. We'll keep "currentIndex = 0" so it shows
+			// a selected track, but GlobalPlayer should remain paused until user hits play.
+			// NOTE: If you prefer currentIndex to remain null for add/playNext on empty,
+			// we can tweak later.
+		}
+
+		// For play: skipping to inserted is effectively current track already.
+		queueNotify();
+		return;
+	}
+
+	// Determine insertion target: right after current, or at end if nothing selected.
+	const base =
+		currentIndex == null
+			? -1
+			: Math.max(-1, Math.min(currentIndex, queue.length - 1));
+	const targetIndex = base + 1;
+
+	const existingIndex = indexOfTrack(track.id);
+
+	if (mode === "add") {
+		if (existingIndex !== -1) return;
+		insertNewAt(queue.length, track);
+		// No traversal tweaks required
+		queueNotify();
+		return;
+	}
+
+	// play / playNext:
+	if (existingIndex === -1) {
+		// Insert as a new item at targetIndex
+		insertNewAt(targetIndex, track);
+
+		if (shuffleEnabled) {
+			// Ensure it becomes next in shuffled traversal
+			ensureTraversalStateForCurrent();
+			order = injectNextIntoShuffleOrder({
+				order,
+				history,
+				cursor,
+				nextIndex: targetIndex,
+			});
+		}
+	} else {
+		// Move existing to targetIndex (account for removal shifting)
+		// If existing is before target, the "real" target after removal shifts by -1
+		const adjustedTarget =
+			existingIndex < targetIndex ? targetIndex - 1 : targetIndex;
+
+		if (existingIndex !== adjustedTarget) {
+			moveIndex(existingIndex, adjustedTarget);
+		}
+
+		if (shuffleEnabled) {
+			ensureTraversalStateForCurrent();
+			order = injectNextIntoShuffleOrder({
+				order,
+				history,
+				cursor,
+				nextIndex: adjustedTarget,
+			});
+		}
+	}
+
+	if (mode === "play") {
+		// Skip current -> go to that "next"
+		next();
+	} else {
+		queueNotify();
+	}
+}
+
+export function insertTracks(tracks: Track[], mode: InsertMode): void {
+	const incoming = dedupeTracks(tracks).filter((t) => t?.src);
+
+	if (incoming.length === 0) return;
+
+	if (mode === "add") {
+		// Append in order
+		for (const t of incoming) insertTrack(t, "add");
+		queueNotify();
+		return;
+	}
+
+	// For play/playNext with multiple tracks:
+	// Place them sequentially after current in the order provided.
+	// - playNext: do not skip
+	// - play: skip to first inserted (becomes next), but keep subsequent ones after it
+	const base =
+		queue.length === 0
+			? -1
+			: currentIndex == null
+				? queue.length - 1
+				: currentIndex;
+
+	let insertPos = base + 1;
+
+	for (const t of incoming) {
+		const existing = indexOfTrack(t.id);
+		if (existing === -1) {
+			insertNewAt(insertPos, t);
+			if (shuffleEnabled) {
+				ensureTraversalStateForCurrent();
+				order = injectNextIntoShuffleOrder({
+					order,
+					history,
+					cursor,
+					nextIndex: insertPos,
+				});
+			}
+			insertPos += 1;
+		} else {
+			const adjustedTarget = existing < insertPos ? insertPos - 1 : insertPos;
+			if (existing !== adjustedTarget) moveIndex(existing, adjustedTarget);
+			if (shuffleEnabled) {
+				ensureTraversalStateForCurrent();
+				order = injectNextIntoShuffleOrder({
+					order,
+					history,
+					cursor,
+					nextIndex: adjustedTarget,
+				});
+			}
+			insertPos += 1;
+		}
+	}
+
+	if (mode === "play") {
+		next();
+	} else {
+		queueNotify();
+	}
+}
+
+/** --- Toggles / settings --- */
+
+export function setVolume(v: number): void {
+	volume = clamp01(v);
+	queueNotify();
+}
+
+export function setUiOpen(open: boolean): void {
+	uiOpen = !!open;
+	queueNotify();
+}
+
+export function toggleUiOpen(): void {
+	uiOpen = !uiOpen;
+	queueNotify();
+}
+
+export function toggleWrap(): void {
+	wrapEnabled = !wrapEnabled;
+	queueNotify();
+}
+
+export function enableShuffle(enable: boolean): void {
+	const nextVal = !!enable;
+	if (shuffleEnabled === nextVal) return;
+
+	shuffleEnabled = nextVal;
+
+	if (!shuffleEnabled) {
+		order = [];
+		history = [];
+		cursor = 0;
+		queueNotify();
+		return;
+	}
+
+	// Turning shuffle on: preserve current as starting history point
+	if (currentIndex != null) {
+		history = [currentIndex];
+		cursor = 0;
+	} else {
+		history = [];
+		cursor = 0;
+	}
+
+	rebuildShuffleOrderPreservingPast();
+	queueNotify();
+}
+
+export function toggleShuffle(): void {
+	enableShuffle(!shuffleEnabled);
+}
+
+/**
+ * Ensure traversal state is sane if queue was externally replaced.
+ * Not expected in normal usage, but handy if you implement "replace queue" later.
+ */
+export function setQueue(
+	tracks: Track[],
+	opts?: { startIndex?: number | null },
+) {
+	queue = dedupeTracks(tracks);
+	currentIndex =
+		opts?.startIndex == null
+			? null
+			: opts.startIndex >= 0 && opts.startIndex < queue.length
+				? opts.startIndex
+				: null;
+
+	order = [];
+	history = [];
+	cursor = 0;
+
+	if (shuffleEnabled) rebuildShuffleOrderPreservingPast();
+
+	queueNotify();
+}
+
+/** --- Convenience wrappers that match UI wording --- */
+
+export function play(track: Track): void {
+	insertTrack(track, "play");
+}
+
+export function playNext(track: Track): void {
+	insertTrack(track, "playNext");
+}
+
+export function addToQueue(track: Track): void {
+	insertTrack(track, "add");
+}
+
+export function addAllToQueue(tracks: Track[]): void {
+	insertTracks(tracks, "add");
+}
+
+export function playAllNext(tracks: Track[]): void {
+	insertTracks(tracks, "playNext");
+}
+
+/**
+ * Minimal "now playing" string helpers for UI.
+ * Keeping here avoids repeated null checks in templates.
+ */
+export function nowPlayingLabel(): string {
+	if (!currentTrack) return "Nothing playing";
+	const t = currentTrack;
+	const title = (t.title ?? "").trim() || "Unknown title";
+	const artist = (t.artist ?? "").trim() || "Unknown Artist";
+	return `${title} — ${artist}`;
+}

src/lib/player/shuffle.ts

@@ -0,0 +1,181 @@
+export type ShuffleState = {
+	/**
+	 * Upcoming indices into the *current queue* in the order they will be visited
+	 * when calling `next()` while shuffle is enabled.
+	 */
+	order: number[];
+
+	/**
+	 * Visited indices into the *current queue* in visit order.
+	 * `cursor` points at the currently active entry within this array.
+	 */
+	history: number[];
+
+	/**
+	 * Index into `history` that represents the current item.
+	 */
+	cursor: number;
+};
+
+export type ReindexResult = {
+	order: number[];
+	history: number[];
+	cursor: number;
+	currentIndex: number | null;
+};
+
+/**
+ * Build a shuffled play order for the *future* without affecting past history.
+ *
+ * - `queueLength`: length of the queue.
+ * - `visited`: indices that are considered "already visited" (typically history[0..cursor]).
+ * - `rng`: optional deterministic RNG for tests.
+ */
+export function buildInitialShuffleOrder(
+	queueLength: number,
+	visited: Set<number>,
+	rng: () => number = Math.random,
+): number[] {
+	const remaining: number[] = [];
+	for (let i = 0; i < queueLength; i += 1) {
+		if (!visited.has(i)) remaining.push(i);
+	}
+	return shuffleArray(remaining, rng);
+}
+
+/**
+ * Insert a track so it becomes the "next" item, even while shuffle is enabled.
+ *
+ * This modifies ONLY the future order. Past history is preserved.
+ *
+ * - If `nextIndex` is already in `order`, it is moved to the front.
+ * - If `nextIndex` is currently in "visited" history (<= cursor), we do not
+ *   reschedule it as next (that would violate history semantics). In that case,
+ *   this function is a no-op.
+ * - If `track` is the current item (history[cursor]), no-op.
+ */
+export function injectNextIntoShuffleOrder(args: {
+	order: number[];
+	history: number[];
+	cursor: number;
+	nextIndex: number;
+}): number[] {
+	const { order, history, cursor, nextIndex } = args;
+
+	if (!Number.isInteger(nextIndex) || nextIndex < 0) return order;
+
+	const current = history[cursor];
+	if (current === nextIndex) return order;
+
+	// Preserve past: don't schedule already-visited entries as "next"
+	const visited = new Set(history.slice(0, cursor + 1));
+	if (visited.has(nextIndex)) return order;
+
+	const nextOrder: number[] = [];
+	nextOrder.push(nextIndex);
+
+	for (const i of order) {
+		if (i === nextIndex) continue;
+		nextOrder.push(i);
+	}
+
+	return nextOrder;
+}
+
+/**
+ * Reindex a shuffle traversal state after a queue mutation that changes indices.
+ *
+ * Provide:
+ * - `fromIndex`: original index of the moved/removed item
+ * - `toIndex`: new index of the moved item, or `null` if the item was removed
+ * - `currentIndex`: the current queue index before reindexing (may be null)
+ *
+ * This updates `history`, `order`, and `currentIndex` so they point to correct
+ * indices in the new queue.
+ *
+ * Notes:
+ * - This assumes a *single-item* move or remove.
+ * - For "insert new item" (not previously present), you typically don't need
+ *   this; instead you just insert the index into `order` as desired.
+ */
+export function reindexAfterMoveOrRemove(args: {
+	order: number[];
+	history: number[];
+	cursor: number;
+	currentIndex: number | null;
+
+	fromIndex: number;
+	toIndex: number | null;
+}): ReindexResult {
+	const { fromIndex, toIndex } = args;
+
+	const remap = (i: number): number | null => {
+		if (!Number.isInteger(i) || i < 0) return null;
+
+		// Removal
+		if (toIndex == null) {
+			if (i === fromIndex) return null;
+			if (i > fromIndex) return i - 1;
+			return i;
+		}
+
+		// Move
+		if (fromIndex === toIndex) return i;
+
+		// Moving earlier: items between [toIndex .. fromIndex-1] shift +1
+		if (toIndex < fromIndex) {
+			if (i === fromIndex) return toIndex;
+			if (i >= toIndex && i < fromIndex) return i + 1;
+			return i;
+		}
+
+		// Moving later: items between [fromIndex+1 .. toIndex] shift -1
+		// (because we remove fromIndex then insert at toIndex)
+		if (i === fromIndex) return toIndex;
+		if (i > fromIndex && i <= toIndex) return i - 1;
+		return i;
+	};
+
+	const history = compactAndDedupePreservingOrder(
+		args.history.map((i) => remap(i)).filter((i): i is number => i != null),
+	);
+
+	// Cursor points into history; keep it at the same logical "current" where possible.
+	// If the current item was removed, clamp.
+	let cursor = args.cursor;
+	if (history.length === 0) cursor = 0;
+	else cursor = Math.max(0, Math.min(cursor, history.length - 1));
+
+	const order = compactAndDedupePreservingOrder(
+		args.order.map((i) => remap(i)).filter((i): i is number => i != null),
+	);
+
+	const currentIndex =
+		args.currentIndex == null ? null : remap(args.currentIndex);
+
+	return { order, history, cursor, currentIndex };
+}
+
+function shuffleArray<T>(arr: T[], rng: () => number) {
+	// Fisher–Yates shuffle (in place), return copy for convenience
+	const a = [...arr];
+	for (let i = a.length - 1; i > 0; i -= 1) {
+		const j = Math.floor(rng() * (i + 1));
+		const tmp = a[i];
+		a[i] = a[j];
+		a[j] = tmp;
+	}
+	return a;
+}
+
+function compactAndDedupePreservingOrder(indices: number[]) {
+	const seen = new Set<number>();
+	const out: number[] = [];
+	for (const i of indices) {
+		if (!Number.isInteger(i) || i < 0) continue;
+		if (seen.has(i)) continue;
+		seen.add(i);
+		out.push(i);
+	}
+	return out;
+}

src/lib/player/store.svelte.ts

@@ -1,412 +0,0 @@
-import { browser } from "$app/environment";
-import type { Track } from "./types";
-
-const STORAGE_KEY = "amqtrain:player:v2";
-
-export type PlayerState = {
-	queue: Track[];
-	currentId: number | null;
-	history: number[]; // List of track IDs
-	shuffledIndices: number[]; // List of indices into queue (maintained for shuffle order)
-	isShuffled: boolean;
-	repeatMode: "off" | "all" | "one";
-	volume: number;
-	isMuted: boolean;
-};
-
-class PlayerStore {
-	// State
-	queue = $state<Track[]>([]);
-	currentId = $state<number | null>(null);
-	history = $state<number[]>([]);
-	shuffledIndices = $state<number[]>([]);
-	isShuffled = $state(false);
-	repeatMode = $state<"off" | "all" | "one">("off");
-	volume = $state(1);
-	isMuted = $state(false);
-	uiOpen = $state(false); // Mobile UI state
-
-	// Debounce timer for save()
-	private _saveTimer: ReturnType<typeof setTimeout> | null = null;
-
-	// O(1) index: track.id → index in queue (maintained imperatively)
-	private idToIndex = $state(new Map<number, number>());
-
-	/** Rebuild the full index from the queue array. */
-	private rebuildIndex() {
-		const map = new Map<number, number>();
-		for (let i = 0; i < this.queue.length; i++) {
-			map.set(this.queue[i].id, i);
-		}
-		this.idToIndex = map;
-	}
-
-	// Derived
-	currentTrack = $derived.by(() => {
-		if (this.currentId == null) return null;
-		const idx = this.idToIndex.get(this.currentId);
-		return idx !== undefined ? this.queue[idx] : null;
-	});
-
-	currentIndex = $derived.by(() => {
-		if (this.currentId == null) return -1;
-		return this.idToIndex.get(this.currentId) ?? -1;
-	});
-
-	displayQueue = $derived(
-		this.isShuffled
-			? this.shuffledIndices.map((i) => this.queue[i])
-			: this.queue,
-	);
-
-	hasTrack(id: number) {
-		return this.idToIndex.has(id);
-	}
-
-	constructor() {
-		if (browser) {
-			this.load();
-			// Auto-save on changes
-			$effect.root(() => {
-				$effect(() => {
-					this.save();
-				});
-			});
-		}
-	}
-
-	init(state: Partial<import("./persist").PersistedState>) {
-		if (state.queue) this.queue = state.queue;
-		if (state.currentId) this.currentId = state.currentId;
-		if (state.volume !== undefined) this.volume = state.volume;
-		if (state.isMuted !== undefined) this.isMuted = state.isMuted;
-		if (state.minimized !== undefined) this.uiOpen = !state.minimized;
-		this.rebuildIndex();
-	}
-
-	load() {
-		try {
-			const stored = localStorage.getItem(STORAGE_KEY);
-			if (stored) {
-				const data = JSON.parse(stored);
-				this.queue = data.queue || [];
-				this.currentId = data.currentId ?? null;
-				this.history = data.history || [];
-				this.shuffledIndices = data.shuffledIndices || [];
-				this.isShuffled = data.isShuffled || false;
-				this.repeatMode = data.repeatMode || "off";
-				this.volume = data.volume ?? 1;
-				this.isMuted = data.isMuted || false;
-				this.rebuildIndex();
-			}
-		} catch (e) {
-			console.error("Failed to load player state", e);
-		}
-	}
-
-	save() {
-		// Read snapshots synchronously so $effect tracks reactive deps
-		const data: PlayerState = {
-			queue: $state.snapshot(this.queue),
-			currentId: $state.snapshot(this.currentId),
-			history: $state.snapshot(this.history),
-			shuffledIndices: $state.snapshot(this.shuffledIndices),
-			isShuffled: $state.snapshot(this.isShuffled),
-			repeatMode: $state.snapshot(this.repeatMode),
-			volume: $state.snapshot(this.volume),
-			isMuted: $state.snapshot(this.isMuted),
-		};
-		// Debounce only the serialization + write
-		if (this._saveTimer) clearTimeout(this._saveTimer);
-		this._saveTimer = setTimeout(() => {
-			localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-		}, 300);
-	}
-
-	// Actions
-
-	add(track: Track, playNow = false) {
-		const exists = this.hasTrack(track.id);
-
-		if (exists) {
-			if (playNow) {
-				this.playNext(track);
-				this.playId(track.id);
-			}
-			return;
-		}
-
-		if (playNow) {
-			this.playNext(track);
-			this.playId(track.id);
-		} else {
-			// Add to end
-			this.queue.push(track);
-			this.idToIndex.set(track.id, this.queue.length - 1);
-
-			if (this.isShuffled) {
-				this.shuffledIndices.push(this.queue.length - 1);
-			}
-
-			if (this.queue.length === 1 && !this.currentId) {
-				this.currentId = track.id;
-			}
-		}
-	}
-
-	playNext(track: Track) {
-		const existingIdx = this.idToIndex.get(track.id) ?? -1;
-		const targetTrack = track;
-
-		if (existingIdx !== -1) {
-			// Move approach: remove then insert
-			this.remove(track.id);
-		}
-
-		// Insert after current
-		// If playing: insert at currentIndex + 1
-		// If empty: insert at 0
-		const currentIdx = this.currentIndex;
-		const insertIdx = currentIdx === -1 ? 0 : currentIdx + 1;
-
-		this.queue.splice(insertIdx, 0, targetTrack);
-		// Rebuild index — splice shifts everything after insertIdx
-		this.rebuildIndex();
-
-		if (this.isShuffled) {
-			// Shift indices that are >= insertIdx because we inserted a new item
-			this.shuffledIndices = this.shuffledIndices.map((i) =>
-				i >= insertIdx ? i + 1 : i,
-			);
-
-			const newIdx = insertIdx;
-
-			// Find where current is in shuffledIndices
-			const currentShufflePos = this.shuffledIndices.indexOf(currentIdx);
-			// Insert newIdx after it
-			if (currentShufflePos !== -1) {
-				this.shuffledIndices.splice(currentShufflePos + 1, 0, newIdx);
-			} else {
-				this.shuffledIndices.unshift(newIdx);
-			}
-		}
-	}
-
-	addAll(tracks: Track[]) {
-		// Batch: collect new tracks, push all at once
-		const newTracks: Track[] = [];
-		for (const track of tracks) {
-			// Check existence inline to avoid O(n) per-track via add()
-			if (!this.hasTrack(track.id)) {
-				newTracks.push(track);
-			}
-		}
-		if (newTracks.length === 0) return;
-
-		const startIdx = this.queue.length;
-		this.queue.push(...newTracks);
-		// Only index the newly added tracks
-		for (let i = 0; i < newTracks.length; i++) {
-			this.idToIndex.set(newTracks[i].id, startIdx + i);
-		}
-
-		if (this.isShuffled) {
-			const newIndices = newTracks.map((_, i) => startIdx + i);
-			this.shuffledIndices.push(...newIndices);
-		}
-
-		if (startIdx === 0 && !this.currentId) {
-			this.currentId = newTracks[0].id;
-		}
-	}
-
-	playAllNext(tracks: Track[]) {
-		// Reverse iterate to maintain order when inserting after current
-		for (let i = tracks.length - 1; i >= 0; i--) {
-			this.playNext(tracks[i]);
-		}
-	}
-
-	remove(id: number) {
-		const idx = this.idToIndex.get(id);
-		if (idx === undefined) return;
-
-		const wasCurrent = this.currentId === id;
-
-		this.queue.splice(idx, 1);
-		// Rebuild index — splice shifts everything after idx
-		this.rebuildIndex();
-
-		if (wasCurrent) {
-			this.currentId = null; // Or auto-advance?
-			this.next();
-		}
-
-		// Fix shuffle indices
-		// All indices > idx must be decremented
-		// The index `idx` itself must be removed
-		this.shuffledIndices = this.shuffledIndices
-			.filter((i) => i !== idx)
-			.map((i) => (i > idx ? i - 1 : i));
-	}
-
-	clearQueue() {
-		this.queue = [];
-		this.idToIndex = new Map();
-		this.currentId = null;
-		this.shuffledIndices = [];
-		this.history = [];
-	}
-
-	playId(id: number) {
-		if (this.hasTrack(id)) {
-			this.currentId = id;
-			this.addToHistory(id);
-		}
-	}
-
-	move(fromIdx: number, toIdx: number) {
-		if (fromIdx === toIdx) return;
-
-		if (this.isShuffled) {
-			const indices = [...this.shuffledIndices];
-			if (fromIdx < 0 || fromIdx >= indices.length) return;
-			if (toIdx < 0 || toIdx >= indices.length) return;
-
-			const [item] = indices.splice(fromIdx, 1);
-			indices.splice(toIdx, 0, item);
-			this.shuffledIndices = indices;
-		} else {
-			const q = [...this.queue];
-			if (fromIdx < 0 || fromIdx >= q.length) return;
-			if (toIdx < 0 || toIdx >= q.length) return;
-
-			const [item] = q.splice(fromIdx, 1);
-			q.splice(toIdx, 0, item);
-			this.queue = q;
-			this.rebuildIndex();
-		}
-	}
-
-	// Playback Controls
-
-	next() {
-		if (this.queue.length === 0) return;
-
-		let nextIdxInQueue: number | null = null;
-		const currentIdx = this.currentIndex;
-
-		if (this.isShuffled) {
-			const currentShufflePos = this.shuffledIndices.indexOf(currentIdx);
-			if (
-				currentShufflePos !== -1 &&
-				currentShufflePos < this.shuffledIndices.length - 1
-			) {
-				nextIdxInQueue = this.shuffledIndices[currentShufflePos + 1];
-			} else if (this.repeatMode === "all" && this.shuffledIndices.length > 0) {
-				nextIdxInQueue = this.shuffledIndices[0];
-			}
-		} else {
-			if (currentIdx !== -1 && currentIdx < this.queue.length - 1) {
-				nextIdxInQueue = currentIdx + 1;
-			} else if (this.repeatMode === "all" && this.queue.length > 0) {
-				nextIdxInQueue = 0;
-			}
-		}
-
-		if (nextIdxInQueue !== null) {
-			const nextId = this.queue[nextIdxInQueue]?.id;
-			if (nextId) {
-				this.currentId = nextId;
-				this.addToHistory(nextId);
-			}
-		}
-	}
-
-	prev() {
-		if (this.queue.length === 0) return;
-
-		let prevIdxInQueue: number | null = null;
-		const currentIdx = this.currentIndex;
-
-		if (this.isShuffled) {
-			const currentShufflePos = this.shuffledIndices.indexOf(currentIdx);
-			if (currentShufflePos > 0) {
-				prevIdxInQueue = this.shuffledIndices[currentShufflePos - 1];
-			} else if (this.repeatMode === "all" && this.shuffledIndices.length > 0) {
-				// Wrap to end? Or just stop.
-				// For now let's stop at start if not wrapping.
-				// If repeat all, wrap to end?
-				prevIdxInQueue = this.shuffledIndices[this.shuffledIndices.length - 1];
-			}
-		} else {
-			if (currentIdx > 0) {
-				prevIdxInQueue = currentIdx - 1;
-			} else if (this.repeatMode === "all" && this.queue.length > 0) {
-				prevIdxInQueue = this.queue.length - 1;
-			}
-		}
-
-		if (prevIdxInQueue !== null) {
-			this.playId(this.queue[prevIdxInQueue]?.id);
-		} else {
-			// At start of queue.
-			// Just seek to 0? Store doesn't control audio.
-			// If we can't go back, we do nothing (UI likely handles the seek-to-0 comparison).
-		}
-	}
-
-	addToHistory(id: number) {
-		const last = this.history[this.history.length - 1];
-		if (last !== id) {
-			this.history.push(id);
-		}
-	}
-
-	toggleShuffle() {
-		this.isShuffled = !this.isShuffled;
-		if (this.isShuffled) {
-			this.reshuffle();
-		}
-	}
-
-	reshuffle() {
-		// Create indices 0..N-1
-		const indices = Array.from({ length: this.queue.length }, (_, i) => i);
-
-		// Fisher-Yates
-		for (let i = indices.length - 1; i > 0; i--) {
-			const j = Math.floor(Math.random() * (i + 1));
-			[indices[i], indices[j]] = [indices[j], indices[i]];
-		}
-
-		// Keep current first
-		if (this.currentId) {
-			const currentIdx = this.currentIndex;
-			const without = indices.filter((i) => i !== currentIdx);
-			this.shuffledIndices = [currentIdx, ...without];
-		} else {
-			this.shuffledIndices = indices;
-		}
-	}
-
-	toggleRepeat() {
-		if (this.repeatMode === "off") this.repeatMode = "all";
-		else if (this.repeatMode === "all") this.repeatMode = "one";
-		else this.repeatMode = "off";
-	}
-
-	setVolume(v: number) {
-		this.volume = Math.max(0, Math.min(1, v));
-	}
-
-	toggleMute() {
-		this.isMuted = !this.isMuted;
-	}
-
-	setUiOpen(open: boolean) {
-		this.uiOpen = open;
-	}
-}
-
-export const player = new PlayerStore();

src/lib/player/types.ts

@@ -18,12 +18,9 @@ export type Track = {
 
 	/** Optional extra context for rendering/debugging */
 	animeName?: string;
-	type: SongType;
+	type?: SongType;
-	number: number;
+	number?: number;
 	fileName?: string | null;
-	dub: boolean;
-	rebroadcast: boolean;
-	globalPercent: number;
 };
 
 export type SongRowLike = {
@@ -34,9 +31,6 @@ export type SongRowLike = {
 	songName: string;
 	artistName: string | null;
 	fileName?: string | null;
-	dub: boolean;
-	rebroadcast: boolean;
-	globalPercent: number;
 };
 
 /**
@@ -61,8 +55,5 @@ export function trackFromSongRow(row: SongRowLike): Track | null {
 		type: row.type,
 		number: row.number,
 		fileName,
-		dub: row.dub,
-		rebroadcast: row.rebroadcast,
-		globalPercent: row.globalPercent,
 	};
 }

src/lib/types/amq/anime.ts

@@ -2,28 +2,18 @@ import { z } from "zod";
 
 import { AmqAnimeCategory, AmqAnimeGenre, AmqAnimeTag } from "./anime-extended";
 
-export const AmqSeasonMap = {
+export const Season = z.enum({
 	Winter: 0,
 	Spring: 1,
 	Summer: 2,
 	Fall: 3,
-} as const;
+} as const);
 
-export const AmqSeason = z.enum(AmqSeasonMap);
+export const SongLinkType = z.enum({
-
-export const AmqSongLinkTypeMap = {
 	OP: 1,
 	ED: 2,
 	INS: 3,
-} as const;
+} as const);
-
-export const AmqSongLinkTypeMapReverse = {
-	1: "OP",
-	2: "ED",
-	3: "INS",
-} as const;
-
-export const AmqSongLinkType = z.enum(AmqSongLinkTypeMap);
 
 const BooleanInt = z.enum({
 	false: 0,
@@ -33,7 +23,7 @@ const BooleanInt = z.enum({
 export const AmqSongLink = z.object({
 	songId: z.int().positive(),
 	number: z.int().nonnegative(),
-	type: AmqSongLinkType,
+	type: SongLinkType,
 	annSongId: z.int().positive(),
 	uploaded: BooleanInt,
 	rebroadcast: BooleanInt,
@@ -63,7 +53,7 @@ export const AmqAnimeSchema = z.object({
 		}),
 	),
 	year: z.int().positive(),
-	seasonId: AmqSeason,
+	seasonId: Season,
 	songLinks: z.array(AmqSongLink),
 	opCount: z.int().nonnegative(),
 	edCount: z.int().nonnegative(),

src/lib/utils/amq/song-utils.ts

@@ -1,5 +1,20 @@
-import { AmqSongLinkTypeMapReverse } from "$lib/types/amq";
+export const SongTypeMap: Record<string, number> = {
+	OP: 1,
+	ED: 2,
+	INS: 3,
+};
 
-export function songTypeNumberLabel(type: number, number: number) {
+// Map number back to string for displaying in UI
-	return `${AmqSongLinkTypeMapReverse[type as keyof typeof AmqSongLinkTypeMapReverse] ?? `T${type}`}${number ? number : ""}`;
+export const SongTypeReverseMap: Record<number, string> = {
-}
+	1: "OP",
+	2: "ED",
+	3: "INS",
+};
+
+export const SongCategoryMap: Record<number, string> = {
+	0: "None",
+	1: "Instrumental",
+	2: "Chanting",
+	3: "Character",
+	4: "Standard",
+};

src/lib/utils/list/index.ts

@@ -1,36 +0,0 @@
-import z from "zod";
-
-export const MAL_URL = "https://myanimelist.net";
-export const ANILIST_URL = "https://anilist.co";
-export const KITSU_URL = "https://kitsu.io";
-
-export const AnimeListKind = z.enum([
-  "mal",
-  "anilist",
-  "kitsu",
-])
-
-export const AnimeListWatchStatus = z.enum({
-  "completed": "c",
-  "watching": "w",
-  "plan_to_watch": "p",
-  "on_hold": "h",
-  "dropped": "d",
-} as const)
-
-export const AnimeList = z.object({
-  kind: AnimeListKind,
-  username: z.string(),
-  status: z.array(AnimeListWatchStatus),
-});
-
-export function listExternalUrl(list: z.infer<typeof AnimeList>) {
-  switch (list.kind) {
-    case "mal":
-      return `${MAL_URL}/profile/${encodeURIComponent(list.username)}`;
-    case "anilist":
-      return `${ANILIST_URL}/user/${encodeURIComponent(list.username)}`;
-    case "kitsu":
-      return `${KITSU_URL}/username/${encodeURIComponent(list.username)}`;
-  }
-}

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import { resolve } from "$app/paths";
 	import "./layout.css";
 	import favicon from "$lib/assets/favicon.svg";
-	import PlayerRoot from "$lib/components/player/PlayerRoot.svelte";
+	import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
 	import ClientOnly from "$lib/components/util/ClientOnly.svelte";
 
 	let { children } = $props();
@@ -18,7 +18,7 @@
 	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
 -->
 <div
-	class="flex flex-col min-h-dvh not-lg:w-full not-xl:min-w-[80dvw] lg:grid lg:grid-rows-[auto_1fr] gap-4 lg:grid-cols-[1fr_420px]"
+	class="min-h-dvh not-xl:min-w-[80dvw] lg:grid lg:grid-rows-[auto_1fr] gap-16 lg:grid-cols-[1fr_420px]"
 >
 	<header
 		class="sticky top-0 z-40 border-b bg-background/80 backdrop-blur lg:col-span-2"
@@ -30,24 +30,22 @@
 				<a href={resolve("/")}>Anime</a>
 				<a href={resolve("/songs")}>Songs</a>
 				<a href={resolve("/list")}>List</a>
-				<a href={resolve("/mal")}>MAL</a>
 			</nav>
 		</div>
 	</header>
 
-	<main class="flex flex-col flex-1 p-4 max-sm:px-2">
+	<main class="flex flex-col items-center]">
 		{@render children()}
 	</main>
 
 	<!-- Desktop sidebar column (in normal flow) -->
-	<!-- PlayerRoot uses contents to inject its children into this grid -->
+	<aside class="hidden lg:block">
-	<ClientOnly showFallback={false}>
+		<ClientOnly showFallback={false}>
-		{#snippet children()}
+			{#snippet children()}
-			<div class="contents">
+				<GlobalPlayer />
-				<PlayerRoot />
+			{/snippet}
-			</div>
+		</ClientOnly>
-		{/snippet}
+	</aside>
-	</ClientOnly>
 </div>
 
 <!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance

src/routes/+page.svelte

@@ -9,7 +9,7 @@
 		getClientDb,
 		searchAnimeByName,
 	} from "$lib/db/client-db";
-	import { player } from "$lib/player/store.svelte";
+	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
 	import { AmqBrowseSearchSchema } from "$lib/types/search/amq-browse";
 	import { seasonName } from "$lib/utils/amq";
@@ -74,14 +74,11 @@
 					songName: s.songName,
 					artistName: s.artistName,
 					fileName: s.fileName ?? null,
-					dub: Boolean(s.dub),
-					rebroadcast: Boolean(s.rebroadcast),
-					globalPercent: s.globalPercent,
 				}),
 			)
 			.filter((t) => t !== null);
 
-		player.addAll(tracks);
+		addAllToQueue(tracks);
 	}
 
 	async function playAllNextForAnime(a: AnimeItem) {
@@ -101,14 +98,11 @@
 					songName: s.songName,
 					artistName: s.artistName,
 					fileName: s.fileName ?? null,
-					dub: Boolean(s.dub),
-					rebroadcast: Boolean(s.rebroadcast),
-					globalPercent: s.globalPercent,
 				}),
 			)
 			.filter((t) => t !== null);
 
-		player.playAllNext(tracks);
+		playAllNext(tracks);
 	}
 
 	onMount(() => {

src/routes/anime/[annId]/+page.svelte

@@ -3,7 +3,7 @@
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { db as clientDb } from "$lib/db/client-db";
-	import { player } from "$lib/player/store.svelte";
+	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
 	import { seasonName } from "$lib/utils/amq";
 	import type { PageData } from "./$types";
@@ -36,20 +36,17 @@
 					songName: s.songName,
 					artistName: s.artistName,
 					fileName: s.fileName ?? null,
-					dub: Boolean(s.dub),
-					rebroadcast: Boolean(s.rebroadcast),
-					globalPercent: s.globalPercent,
 				}),
 			)
 			.filter((t) => t !== null);
 	}
 
 	function queueAll() {
-		player.addAll(playableTracks());
+		addAllToQueue(playableTracks());
 	}
 
 	function playAllNextFromAnime() {
-		player.playAllNext(playableTracks());
+		playAllNext(playableTracks());
 	}
 </script>
 
@@ -67,9 +64,7 @@
 	<p class="mt-3 text-sm text-muted-foreground">Loading anime…</p>
 {:else}
 	<header class="mt-2 space-y-2">
-		<h1 class="text-2xl font-semibold">
+		<h1 class="text-2xl font-semibold">{data.animeWithSongs.anime.mainName}</h1>
-			{data.animeWithSongs.anime.mainName}
-		</h1>
 
 		<p class="text-sm text-muted-foreground">
 			{data.animeWithSongs.anime.year}
@@ -169,8 +164,6 @@
 							artistName={s.artistName}
 							fileName={s.fileName}
 							globalPercent={s.globalPercent}
-							dub={Boolean(s.dub)}
-							rebroadcast={Boolean(s.rebroadcast)}
 						/>
 					</li>
 				{/each}

src/routes/layout.css

@@ -134,40 +134,4 @@
 	.btn-icon-sm {
 		@apply inline-flex h-8 w-8 items-center justify-center rounded border;
 	}
-
-  .chip-group {
-    @apply flex flex-wrap items-stretch border border-input rounded-md overflow-hidden bg-background w-fit h-fit;
-  }
-
-  .chip-group legend {
-    @apply flex items-center px-3 py-1.5 text-sm font-semibold border-r border-input;
-  }
-
-  .chip {
-    @apply relative inline-flex items-center px-4 py-2 border-r border-input last:border-r-0 bg-background cursor-pointer text-sm font-medium transition-colors hover:bg-muted/50;
-  }
-
-  .chip input {
-    @apply appearance-none;
-	cursor: inherit;
-  }
-
-  .chip:has(input:checked) {
-    @apply bg-primary text-primary-foreground;
-  }
-
-  .chip input:checked + span {
-    @apply font-semibold;
-  }
-
-	.tag {
-		@apply rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground;
-	}
-}
-
-@layer scn {
-	/* Stolen styles from svelte-shadcn to make the final css look less tailwindy */
-	.scn-label {
-		@apply flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50;
-	}
 }

src/routes/list/+page.svelte

@@ -1,44 +1,221 @@
 <script lang="ts">
-  import { useSearchParams } from "runed/kit";
+	import { useSearchParams } from "runed/kit";
-  import type { PageData } from "./$types";
+	import { onMount } from "svelte";
-  import { SearchParamsSchema } from "./schema";
+	import { z } from "zod";
-  import { Button } from "$lib/components/ui/button";
+	import { browser } from "$app/environment";
-  import { z } from "zod";
+	import { invalidate } from "$app/navigation";
-  import {
+	import SongEntry from "$lib/components/SongEntry.svelte";
-    AnimeListCodec,
+	import { db as clientDb } from "$lib/db/client-db";
-    AnimeListInput,
+	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
-  } from "$lib/components/inputs/anime-list-input";
+	import { trackFromSongRow } from "$lib/player/types";
+	import {
+		MalAnimeListQuerySchema,
+		MalAnimeListStatusEnum,
+	} from "$lib/types/mal";
+	import type { PageData } from "./$types";
 
-  let { data }: { data: PageData } = $props();
+	const ListSearchSchema = MalAnimeListQuerySchema.extend({
+		// Allow empty string to mean "All"
+		status: MalAnimeListStatusEnum.or(z.literal("")).default(""),
+		// URL param `mal` is updated only on Search
+		mal: z.string().default(""),
+	}).strict();
 
-  const params = useSearchParams(SearchParamsSchema, {
+	const params = useSearchParams(ListSearchSchema, {
-    pushHistory: false,
+		pushHistory: false,
-  });
+		showDefaults: false,
+	});
 
-  let formState: z.infer<typeof AnimeListCodec> = $state({
+	let { data }: { data: PageData } = $props();
-    kind: "mal",
-    username: "",
-    status: [],
-  });
 
-  // $inspect(formState);
+	// Local username field that does NOT update the URL as you type.
+	let formMal = $state<string>(params.mal);
 
-  $effect(() => {
+	// If SSR returned no songRows (because client DB wasn't available),
-    console.log("formState", formState);
+	// re-run load on the client once the DB is ready by invalidating.
-  });
+	onMount(() => {
+		if (data.songRows.length > 0) return;
+		if (!data.username || !data.malResponse) return;
+
+		if (clientDb) {
+			void invalidate("clientdb:songs");
+			return;
+		}
+	});
+
+	function songArtistLabel(r: (typeof data.songRows)[number]) {
+		return r.artistName ?? r.groupName ?? null;
+	}
+
+	function makeMalHref(username: string) {
+		return `https://myanimelist.net/profile/${encodeURIComponent(username)}`;
+	}
+
+	const tracksFromResults = $derived.by(() =>
+		data.songRows
+			.map((r) =>
+				trackFromSongRow({
+					annSongId: r.annSongId,
+					animeName: r.animeName,
+					type: r.type,
+					number: r.number,
+					songName: r.songName,
+					artistName: songArtistLabel(r),
+					fileName: r.fileName,
+				}),
+			)
+			.filter((t) => t !== null),
+	);
 </script>
 
-<h1 class="text-2xl font-semibold">List Search WIP</h1>
+<h1 class="text-2xl font-semibold">MAL List → Songs</h1>
+
+<p class="mt-2 text-sm text-muted-foreground">
+	{#if !clientDb}
+		Loading DB...
+	{/if}
+</p>
 
 <form
-  onsubmit={(e) => {
+	class="mt-4 flex flex-col gap-2"
-    e.preventDefault();
+	onsubmit={(e) => {
-    params.kind = formState.kind;
+		e.preventDefault();
-    params.username = formState.username;
+		params.mal = formMal;
-    params.status = formState.status;
+	}}
-  }}
-  class="flex flex-wrap items-end gap-2"
 >
-  <AnimeListInput bind:value={formState} />
+	<div class="flex flex-wrap gap-2">
-  <Button type="submit">Search</Button>
+		<div class="flex flex-col gap-2">
+			<label class="text-sm text-muted-foreground" for="mal-user"
+				>MAL username</label
+			>
+			<input
+				id="mal-user"
+				class="rounded border px-3 py-2 text-sm"
+				placeholder="e.g. CaZzzer"
+				bind:value={formMal}
+				autocomplete="off"
+				spellcheck={false}
+			/>
+		</div>
+
+		<div class="flex flex-col gap-2">
+			<label class="text-sm text-muted-foreground" for="mal-status"
+				>Status</label
+			>
+			<select
+				id="mal-status"
+				class="rounded border px-3 py-2 text-sm"
+				bind:value={params.status}
+			>
+				<option value="">All</option>
+				<option value="watching">Watching</option>
+				<option value="completed">Completed</option>
+				<option value="on_hold">On hold</option>
+				<option value="dropped">Dropped</option>
+				<option value="plan_to_watch">Plan to watch</option>
+			</select>
+		</div>
+
+		<div class="flex flex-col justify-end">
+			<button
+				type="submit"
+				class="rounded border px-3 py-2 text-sm"
+				disabled={!(formMal ?? "").trim()}
+			>
+				Search
+			</button>
+		</div>
+	</div>
+
+	<div class="text-sm text-muted-foreground">
+		{#if data.username}
+			MAL entries: {data.malResponse?.data.length ?? 0} (limited to {data.LIST_QUERY_LIMIT})
+			• Songs found: {data.songRows.length}
+		{/if}
+	</div>
+
+	{#if data.songRows.length > 0}
+		<div class="mt-3 flex flex-wrap gap-2">
+			<button
+				type="button"
+				class="rounded border px-3 py-2 text-sm"
+				onclick={() => addAllToQueue(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Add all to queue
+			</button>
+
+			<button
+				type="button"
+				class="rounded border px-3 py-2 text-sm"
+				onclick={() => playAllNext(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Play all next
+			</button>
+
+			{#if tracksFromResults.length !== data.songRows.length}
+				<span class="self-center text-sm text-muted-foreground">
+					({tracksFromResults.length} playable)
+				</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if data.username}
+		<div class="text-sm">
+			<a
+				class="hover:underline"
+				href={makeMalHref(data.username)}
+				target="_blank"
+				rel="noreferrer"
+			>
+				View {data.username} on MAL
+			</a>
+		</div>
+	{/if}
 </form>
+
+{#if (formMal ?? "").trim() && data.username && (data.malResponse?.data.length ?? 0) === 0}
+	<p class="mt-4 text-sm text-muted-foreground">
+		No anime returned from MAL (did you set a restrictive status?).
+	</p>
+{/if}
+
+{#if (formMal ?? "").trim() && data.username && (data.malResponse?.data.length ?? 0) > 0 && data.songRows.length === 0}
+	<p class="mt-4 text-sm text-muted-foreground">
+		No songs matched in the local database. This likely means none of the MAL
+		anime IDs exist in the AMQ DB.
+	</p>
+{/if}
+
+{#if data.songRows.length > 0}
+	<h2 class="mt-6 text-lg font-semibold">Songs</h2>
+
+	<ul class="mt-3 space-y-2">
+		{#each data.songRows as r (String(r.annId) + ":" + String(r.annSongId))}
+			<li>
+				<SongEntry
+					annSongId={r.annSongId}
+					animeName={r.animeName}
+					type={r.type}
+					number={r.number}
+					songName={r.songName}
+					artistName={songArtistLabel(r)}
+					fileName={r.fileName}
+					globalPercent={r.globalPercent}
+				/>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+{#if browser && data.malResponse?.paging?.next}
+	<p class="mt-6 text-sm text-muted-foreground">
+		More results exist on MAL, but pagination is not wired yet.
+	</p>
+{/if}
+
+{#if !browser}
+	Loading stuff...
+{/if}

src/routes/list/+page.ts

@@ -1,7 +1,100 @@
+import { z } from "zod";
+// Import client-db index directly as requested.
+// On the server, `db` will be null (because `browser` is false in that module).
+import { db, ensureSeeded, getSongsForMalAnimeIds } from "$lib/db/client-db";
+import {
+	MalAnimeListQuerySchema,
+	MalAnimeListResponseSchema,
+	MalAnimeListStatusEnum,
+} from "$lib/types/mal";
 import type { PageLoad } from "./$types";
-import { SearchParamsSchema } from "./schema";
+
+const LIST_QUERY_LIMIT = 1000;
+
+const SearchSchema = MalAnimeListQuerySchema.extend({
+	// Username
+	mal: z.string().optional(),
+
+	// Allow empty string to mean "All"
+	status: MalAnimeListStatusEnum.or(z.literal("")).optional(),
+}).strict();
+
+type StatusParam = z.infer<typeof SearchSchema>["status"];
+function normalizeStatus(
+	status: StatusParam,
+): z.infer<typeof MalAnimeListStatusEnum> | undefined {
+	if (status == null || status === "") return undefined;
+	return status;
+}
 
 export const load: PageLoad = async ({ url, fetch, depends }) => {
-  const parsed = SearchParamsSchema.safeParse(url.searchParams);
+	depends("mal:animelist");
-  console.log(parsed);
+	depends("clientdb:songs");
-}
+
+	const parsed = SearchSchema.safeParse(
+		Object.fromEntries(url.searchParams.entries()),
+	);
+
+	const mal = parsed.success ? parsed.data.mal : undefined;
+	const status = parsed.success
+		? normalizeStatus(parsed.data.status)
+		: undefined;
+
+	const username = (mal ?? "").trim();
+
+	// Always return a stable shape for hydration
+	if (!username) {
+		return {
+			LIST_QUERY_LIMIT,
+			username: "",
+			status: status ?? null,
+			malResponse: null as z.infer<typeof MalAnimeListResponseSchema> | null,
+			songRows: [] as Awaited<ReturnType<typeof getSongsForMalAnimeIds>>,
+		};
+	}
+
+	// This endpoint proxies MAL and works server-side.
+	const malUrl = new URL(
+		`/api/mal/animelist/${encodeURIComponent(username)}`,
+		url.origin,
+	);
+
+	malUrl.searchParams.set("limit", String(LIST_QUERY_LIMIT));
+	if (status) malUrl.searchParams.set("status", status);
+
+	// NOTE: If you later want to support sort/offset, add them here from SearchSchema too.
+	const malRes = await fetch(malUrl);
+
+	if (!malRes.ok) {
+		// Let +page.svelte decide how to display errors; throw to use SvelteKit error page
+		throw new Error(`MAL request failed (${malRes.status})`);
+	}
+
+	const malJson: unknown = await malRes.json();
+	const malResponse = MalAnimeListResponseSchema.parse(malJson);
+
+	// Client-only DB: on the server `db` is null, so return [] and let hydration re-run load in browser.
+	if (!db) {
+		return {
+			LIST_QUERY_LIMIT,
+			username,
+			status: status ?? null,
+			malResponse,
+			songRows: [] as Awaited<ReturnType<typeof getSongsForMalAnimeIds>>,
+		};
+	}
+
+	// Browser path: seed then query local DB for songs by MAL ids
+	await ensureSeeded({ fetch });
+
+	const malIds = malResponse.data.map((e) => e.node.id);
+	const songRows = await getSongsForMalAnimeIds(db, malIds);
+
+	return {
+		LIST_QUERY_LIMIT,
+		username,
+		status: status ?? null,
+		malResponse,
+		songRows,
+	};
+};

src/routes/list/schema.ts

@@ -1,8 +0,0 @@
-import { AnimeListKind, AnimeListWatchStatus } from "$lib/utils/list";
-import { z } from "zod";
-
-export const SearchParamsSchema = z.object({
-  kind: AnimeListKind.default("mal"),
-  username: z.string().default(""),
-  status: z.array(AnimeListWatchStatus).default([]),
-})

src/routes/mal/+page.svelte

@@ -1,226 +0,0 @@
-<script lang="ts">
-	import { useSearchParams } from "runed/kit";
-	import { onMount } from "svelte";
-	import { z } from "zod";
-	import { browser } from "$app/environment";
-	import { invalidate } from "$app/navigation";
-	import SongEntry from "$lib/components/SongEntry.svelte";
-	import { db as clientDb } from "$lib/db/client-db";
-	import { player } from "$lib/player/store.svelte";
-	import { trackFromSongRow } from "$lib/player/types";
-	import {
-		MalAnimeListQuerySchema,
-		MalAnimeListStatusEnum,
-	} from "$lib/types/mal";
-	import type { PageData } from "./$types";
-
-	const ListSearchSchema = MalAnimeListQuerySchema.extend({
-		// Allow empty string to mean "All"
-		status: MalAnimeListStatusEnum.or(z.literal("")).default(""),
-		// URL param `mal` is updated only on Search
-		mal: z.string().default(""),
-	}).strict();
-
-	const params = useSearchParams(ListSearchSchema, {
-		pushHistory: false,
-		showDefaults: false,
-	});
-
-	let { data }: { data: PageData } = $props();
-
-	// Local username field that does NOT update the URL as you type.
-	let formMal = $state<string>(params.mal);
-
-	// If SSR returned no songRows (because client DB wasn't available),
-	// re-run load on the client once the DB is ready by invalidating.
-	onMount(() => {
-		if (data.songRows.length > 0) return;
-		if (!data.username || !data.malResponse) return;
-
-		if (clientDb) {
-			void invalidate("clientdb:songs");
-			return;
-		}
-	});
-
-	function songArtistLabel(r: (typeof data.songRows)[number]) {
-		return r.artistName ?? r.groupName ?? null;
-	}
-
-	function makeMalHref(username: string) {
-		return `https://myanimelist.net/profile/${encodeURIComponent(username)}`;
-	}
-
-	const tracksFromResults = $derived.by(() =>
-		data.songRows
-			.map((r) =>
-				trackFromSongRow({
-					annSongId: r.annSongId,
-					animeName: r.animeName,
-					type: r.type,
-					number: r.number,
-					songName: r.songName,
-					artistName: songArtistLabel(r),
-					fileName: r.fileName,
-					dub: Boolean(r.dub),
-					rebroadcast: Boolean(r.rebroadcast),
-					globalPercent: r.globalPercent,
-				}),
-			)
-			.filter((t) => t !== null),
-	);
-</script>
-
-<h1 class="text-2xl font-semibold">MAL List → Songs</h1>
-
-<p class="mt-2 text-sm text-muted-foreground">
-	{#if !clientDb}
-		Loading DB...
-	{/if}
-</p>
-
-<form
-	class="mt-4 flex flex-col gap-2"
-	onsubmit={(e) => {
-		e.preventDefault();
-		params.mal = formMal;
-	}}
->
-	<div class="flex flex-wrap gap-2">
-		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="mal-user"
-				>MAL username</label
-			>
-			<input
-				id="mal-user"
-				class="rounded border px-3 py-2 text-sm"
-				placeholder="e.g. CaZzzer"
-				bind:value={formMal}
-				autocomplete="off"
-				spellcheck={false}
-			/>
-		</div>
-
-		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="mal-status"
-				>Status</label
-			>
-			<select
-				id="mal-status"
-				class="rounded border px-3 py-2 text-sm"
-				bind:value={params.status}
-			>
-				<option value="">All</option>
-				<option value="watching">Watching</option>
-				<option value="completed">Completed</option>
-				<option value="on_hold">On hold</option>
-				<option value="dropped">Dropped</option>
-				<option value="plan_to_watch">Plan to watch</option>
-			</select>
-		</div>
-
-		<div class="flex flex-col justify-end">
-			<button
-				type="submit"
-				class="rounded border px-3 py-2 text-sm"
-				disabled={!(formMal ?? "").trim()}
-			>
-				Search
-			</button>
-		</div>
-	</div>
-
-	<div class="text-sm text-muted-foreground">
-		{#if data.username}
-			MAL entries: {data.malResponse?.data.length ?? 0} (limited to {data.LIST_QUERY_LIMIT})
-			• Songs found: {data.songRows.length}
-		{/if}
-	</div>
-
-	{#if data.songRows.length > 0}
-		<div class="mt-3 flex flex-wrap gap-2">
-			<button
-				type="button"
-				class="rounded border px-3 py-2 text-sm"
-				onclick={() => player.addAll(tracksFromResults)}
-				disabled={tracksFromResults.length === 0}
-			>
-				Add all to queue
-			</button>
-
-			<button
-				type="button"
-				class="rounded border px-3 py-2 text-sm"
-				onclick={() => player.playAllNext(tracksFromResults)}
-				disabled={tracksFromResults.length === 0}
-			>
-				Play all next
-			</button>
-
-			{#if tracksFromResults.length !== data.songRows.length}
-				<span class="self-center text-sm text-muted-foreground">
-					({tracksFromResults.length} playable)
-				</span>
-			{/if}
-		</div>
-	{/if}
-
-	{#if data.username}
-		<div class="text-sm">
-			<a
-				class="hover:underline"
-				href={makeMalHref(data.username)}
-				target="_blank"
-				rel="noreferrer"
-			>
-				View {data.username} on MAL
-			</a>
-		</div>
-	{/if}
-</form>
-
-{#if (formMal ?? "").trim() && data.username && (data.malResponse?.data.length ?? 0) === 0}
-	<p class="mt-4 text-sm text-muted-foreground">
-		No anime returned from MAL (did you set a restrictive status?).
-	</p>
-{/if}
-
-{#if (formMal ?? "").trim() && data.username && (data.malResponse?.data.length ?? 0) > 0 && data.songRows.length === 0}
-	<p class="mt-4 text-sm text-muted-foreground">
-		No songs matched in the local database. This likely means none of the MAL
-		anime IDs exist in the AMQ DB.
-	</p>
-{/if}
-
-{#if data.songRows.length > 0}
-	<h2 class="mt-6 text-lg font-semibold">Songs</h2>
-
-	<ul class="mt-3 space-y-2">
-		{#each data.songRows as r (String(r.annId) + ":" + String(r.annSongId))}
-			<li>
-				<SongEntry
-					annSongId={r.annSongId}
-					animeName={r.animeName}
-					type={r.type}
-					number={r.number}
-					songName={r.songName}
-					artistName={songArtistLabel(r)}
-					fileName={r.fileName}
-					globalPercent={r.globalPercent}
-					dub={Boolean(r.dub)}
-					rebroadcast={Boolean(r.rebroadcast)}
-				/>
-			</li>
-		{/each}
-	</ul>
-{/if}
-
-{#if browser && data.malResponse?.paging?.next}
-	<p class="mt-6 text-sm text-muted-foreground">
-		More results exist on MAL, but pagination is not wired yet.
-	</p>
-{/if}
-
-{#if !browser}
-	Loading stuff...
-{/if}

src/routes/mal/+page.ts

@@ -1,100 +0,0 @@
-import { z } from "zod";
-// Import client-db index directly as requested.
-// On the server, `db` will be null (because `browser` is false in that module).
-import { db, ensureSeeded, getSongsForMalAnimeIds } from "$lib/db/client-db";
-import {
-	MalAnimeListQuerySchema,
-	MalAnimeListResponseSchema,
-	MalAnimeListStatusEnum,
-} from "$lib/types/mal";
-import type { PageLoad } from "./$types";
-
-const LIST_QUERY_LIMIT = 1000;
-
-const SearchSchema = MalAnimeListQuerySchema.extend({
-	// Username
-	mal: z.string().optional(),
-
-	// Allow empty string to mean "All"
-	status: MalAnimeListStatusEnum.or(z.literal("")).optional(),
-}).strict();
-
-type StatusParam = z.infer<typeof SearchSchema>["status"];
-function normalizeStatus(
-	status: StatusParam,
-): z.infer<typeof MalAnimeListStatusEnum> | undefined {
-	if (status == null || status === "") return undefined;
-	return status;
-}
-
-export const load: PageLoad = async ({ url, fetch, depends }) => {
-	depends("mal:animelist");
-	depends("clientdb:songs");
-
-	const parsed = SearchSchema.safeParse(
-		Object.fromEntries(url.searchParams.entries()),
-	);
-
-	const mal = parsed.success ? parsed.data.mal : undefined;
-	const status = parsed.success
-		? normalizeStatus(parsed.data.status)
-		: undefined;
-
-	const username = (mal ?? "").trim();
-
-	// Always return a stable shape for hydration
-	if (!username) {
-		return {
-			LIST_QUERY_LIMIT,
-			username: "",
-			status: status ?? null,
-			malResponse: null as z.infer<typeof MalAnimeListResponseSchema> | null,
-			songRows: [] as Awaited<ReturnType<typeof getSongsForMalAnimeIds>>,
-		};
-	}
-
-	// This endpoint proxies MAL and works server-side.
-	const malUrl = new URL(
-		`/api/mal/animelist/${encodeURIComponent(username)}`,
-		url.origin,
-	);
-
-	malUrl.searchParams.set("limit", String(LIST_QUERY_LIMIT));
-	if (status) malUrl.searchParams.set("status", status);
-
-	// NOTE: If you later want to support sort/offset, add them here from SearchSchema too.
-	const malRes = await fetch(malUrl);
-
-	if (!malRes.ok) {
-		// Let +page.svelte decide how to display errors; throw to use SvelteKit error page
-		throw new Error(`MAL request failed (${malRes.status})`);
-	}
-
-	const malJson: unknown = await malRes.json();
-	const malResponse = MalAnimeListResponseSchema.parse(malJson);
-
-	// Client-only DB: on the server `db` is null, so return [] and let hydration re-run load in browser.
-	if (!db) {
-		return {
-			LIST_QUERY_LIMIT,
-			username,
-			status: status ?? null,
-			malResponse,
-			songRows: [] as Awaited<ReturnType<typeof getSongsForMalAnimeIds>>,
-		};
-	}
-
-	// Browser path: seed then query local DB for songs by MAL ids
-	await ensureSeeded({ fetch });
-
-	const malIds = malResponse.data.map((e) => e.node.id);
-	const songRows = await getSongsForMalAnimeIds(db, malIds);
-
-	return {
-		LIST_QUERY_LIMIT,
-		username,
-		status: status ?? null,
-		malResponse,
-		songRows,
-	};
-};

src/routes/songs/+page.svelte

@@ -5,17 +5,19 @@
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { Button } from "$lib/components/ui/button";
-	import { ChipGroup } from "$lib/components/ui/chip-group";
 	import { Input } from "$lib/components/ui/input";
 	import { Label } from "$lib/components/ui/label";
+	import {
+		NativeSelect,
+		NativeSelectOption,
+	} from "$lib/components/ui/native-select";
 	import { db as clientDb } from "$lib/db/client-db";
-	import { player } from "$lib/player/store.svelte";
+	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
-	import { AmqSongLinkTypeMap } from "$lib/types/amq";
 	import type { PageData } from "./$types";
-	import { SearchParamsSchema } from "./schema";
+	import { SearchParamsSchemaClient } from "./schema";
 
-	const params = useSearchParams(SearchParamsSchema, {
+	const params = useSearchParams(SearchParamsSchemaClient, {
 		pushHistory: false,
 		showDefaults: false,
 	});
@@ -49,9 +51,6 @@
 					songName: r.songName,
 					artistName: songArtistLabel(r),
 					fileName: r.fileName,
-					dub: Boolean(r.dub),
-					rebroadcast: Boolean(r.rebroadcast),
-					globalPercent: r.globalPercent,
 				}),
 			)
 			.filter((t) => t !== null),
@@ -123,14 +122,15 @@
 				/>
 			</div>
 		</div>
-		<ChipGroup
+		<div class="flex flex-col gap-2">
-			label="Song Type"
+			<Label for="song-type">Song Type</Label>
-			items={Object.keys(AmqSongLinkTypeMap).map((type) => ({
+			<NativeSelect id="song-type" bind:value={params.songType}>
-				label: type,
+				<NativeSelectOption value="0">All</NativeSelectOption>
-				value: AmqSongLinkTypeMap[type as keyof typeof AmqSongLinkTypeMap],
+				<NativeSelectOption value="1">OP</NativeSelectOption>
-			}))}
+				<NativeSelectOption value="2">ED</NativeSelectOption>
-			bind:value={params.type}
+				<NativeSelectOption value="3">INS</NativeSelectOption>
-		/>
+			</NativeSelect>
+		</div>
 		<div class="flex flex-col gap-2">
 			<Label for="songs-limit">Limit</Label>
 			<Input
@@ -140,7 +140,7 @@
 				max="200"
 				step="20"
 				class="w-1/2"
-				bind:value={params.limit}
+				bind:value={params.songsLimit}
 			/>
 		</div>
 	</div>
@@ -152,7 +152,7 @@
 			<Button
 				variant="outline"
 				class="cursor-pointer"
-				onclick={() => player.addAll(tracksFromResults)}
+				onclick={() => addAllToQueue(tracksFromResults)}
 				disabled={tracksFromResults.length === 0}
 			>
 				Add all to queue
@@ -161,7 +161,7 @@
 			<Button
 				variant="outline"
 				class="cursor-pointer"
-				onclick={() => player.playAllNext(tracksFromResults)}
+				onclick={() => playAllNext(tracksFromResults)}
 				disabled={tracksFromResults.length === 0}
 			>
 				Play all next
@@ -191,8 +191,6 @@
 						artistName={songArtistLabel(r)}
 						fileName={r.fileName}
 						globalPercent={r.globalPercent}
-						dub={Boolean(r.dub)}
-						rebroadcast={Boolean(r.rebroadcast)}
 					/>
 				</li>
 			{/each}

src/routes/songs/+page.ts

@@ -1,12 +1,12 @@
 import type { SongFilters } from "$lib/db/client-db";
 import { db, ensureSeeded, getSongsWithFilters } from "$lib/db/client-db";
 import type { PageLoad } from "./$types";
-import { SearchParamsSchema } from "./schema";
+import { SearchParamsSchemaServer } from "./schema";
 
 export const load: PageLoad = async ({ url, fetch, depends }) => {
 	depends("clientdb:songs");
 
-	const parsed = SearchParamsSchema.safeParse(
+	const parsed = SearchParamsSchemaServer.safeParse(
 		Object.fromEntries(url.searchParams.entries()),
 	);
 
@@ -19,7 +19,7 @@ export const load: PageLoad = async ({ url, fetch, depends }) => {
 			filters.globalPercentMin = parsed.data.gpm;
 		if (parsed.data.gpx !== undefined)
 			filters.globalPercentMax = parsed.data.gpx;
-		if (parsed.data.type) filters.songTypes = parsed.data.type;
+		if (parsed.data.songType) filters.songTypes = [parsed.data.songType];
 	}
 
 	// Client-only DB: on the server `db` is null, so return [] and let hydration re-run load in browser.
@@ -32,7 +32,11 @@ export const load: PageLoad = async ({ url, fetch, depends }) => {
 
 	await ensureSeeded({ fetch });
 
-	const songRows = await getSongsWithFilters(db, filters, parsed.data?.limit);
+	const songRows = await getSongsWithFilters(
+		db,
+		filters,
+		parsed.data?.songsLimit,
+	);
 
 	return {
 		filters: parsed.success ? parsed.data : {}, // Return original parsed data for form state

src/routes/songs/schema.ts

@@ -1,33 +1,18 @@
 import { z } from "zod";
-import {
-	AmqSongLinkType,
-	AmqSongLinkTypeMap,
-	AmqSongLinkTypeMapReverse,
-} from "$lib/types/amq";
-
-const SEP = ",";
-
-const songTypesCodec = z.codec(z.string(), z.array(AmqSongLinkType), {
-	decode: (str) =>
-		str
-			? decodeURIComponent(str)
-				.split(SEP)
-				.map((s) => AmqSongLinkTypeMap[s as keyof typeof AmqSongLinkTypeMap])
-			: [],
-	encode: (arr) =>
-		arr
-			? encodeURIComponent(
-				arr.map((a) => AmqSongLinkTypeMapReverse[a]).join(SEP),
-			)
-			: "",
-});
 
 export const SearchParamsSchema = z.object({
-	limit: z.coerce.number().int().default(20),
+	songsLimit: z.coerce.number().int().default(20),
 	song: z.string().optional().default(""),
 	artist: z.string().optional().default(""),
 	anime: z.string().optional().default(""),
 	gpm: z.coerce.number().int().optional().default(0),
 	gpx: z.coerce.number().int().optional().default(100),
-	type: songTypesCodec.default([]),
+});
+
+export const SearchParamsSchemaClient = SearchParamsSchema.extend({
+	songType: z.string().optional().default("0"),
+});
+
+export const SearchParamsSchemaServer = SearchParamsSchema.extend({
+	songType: z.coerce.number().int().optional(),
 });

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-cloudflare";
+import adapter from "@sveltejs/adapter-node";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

vite.config.ts

@@ -5,7 +5,8 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit(), sqlocal()],
-	server: {
+	ssr: {
-		allowedHosts: ["cazzzer.pgrok.cazzzer.com"],
+		// Native modules must be externalized to avoid "dynamic require" errors in build
+		external: ["@libsql/client"],
 	},
 });

wrangler.jsonc

@@ -7,20 +7,20 @@
 	"name": "amqtrain",
 	"main": ".svelte-kit/cloudflare/_worker.js",
 	"compatibility_date": "2026-01-31",
-	"compatibility_flags": ["nodejs_als"],
+	"compatibility_flags": ["nodejs_compat"],
 	"assets": {
 		"binding": "ASSETS",
-		"directory": ".svelte-kit/cloudflare",
+		"directory": ".svelte-kit/cloudflare"
 	},
 	"observability": {
-		"enabled": true,
+		"enabled": true
 	},
 	"routes": [
 		{
 			"pattern": "amqtrain.cazzzer.com",
-			"custom_domain": true,
+			"custom_domain": true
-		},
+		}
-	],
+	]
 	/**
 	 * Smart Placement
 	 * https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement