lotus(#6): render decoration in MediaView; fix store lifecycle

Review found in-call tiles use MediaView->Avatar, not TileAvatar, so the
decoration never rendered in-call (CRITICAL). Move the overlay into
MediaView, gated on the avatar's own visibility (!(video && videoEnabled))
so it never floats over live video; revert the TileAvatar changes.
Also ref-count the io.lotus.decorations registration (one shared handler,
no double-reply) and stop clearing the map on teardown so a transient
remount doesn't drop decorations (HIGH/MED).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/tile/MediaView.module.css

@@ -61,6 +61,24 @@ Please see LICENSE in the repository root for full details.
   mix-blend-mode: multiply;
 }
 
+/* [lotus #6] Profile decoration overlaid on the tile avatar. Shares the
+avatar's centred box and size so frame-style decorations sit around it. */
+.lotusDecoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  object-fit: contain;
+}
+
+@container mediaView (width > 0) {
+  .lotusDecoration {
+    inline-size: 50cqmin;
+    block-size: 50cqmin;
+  }
+}
+
 /* CSS makes us put a condition here, even though all we want to do is
 unconditionally select the container so we can use cqmin units */
 @container mediaView (width > 0) {

src/tile/MediaView.tsx

@@ -22,6 +22,7 @@ import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/ico
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
+import { useLotusDecoration } from "../lotus/lotusDecorations";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import {
   showConnectionStats as showConnectionStatsSetting,
@@ -91,6 +92,7 @@ export const MediaView: FC<Props> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const decoration = useLotusDecoration(userId);
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
   const [showConnectionStats] = useSetting(showConnectionStatsSetting);
 
@@ -137,6 +139,17 @@ export const MediaView: FC<Props> = ({
           })}
           style={{ display: video && videoEnabled ? "none" : "initial" }}
         />
+        {decoration && !(video && videoEnabled) && (
+          // [lotus #6] Profile decoration overlay, shown only when the avatar
+          // is visible (i.e. not when live video is showing). Pushed by the
+          // host via io.lotus.decorations; undefined unless opted in.
+          <img
+            className={styles.lotusDecoration}
+            src={decoration}
+            alt=""
+            aria-hidden
+          />
+        )}
         {video?.publication !== undefined && (
           <VideoTrack
             trackRef={video}

src/tile/TileAvatar.module.css

@@ -18,20 +18,3 @@ Please see LICENSE in the repository root for full details.
   /* TODO: make this --cpd-color-fg-primary when available. */
   color: var(--cpd-color-text-primary);
 }
-
-/* [lotus #6] Wrap so the decoration can overlay the avatar precisely. */
-.container {
-  position: relative;
-  display: inline-flex;
-}
-
-/* [lotus #6] APNG/PNG profile decoration drawn over the in-call tile avatar.
-The decoration art shares the avatar's box (transparent padding, ring at the
-edges), matching how the host renders it elsewhere. */
-.lotusDecoration {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  pointer-events: none;
-  object-fit: contain;
-}

src/tile/TileAvatar.tsx

@@ -10,7 +10,6 @@ import { InlineSpinner } from "@vector-im/compound-web";
 
 import styles from "./TileAvatar.module.css";
 import { Avatar, type Props as AvatarProps } from "../Avatar";
-import { useLotusDecoration } from "../lotus/lotusDecorations";
 
 interface Props extends AvatarProps {
   size: number;
@@ -18,26 +17,14 @@ interface Props extends AvatarProps {
 }
 
 export const TileAvatar: FC<Props> = ({ size, loading, ...props }) => {
-  // [lotus #6] Profile decoration overlay for this participant, pushed by the
-  // host via io.lotus.decorations. undefined unless the host opted in.
-  const decoration = useLotusDecoration(props.id);
   return (
-    <div className={styles.container}>
+    <div>
       {loading && (
         <div className={styles.loading}>
           <InlineSpinner size={size / 3} />
         </div>
       )}
       <Avatar size={size} {...props} />
-      {decoration && (
-        <img
-          className={styles.lotusDecoration}
-          src={decoration}
-          alt=""
-          aria-hidden
-          style={{ width: size, height: size }}
-        />
-      )}
     </div>
   );
 };