u

package-lock.json

@@ -16,7 +16,8 @@
         "@vitejs/plugin-react": "6.1.1",
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
-        "vite": "^8.3.0"
+        "vite": "^8.3.2",
+        "vite-plugin-qrcode": "^0.4.1"
       },
       "peerDependencies": {
         "@emotion/react": "^11.14.0",
@@ -617,9 +618,9 @@
       }
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.149.0",
+      "version": "0.154.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.149.0.tgz",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.154.0.tgz",
-      "integrity": "sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA==",
+      "integrity": "sha512-KYOUGQFlLWR+s4QMV2Q9ko38TZm7EdO87Qm7rvZLqk/webse/cDjtyxKhg/47l0byCbs/k46LT8qc4PKjAikzA==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -654,9 +655,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm-eabi": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.14.tgz",
-      "integrity": "sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw==",
+      "integrity": "sha512-aWR+XKH9+rW7m5fWq/5360J3mHycrx/o6xZM2DQFdJnTMdyP7/WzxPjhtLbVWdKo2y612/4U1bWqb3HQhiF7vg==",
       "cpu": [
         "arm"
       ],
@@ -671,9 +672,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.14.tgz",
-      "integrity": "sha512-dIYTWl9XprMUiQFoc55KUyk/oS8SKYH3zFl0LTR7RT0Xj4hgSVyuJcroH8JUu8RcpF8fTB6E0aOwCkZoYPcDSQ==",
+      "integrity": "sha512-QiVxHofl6A8lQU7WAtOUY4QMVZXohxwz7WJJoeh8NBEUyKfIkMRKhYyq8az/1RypNiIXzNTtiS6KwHz0erxYRQ==",
       "cpu": [
         "arm64"
       ],
@@ -688,9 +689,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.14.tgz",
-      "integrity": "sha512-PCSDQGXD2IyTEFrcgPyBM8jJuGmrbCMuoIOXdbEGVemruKACXoLQJrb+A45Z0L5t1RQkdfJprAYPkikbh7dzdA==",
+      "integrity": "sha512-lTQOzHuBIooh3jIr5XINQkjPGEuGy+Dsy0meXDr6Sjty0b99kYgGh4uBC/8mJX1T0kC8d6S0aPP1Y+bHkh6aBw==",
       "cpu": [
         "arm64"
       ],
@@ -705,9 +706,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.14.tgz",
-      "integrity": "sha512-Uk7lRsGhPFHVX/sAUC6D5H9Ol30dFHd6iquokll2th3LpdJ3F5CzQB+7DHn0Ri2mG+U7k2zXiPHDrwZenXhwSA==",
+      "integrity": "sha512-hyMKEGatjmBYCs/Q4sbIcL/GqpFEqsX3wc+HYVQ/85A4rxc1o7rPm4DUI4GV4k/h0ITddwFSGpqQunI14GXjTA==",
       "cpu": [
         "x64"
       ],
@@ -722,9 +723,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.14.tgz",
-      "integrity": "sha512-DjszaTEVogPqA5bYzsEeqDCQxbcp2fexQwKcRspYji2yzR68fCf+e4fx6kBSRDwX5/brZaHw/hWS9+A/+/w9sQ==",
+      "integrity": "sha512-u371GbXoVXrEgP20PwzoGNOdAOqAMhzo19JzzY+V4YmmnC+DTOoqdbMu+O+54emM59Mik/UdrtWgcuEDKWRPKA==",
       "cpu": [
         "x64"
       ],
@@ -739,9 +740,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.14.tgz",
-      "integrity": "sha512-zmwa7FTmdzB6aaEEuuls18H6Ap5JmJPSoPTuXixeJZV6tG40SyLkApQtz1g8ptZtiEKqj9OM0oNLPh1AgvE31Q==",
+      "integrity": "sha512-BqwKsdZQf6EqVWr8fv2MrDYzAvOZ7+NYFSJESRGs87fkseEhs0TU9TXgRJTkZoRRkxTizyEg1LKUXfU3/78uqg==",
       "cpu": [
         "arm"
       ],
@@ -756,9 +757,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.14.tgz",
-      "integrity": "sha512-KdYQDPHwJVnbFwdTGMgxsI9SqblBlz6STGM+w1We/d5B8OWWidYH0MwkU/uA1wM5fIpO2MkOVxXrNzzuZhw9ew==",
+      "integrity": "sha512-SD9kY8M009x/7s57Z1dgUVlP5+uYBgKQK0Tkr1WIWngrtUJmRCW1RJFMY7QDla2khXhmg2i5Io7MUjcmZNZ/KQ==",
       "cpu": [
         "arm64"
       ],
@@ -776,9 +777,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.14.tgz",
-      "integrity": "sha512-jFJTifHnNPY+yzOoNZQfSIysrVyXzEQPhPnOUjmD1bcQGHH6s7c8cViKWar8YplQImE5N9JRqMCLrM2CdxOrZA==",
+      "integrity": "sha512-BJ2CL19M6uuWesMgnqJzgxoI+N+eV7b0A9O9vLV42y+gitC41fNa8KElau1tHVzuLWX5GzEuxMPhAO0tQXQMkg==",
       "cpu": [
         "arm64"
       ],
@@ -796,9 +797,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.14.tgz",
-      "integrity": "sha512-FhiOziBDWPBjbcmRzfLyIJnaP7AVMFXT7YCXPjXxj7wKU3vx24RjrCNN/zjvVa+N2vVoHJwCoUBvsrN/DG3zIA==",
+      "integrity": "sha512-4+Kl8daPV8NDHaD7mfCcc1pRM+Qg7ab8DyMm5FG5WoZgv4h2i3KFN1CybYBNbQqmuYm7ftJLvmMI1eHYJ22S/Q==",
       "cpu": [
         "ppc64"
       ],
@@ -816,9 +817,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.14.tgz",
-      "integrity": "sha512-WnHfADMzOV2Y55wlx1hzzQnar/wDt/VdvWSD99r18Mz9ylNieIGOkRx3UV21h7m/eJvjySYJkO26VvGNFkwsIQ==",
+      "integrity": "sha512-V/h8ePq1fKDrmtFMz6xcCN3DKvuvMRrwwD1q0PkBeeo4DpK64biaKvqWGVxqCeYKqeRk7gE7/iKPxLCn08O97A==",
       "cpu": [
         "s390x"
       ],
@@ -836,9 +837,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.14.tgz",
-      "integrity": "sha512-H9tRr5ibfXFVLxbPOseVewewFpl28zcEdjRDt2FTUZU7odxP0gEv1ki4/kGmcGOh78oRwZuuQllGLZ9zTJp84g==",
+      "integrity": "sha512-WxalXzgrLVpKC93xfpaJ3gCXUWzeCr+FRCbDVD2mUAy4L6Vo3lNVz0epUEUpxPWJkLNYUwM4OSIikv36OJ9mLg==",
       "cpu": [
         "x64"
       ],
@@ -856,9 +857,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.14.tgz",
-      "integrity": "sha512-UefiqfM3D6IVNlZ8tSGs9+Ejjud2T+oxO0IHADU45Y+lyEjD2dVFyZHbkfX0LUb5Zugo/oIv1eCO/KVYhgYJYA==",
+      "integrity": "sha512-3G3tnAmTpdk9jO3GQtyHXqeFD2SlecfTws/Y3M2mmj9nMBwwuLT4kur8sZKeu7ENUHSpVO3cIsm5A52LEWWwlg==",
       "cpu": [
         "x64"
       ],
@@ -876,9 +877,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.14.tgz",
-      "integrity": "sha512-637Ke4kWSy6rp9cxQ9gMOXlxPgIw/c1beASV4M//3+9I4uwBVOOl74G+e3zyU3u19U7RkRl/HuewixZ/Z6+Rjg==",
+      "integrity": "sha512-qyr5XiNGxm2ytx17vvtcJ9nXn6v1gENETi503bJx3OGwZ1tSonj7BosxbMa/xeAfSl5iS9X6KjEWYXLu6v1L7Q==",
       "cpu": [
         "arm64"
       ],
@@ -893,9 +894,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.14.tgz",
-      "integrity": "sha512-xWBkPOF1Q9k/Gv1nQXnVdLxKu74jXppuOM4Z3mnypVUJJJwLsMl7hNJGRAUJoG8A5MgOI1ACKM+wBFxSJzKy4A==",
+      "integrity": "sha512-oA4o5o0S2yB199YyYXDzKUv1Z56Rc+mgOjwm7Z/vJ9Z8igiDPYvoOuDyo6g7AK/ZaF09nPhDKVnGBcYHO11GXA==",
       "cpu": [
         "arm64"
       ],
@@ -910,9 +911,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.14.tgz",
-      "integrity": "sha512-uz2ZvfgXbxqNwijjjbxrnvALwpyODDcgc1T1N8N3rf/DXKQmaFwmB4LX4yyjggpwN2obdQLb2rgirX5ffCWYng==",
+      "integrity": "sha512-9mE94bf2GZUaR/fUSXCMpBoWkctu421Mi0ORpm4zqfbkjKep7RxzPFa5etcGs5h+2KApoWBOA/hAJa/7saGgEQ==",
       "cpu": [
         "x64"
       ],
@@ -1595,9 +1596,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.19",
+      "version": "3.3.20",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
-      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
       "dev": true,
       "funding": [
         {
@@ -1722,9 +1723,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.28",
+      "version": "8.5.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.30.tgz",
-      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "integrity": "sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA==",
       "dev": true,
       "funding": [
         {
@@ -1742,9 +1743,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.18",
+        "nanoid": "^3.3.20",
         "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
+        "source-map-js": "^1.2.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1849,13 +1850,13 @@
       }
     },
     "node_modules/rolldown": {
-      "version": "1.2.8",
+      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.14.tgz",
-      "integrity": "sha512-Z67nTmhZe7anqnM/EjI392w5i/ANUinjip7QYsOyN37oayduxt3ksdX0hf5OOamkAd53BiIHfbfSzfUmzKFQqQ==",
+      "integrity": "sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.149.0",
+        "@oxc-project/types": "=0.154.0",
         "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
@@ -1865,21 +1866,21 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm-eabi": "1.2.8",
+        "@rolldown/binding-android-arm-eabi": "1.2.14",
-        "@rolldown/binding-android-arm64": "1.2.8",
+        "@rolldown/binding-android-arm64": "1.2.14",
-        "@rolldown/binding-darwin-arm64": "1.2.8",
+        "@rolldown/binding-darwin-arm64": "1.2.14",
-        "@rolldown/binding-darwin-x64": "1.2.8",
+        "@rolldown/binding-darwin-x64": "1.2.14",
-        "@rolldown/binding-freebsd-x64": "1.2.8",
+        "@rolldown/binding-freebsd-x64": "1.2.14",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.2.8",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.14",
-        "@rolldown/binding-linux-arm64-gnu": "1.2.8",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.14",
-        "@rolldown/binding-linux-arm64-musl": "1.2.8",
+        "@rolldown/binding-linux-arm64-musl": "1.2.14",
-        "@rolldown/binding-linux-ppc64-gnu": "1.2.8",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.14",
-        "@rolldown/binding-linux-s390x-gnu": "1.2.8",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.14",
-        "@rolldown/binding-linux-x64-gnu": "1.2.8",
+        "@rolldown/binding-linux-x64-gnu": "1.2.14",
-        "@rolldown/binding-linux-x64-musl": "1.2.8",
+        "@rolldown/binding-linux-x64-musl": "1.2.14",
-        "@rolldown/binding-openharmony-arm64": "1.2.8",
+        "@rolldown/binding-openharmony-arm64": "1.2.14",
-        "@rolldown/binding-win32-arm64-msvc": "1.2.8",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.14",
-        "@rolldown/binding-win32-x64-msvc": "1.2.8"
+        "@rolldown/binding-win32-x64-msvc": "1.2.14"
       }
     },
     "node_modules/scheduler": {
@@ -1900,9 +1901,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.1",
+      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -1946,17 +1947,24 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/uqr": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
+      "integrity": "sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
-      "version": "8.3.0",
+      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.4.tgz",
-      "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
+      "integrity": "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.7",
-        "postcss": "^8.5.28",
+        "postcss": "^8.5.29",
-        "rolldown": "~1.2.6",
+        "rolldown": "~1.2.12",
         "tinyglobby": "^0.2.17"
       },
       "bin": {
@@ -2024,20 +2032,17 @@
         }
       }
     },
-    "node_modules/yaml": {
+    "node_modules/vite-plugin-qrcode": {
-      "version": "2.9.1",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite-plugin-qrcode/-/vite-plugin-qrcode-0.4.1.tgz",
-      "integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==",
+      "integrity": "sha512-t3gdCbn/a2HHLK3M8bUrQ+4c+I0YQGJ/STxAL9eI6TBnfdeM/CJr3HctvOb7UYhEtWxHs5xZWpz7kYnRd5w+rA==",
-      "extraneous": true,
+      "dev": true,
-      "license": "ISC",
+      "license": "MIT",
-      "bin": {
+      "dependencies": {
-        "yaml": "bin.mjs"
+        "uqr": "^0.1.2"
       },
-      "engines": {
+      "peerDependencies": {
-        "node": ">= 14.6"
+        "vite": ">=3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
       }
     }
   }

package.json

@@ -38,12 +38,13 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.4.0",
+    "@mui/icons-material": "^9.5.0",
-    "@mui/material": "^9.4.0",
+    "@mui/material": "^9.5.0",
-    "@playwright/test": "^1.63.0",
+    "@playwright/test": "^1.64.1",
-    "@vitejs/plugin-react": "6.1.1",
+    "@vitejs/plugin-react": "6.1.2",
-    "react": "^19.3.0",
+    "react": "^19.3.1",
-    "react-dom": "^19.3.0",
+    "react-dom": "^19.3.1",
-    "vite": "^8.3.2"
+    "vite": "^8.3.4",
+    "vite-plugin-qrcode": "^0.4.1"
   }
 }

src/FillSpace.jsx

@@ -15,12 +15,16 @@ import { alpha } from '@mui/material/styles';
  * @prop {Array} items - Wheel flips pages.
  * @prop {React.ComponentType|Function} renderItem - Row renderer (component or callback).
  * @prop {React.ReactNode} [header] - Rendered below pagination controls and above the list items.
+ * @prop {any} [headerItem] - Optional dummy/sample item passed to probe element for layout measurement.
  * @prop {number} [minPageSize=10] - Rows per page.
  * @prop {number} [maxPageSize] - Maximum rows per page.
- * @prop {number} [totalCount] - Total items in unfiltered dataset. When unfiltered count <= pageSize, pagination header is removed entirely. When filtering, the header height is preserved to prevent layout shift.
+ * @prop {number} [totalCount] - Total items in current dataset (or filtered dataset when paginating).
- * @prop {number} [unfilteredCount] - Alias for totalCount.
+ * @prop {number} [unfilteredTotal] - Total items in unfiltered dataset. When unfilteredTotal > pageSize, pagination space is reserved even if current filtered count <= pageSize, preventing layout shift.
+ * @prop {number} [unfilteredCount] - Alias for unfilteredTotal.
  * @prop {(page: number) => void} [onPageChange] - Called on page change.
- * @prop {boolean} [virtualScrollbar=false] - Enables smooth continuous virtual scrolling with a scrollbar synchronized with the pagination controls.
+ * @prop {boolean} [disableWheel=false] - When true, disables mouse wheel page flipping and lets the outer page scroll.
+ * @prop {boolean} [virtualScrollbar=false] - Shows a synchronized scrollbar alongside pagination controls.
+ * @prop {boolean} [reserveScrollbar] - Reserves raceway space even when items do not overflow (defaults to true when virtualScrollbar is true).
  * @prop {boolean} [debug=false] - Dashed outline for layout debugging.
  * @prop {object} [sx] - Extra styles.
  */
@@ -43,23 +47,21 @@ function renderRowElement(renderItem, item, index) {
 }
 
 /**
- * Data-free probe of the row height, rendered hidden. Class components
+ * Probe of the row height, rendered hidden. Class components
  * (e.g. `renderItem={ArtikelMarke}`) tolerate empty props
  * (`brand`/`item` undefined) and keep a fixed height (40px thumb /
- * text field), so the probe measures the row without depending on the
+ * text field). When `headerItem` is supplied, it is passed to the row
- * first data element. Plain callbacks are NOT probed — calling arbitrary
+ * for precise measurement of data-driven layouts.
- * user code with `undefined` could throw — they fall back to the first
- * rendered data row.
  */
-function renderProbeElement(renderItem) {
+function renderProbeElement(renderItem, headerItem) {
   if (!isRowComponent(renderItem)) return null;
   const Row = renderItem;
-  return <Row brand={undefined} item={undefined} index={0} disabled />;
+  return <Row brand={headerItem} item={headerItem} index={0} disabled />;
 }
 
 const MIN_THUMB_HEIGHT = 48;
 const RACEWAY_WIDTH = 16;
-const RACEWAY_BOTTOM_MARGIN = 8;
+const RACEWAY_BOTTOM_MARGIN = 16;
 
 class FillSpace extends Component {
   constructor(props) {
@@ -71,8 +73,8 @@ class FillSpace extends Component {
       viewportHeight: null,
       pageSize: Math.min(maxSize, minSize),
       currentPage: 1,
-      scrollTop: 0,
       isDragging: false,
+      dragThumbTop: 0,
     };
     this.ref = null;
     this.trackRef = null;
@@ -81,17 +83,17 @@ class FillSpace extends Component {
     this.wheelAcc = 0;
     this.observer = null;
     this.raf = null;
-    this.scrollRaf = null;
-    this.pendingScrollTop = 0;
     this.dragStartY = 0;
-    this.dragStartScrollTop = 0;
+    this.dragStartThumbTop = 0;
-    const explicitCount = props.unfilteredCount ?? props.totalCount;
+    const rawUnfiltered = props.unfilteredTotal ?? props.unfilteredCount;
-    this.maxSeenCount =
+    const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
-      explicitCount != null
+    const total =
-        ? Number(explicitCount)
+      props.totalCount != null
+        ? Number(props.totalCount)
         : Array.isArray(props.items)
           ? props.items.length
           : 0;
+    this.maxSeenCount = unfilteredTotal != null ? unfilteredTotal : total;
   }
 
   componentDidMount() {
@@ -102,7 +104,10 @@ class FillSpace extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.renderItem !== this.props.renderItem) {
+    if (
+      prevProps.renderItem !== this.props.renderItem ||
+      prevProps.headerItem !== this.props.headerItem
+    ) {
       this._probeMeasure();
     }
     if (
@@ -124,20 +129,35 @@ class FillSpace extends Component {
       this._observe();
       this._viewportMeasure();
     }
-    const explicitCount = this.props.unfilteredCount ?? this.props.totalCount;
+    const rawUnfiltered = this.props.unfilteredTotal ?? this.props.unfilteredCount;
-    if (explicitCount != null) {
+    const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
-      this.maxSeenCount = Number(explicitCount);
+    const total =
-    } else if (Array.isArray(this.props.items)) {
+      this.props.totalCount != null
-      this.maxSeenCount = Math.max(this.maxSeenCount || 0, this.props.items.length);
+        ? Number(this.props.totalCount)
+        : Array.isArray(this.props.items)
+          ? this.props.items.length
+          : 0;
+    if (unfilteredTotal != null) {
+      this.maxSeenCount = unfilteredTotal;
+    } else {
+      this.maxSeenCount = Math.max(this.maxSeenCount || 0, total);
     }
-    // Clamp current page when the item list shrinks (e.g. brand deleted).
+    if (this.props.resetKey !== undefined && this.props.resetKey !== prevProps.resetKey) {
+      if (this.state.currentPage !== 1) {
+        this._goToPage(1);
+      } else {
+        this.props.onPageChange?.(1, {
+          pageCount: Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize))),
+          pageSize: this.state.pageSize,
+          total,
+        });
+      }
+    }
+    // Clamp current page when the item list shrinks (e.g. brand deleted) or trigger load for current page if items are missing.
     if (
       Array.isArray(this.props.items) &&
       this.props.items !== prevProps.items
     ) {
-      const explicitTotal = this.props.unfilteredCount ?? this.props.totalCount;
-      const total =
-        explicitTotal != null ? Number(explicitTotal) : this.props.items.length;
       const pageCount = Math.max(
         1,
         Math.ceil(total / Math.max(1, this.state.pageSize)),
@@ -149,30 +169,15 @@ class FillSpace extends Component {
           pageSize: this.state.pageSize,
           total,
         });
-      }
+      } else if (this.state.currentPage > 1) {
-    }
+        const offset = (this.state.currentPage - 1) * this.state.pageSize;
-    if (
+        if (this.props.items.length > offset && this.props.items[offset] == null) {
-      this.props.virtualScrollbar &&
+          this.props.onPageChange?.(this.state.currentPage, {
-      (prevProps.items !== this.props.items ||
+            pageCount,
-        prevProps.totalCount !== this.props.totalCount ||
+            pageSize: this.state.pageSize,
-        prevProps.unfilteredCount !== this.props.unfilteredCount)
+            total,
-    ) {
+          });
-      const explicitTotal = this.props.unfilteredCount ?? this.props.totalCount;
-      const total =
-        explicitTotal != null
-          ? Number(explicitTotal)
-          : Array.isArray(this.props.items)
-            ? this.props.items.length
-            : 0;
-      const maxScrollTop = Math.max(
-        0,
-        total * this.state.unitHeight - (this.state.viewportHeight || 0),
-      );
-      if (this.state.scrollTop > maxScrollTop) {
-        if (this.ref && this.ref.scrollTop !== maxScrollTop) {
-          this.ref.scrollTop = maxScrollTop;
         }
-        this.setState({ scrollTop: maxScrollTop });
       }
     }
   }
@@ -189,10 +194,6 @@ class FillSpace extends Component {
       cancelAnimationFrame(this.raf);
       this.raf = null;
     }
-    if (this.scrollRaf) {
-      cancelAnimationFrame(this.scrollRaf);
-      this.scrollRaf = null;
-    }
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
@@ -202,9 +203,19 @@ class FillSpace extends Component {
   _onThumbMouseDown = (e) => {
     e.preventDefault();
     e.stopPropagation();
+    const { totalCount, items } = this.props;
+    const { viewportHeight, pageSize, currentPage } = this.state;
+    const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
+    const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
+    const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
+    const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
+    const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
+    const currentThumbTop = pageCount > 1 && maxThumbTravel > 0 ? ((currentPage - 1) / (pageCount - 1)) * maxThumbTravel : 0;
+
     this.dragStartY = e.clientY;
-    this.dragStartScrollTop = this.state.scrollTop;
+    this.dragStartThumbTop = currentThumbTop;
-    this.setState({ isDragging: true });
+    this.setState({ isDragging: true, dragThumbTop: currentThumbTop });
     document.body.style.userSelect = 'none';
     document.body.style.cursor = 'grabbing';
     window.addEventListener('mousemove', this._onThumbDragMove);
@@ -213,26 +224,26 @@ class FillSpace extends Component {
 
   _onThumbDragMove = (e) => {
     if (!this.state.isDragging) return;
-    const deltaY = e.clientY - this.dragStartY;
+    const { totalCount, items } = this.props;
-    const { viewportHeight, unitHeight } = this.state;
+    const { viewportHeight, pageSize } = this.state;
-    const { items, totalCount, unfilteredCount } = this.props;
+    const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
-    const explicitTotal = unfilteredCount ?? totalCount;
+    const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
-    const total = explicitTotal != null ? Number(explicitTotal) : (items?.length || 0);
+    if (pageCount <= 1) return;
-    const totalHeight = total * unitHeight;
+
-    const maxScrollTop = Math.max(0, totalHeight - (viewportHeight || 0));
-    if (maxScrollTop <= 0) return;
     const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
     const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
-    if (trackHeight <= 0) return;
+    const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
-    const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, (viewportHeight / totalHeight) * trackHeight));
+    const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
-    const maxThumbTravel = trackHeight - thumbHeight;
     if (maxThumbTravel <= 0) return;
-    const scrollDelta = (deltaY / maxThumbTravel) * maxScrollTop;
+
-    const nextScrollTop = Math.max(0, Math.min(maxScrollTop, this.dragStartScrollTop + scrollDelta));
+    const deltaY = e.clientY - this.dragStartY;
-    if (this.ref) {
+    const nextThumbTop = Math.max(0, Math.min(maxThumbTravel, this.dragStartThumbTop + deltaY));
-      this.ref.scrollTop = nextScrollTop;
+    const targetPage = Math.min(pageCount, Math.max(1, Math.round(1 + (nextThumbTop / maxThumbTravel) * (pageCount - 1))));
+
+    this.setState({ dragThumbTop: nextThumbTop });
+    if (targetPage !== this.state.currentPage) {
+      this._goToPage(targetPage);
     }
-    this.setState({ scrollTop: nextScrollTop });
   };
 
   _onThumbDragEnd = () => {
@@ -248,23 +259,32 @@ class FillSpace extends Component {
     if (!this.trackRef) return;
     const trackRect = this.trackRef.getBoundingClientRect();
     const clickY = e.clientY - trackRect.top;
-    const { viewportHeight, unitHeight } = this.state;
+    const { viewportHeight, pageSize } = this.state;
-    const { items, totalCount, unfilteredCount } = this.props;
+    const { items, totalCount } = this.props;
-    const explicitTotal = unfilteredCount ?? totalCount;
+    const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
-    const total = explicitTotal != null ? Number(explicitTotal) : (items?.length || 0);
+    const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
-    const totalHeight = total * unitHeight;
+    if (pageCount <= 1) return;
-    const maxScrollTop = Math.max(0, totalHeight - (viewportHeight || 0));
+
-    if (maxScrollTop <= 0) return;
+    const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
-    const trackHeight = trackRect.height;
+    const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
     if (trackHeight <= 0) return;
-    const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, (viewportHeight / totalHeight) * trackHeight));
+    const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
-    const maxThumbTravel = trackHeight - thumbHeight;
+    const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
     const targetThumbTop = Math.max(0, Math.min(maxThumbTravel, clickY - thumbHeight / 2));
-    const targetScrollTop = maxThumbTravel > 0 ? (targetThumbTop / maxThumbTravel) * maxScrollTop : 0;
+    const targetPage = maxThumbTravel > 0 ? Math.min(pageCount, Math.max(1, Math.round(1 + (targetThumbTop / maxThumbTravel) * (pageCount - 1)))) : 1;
-    if (this.ref) {
+    this._goToPage(targetPage);
-      this.ref.scrollTop = targetScrollTop;
+  };
+
+  scrollToTop = () => {
+    this._goToPage(1);
+  };
+
+  scrollToIndex = (index) => {
+    const { pageSize } = this.state;
+    if (pageSize > 0) {
+      const targetPage = Math.floor(index / pageSize) + 1;
+      this._goToPage(targetPage);
     }
-    this.setState({ scrollTop: targetScrollTop });
   };
 
   _onViewportChange = () => {
@@ -291,7 +311,7 @@ class FillSpace extends Component {
       containerTarget,
     ];
     for (const el of targets) {
-      if (el && el.offsetParent !== null) {
+      if (el && typeof Element !== 'undefined' && el instanceof Element && el.offsetParent !== null) {
         this.observer.observe(el);
       }
     }
@@ -310,21 +330,6 @@ class FillSpace extends Component {
     this._viewportMeasure();
   };
 
-  scrollToTop = () => {
-    if (this.ref) {
-      this.ref.scrollTop = 0;
-    }
-    this.setState({ scrollTop: 0, currentPage: 1 });
-  };
-
-  scrollToIndex = (index) => {
-    if (this.ref && this.state.unitHeight > 0) {
-      const top = Math.max(0, index * this.state.unitHeight);
-      this.ref.scrollTop = top;
-      this.setState({ scrollTop: top });
-    }
-  };
-
   /** Only measures the height of the `renderItem` probe. Nothing else. */
   _probeMeasure() {
     const firstRow = this.ref?.querySelector('[data-fill-row]');
@@ -377,43 +382,13 @@ class FillSpace extends Component {
     }
   }
 
-  _handleScroll = (event) => {
-    const st = event.currentTarget.scrollTop;
-    this.pendingScrollTop = st;
-    if (this.scrollRaf) return;
-    this.scrollRaf = requestAnimationFrame(() => {
-      this.scrollRaf = null;
-      const nextSt = this.pendingScrollTop;
-      if (nextSt != null && nextSt !== this.state.scrollTop) {
-        const { unitHeight, pageSize } = this.state;
-        const currentFirst = unitHeight > 0 ? Math.floor(nextSt / unitHeight) : 0;
-        const newPage = pageSize > 0 ? Math.floor(currentFirst / pageSize) + 1 : 1;
-        const updates = { scrollTop: nextSt };
-        if (newPage !== this.state.currentPage) {
-          updates.currentPage = newPage;
-          const { items, onPageChange, totalCount, unfilteredCount } = this.props;
-          const explicitTotal = unfilteredCount ?? totalCount;
-          const total =
-            explicitTotal != null
-              ? Number(explicitTotal)
-              : Array.isArray(items)
-                ? items.length
-                : 0;
-          const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
-          onPageChange?.(newPage, { pageCount, pageSize, total });
-        }
-        this.setState(updates);
-      }
-    });
-  };
-
   _handleWheel = (event) => {
-    const { items, totalCount, unfilteredCount } = this.props;
+    if (this.props.disableWheel) return;
+    const { items, totalCount } = this.props;
     if (!Array.isArray(items)) return;
     if (this.ref && event.target && !this.ref.contains(event.target)) return;
     const { pageSize, currentPage } = this.state;
-    const explicitTotal = unfilteredCount ?? totalCount;
+    const total = totalCount != null ? Number(totalCount) : items.length;
-    const total = explicitTotal != null ? Number(explicitTotal) : items.length;
     const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
     const delta = event.deltaY || 0;
     if (pageCount <= 1) return;
@@ -432,26 +407,15 @@ class FillSpace extends Component {
   };
 
   _goToPage = (page) => {
-    const { items, onPageChange, totalCount, unfilteredCount, virtualScrollbar } = this.props;
+    const { items, onPageChange, totalCount } = this.props;
-    const explicitTotal = unfilteredCount ?? totalCount;
     const total =
-      explicitTotal != null
+      totalCount != null
-        ? Number(explicitTotal)
+        ? Number(totalCount)
         : Array.isArray(items)
           ? items.length
           : 0;
     const pageCount = Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize)));
     const next = Math.min(Math.max(1, Number(page) || 1), pageCount);
-    if (virtualScrollbar) {
-      const targetScrollTop = (next - 1) * this.state.pageSize * this.state.unitHeight;
-      if (this.ref) {
-        this.ref.scrollTop = targetScrollTop;
-      }
-      if (next === this.state.currentPage && targetScrollTop === this.state.scrollTop) return;
-      this.setState({ currentPage: next, scrollTop: targetScrollTop });
-      onPageChange?.(next, { pageCount, pageSize: this.state.pageSize, total });
-      return;
-    }
     if (next === this.state.currentPage) return;
     this.setState({ currentPage: next });
     onPageChange?.(next, { pageCount, pageSize: this.state.pageSize, total });
@@ -470,16 +434,21 @@ class FillSpace extends Component {
       maxPageSize,
       totalCount,
       unfilteredCount,
+      unfilteredTotal: propUnfilteredTotal,
+      resetKey,
       listRef,
       onPageChange,
       onWheel,
+      disableWheel = false,
       virtualScrollbar = false,
+      reserveScrollbar,
       racewayMarginBottom,
       racewayRight,
       debug = false,
       items,
       renderItem,
       header,
+      headerItem,
       sx,
       ...rest
     } = this.props;
@@ -487,73 +456,45 @@ class FillSpace extends Component {
     // FillSpace owns current page, wheel-pagination and the pagination header.
     // Caller feeds `items` plus one row element via `renderItem` (component
     // type or callback). `items` may be undefined while data is loading.
-    const { pageSize, currentPage, viewportHeight, unitHeight, scrollTop } = this.state;
+    const { pageSize, currentPage, viewportHeight } = this.state;
     const list = Array.isArray(items) ? items : [];
-    const explicitTotal = unfilteredCount ?? totalCount;
+    const total = totalCount != null ? Number(totalCount) : list.length;
-    const total = explicitTotal != null ? Number(explicitTotal) : list.length;
+    const rawUnfiltered = propUnfilteredTotal ?? unfilteredCount;
-    const fullTotal = Math.max(this.maxSeenCount || 0, total);
+    const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
+    const fullTotal = unfilteredTotal != null ? Math.max(unfilteredTotal, total) : Math.max(this.maxSeenCount || 0, total);
     const needsPaginationContainer = fullTotal > pageSize;
     const showPaginationControls = total > pageSize;
     const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
-
+    const safePage = Math.min(Math.max(1, currentPage), pageCount);
-    const currentFirstIndex =
+    const offset = (safePage - 1) * pageSize;
-      virtualScrollbar && unitHeight > 0
+    const pageItems = list.slice(offset, offset + pageSize);
-        ? Math.min(Math.max(0, total - 1), Math.floor(scrollTop / unitHeight))
-        : (Math.min(Math.max(1, currentPage), pageCount) - 1) * pageSize;
-    const safePage =
-      virtualScrollbar && pageSize > 0
-        ? Math.min(pageCount, Math.floor(currentFirstIndex / pageSize) + 1)
-        : Math.min(Math.max(1, currentPage), pageCount);
-
-    const countStart = total === 0 ? 0 : currentFirstIndex + 1;
-    const countEnd = Math.min(total, currentFirstIndex + pageSize);
-
-    let renderedItems;
-    let itemOffset;
-    let paddingTop = 0;
-    let paddingBottom = 0;
-    let totalContentHeight;
-
-    if (virtualScrollbar && unitHeight > 0) {
-      const overscan = 3;
-      const rawStartIndex = Math.floor(scrollTop / unitHeight);
-      const startIndex = Math.max(0, rawStartIndex - overscan);
-      const visibleCount = Math.ceil((viewportHeight || 0) / unitHeight);
-      const endIndex = Math.min(total, rawStartIndex + visibleCount + overscan);
-      renderedItems = list.slice(startIndex, endIndex);
-      itemOffset = startIndex;
-      paddingTop = startIndex * unitHeight;
-      paddingBottom = Math.max(0, (total - endIndex) * unitHeight);
-      totalContentHeight = total * unitHeight;
-    } else {
-      const offset = (safePage - 1) * pageSize;
-      renderedItems = list.slice(offset, offset + pageSize);
-      itemOffset = offset;
-    }
 
     const canScroll =
       virtualScrollbar &&
-      viewportHeight > 0 &&
+      total > pageSize &&
-      unitHeight > 0 &&
+      (viewportHeight || 0) > 0;
-      total * unitHeight > viewportHeight;
 
     const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
-    const racewayRightOffset = racewayRight != null ? racewayRight : -(RACEWAY_WIDTH - 8);
+    const racewayRightOffset = racewayRight != null ? racewayRight : 0;
+    const scrollbarReserved = reserveScrollbar ?? Boolean(virtualScrollbar);
+    const scrollbarPadding = scrollbarReserved
+      ? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px`
+      : 0;
 
     let thumbHeight = 0;
     let thumbTop = 0;
 
     if (canScroll) {
       const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
-      const fullHeight = total * unitHeight;
+      thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
-      thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, (viewportHeight / fullHeight) * trackHeight));
+      const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
-      const maxScrollTop = Math.max(0, fullHeight - viewportHeight);
+      thumbTop = this.state.isDragging
-      const maxThumbTravel = trackHeight - thumbHeight;
+        ? this.state.dragThumbTop
-      thumbTop = maxScrollTop > 0 ? (scrollTop / maxScrollTop) * maxThumbTravel : 0;
+        : (pageCount > 1 && maxThumbTravel > 0 ? ((safePage - 1) / (pageCount - 1)) * maxThumbTravel : 0);
     }
 
-    // Hidden data-free probe: measures `renderItem` itself (no data).
+    // Hidden probe: measures `renderItem` (passes headerItem when provided).
-    const probe = renderProbeElement(renderItem);
+    const probe = renderProbeElement(renderItem, this.props.headerItem);
 
     return (
       <>
@@ -564,7 +505,6 @@ class FillSpace extends Component {
             sx={{ mb: 1, height: 44, overflow: 'hidden' }}
           >
             <Box
-              aria-hidden={!showPaginationControls || undefined}
               sx={{
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -573,8 +513,6 @@ class FillSpace extends Component {
                 gap: 1,
                 width: '100%',
                 height: 44,
-                visibility: showPaginationControls ? 'visible' : 'hidden',
-                pointerEvents: showPaginationControls ? 'auto' : 'none',
               }}
             >
               <Typography
@@ -583,7 +521,15 @@ class FillSpace extends Component {
                 noWrap
                 sx={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
               >
-                {total === 0 ? '0' : `${countStart}–${countEnd}`} von {total}
+                {total === 0
+                  ? (unfilteredTotal != null && unfilteredTotal > 0
+                      ? `0 von ${total} (${unfilteredTotal} gesamt)`
+                      : '0')
+                  : `${offset + 1}–${Math.min(offset + pageSize, total)} von ${total}${
+                      unfilteredTotal != null && unfilteredTotal > total
+                        ? ` (${unfilteredTotal} gesamt)`
+                        : ''
+                    }`}
               </Typography>
               <Pagination
                 count={pageCount}
@@ -604,95 +550,89 @@ class FillSpace extends Component {
                     height: 44,
                     fontSize: '1rem',
                   },
+                  visibility: showPaginationControls ? 'visible' : 'hidden',
+                  pointerEvents: showPaginationControls ? 'auto' : 'none',
                 }}
               />
             </Box>
           </Box>
         ) : null}
-        {header}
+        {header != null ? (
+          <Box
+            sx={{
+              width: '100%',
+              pr: scrollbarPadding,
+              boxSizing: 'border-box',
+            }}
+          >
+            {header}
+          </Box>
+        ) : null}
         <Box
+          ref={(el) => {
+            this.ref = el;
+          }}
+          onWheel={(e) => {
+            if (!disableWheel) {
+              this._handleWheel(e);
+            }
+            onWheel?.(e);
+          }}
           {...rest}
           sx={[
             {
               position: 'relative',
               height: viewportHeight ?? 'auto',
+              overflow: 'hidden',
               width: '100%',
-              overscrollBehavior: 'contain',
+              // Keep wheel ticks from scrolling the page behind the list unless disableWheel is true.
+              overscrollBehavior: disableWheel ? 'auto' : 'contain',
             },
-            sx,
             debug
               ? (theme) => ({
-                outline: `2px dashed ${theme.palette.primary.main}`,
+                  outline: `2px dashed ${theme.palette.primary.main}`,
-              })
+                })
               : undefined,
+            sx,
           ]}
         >
           <Box
-            ref={(el) => {
-              this.ref = el;
-            }}
-            onScroll={virtualScrollbar ? this._handleScroll : undefined}
-            onWheel={(e) => {
-              if (!virtualScrollbar) {
-                this._handleWheel(e);
-              }
-              onWheel?.(e);
-            }}
             sx={{
-              position: 'relative',
-              height: '100%',
               width: '100%',
-              overflowY: virtualScrollbar ? 'auto' : 'hidden',
+              pr: scrollbarPadding,
-              overflowX: 'hidden',
+              boxSizing: 'border-box',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': { display: 'none' },
             }}
           >
+            <List ref={listRef} dense disablePadding sx={{ width: '100%' }}>
+              {pageItems.map((item, i) => (
+                <Box key={item?.id ?? item?.sku ?? offset + i} data-fill-row sx={{ width: '100%' }}>
+                  {renderRowElement(renderItem, item, offset + i)}
+                </Box>
+              ))}
+            </List>
+          </Box>
+          {probe != null ? (
             <Box
+              ref={(el) => {
+                this.probeRef = el;
+              }}
+              aria-hidden
               sx={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
                 width: '100%',
-                pr: canScroll ? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px` : 0,
+                visibility: 'hidden',
-                boxSizing: 'border-box',
+                pointerEvents: 'none',
-                ...(virtualScrollbar && unitHeight > 0
-                  ? {
-                    paddingTop: `${paddingTop}px`,
-                    paddingBottom: `${paddingBottom}px`,
-                    minHeight: totalContentHeight,
-                  }
-                  : {}),
               }}
             >
-              <List ref={listRef} dense disablePadding sx={{ width: '100%' }}>
+              <List dense disablePadding sx={{ width: '100%' }}>
-                {renderedItems.map((item, i) => (
+                <Box data-fill-row sx={{ width: '100%' }}>
-                  <Box key={item?.id ?? itemOffset + i} data-fill-row sx={{ width: '100%' }}>
+                  {probe}
-                    {renderRowElement(renderItem, item, itemOffset + i)}
+                </Box>
-                  </Box>
-                ))}
               </List>
             </Box>
-            {probe != null ? (
+          ) : null}
-              <Box
-                ref={(el) => {
-                  this.probeRef = el;
-                }}
-                aria-hidden
-                sx={{
-                  position: 'absolute',
-                  left: 0,
-                  top: 0,
-                  width: '100%',
-                  visibility: 'hidden',
-                  pointerEvents: 'none',
-                }}
-              >
-                <List dense disablePadding sx={{ width: '100%' }}>
-                  <Box data-fill-row sx={{ width: '100%' }}>
-                    {probe}
-                  </Box>
-                </List>
-              </Box>
-            ) : null}
-          </Box>
 
           {canScroll ? (
             <Box

src/dev/mock-pages/FillSpaceMockPage.jsx

@@ -142,7 +142,7 @@ class FillSpaceMockPage extends Component {
         {/* Example 4: Virtual Scrollbar */}
         <Paper variant="outlined" sx={{ p: 2 }}>
           <Typography variant="subtitle2" gutterBottom>
-            Virtual Scrollbar (smooth continuous scroll with scrollbar)
+            Virtual Scrollbar (scrollbar synchronized with pagination)
           </Typography>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             <Box

src/lists/RecordList.jsx

@@ -158,15 +158,14 @@ class RecordList extends Component {
                   sx={{ cursor: onEdit ? 'pointer' : undefined }}
                   onClick={() => this.handleRowClick(row)}
                 >
-                  {columns.map((col) => (
                     <TableCell
                       key={col.key}
                       align={col.align}
                       padding={col.padding}
+                      sx={col.mono || col.key === 'number' || col.key === 'sku' ? { fontFamily: 'monospace' } : undefined}
                     >
                       {col.render ? col.render(row) : row[col.key]}
                     </TableCell>
-                  ))}
                   {hasActions ? (
                     <TableCell
                       padding="checkbox"

src/panels/PanelTile.jsx

@@ -8,6 +8,10 @@ import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { injectMuiTheme } from './injectMuiTheme';
 import {
   GRID_COLUMNS,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
   TILE_ACTION_PADDING,
   panelTilePaperSx,
   tileActionIconSx,
@@ -16,7 +20,8 @@ import {
 
 /**
  * Read-only content panel with a title and an optional corner action (icon
- * button with busy spinner). It is a styled MUI Paper; children fill the body.
+ * button with busy spinner). It is a styled MUI Paper with a modern minimal
+ * diagonal gradient surface; children fill the body.
  *
  * @component PanelTile
  * @import dashgui/panels
@@ -134,7 +139,7 @@ export const PanelTile = injectMuiTheme(PanelTileBase);
  * @behaviour Uses a CSS grid with `gap: 2` (theme spacing).
  * @behaviour Children position themselves via the `wide` prop of each tile.
  */
-export function PanelTileGrid({ children, sx }) {
+export function PanelTileGrid({ children, sx, icon, text, label, badge, ...rest }) {
   return (
     <Box
       sx={{
@@ -147,10 +152,17 @@ export function PanelTileGrid({ children, sx }) {
         gap: 2,
         ...sx,
       }}
+      {...rest}
     >
       {children}
     </Box>
   );
 }
 
-export { GRID_COLUMNS };
+export {
+  GRID_COLUMNS,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+};

src/panels/TabbedPanelTileGrid.jsx

@@ -0,0 +1,191 @@
+import React, { Component } from 'react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+
+/**
+ * Tabbed wrapper for multiple `PanelTileGrid` layouts.
+ *
+ * Each child `PanelTileGrid` defines its tab metadata via props:
+ * - `text` (or `label`): Tab label string
+ * - `icon`: Optional icon ReactNode
+ * - `value`: Optional unique tab value (defaults to child index)
+ * - `disabled`: Optional boolean
+ * - `badge`: Optional string/number shown as a pill chip next to the label
+ *
+ * Example:
+ * ```jsx
+ * <TabbedPanelTileGrid>
+ *   <PanelTileGrid icon={<StyleIcon />} text="Auswahl-Merkmale">
+ *     <PanelTile wide={2}>...</PanelTile>
+ *     <PanelTile wide={2}>...</PanelTile>
+ *   </PanelTileGrid>
+ *   <PanelTileGrid icon={<TuneIcon />} text="Text-Merkmale">
+ *     <PanelTile wide={2}>...</PanelTile>
+ *   </PanelTileGrid>
+ * </TabbedPanelTileGrid>
+ * ```
+ *
+ * @component TabbedPanelTileGrid
+ * @import dashgui/panels
+ *
+ * @prop {ReactNode} children - One or more PanelTileGrid elements.
+ * @prop {any} [value] - Controlled active tab value/index.
+ * @prop {any} [defaultValue] - Initial active tab value/index for uncontrolled mode.
+ * @prop {any} [defaultTab] - Alias for defaultValue.
+ * @prop {(nextValue: any, event: React.SyntheticEvent) => void} [onChange] - Called on tab switch.
+ * @prop {object} [sx] - Extra styles merged into root container Box.
+ * @prop {object} [tabsWrapperSx] - Extra styles for the container around Tabs.
+ * @prop {object} [tabsSx] - Extra styles merged into MUI Tabs.
+ * @prop {object} [tabSx] - Extra styles merged into MUI Tab.
+ */
+export class TabbedPanelTileGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      internalTab: props.defaultValue ?? props.defaultTab ?? 0,
+    };
+    this.handleTabChange = this.handleTabChange.bind(this);
+  }
+
+  getTabs() {
+    const children = React.Children.toArray(this.props.children).filter(Boolean);
+    return children.map((child, index) => {
+      const value = child.props.value !== undefined ? child.props.value : index;
+      const text = child.props.text ?? child.props.label ?? child.props.title ?? `Tab ${index + 1}`;
+      const icon = child.props.icon ?? null;
+      const disabled = Boolean(child.props.disabled);
+      const badge = child.props.badge;
+      const color = child.props.color;
+      return {
+        value,
+        text,
+        icon,
+        disabled,
+        badge,
+        color,
+        child,
+        index,
+      };
+    });
+  }
+
+  getActiveValue(tabs) {
+    if (this.props.value !== undefined) {
+      return this.props.value;
+    }
+    const { internalTab } = this.state;
+    if (tabs.some((t) => t.value === internalTab)) {
+      return internalTab;
+    }
+    const firstEnabled = tabs.find((t) => !t.disabled) ?? tabs[0];
+    return firstEnabled ? firstEnabled.value : 0;
+  }
+
+  handleTabChange(event, nextValue) {
+    if (this.props.value === undefined) {
+      this.setState({ internalTab: nextValue }, () => {
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(new Event('resize'));
+        }
+      });
+    } else if (typeof window !== 'undefined') {
+      window.dispatchEvent(new Event('resize'));
+    }
+    this.props.onChange?.(nextValue, event);
+  }
+
+  render() {
+    const {
+      sx,
+      tabsWrapperSx,
+      tabsSx,
+      tabSx,
+    } = this.props;
+
+    const tabs = this.getTabs();
+    if (tabs.length === 0) return null;
+
+    const activeValue = this.getActiveValue(tabs);
+    const activeTab = tabs.find((t) => t.value === activeValue) ?? tabs[0];
+
+    return (
+      <Box sx={sx}>
+        <Box
+          sx={{
+            mb: 2,
+            borderBottom: 1,
+            borderColor: 'divider',
+            ...tabsWrapperSx,
+          }}
+        >
+          <Tabs
+            value={activeValue}
+            onChange={this.handleTabChange}
+            textColor="primary"
+            indicatorColor="primary"
+            sx={{
+              minHeight: 44,
+              '& .MuiTabs-flexContainer': {
+                gap: 1,
+              },
+              '& .MuiTab-root': {
+                minHeight: 44,
+                textTransform: 'none',
+                fontSize: '0.9375rem',
+                fontWeight: 600,
+                gap: 1,
+                px: 2,
+                py: 1,
+                borderRadius: '8px 8px 0 0',
+                color: 'text.secondary',
+                '&:hover': {
+                  bgcolor: 'action.hover',
+                  color: 'text.primary',
+                },
+                '&.Mui-selected': {
+                  color: 'text.primary',
+                  fontWeight: 700,
+                },
+                '& .MuiSvgIcon-root': {
+                  fontSize: 20,
+                },
+                ...tabSx,
+              },
+              ...tabsSx,
+            }}
+          >
+            {tabs.map((tab) => (
+              <Tab
+                key={String(tab.value)}
+                value={tab.value}
+                disabled={tab.disabled}
+                icon={tab.icon}
+                iconPosition="start"
+                label={
+                  tab.badge != null ? (
+                    <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
+                      <span>{tab.text}</span>
+                      <Chip
+                        size="small"
+                        label={tab.badge}
+                        sx={{ height: 20, fontSize: '0.75rem', fontWeight: 600 }}
+                      />
+                    </Box>
+                  ) : (
+                    tab.text
+                  )
+                }
+              />
+            ))}
+          </Tabs>
+        </Box>
+
+        {activeTab ? React.cloneElement(activeTab.child, { key: String(activeTab.value) }) : null}
+      </Box>
+    );
+  }
+}
+
+export default TabbedPanelTileGrid;

src/panels/index.js

@@ -1,4 +1,12 @@
 export { PanelTile, PanelTileGrid, GRID_COLUMNS } from './PanelTile';
+export { TabbedPanelTileGrid } from './TabbedPanelTileGrid';
 export { EditablePanelTile } from './EditablePanelTile';
 export { injectMuiTheme } from './injectMuiTheme';
-export { PENDING_EDIT_BORDER } from './panelTileLayout';
+export {
+  PENDING_EDIT_BORDER,
+  PANEL_TILE_BORDER_RADIUS,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+} from './panelTileLayout';

src/panels/panelTileLayout.js

@@ -31,6 +31,15 @@ export const tileActionIconSx = {
 
 export const PANEL_TILE_BORDER_RADIUS = 4;
 
+export const PANEL_TILE_GRADIENT_LIGHT =
+  'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)';
+export const PANEL_TILE_GRADIENT_TINTED =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%)';
+export const PANEL_TILE_GRADIENT_DARK =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
+export const PANEL_TILE_GRADIENT_DARK_TINTED =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
+
 function tileRingBoxShadow(ringColor, elevationShadow) {
   const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
   return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
@@ -52,6 +61,14 @@ export function panelTilePaperSx({
       ? EDITING_TILE_BORDER
       : null;
 
+  const isDark = theme?.palette?.mode === 'dark';
+  const defaultGradient = isDark
+    ? PANEL_TILE_GRADIENT_DARK
+    : PANEL_TILE_GRADIENT_LIGHT;
+  const coloredGradient = isDark
+    ? PANEL_TILE_GRADIENT_DARK_TINTED
+    : PANEL_TILE_GRADIENT_TINTED;
+
   return {
     gridColumn: responsiveColumnSpan(wide),
     position: 'relative',
@@ -61,7 +78,14 @@ export function panelTilePaperSx({
     flexDirection: 'column',
     border: 'none',
     borderRadius: PANEL_TILE_BORDER_RADIUS,
-    ...(color ? { bgcolor: color } : {}),
+    ...(color
+      ? {
+          bgcolor: color,
+          backgroundImage: coloredGradient,
+        }
+      : {
+          backgroundImage: defaultGradient,
+        }),
     ...(ringColor
       ? {
           boxShadow: tileRingBoxShadow(ringColor, elevationShadow),

vite.config.js

@@ -1,13 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { qrcode } from 'vite-plugin-qrcode';
 import { componentDocsPlugin } from './vite-plugin-component-docs.js';
 
 // Library dev server — renders the mock pages under /dev so components can be
 // inspected in isolation, and doubles as a Vite config for consumers that want
 // to preview this package standalone.
 export default defineConfig({
-  plugins: [react(), componentDocsPlugin()],
+  plugins: [react(), componentDocsPlugin(), qrcode()],
   server: {
+    host: true,
     port: 5199,
   },
   build: {