Add emoji confetti bursts and component playground.

Support app.relay.emoji_confetti on jumbo emoji clicks with canvas physics,
per-emoji particle profiles, and a fixed overlay that does not affect scroll.
Also add a Vite playground for live component previews and theme hover preview.

vite.config.js

@@ -10,6 +10,9 @@ import { VitePWA } from 'vite-plugin-pwa';
 import fs from 'fs';
 import path from 'path';
 import buildConfig from './build.config';
+import { liveTsxPlugin, readDefaultLiveSource } from './playground-liveTsxPlugin';
+
+const projectRoot = path.resolve();
 
 const copyFiles = {
   targets: [
@@ -217,6 +220,30 @@ export default defineConfig({
   publicDir: false,
   base: buildConfig.base,
   assetsInclude: ['**/*.ogg', '**/*.mp3', '**/*.wav'],
+  resolve: {
+    // Keep a single React instance — dual copies cause resolveDispatcher() === null.
+    dedupe: ['react', 'react-dom'],
+    alias: [
+      { find: '@cinny', replacement: path.resolve(projectRoot, 'src') },
+      {
+        find: '@playground/mocks',
+        replacement: path.resolve(projectRoot, 'src/playground/mocks/index.ts'),
+      },
+      // Exact match only — do not rewrite loglevel/lib/...
+      {
+        find: /^loglevel$/,
+        replacement: path.resolve(projectRoot, 'src/playground/shims/loglevel.js'),
+      },
+      {
+        find: /^react$/,
+        replacement: path.resolve(projectRoot, 'node_modules/react'),
+      },
+      {
+        find: /^react-dom$/,
+        replacement: path.resolve(projectRoot, 'node_modules/react-dom'),
+      },
+    ],
+  },
   server: {
     port: 38347,
     host: '0.0.0.0',
@@ -232,6 +259,7 @@ export default defineConfig({
     serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
     serveGifWorker(),
     servePublicAssets(),
+    liveTsxPlugin(projectRoot, readDefaultLiveSource(projectRoot)),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',
@@ -258,6 +286,16 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
+    include: [
+      'react',
+      'react-dom',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+      'loglevel',
+      'matrix-js-sdk',
+      '@monaco-editor/react',
+    ],
+    needsInterop: ['loglevel'],
     rolldownOptions: {
       define: {
         global: 'globalThis',
@@ -277,6 +315,10 @@ export default defineConfig({
     sourcemap: true,
     copyPublicDir: false,
     rollupOptions: {
+      input: {
+        main: path.resolve(projectRoot, 'index.html'),
+        playground: path.resolve(projectRoot, 'playground.html'),
+      },
       plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
     },
   },