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.

src/app/components/RenderMessageContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { KeyboardEvent, MouseEvent } from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
@@ -49,6 +49,12 @@ type RenderMessageContentProps = {
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
   disabledEmbedPatterns?: string[];
+  targetEventId?: string;
+  onJumboEmojiClick?: (
+    targetEventId: string,
+    body: string,
+    event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+  ) => void;
 };
 export function RenderMessageContent({
   displayName,
@@ -63,6 +69,8 @@ export function RenderMessageContent({
   linkifyOpts,
   outlineAttachment,
   disabledEmbedPatterns,
+  targetEventId,
+  onJumboEmojiClick,
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     let filteredUrls = urls.filter((url) => !testMatrixTo(url));
@@ -100,6 +108,11 @@ export function RenderMessageContent({
       </>
     );
   };
+  const handleJumboEmojiClick =
+    targetEventId && onJumboEmojiClick
+      ? (body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) =>
+          onJumboEmojiClick(targetEventId, body, event)
+      : undefined;
   const renderCaption = () => {
     const content: IImageContent = getContent();
     if (content.filename && content.filename !== content.body) {
@@ -182,6 +195,7 @@ export function RenderMessageContent({
       <MText
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}
@@ -201,6 +215,7 @@ export function RenderMessageContent({
         displayName={displayName}
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}
@@ -219,6 +234,7 @@ export function RenderMessageContent({
       <MNotice
         edited={edited}
         content={getContent()}
+        onJumboEmojiClick={handleJumboEmojiClick}
         renderBody={(props) => (
           <RenderBody
             {...props}