diff --git a/showcase/bun.lock b/showcase/bun.lock
new file mode 100644
index 0000000..92d5fd0
--- /dev/null
+++ b/showcase/bun.lock
@@ -0,0 +1,255 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "design-md-showcase",
+      "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.0",
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "typescript": "^5.5.3",
+        "vite": "^5.4.0",
+      },
+    },
+  },
+  "packages": {
+    "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/compat-data": ["@babel/compat-data@7.29.3", "", {}, "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg=="],
+
+    "@babel/core": ["@babel/core@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA=="],
+
+    "@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.28.6", "", { "dependencies": { "@babel/compat-data": "^7.28.6", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
+
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.6", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-validator-identifier": "^7.28.5", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA=="],
+
+    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/helpers": ["@babel/helpers@7.29.2", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.29.0" } }, "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw=="],
+
+    "@babel/parser": ["@babel/parser@7.29.3", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA=="],
+
+    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw=="],
+
+    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
+
+    "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.21.5", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.21.5", "", { "os": "android", "cpu": "arm64" }, "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.21.5", "", { "os": "android", "cpu": "x64" }, "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.21.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.21.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.21.5", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.21.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.21.5", "", { "os": "linux", "cpu": "arm" }, "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.21.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.21.5", "", { "os": "linux", "cpu": "ia32" }, "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.21.5", "", { "os": "linux", "cpu": "none" }, "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.21.5", "", { "os": "linux", "cpu": "none" }, "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.21.5", "", { "os": "linux", "cpu": "ppc64" }, "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.21.5", "", { "os": "linux", "cpu": "none" }, "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.21.5", "", { "os": "linux", "cpu": "s390x" }, "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.21.5", "", { "os": "linux", "cpu": "x64" }, "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.21.5", "", { "os": "none", "cpu": "x64" }, "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.21.5", "", { "os": "openbsd", "cpu": "x64" }, "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.21.5", "", { "os": "sunos", "cpu": "x64" }, "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.21.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.21.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.21.5", "", { "os": "win32", "cpu": "x64" }, "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@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=="],
+
+    "@remix-run/router": ["@remix-run/router@1.23.2", "", {}, "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.27", "", {}, "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.60.4", "", { "os": "android", "cpu": "arm" }, "sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.60.4", "", { "os": "android", "cpu": "arm64" }, "sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.60.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.60.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.60.4", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.60.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.60.4", "", { "os": "linux", "cpu": "arm" }, "sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.60.4", "", { "os": "linux", "cpu": "arm" }, "sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.60.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.60.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.60.4", "", { "os": "linux", "cpu": "none" }, "sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.60.4", "", { "os": "linux", "cpu": "none" }, "sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.60.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.60.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.60.4", "", { "os": "linux", "cpu": "none" }, "sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.60.4", "", { "os": "linux", "cpu": "none" }, "sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.60.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.60.4", "", { "os": "linux", "cpu": "x64" }, "sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.60.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.60.4", "", { "os": "openbsd", "cpu": "x64" }, "sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.60.4", "", { "os": "none", "cpu": "arm64" }, "sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.60.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.60.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.60.4", "", { "os": "win32", "cpu": "x64" }, "sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.4", "", { "os": "win32", "cpu": "x64" }, "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw=="],
+
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
+
+    "@types/react": ["@types/react@18.3.29", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" } }, "sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg=="],
+
+    "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
+
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.31", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q=="],
+
+    "browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001793", "", {}, "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.360", "", {}, "sha512-GkcBt6YYAw9SxFWn+xVar4cLVGlXVuswwtRLBozi2zp0GjXs4ZnOrqV4zbXzg35n7w81hCkyJNYicgXlVHAmBA=="],
+
+    "esbuild": ["esbuild@0.21.5", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.21.5", "@esbuild/android-arm": "0.21.5", "@esbuild/android-arm64": "0.21.5", "@esbuild/android-x64": "0.21.5", "@esbuild/darwin-arm64": "0.21.5", "@esbuild/darwin-x64": "0.21.5", "@esbuild/freebsd-arm64": "0.21.5", "@esbuild/freebsd-x64": "0.21.5", "@esbuild/linux-arm": "0.21.5", "@esbuild/linux-arm64": "0.21.5", "@esbuild/linux-ia32": "0.21.5", "@esbuild/linux-loong64": "0.21.5", "@esbuild/linux-mips64el": "0.21.5", "@esbuild/linux-ppc64": "0.21.5", "@esbuild/linux-riscv64": "0.21.5", "@esbuild/linux-s390x": "0.21.5", "@esbuild/linux-x64": "0.21.5", "@esbuild/netbsd-x64": "0.21.5", "@esbuild/openbsd-x64": "0.21.5", "@esbuild/sunos-x64": "0.21.5", "@esbuild/win32-arm64": "0.21.5", "@esbuild/win32-ia32": "0.21.5", "@esbuild/win32-x64": "0.21.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
+
+    "node-releases": ["node-releases@2.0.45", "", {}, "sha512-iIbHXV9eBB2nB0wa7oTsrrXq+qQt+9SIlx9AX3T96YgobtEQfis5n6TJ6vV+3QP8DwdriEAcGhARaFCu37peBg=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["postcss@8.5.15", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A=="],
+
+    "react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
+
+    "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
+
+    "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
+
+    "react-router": ["react-router@6.30.3", "", { "dependencies": { "@remix-run/router": "1.23.2" }, "peerDependencies": { "react": ">=16.8" } }, "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw=="],
+
+    "react-router-dom": ["react-router-dom@6.30.3", "", { "dependencies": { "@remix-run/router": "1.23.2", "react-router": "6.30.3" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag=="],
+
+    "rollup": ["rollup@4.60.4", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.4", "@rollup/rollup-android-arm64": "4.60.4", "@rollup/rollup-darwin-arm64": "4.60.4", "@rollup/rollup-darwin-x64": "4.60.4", "@rollup/rollup-freebsd-arm64": "4.60.4", "@rollup/rollup-freebsd-x64": "4.60.4", "@rollup/rollup-linux-arm-gnueabihf": "4.60.4", "@rollup/rollup-linux-arm-musleabihf": "4.60.4", "@rollup/rollup-linux-arm64-gnu": "4.60.4", "@rollup/rollup-linux-arm64-musl": "4.60.4", "@rollup/rollup-linux-loong64-gnu": "4.60.4", "@rollup/rollup-linux-loong64-musl": "4.60.4", "@rollup/rollup-linux-ppc64-gnu": "4.60.4", "@rollup/rollup-linux-ppc64-musl": "4.60.4", "@rollup/rollup-linux-riscv64-gnu": "4.60.4", "@rollup/rollup-linux-riscv64-musl": "4.60.4", "@rollup/rollup-linux-s390x-gnu": "4.60.4", "@rollup/rollup-linux-x64-gnu": "4.60.4", "@rollup/rollup-linux-x64-musl": "4.60.4", "@rollup/rollup-openbsd-x64": "4.60.4", "@rollup/rollup-openharmony-arm64": "4.60.4", "@rollup/rollup-win32-arm64-msvc": "4.60.4", "@rollup/rollup-win32-ia32-msvc": "4.60.4", "@rollup/rollup-win32-x64-gnu": "4.60.4", "@rollup/rollup-win32-x64-msvc": "4.60.4", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g=="],
+
+    "scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+
+    "vite": ["vite@5.4.21", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
+
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+  }
+}
diff --git a/showcase/index.html b/showcase/index.html
new file mode 100644
index 0000000..42666fb
--- /dev/null
+++ b/showcase/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>design.md Showcase</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/showcase/package.json b/showcase/package.json
new file mode 100644
index 0000000..b37e568
--- /dev/null
+++ b/showcase/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "design-md-showcase",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/showcase/src/App.tsx b/showcase/src/App.tsx
new file mode 100644
index 0000000..7d60ab7
--- /dev/null
+++ b/showcase/src/App.tsx
@@ -0,0 +1,66 @@
+import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
+import PawsAndPaths from './pages/PawsAndPaths'
+import AtmosphericGlass from './pages/AtmosphericGlass'
+import TotalityFestival from './pages/TotalityFestival'
+
+const themes = [
+  { path: '/', label: 'Paws & Paths', sub: 'Pet services · Material 3' },
+  { path: '/atmospheric-glass', label: 'Atmospheric Glass', sub: 'Weather app · Glassmorphism' },
+  { path: '/totality-festival', label: 'Totality Festival', sub: 'Event brand · Cosmic premium' },
+]
+
+export default function App() {
+  const { pathname } = useLocation()
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', fontFamily: 'Inter, sans-serif', background: '#111' }}>
+      {/* Sidebar */}
+      <aside style={{
+        width: 220,
+        flexShrink: 0,
+        background: '#0e0e0e',
+        borderRight: '1px solid #222',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '24px 0',
+      }}>
+        <div style={{ padding: '0 20px 24px', borderBottom: '1px solid #222' }}>
+          <div style={{ fontSize: 11, letterSpacing: '0.12em', color: '#555', textTransform: 'uppercase', marginBottom: 6 }}>design.md</div>
+          <div style={{ fontSize: 13, color: '#888' }}>Showcase</div>
+        </div>
+        <nav style={{ flex: 1, padding: '16px 0' }}>
+          {themes.map(t => (
+            <NavLink
+              key={t.path}
+              to={t.path}
+              end
+              style={({ isActive }) => ({
+                display: 'block',
+                padding: '10px 20px',
+                textDecoration: 'none',
+                background: isActive ? '#1a1a1a' : 'transparent',
+                borderLeft: isActive ? '2px solid #fff' : '2px solid transparent',
+                transition: 'all 0.15s',
+              })}
+            >
+              <div style={{ fontSize: 13, color: pathname === t.path ? '#fff' : '#999', fontWeight: 500, marginBottom: 2 }}>{t.label}</div>
+              <div style={{ fontSize: 11, color: '#555' }}>{t.sub}</div>
+            </NavLink>
+          ))}
+        </nav>
+        <div style={{ padding: '16px 20px', borderTop: '1px solid #222' }}>
+          <div style={{ fontSize: 11, color: '#444' }}>v0.1.1 · Apache 2.0</div>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main style={{ flex: 1, overflow: 'auto' }}>
+        <Routes>
+          <Route path="/" element={<PawsAndPaths />} />
+          <Route path="/atmospheric-glass" element={<AtmosphericGlass />} />
+          <Route path="/totality-festival" element={<TotalityFestival />} />
+        </Routes>
+      </main>
+    </div>
+  )
+}
diff --git a/showcase/src/index.css b/showcase/src/index.css
new file mode 100644
index 0000000..57e1573
--- /dev/null
+++ b/showcase/src/index.css
@@ -0,0 +1,19 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.4); border-radius: 3px; }
diff --git a/showcase/src/main.tsx b/showcase/src/main.tsx
new file mode 100644
index 0000000..38d3698
--- /dev/null
+++ b/showcase/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)
diff --git a/showcase/src/pages/AtmosphericGlass.tsx b/showcase/src/pages/AtmosphericGlass.tsx
new file mode 100644
index 0000000..734ef1c
--- /dev/null
+++ b/showcase/src/pages/AtmosphericGlass.tsx
@@ -0,0 +1,271 @@
+import React, { useState } from 'react'
+
+const c = {
+  surface: '#0b1326',
+  'on-surface': '#dae2fd',
+  'on-surface-variant': '#c4c7c8',
+  primary: '#ffffff',
+  'on-primary': '#2f3131',
+  'primary-container': '#e2e2e2',
+  'on-primary-container': '#636565',
+  'primary-fixed-dim': '#c6c6c7',
+  secondary: '#adc9eb',
+  'on-secondary': '#14324e',
+  'secondary-container': '#304b68',
+  'on-secondary-container': '#9fbbdd',
+  tertiary: '#ffffff',
+  'on-tertiary': '#620040',
+  'tertiary-container': '#ffd8e7',
+  'on-tertiary-container': '#ab3779',
+  error: '#ffb4ab',
+  background: '#0b1326',
+  'on-background': '#dae2fd',
+}
+
+const font = 'Inter, sans-serif'
+
+const bgGradient = 'radial-gradient(ellipse at 30% 20%, #7e22ce 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, #1e3a8a 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, #db2777 0%, transparent 40%), linear-gradient(135deg, #0b1326 0%, #1e1040 100%)'
+
+const glass = (alpha = 0.1, blur = 20): React.CSSProperties => ({
+  background: `rgba(255,255,255,${alpha})`,
+  backdropFilter: `blur(${blur}px)`,
+  WebkitBackdropFilter: `blur(${blur}px)`,
+  border: '1px solid rgba(255,255,255,0.2)',
+  boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
+})
+
+const locations = ['San Francisco', 'New York', 'London', 'Tokyo', 'Sydney']
+
+const hourly = [
+  { time: '9AM', temp: 17, icon: '⛅' },
+  { time: '12PM', temp: 20, icon: '☀️' },
+  { time: '3PM', temp: 22, icon: '🌤' },
+  { time: '6PM', temp: 19, icon: '🌥' },
+  { time: '9PM', temp: 15, icon: '🌙' },
+  { time: '12AM', temp: 13, icon: '🌑' },
+]
+
+const weekly = [
+  { day: 'Mon', high: 22, low: 14, icon: '☀️' },
+  { day: 'Tue', high: 20, low: 13, icon: '⛅' },
+  { day: 'Wed', high: 16, low: 11, icon: '🌧' },
+  { day: 'Thu', high: 18, low: 12, icon: '🌦' },
+  { day: 'Fri', high: 24, low: 15, icon: '☀️' },
+  { day: 'Sat', high: 25, low: 16, icon: '☀️' },
+  { day: 'Sun', high: 21, low: 14, icon: '🌤' },
+]
+
+const metrics = [
+  { label: 'HUMIDITY', value: '68%', icon: '💧' },
+  { label: 'WIND', value: '14 km/h', icon: '💨' },
+  { label: 'UV INDEX', value: '5 · Mod', icon: '🌡' },
+  { label: 'PRESSURE', value: '1013 hPa', icon: '🌐' },
+  { label: 'VISIBILITY', value: '16 km', icon: '👁' },
+  { label: 'DEW POINT', value: '14°C', icon: '🌿' },
+]
+
+export default function AtmosphericGlass() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedLocation, setSelectedLocation] = useState('San Francisco')
+  const [unit, setUnit] = useState<'C' | 'F'>('C')
+
+  const toF = (c: number) => Math.round(c * 9 / 5 + 32)
+  const display = (v: number) => unit === 'C' ? `${v}°` : `${toF(v)}°`
+
+  return (
+    <div style={{
+      background: bgGradient,
+      minHeight: '100vh',
+      fontFamily: font,
+      color: c['on-background'],
+      position: 'relative',
+      overflow: 'hidden',
+    }}>
+      {/* Grain overlay */}
+      <div style={{
+        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noise)\' opacity=\'0.04\'/%3E%3C/svg%3E")',
+        opacity: 0.6,
+      }} />
+
+      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1000, margin: '0 auto', padding: '32px 24px' }}>
+        {/* Header */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
+          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'] }}>
+            ATMOSPHERIC
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button
+              onClick={() => setUnit('C')}
+              style={{
+                ...glass(unit === 'C' ? 0.2 : 0.05, 10),
+                color: c.primary, border: 'none',
+                fontFamily: font, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
+                padding: '6px 14px', borderRadius: 24, cursor: 'pointer',
+              }}
+            >°C</button>
+            <button
+              onClick={() => setUnit('F')}
+              style={{
+                ...glass(unit === 'F' ? 0.2 : 0.05, 10),
+                color: c.primary, border: '1px solid rgba(255,255,255,0.2)',
+                fontFamily: font, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
+                padding: '6px 14px', borderRadius: 24, cursor: 'pointer',
+              }}
+            >°F</button>
+          </div>
+        </div>
+
+        {/* Search */}
+        <div style={{ position: 'relative', marginBottom: 32 }}>
+          <span style={{ position: 'absolute', left: 20, top: '50%', transform: 'translateY(-50%)', opacity: 0.4, fontSize: 15 }}>🔍</span>
+          <input
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            placeholder="Search location…"
+            style={{
+              width: '100%',
+              ...glass(0.1, 20),
+              color: c.primary,
+              fontFamily: font,
+              fontSize: 15,
+              padding: '16px 20px 16px 48px',
+              borderRadius: 24,
+              outline: 'none',
+            }}
+          />
+          {searchQuery && (
+            <div style={{
+              position: 'absolute', top: 'calc(100% + 8px)', left: 0, right: 0,
+              ...glass(0.15, 30),
+              borderRadius: 16, overflow: 'hidden', zIndex: 10,
+            }}>
+              {locations.filter(l => l.toLowerCase().includes(searchQuery.toLowerCase())).map(l => (
+                <div
+                  key={l}
+                  onClick={() => { setSelectedLocation(l); setSearchQuery('') }}
+                  style={{
+                    padding: '12px 20px', cursor: 'pointer',
+                    fontSize: 14, color: c.primary,
+                    transition: 'background 0.15s',
+                  }}
+                  onMouseEnter={e => (e.currentTarget.style.background = 'rgba(255,255,255,0.1)')}
+                  onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                >
+                  {l}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Main row */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 20, marginBottom: 20 }}>
+          {/* Big display */}
+          <div style={{ ...glass(0.1, 20), borderRadius: 24, padding: 32 }}>
+            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'], marginBottom: 8 }}>
+              {selectedLocation.toUpperCase()}
+            </div>
+            <div style={{
+              fontSize: 84, fontWeight: 700, lineHeight: '90px', letterSpacing: '-0.04em',
+              color: c.primary, textShadow: '0 2px 20px rgba(255,255,255,0.15)',
+              marginBottom: 8,
+            }}>
+              {unit === 'C' ? '20°' : '68°'}
+            </div>
+            <div style={{ fontSize: 18, color: c['on-surface-variant'], marginBottom: 24 }}>
+              Partly Cloudy
+            </div>
+            <div style={{ display: 'flex', gap: 12, fontSize: 13, color: c['on-surface-variant'] }}>
+              <span>H: {unit === 'C' ? '24°' : '75°'}</span>
+              <span>L: {unit === 'C' ? '13°' : '55°'}</span>
+              <span>Feels like {unit === 'C' ? '18°' : '64°'}</span>
+            </div>
+          </div>
+
+          {/* Weekly */}
+          <div style={{ ...glass(0.1, 20), borderRadius: 24, padding: 20 }}>
+            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'], marginBottom: 16 }}>
+              7-DAY FORECAST
+            </div>
+            {weekly.map(d => (
+              <div key={d.day} style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '9px 10px', borderRadius: 10,
+                transition: 'background 0.15s', cursor: 'default',
+              }}
+                onMouseEnter={e => (e.currentTarget.style.background = 'rgba(255,255,255,0.07)')}
+                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+              >
+                <span style={{ fontSize: 13, color: c['on-surface-variant'], width: 36 }}>{d.day}</span>
+                <span style={{ fontSize: 18 }}>{d.icon}</span>
+                <span style={{ fontSize: 13, color: c.primary }}>{display(d.high)}</span>
+                <span style={{ fontSize: 13, color: c['on-surface-variant'] }}>{display(d.low)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Hourly */}
+        <div style={{ ...glass(0.08, 20), borderRadius: 20, padding: '20px 24px', marginBottom: 20 }}>
+          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'], marginBottom: 16 }}>
+            HOURLY FORECAST
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            {hourly.map(h => (
+              <div key={h.time} style={{
+                flex: 1, ...glass(0.1, 10), borderRadius: 14,
+                padding: '14px 0', display: 'flex', flexDirection: 'column',
+                alignItems: 'center', gap: 8,
+              }}>
+                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'] }}>{h.time}</span>
+                <span style={{ fontSize: 22 }}>{h.icon}</span>
+                <span style={{ fontSize: 15, fontWeight: 500, color: c.primary }}>{display(h.temp)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Metrics grid */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 }}>
+          {metrics.map(m => (
+            <div key={m.label} style={{ ...glass(0.1, 20), borderRadius: 16, padding: '18px 20px' }}>
+              <div style={{ fontSize: 18, marginBottom: 8 }}>{m.icon}</div>
+              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', color: c['on-surface-variant'], marginBottom: 4 }}>{m.label}</div>
+              <div style={{ fontSize: 18, fontWeight: 500, color: c.primary }}>{m.value}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Action row */}
+        <div style={{ display: 'flex', gap: 12 }}>
+          <button style={{
+            ...glass(0.15, 20),
+            color: c['on-primary'],
+            background: c.primary,
+            fontFamily: font, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
+            padding: '14px 28px', borderRadius: 24, cursor: 'pointer', border: 'none',
+          }}>
+            Set as default
+          </button>
+          <button style={{
+            ...glass(0.05, 20),
+            color: c.primary,
+            fontFamily: font, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
+            padding: '14px 28px', borderRadius: 24, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.2)',
+          }}>
+            Add to favourites
+          </button>
+          <button style={{
+            ...glass(0.05, 20),
+            color: c.primary,
+            fontFamily: font, fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
+            padding: '14px 28px', borderRadius: 24, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.2)',
+          }}>
+            Share
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/showcase/src/pages/PawsAndPaths.tsx b/showcase/src/pages/PawsAndPaths.tsx
new file mode 100644
index 0000000..0ab121f
--- /dev/null
+++ b/showcase/src/pages/PawsAndPaths.tsx
@@ -0,0 +1,324 @@
+const c = {
+  surface: '#f9f9ff',
+  'surface-dim': '#d3daea',
+  'surface-container-lowest': '#ffffff',
+  'surface-container-low': '#f0f3ff',
+  'surface-container': '#e7eefe',
+  'surface-container-high': '#e2e8f8',
+  'surface-container-highest': '#dce2f3',
+  'on-surface': '#151c27',
+  'on-surface-variant': '#534434',
+  outline: '#867461',
+  'outline-variant': '#d8c3ad',
+  primary: '#855300',
+  'on-primary': '#ffffff',
+  'primary-container': '#f59e0b',
+  'on-primary-container': '#613b00',
+  'inverse-primary': '#ffb95f',
+  secondary: '#0058be',
+  'on-secondary': '#ffffff',
+  'secondary-container': '#2170e4',
+  'on-secondary-container': '#fefcff',
+  tertiary: '#00658b',
+  'on-tertiary': '#ffffff',
+  'tertiary-container': '#1abdff',
+  'on-tertiary-container': '#004966',
+  error: '#ba1a1a',
+  'on-error': '#ffffff',
+  'error-container': '#ffdad6',
+  'on-error-container': '#93000a',
+  background: '#f9f9ff',
+  'on-background': '#151c27',
+}
+
+const font = 'Plus Jakarta Sans, sans-serif'
+
+const walkers = [
+  { name: 'Jordan Mills', rating: 4.9, walks: 312, avatar: '🧑', available: true, badge: 'Top Rated' },
+  { name: 'Priya Sharma', rating: 4.8, walks: 204, avatar: '👩', available: true, badge: 'Certified' },
+  { name: 'Sam O\'Brien', rating: 4.7, walks: 88, avatar: '🧔', available: false, badge: 'New' },
+]
+
+const pets = [
+  { name: 'Mochi', breed: 'Shiba Inu', age: '3 yrs', status: 'On walk', emoji: '🐕' },
+  { name: 'Biscuit', breed: 'Labrador', age: '5 yrs', status: 'At home', emoji: '🐶' },
+  { name: 'Luna', breed: 'Husky', age: '2 yrs', status: 'Scheduled', emoji: '🐺' },
+]
+
+const stats = [
+  { label: 'Total walks', value: '142', icon: '🐾' },
+  { label: 'This month', value: '18', icon: '📅' },
+  { label: 'Avg duration', value: '38m', icon: '⏱' },
+  { label: 'Distance', value: '74km', icon: '📍' },
+]
+
+function Btn({ children, variant = 'primary', style }: { children: React.ReactNode, variant?: 'primary' | 'secondary' | 'ghost', style?: React.CSSProperties }) {
+  const base: React.CSSProperties = {
+    fontFamily: font,
+    fontSize: 14,
+    fontWeight: 600,
+    lineHeight: '20px',
+    letterSpacing: '0.01em',
+    padding: '10px 20px',
+    borderRadius: 12,
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background 0.15s ease',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+  }
+  const vars: Record<string, React.CSSProperties> = {
+    primary: { background: c.primary, color: c['on-primary'] },
+    secondary: { background: c.secondary, color: c['on-secondary'] },
+    ghost: { background: c['surface-container-high'], color: c['on-surface'] },
+  }
+  return <button style={{ ...base, ...vars[variant], ...style }}>{children}</button>
+}
+
+function Badge({ children, color = 'tertiary' }: { children: React.ReactNode, color?: string }) {
+  const map: Record<string, [string, string]> = {
+    tertiary: [c['tertiary-container'], c['on-tertiary-container']],
+    error: [c['error-container'], c['on-error-container']],
+    primary: [c['primary-container'], c['on-primary-container']],
+  }
+  const [bg, fg] = map[color] || map.tertiary
+  return (
+    <span style={{
+      background: bg, color: fg,
+      fontSize: 12, fontWeight: 500, lineHeight: '16px',
+      padding: '2px 8px', borderRadius: 9999,
+      fontFamily: font,
+    }}>{children}</span>
+  )
+}
+
+function Card({ children, style }: { children: React.ReactNode, style?: React.CSSProperties }) {
+  return (
+    <div style={{
+      background: c['surface-container-lowest'],
+      borderRadius: 24,
+      padding: 24,
+      boxShadow: `0 4px 24px rgba(133,83,0,0.06)`,
+      ...style,
+    }}>{children}</div>
+  )
+}
+
+function StatCard({ label, value, icon }: { label: string, value: string, icon: string }) {
+  return (
+    <div style={{
+      background: c['secondary-container'],
+      color: c['on-secondary-container'],
+      borderRadius: 12,
+      padding: '16px 20px',
+      fontFamily: font,
+    }}>
+      <div style={{ fontSize: 20, marginBottom: 8 }}>{icon}</div>
+      <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1 }}>{value}</div>
+      <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4, opacity: 0.8 }}>{label}</div>
+    </div>
+  )
+}
+
+import React, { useState } from 'react'
+
+export default function PawsAndPaths() {
+  const [search, setSearch] = useState('')
+  const [activeTab, setActiveTab] = useState<'profile' | 'walkers' | 'bookings'>('profile')
+
+  return (
+    <div style={{ background: c.background, minHeight: '100vh', fontFamily: font, color: c['on-surface'] }}>
+      {/* Top nav */}
+      <nav style={{
+        background: c['surface-container-lowest'],
+        borderBottom: `1px solid ${c['outline-variant']}`,
+        padding: '0 32px',
+        height: 64,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        position: 'sticky',
+        top: 0,
+        zIndex: 10,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 24 }}>🐾</span>
+          <span style={{ fontSize: 20, fontWeight: 800, color: c.primary }}>Paws & Paths</span>
+        </div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Btn variant="ghost">Messages</Btn>
+          <Btn variant="primary">+ Book a Walk</Btn>
+        </div>
+      </nav>
+
+      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 32px' }}>
+        {/* Hero row */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 32 }}>
+          {/* Profile card */}
+          <Card>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
+              <div style={{
+                width: 64, height: 64, borderRadius: 9999,
+                background: c['primary-container'],
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 28,
+              }}>🧑‍💼</div>
+              <div>
+                <div style={{ fontSize: 20, fontWeight: 700 }}>Alex Johnson</div>
+                <div style={{ fontSize: 14, color: c['on-surface-variant'], marginTop: 2 }}>San Francisco, CA</div>
+                <Badge color="tertiary" >Premium Member</Badge>
+              </div>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+              {stats.map(s => <StatCard key={s.label} {...s} />)}
+            </div>
+          </Card>
+
+          {/* Pet list */}
+          <Card>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+              <div style={{ fontSize: 18, fontWeight: 700 }}>My Pets</div>
+              <Btn variant="ghost" style={{ padding: '6px 14px', fontSize: 13 }}>+ Add pet</Btn>
+            </div>
+            {pets.map(pet => (
+              <div key={pet.name} style={{
+                display: 'flex', alignItems: 'center', gap: 14,
+                padding: '12px 10px', borderRadius: 12,
+                transition: 'background 0.15s',
+                cursor: 'pointer',
+              }}
+                onMouseEnter={e => (e.currentTarget.style.background = c['surface-container-high'])}
+                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+              >
+                <div style={{ fontSize: 32 }}>{pet.emoji}</div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontWeight: 600, fontSize: 15 }}>{pet.name}</div>
+                  <div style={{ fontSize: 13, color: c['on-surface-variant'] }}>{pet.breed} · {pet.age}</div>
+                </div>
+                <Badge color={pet.status === 'On walk' ? 'primary' : pet.status === 'Scheduled' ? 'tertiary' : 'error'}>
+                  {pet.status}
+                </Badge>
+              </div>
+            ))}
+          </Card>
+        </div>
+
+        {/* Search + walkers */}
+        <Card style={{ marginBottom: 32 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+            <div style={{ fontSize: 18, fontWeight: 700 }}>Find a Walker</div>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <Btn variant="ghost" style={{ padding: '6px 14px', fontSize: 13 }}>Filter</Btn>
+              <Btn variant="ghost" style={{ padding: '6px 14px', fontSize: 13 }}>Map view</Btn>
+            </div>
+          </div>
+          {/* Input */}
+          <div style={{ position: 'relative', marginBottom: 20 }}>
+            <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', opacity: 0.4, fontSize: 16 }}>🔍</span>
+            <input
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Search walkers by name or area…"
+              style={{
+                width: '100%',
+                background: c['surface-container-low'],
+                color: c['on-surface'],
+                fontSize: 16,
+                fontFamily: font,
+                padding: '12px 14px 12px 42px',
+                borderRadius: 8,
+                border: `1px solid ${c['outline-variant']}`,
+                outline: 'none',
+              }}
+            />
+          </div>
+          {/* Walker list */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
+            {walkers.filter(w => w.name.toLowerCase().includes(search.toLowerCase())).map(w => (
+              <div key={w.name} style={{
+                background: c['surface-container-low'],
+                borderRadius: 16,
+                padding: 16,
+                border: `1px solid ${c['outline-variant']}`,
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                  <div style={{
+                    width: 44, height: 44, borderRadius: 9999,
+                    background: c['surface-container-highest'],
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontSize: 22,
+                  }}>{w.avatar}</div>
+                  <div>
+                    <div style={{ fontWeight: 600, fontSize: 14 }}>{w.name}</div>
+                    <div style={{ fontSize: 12, color: c['on-surface-variant'] }}>{w.walks} walks</div>
+                  </div>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                  <span style={{ fontSize: 14, color: c['on-surface-variant'] }}>⭐ {w.rating}</span>
+                  <Badge color={w.available ? 'tertiary' : 'error'}>{w.available ? 'Available' : 'Busy'}</Badge>
+                </div>
+                <Badge color="primary">{w.badge}</Badge>
+                <div style={{ marginTop: 12 }}>
+                  <Btn variant="primary" style={{ width: '100%', justifyContent: 'center', padding: '8px 0', fontSize: 13 }}>
+                    Book now
+                  </Btn>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* Booking form */}
+        <Card>
+          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 20 }}>Schedule a Walk</div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+            {['Date', 'Start time', 'Duration', 'Pet'].map(label => (
+              <div key={label}>
+                <label style={{ fontSize: 12, fontWeight: 600, color: c['on-surface-variant'], display: 'block', marginBottom: 6, letterSpacing: '0.01em' }}>{label}</label>
+                <input
+                  placeholder={label === 'Duration' ? '30 – 90 min' : label === 'Pet' ? 'Select pet…' : ''}
+                  type={label === 'Date' ? 'date' : label === 'Start time' ? 'time' : 'text'}
+                  style={{
+                    width: '100%',
+                    background: c['surface-container-low'],
+                    color: c['on-surface'],
+                    fontFamily: font,
+                    fontSize: 15,
+                    padding: '11px 14px',
+                    borderRadius: 8,
+                    border: `1px solid ${c['outline-variant']}`,
+                    outline: 'none',
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <label style={{ fontSize: 12, fontWeight: 600, color: c['on-surface-variant'], display: 'block', marginBottom: 6 }}>Special instructions</label>
+            <textarea
+              placeholder="Any notes for the walker…"
+              rows={3}
+              style={{
+                width: '100%', resize: 'vertical',
+                background: c['surface-container-low'],
+                color: c['on-surface'],
+                fontFamily: font,
+                fontSize: 15,
+                padding: '11px 14px',
+                borderRadius: 8,
+                border: `1px solid ${c['outline-variant']}`,
+                outline: 'none',
+              }}
+            />
+          </div>
+          <div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
+            <Btn variant="primary">Confirm booking</Btn>
+            <Btn variant="secondary">Save as draft</Btn>
+            <Btn variant="ghost">Cancel</Btn>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/showcase/src/pages/TotalityFestival.tsx b/showcase/src/pages/TotalityFestival.tsx
new file mode 100644
index 0000000..746c4ef
--- /dev/null
+++ b/showcase/src/pages/TotalityFestival.tsx
@@ -0,0 +1,341 @@
+import React, { useState } from 'react'
+
+const c = {
+  surface: '#121318',
+  'surface-dim': '#121318',
+  'surface-bright': '#38393f',
+  'surface-container-lowest': '#0d0e13',
+  'surface-container-low': '#1a1b21',
+  'surface-container': '#1e1f25',
+  'surface-container-high': '#292a2f',
+  'surface-container-highest': '#34343a',
+  'on-surface': '#e3e1e9',
+  'on-surface-variant': '#d0c6ab',
+  outline: '#999077',
+  'outline-variant': '#4d4732',
+  'surface-tint': '#e9c400',
+  primary: '#fff6df',
+  'on-primary': '#3a3000',
+  'primary-container': '#ffd700',
+  'on-primary-container': '#705e00',
+  'primary-fixed': '#ffe16d',
+  'primary-fixed-dim': '#e9c400',
+  secondary: '#bdf4ff',
+  'on-secondary': '#00363d',
+  'secondary-container': '#00e3fd',
+  'on-secondary-container': '#00616d',
+  tertiary: '#fcf3ff',
+  'on-tertiary': '#3b2754',
+  'tertiary-container': '#e7d1ff',
+  'on-tertiary-container': '#6b5586',
+  error: '#ffb4ab',
+  background: '#121318',
+  'on-background': '#e3e1e9',
+}
+
+const heading = 'Space Grotesk, Inter, sans-serif'
+const body = 'Inter, sans-serif'
+
+const bgGradient = 'radial-gradient(ellipse 80% 60% at 50% -10%, rgba(233,196,0,0.18) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, #0d0e13 40%, #0d0e1a 100%)'
+
+const glassCard = (alpha = 0.15): React.CSSProperties => ({
+  background: `rgba(52,52,58,${alpha})`,
+  backdropFilter: 'blur(20px)',
+  WebkitBackdropFilter: 'blur(20px)',
+  border: '1px solid rgba(255,255,255,0.08)',
+  boxShadow: '0 4px 24px rgba(0,0,0,0.3)',
+})
+
+const lineupActs = [
+  { name: 'SOLARIS ECHO', time: 'SAT 10:00PM', stage: 'Main Stage', genre: 'Electronic', featured: true },
+  { name: 'CORONA BOREALIS', time: 'SAT 8:30PM', stage: 'Main Stage', genre: 'Ambient', featured: false },
+  { name: 'UMBRA', time: 'SUN 11:00PM', stage: 'Eclipse Stage', genre: 'Techno', featured: true },
+  { name: 'DIAMOND RING', time: 'SAT 6:00PM', stage: 'Eclipse Stage', genre: 'Indie', featured: false },
+  { name: 'PENUMBRA', time: 'FRI 9:00PM', stage: 'Void Stage', genre: 'Experimental', featured: false },
+]
+
+const tickets = [
+  { tier: 'General', price: 149, perks: ['3-day access', 'Camping', 'Shuttle'], color: c.secondary, on: c['on-secondary'] },
+  { tier: 'Eclipse VIP', price: 349, perks: ['All General perks', 'VIP lounge', 'Viewing platform', 'Merch pack'], color: c['primary-container'], on: c['on-primary-container'], featured: true },
+  { tier: 'Totality', price: 799, perks: ['All VIP perks', 'Backstage access', 'Artist meet & greet', 'Private viewing'], color: c['tertiary-container'], on: c['on-tertiary-container'] },
+]
+
+const schedule = [
+  { day: 'FRI', events: [
+    { time: '4:00PM', act: 'Gates open', stage: '' },
+    { time: '7:00PM', act: 'PENUMBRA', stage: 'Void Stage' },
+    { time: '9:30PM', act: 'LIMINAL SKY', stage: 'Eclipse Stage' },
+  ]},
+  { day: 'SAT', events: [
+    { time: '2:00PM', act: 'PARTIAL PHASE begins', stage: '— Astronomical event —' },
+    { time: '6:00PM', act: 'DIAMOND RING', stage: 'Eclipse Stage' },
+    { time: '8:30PM', act: 'CORONA BOREALIS', stage: 'Main Stage' },
+    { time: '10:00PM', act: 'SOLARIS ECHO', stage: 'Main Stage' },
+  ]},
+  { day: 'SUN', events: [
+    { time: '1:17PM', act: '🌑 TOTALITY — 4 min 28 sec', stage: '— Solar eclipse —' },
+    { time: '9:00PM', act: 'CHROMOSPHERE', stage: 'Main Stage' },
+    { time: '11:00PM', act: 'UMBRA', stage: 'Eclipse Stage' },
+  ]},
+]
+
+export default function TotalityFestival() {
+  const [activeDay, setActiveDay] = useState('SAT')
+  const [qty, setQty] = useState<Record<string, number>>({ General: 0, 'Eclipse VIP': 0, Totality: 0 })
+
+  const currentSchedule = schedule.find(s => s.day === activeDay)!
+
+  return (
+    <div style={{ background: bgGradient, minHeight: '100vh', fontFamily: body, color: c['on-surface'], position: 'relative' }}>
+
+      {/* Decorative glow ring */}
+      <div style={{
+        position: 'fixed', top: '-200px', left: '50%', transform: 'translateX(-50%)',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(233,196,0,0.06) 0%, transparent 70%)',
+        pointerEvents: 'none', zIndex: 0,
+      }} />
+
+      <div style={{ position: 'relative', zIndex: 1 }}>
+        {/* Nav */}
+        <nav style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '20px 40px',
+          borderBottom: `1px solid ${c['outline-variant']}`,
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <span style={{ fontSize: 22 }}>🌑</span>
+            <span style={{ fontFamily: heading, fontSize: 18, fontWeight: 700, color: c.primary, letterSpacing: '-0.02em' }}>
+              TOTALITY
+            </span>
+          </div>
+          <div style={{ display: 'flex', gap: 32, fontSize: 14, fontFamily: heading, letterSpacing: '0.1em' }}>
+            {['LINEUP', 'SCHEDULE', 'INFO', 'TICKETS'].map(t => (
+              <a key={t} href="#" style={{ color: c['on-surface-variant'], textDecoration: 'none' }}
+                onMouseEnter={e => (e.currentTarget.style.color = c.primary)}
+                onMouseLeave={e => (e.currentTarget.style.color = c['on-surface-variant'])}
+              >{t}</a>
+            ))}
+          </div>
+          <button style={{
+            fontFamily: heading, fontSize: 14, fontWeight: 500,
+            letterSpacing: '0.1em',
+            background: c.primary, color: c['on-primary'],
+            border: 'none', borderRadius: 8, padding: '10px 20px', cursor: 'pointer',
+          }}>GET TICKETS</button>
+        </nav>
+
+        {/* Hero */}
+        <div style={{ padding: '80px 40px 64px', textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
+          <div style={{
+            display: 'inline-block',
+            background: c['tertiary-container'], color: c['on-tertiary-container'],
+            fontFamily: heading, fontSize: 12, fontWeight: 500, letterSpacing: '0.1em',
+            padding: '4px 14px', borderRadius: 9999, marginBottom: 24,
+          }}>AUGUST 22–24 · JOSHUA TREE, CA</div>
+
+          <h1 style={{
+            fontFamily: heading, fontSize: 72, fontWeight: 700,
+            lineHeight: '80px', letterSpacing: '-0.04em',
+            color: c.primary,
+            textShadow: `0 0 60px rgba(233,196,0,0.25)`,
+            marginBottom: 24,
+          }}>
+            TOTALITY<br />FESTIVAL
+          </h1>
+
+          <p style={{ fontSize: 18, color: c['on-surface-variant'], lineHeight: '28px', marginBottom: 36, maxWidth: 560, margin: '0 auto 36px' }}>
+            Three days of music, art, and a once-in-a-generation solar eclipse. Witness the diamond ring effect live.
+          </p>
+
+          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
+            <button style={{
+              fontFamily: heading, fontSize: 14, fontWeight: 500, letterSpacing: '0.1em',
+              background: c.primary, color: c['on-primary'],
+              border: 'none', borderRadius: 8, padding: '14px 32px', height: 48, cursor: 'pointer',
+              boxShadow: `0 0 32px rgba(233,196,0,0.3)`,
+            }}>SECURE YOUR SPOT</button>
+            <button style={{
+              fontFamily: heading, fontSize: 14, fontWeight: 500, letterSpacing: '0.1em',
+              background: 'transparent', color: c.secondary,
+              border: `1px solid ${c.secondary}`, borderRadius: 8, padding: '14px 32px', height: 48, cursor: 'pointer',
+            }}>VIEW LINEUP</button>
+          </div>
+        </div>
+
+        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px 64px' }}>
+
+          {/* Lineup */}
+          <section style={{ marginBottom: 64 }}>
+            <h2 style={{ fontFamily: heading, fontSize: 32, fontWeight: 600, color: c.primary, marginBottom: 24, letterSpacing: '-0.02em' }}>
+              Lineup
+            </h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
+              {lineupActs.map(act => (
+                <div key={act.name} style={{
+                  ...glassCard(act.featured ? 0.2 : 0.12),
+                  borderRadius: 12,
+                  padding: '20px 24px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  ...(act.featured ? { border: `1px solid rgba(233,196,0,0.2)` } : {}),
+                }}
+                  onMouseEnter={e => {
+                    (e.currentTarget as HTMLElement).style.background = 'rgba(56,57,63,0.4)'
+                    ;(e.currentTarget as HTMLElement).style.boxShadow = `0 0 32px rgba(0,227,253,0.1)`
+                  }}
+                  onMouseLeave={e => {
+                    (e.currentTarget as HTMLElement).style.background = `rgba(52,52,58,${act.featured ? 0.2 : 0.12})`
+                    ;(e.currentTarget as HTMLElement).style.boxShadow = '0 4px 24px rgba(0,0,0,0.3)'
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <div>
+                      <div style={{ fontFamily: heading, fontSize: act.featured ? 22 : 18, fontWeight: 600, color: act.featured ? c.primary : c['on-surface'], letterSpacing: act.featured ? '-0.02em' : 0, marginBottom: 6 }}>
+                        {act.name}
+                      </div>
+                      <div style={{ fontSize: 13, color: c['on-surface-variant'] }}>{act.time} · {act.stage}</div>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
+                      <span style={{
+                        background: c['tertiary-container'], color: c['on-tertiary-container'],
+                        fontFamily: heading, fontSize: 11, fontWeight: 500, letterSpacing: '0.1em',
+                        padding: '2px 8px', borderRadius: 9999,
+                      }}>{act.genre}</span>
+                      {act.featured && <span style={{
+                        background: c['primary-container'], color: c['on-primary-container'],
+                        fontFamily: heading, fontSize: 11, fontWeight: 500, letterSpacing: '0.1em',
+                        padding: '2px 8px', borderRadius: 9999,
+                      }}>HEADLINER</span>}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Schedule */}
+          <section style={{ marginBottom: 64 }}>
+            <h2 style={{ fontFamily: heading, fontSize: 32, fontWeight: 600, color: c.primary, marginBottom: 24, letterSpacing: '-0.02em' }}>
+              Schedule
+            </h2>
+            {/* Day tabs */}
+            <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
+              {schedule.map(s => (
+                <button key={s.day} onClick={() => setActiveDay(s.day)} style={{
+                  fontFamily: heading, fontSize: 14, fontWeight: 500, letterSpacing: '0.1em',
+                  background: activeDay === s.day ? c.primary : 'transparent',
+                  color: activeDay === s.day ? c['on-primary'] : c['on-surface-variant'],
+                  border: `1px solid ${activeDay === s.day ? 'transparent' : c['outline-variant']}`,
+                  borderRadius: 8, padding: '8px 20px', cursor: 'pointer',
+                  transition: 'all 0.15s',
+                }}>
+                  {s.day}
+                </button>
+              ))}
+            </div>
+            <div style={{ ...glassCard(0.15), borderRadius: 16, overflow: 'hidden' }}>
+              {currentSchedule.events.map((ev, i) => (
+                <div key={i} style={{
+                  display: 'flex', alignItems: 'center', gap: 20,
+                  padding: '16px 24px',
+                  borderBottom: i < currentSchedule.events.length - 1 ? `1px solid ${c['outline-variant']}` : 'none',
+                  cursor: 'pointer',
+                  transition: 'background 0.15s',
+                }}
+                  onMouseEnter={e => (e.currentTarget.style.background = c['surface-container-high'])}
+                  onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                >
+                  <span style={{ fontFamily: heading, fontSize: 12, fontWeight: 500, letterSpacing: '0.1em', color: c['on-surface-variant'], width: 70, flexShrink: 0 }}>{ev.time}</span>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontFamily: heading, fontSize: 15, fontWeight: 600, color: ev.act.startsWith('🌑') ? c.primary : c['on-surface'] }}>
+                      {ev.act}
+                    </div>
+                    {ev.stage && <div style={{ fontSize: 12, color: c['on-surface-variant'], marginTop: 2 }}>{ev.stage}</div>}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Tickets */}
+          <section>
+            <h2 style={{ fontFamily: heading, fontSize: 32, fontWeight: 600, color: c.primary, marginBottom: 24, letterSpacing: '-0.02em' }}>
+              Tickets
+            </h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
+              {tickets.map(t => (
+                <div key={t.tier} style={{
+                  ...glassCard(t.featured ? 0.2 : 0.12),
+                  borderRadius: 12,
+                  padding: 24,
+                  ...(t.featured ? { border: `1px solid rgba(233,196,0,0.25)`, boxShadow: `0 0 40px rgba(233,196,0,0.1)` } : {}),
+                  display: 'flex', flexDirection: 'column', gap: 0,
+                }}>
+                  <div style={{ fontFamily: heading, fontSize: 14, fontWeight: 500, letterSpacing: '0.1em', color: c['on-surface-variant'], marginBottom: 8 }}>
+                    {t.tier.toUpperCase()}
+                  </div>
+                  <div style={{ fontFamily: heading, fontSize: 36, fontWeight: 700, color: t.featured ? c.primary : c['on-surface'], letterSpacing: '-0.02em', marginBottom: 20 }}>
+                    ${t.price}
+                  </div>
+                  <ul style={{ listStyle: 'none', marginBottom: 24, flex: 1 }}>
+                    {t.perks.map(p => (
+                      <li key={p} style={{ fontSize: 13, color: c['on-surface-variant'], padding: '4px 0', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
+                        <span style={{ color: c['primary-fixed-dim'] }}>✦</span> {p}
+                      </li>
+                    ))}
+                  </ul>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+                    <button onClick={() => setQty(q => ({ ...q, [t.tier]: Math.max(0, q[t.tier] - 1) }))} style={{
+                      width: 32, height: 32, borderRadius: 8, border: `1px solid ${c['outline-variant']}`,
+                      background: 'transparent', color: c['on-surface'], fontSize: 16, cursor: 'pointer', fontFamily: heading,
+                    }}>−</button>
+                    <span style={{ fontFamily: heading, fontSize: 15, color: c['on-surface'], width: 24, textAlign: 'center' }}>{qty[t.tier]}</span>
+                    <button onClick={() => setQty(q => ({ ...q, [t.tier]: q[t.tier] + 1 }))} style={{
+                      width: 32, height: 32, borderRadius: 8, border: `1px solid ${c['outline-variant']}`,
+                      background: 'transparent', color: c['on-surface'], fontSize: 16, cursor: 'pointer', fontFamily: heading,
+                    }}>+</button>
+                  </div>
+                  <button style={{
+                    fontFamily: heading, fontSize: 13, fontWeight: 500, letterSpacing: '0.1em',
+                    background: t.featured ? c.primary : 'transparent',
+                    color: t.featured ? c['on-primary'] : c.secondary,
+                    border: `1px solid ${t.featured ? 'transparent' : c.secondary}`,
+                    borderRadius: 8, padding: '12px 0', cursor: 'pointer', width: '100%',
+                    ...(t.featured ? { boxShadow: `0 0 20px rgba(233,196,0,0.2)` } : {}),
+                  }}>
+                    {qty[t.tier] > 0 ? `ADD ${qty[t.tier]} TO CART` : 'SELECT'}
+                  </button>
+                </div>
+              ))}
+            </div>
+
+            {/* Cart summary */}
+            {Object.values(qty).some(v => v > 0) && (
+              <div style={{
+                ...glassCard(0.15),
+                borderRadius: 12, padding: '20px 24px',
+                marginTop: 16,
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              }}>
+                <div style={{ fontFamily: heading, color: c['on-surface-variant'], fontSize: 14 }}>
+                  {tickets.filter(t => qty[t.tier] > 0).map(t => `${qty[t.tier]}× ${t.tier}`).join(', ')}
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                  <div style={{ fontFamily: heading, fontSize: 20, fontWeight: 700, color: c.primary }}>
+                    ${tickets.reduce((sum, t) => sum + t.price * qty[t.tier], 0)}
+                  </div>
+                  <button style={{
+                    fontFamily: heading, fontSize: 13, fontWeight: 500, letterSpacing: '0.1em',
+                    background: c.primary, color: c['on-primary'],
+                    border: 'none', borderRadius: 8, padding: '12px 24px', cursor: 'pointer',
+                  }}>CHECKOUT</button>
+                </div>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/showcase/tsconfig.json b/showcase/tsconfig.json
new file mode 100644
index 0000000..6bfa73a
--- /dev/null
+++ b/showcase/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/showcase/vite.config.ts b/showcase/vite.config.ts
new file mode 100644
index 0000000..9ffcc67
--- /dev/null
+++ b/showcase/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})