fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares

♻️(frontend) refactor screen share zoom pan with useMove and imperative DOM updates
use react-aria useMove for pan, zoom/pan refs for DOM updates,
2026-07-27 04:09:26 +00:00 · 2026-07-15 10:23:04 +02:00 · 2026-07-13 17:22:19 +02:00 · 2026-07-13 16:05:55 +02:00 · 2026-07-13 16:00:01 +02:00 · 2026-07-13 15:59:42 +02:00
27 changed files with 1330 additions and 241 deletions
@@ -13,17 +13,30 @@ and this project adheres to
 - ✨(backend) allow searching the recording admin table by owner email
 - ✨(frontend) add participant color gradient when camera is off #1490
 - ✨(all) allow forcing SSO display name for authenticated users
+- ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets

 ### Changed

 - 🗑️(settings) deprecate SUMMARY_SERVICE_VERSION=1
 - ⬆️(mail) update mjml to v5 and @html-to/text-cli
 - 🚸(frontend) initialize the join input name with the persisted full name
+- ♻️(frontend) refactor background processors to use the new API
+- ♻️(frontend) inline model weights to avoid loading them from remote
+- ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
+- ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
+- ⬆️(frontend) upgrade react-stately from 3.47.0 to 3.48.0
+- ⬆️(frontend) upgrade react-aria from 3.49.0 to 3.50.0
+- ⬆️(frontend) upgrade react-aria-components from 1.18.0 to 1.19.0

 ### Fixed

 - 🩹(backend) identify externally provisioned users to PostHog
 - 🐛(backend) fix info panel crash for unregistered rooms
+- ♿️(frontend) focus side panel container on open #1452
+
+### Added
+
+- ✨(frontend) add screen share zoom controls #1498

 ## [1.23.0] - 2026-07-08

@@ -37,7 +37,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
  uv sync --locked --no-dev

 # ---- mails ----
-FROM node:20 AS mail-builder
+FROM node:22 AS mail-builder

 COPY ./src/mail /mail/app

@@ -15,6 +15,7 @@
        "@livekit/components-react": "2.9.21",
        "@livekit/components-styles": "1.2.0",
        "@livekit/track-processors": "0.7.2",
+        "@mediapipe/tasks-vision": "0.10.14",
        "@pandacss/preset-panda": "1.11.3",
        "@react-types/overlays": "3.10.0",
        "@remixicon/react": "4.9.0",
@@ -29,13 +30,13 @@
        "i18next-parser": "9.4.0",
        "i18next-resources-to-backend": "1.2.1",
        "livekit-client": "2.19.2",
-        "posthog-js": "1.387.0",
+        "posthog-js": "1.391.2",
        "react": "18.3.1",
-        "react-aria": "3.49.0",
-        "react-aria-components": "1.18.0",
+        "react-aria": "3.50.0",
+        "react-aria-components": "1.19.0",
        "react-dom": "18.3.1",
        "react-i18next": "17.0.8",
-        "react-stately": "3.47.0",
+        "react-stately": "3.48.0",
        "use-sound": "5.0.0",
        "valtio": "2.3.2",
        "wouter": "3.10.0"
@@ -63,6 +64,7 @@
        "typescript": "6.0.3",
        "typescript-eslint": "8.60.1",
        "vite": "8.0.14",
+        "vite-plugin-static-copy": "4.1.1",
        "vite-plugin-svgr": "5.2.0"
      }
    },
@@ -110,6 +112,62 @@
        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-aria": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
+      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.47.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-aria-components": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
+      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "client-only": "^0.0.1",
+        "react-aria": "3.49.0",
+        "react-stately": "3.47.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-stately": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
+      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.29.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1752,9 +1810,9 @@
      }
    },
    "node_modules/@react-types/shared": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.35.0.tgz",
-      "integrity": "sha512-iNWvuzEwANttpQpdlu8nPBtdHb0mcCMj1ZTH//iRB5E/14IAnyRlR25rxH7pNLyzHINsPGEKnWvpwDMCT6vziQ==",
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
+      "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
      "license": "Apache-2.0",
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -3192,6 +3250,19 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/bl": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
@@ -7094,6 +7165,19 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-boolean-object": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -8675,6 +8759,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/p-map": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.5.tgz",
+      "integrity": "sha512-e8vJF4XdVkzqqSHguEMz41mQO1wKwxKm5ENrUJQUu9kLDCtn83cxbyHZcszr4QC5zEA7WffRRC4gsTecC7J9oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/package-manager-detector": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
@@ -9033,19 +9130,19 @@
      "license": "MIT"
    },
    "node_modules/posthog-js": {
-      "version": "1.387.0",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.387.0.tgz",
-      "integrity": "sha512-Pv1jUMySMN62zoAxdJBJPV8n62lkHdjuWhpeU7izczc5Dqbx3hhqO2hkrNTI8Yx1ezmWk2qUHZs03FuOBubdFQ==",
+      "version": "1.391.2",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.391.2.tgz",
+      "integrity": "sha512-q0DZN6ljchSnAFJIXf+sQFTPlsLjTlRa+TvrL+QRb6413BGtib/MNiQy1bnwLKt8KR+f6xJYvkqdLyty9s4Aww==",
      "license": "SEE LICENSE IN LICENSE",
      "dependencies": {
-        "@posthog/core": "^1.33.0",
-        "@posthog/types": "^1.387.0",
+        "@posthog/core": "^1.35.3",
+        "@posthog/types": "^1.390.2",
        "core-js": "^3.38.1",
        "dompurify": "^3.3.2",
        "fflate": "^0.4.8",
-        "preact": "^10.28.2",
+        "preact": "^10.29.2",
        "query-selector-shadow-dom": "^1.0.1",
-        "web-vitals": "^5.1.0"
+        "web-vitals": "^5.3.0"
      }
    },
    "node_modules/powershell-utils": {
@@ -9062,13 +9159,21 @@
      }
    },
    "node_modules/preact": {
-      "version": "10.28.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.3.tgz",
-      "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
+      "version": "10.29.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
+      "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
      "license": "MIT",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
      }
    },
    "node_modules/prelude-ls": {
@@ -9275,19 +9380,19 @@
      }
    },
    "node_modules/react-aria": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
-      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
+      "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "aria-hidden": "^1.2.3",
        "clsx": "^2.0.0",
-        "react-stately": "3.47.0",
+        "react-stately": "3.48.0",
        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
@@ -9296,17 +9401,17 @@
      }
    },
    "node_modules/react-aria-components": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
-      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.19.0.tgz",
+      "integrity": "sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "client-only": "^0.0.1",
-        "react-aria": "3.49.0",
-        "react-stately": "3.47.0"
+        "react-aria": "3.50.0",
+        "react-stately": "3.48.0"
      },
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
@@ -9360,15 +9465,15 @@
      "license": "MIT"
    },
    "node_modules/react-stately": {
-      "version": "3.47.0",
-      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
-      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
+      "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "use-sync-external-store": "^1.6.0"
      },
@@ -11137,6 +11242,80 @@
        }
      }
    },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-4.1.1.tgz",
+      "integrity": "sha512-GrlA8YklrAfSyxJ4M3fdQLOo9oNkp56IM9FYgX/WtEgeIFkPwhu4wzpufBCIuNKCa6Fn77FkRdYxkHqV0FwjAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "p-map": "^7.0.4",
+        "picocolors": "^1.1.1",
+        "tinyglobby": "^0.2.17"
+      },
+      "engines": {
+        "node": "^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/sapphi-red"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-plugin-static-copy/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/vite-plugin-static-copy/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/vite-plugin-static-copy/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/vite-plugin-svgr": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-5.2.0.tgz",
@@ -11470,9 +11649,9 @@
      }
    },
    "node_modules/web-vitals": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
-      "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.3.0.tgz",
+      "integrity": "sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==",
      "license": "Apache-2.0"
    },
    "node_modules/webrtc-adapter": {
@@ -17,11 +17,12 @@
  "dependencies": {
    "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
    "@fontsource-variable/lexend": "5.2.11",
-    "@libreaudio/la-call": "0.1.4",
    "@fontsource/opendyslexic": "5.2.5",
+    "@libreaudio/la-call": "0.1.4",
    "@livekit/components-react": "2.9.21",
    "@livekit/components-styles": "1.2.0",
    "@livekit/track-processors": "0.7.2",
+    "@mediapipe/tasks-vision": "0.10.14",
    "@pandacss/preset-panda": "1.11.3",
    "@react-types/overlays": "3.10.0",
    "@remixicon/react": "4.9.0",
@@ -36,13 +37,13 @@
    "i18next-parser": "9.4.0",
    "i18next-resources-to-backend": "1.2.1",
    "livekit-client": "2.19.2",
-    "posthog-js": "1.387.0",
+    "posthog-js": "1.391.2",
    "react": "18.3.1",
-    "react-aria": "3.49.0",
-    "react-aria-components": "1.18.0",
+    "react-aria": "3.50.0",
+    "react-aria-components": "1.19.0",
    "react-dom": "18.3.1",
    "react-i18next": "17.0.8",
-    "react-stately": "3.47.0",
+    "react-stately": "3.48.0",
    "use-sound": "5.0.0",
    "valtio": "2.3.2",
    "wouter": "3.10.0"
@@ -70,6 +71,7 @@
    "typescript": "6.0.3",
    "typescript-eslint": "8.60.1",
    "vite": "8.0.14",
+    "vite-plugin-static-copy": "4.1.1",
    "vite-plugin-svgr": "5.2.0"
  }
 }
@@ -28,6 +28,7 @@ import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
+import { ScreenShareZoomableVideo } from './ScreenShareZoomableVideo'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
@@ -55,6 +56,8 @@ interface ParticipantTileExtendedProps extends ParticipantTileProps {
  disableTileControls?: boolean
 }

+const MOUSE_IDLE_TIME = 3000
+
 export const ParticipantTile: (
  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
@@ -109,14 +112,43 @@ export const ParticipantTile: (
  })

  const isScreenShare = trackReference.source != Track.Source.Camera
+  const isRemoteScreenShare =
+    isScreenShare && !trackReference.participant.isLocal
  const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)

+  // Hover + idle tracking for the focus overlay (pin, effects, mute buttons).
+  const [isTileHovered, setIsTileHovered] = React.useState(false)
+  const [isIdle, setIsIdle] = React.useState(false)
+  const idleTimerRef = React.useRef<number | null>(null)
+
+  const handleTileMouseMove = React.useCallback(() => {
+    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
+    idleTimerRef.current = window.setTimeout(
+      () => setIsIdle(true),
+      MOUSE_IDLE_TIME
+    )
+    setIsIdle(false)
+  }, [])
+
+  const isOverlayVisible = hasKeyboardFocus || (isTileHovered && !isIdle)
+
+  // tileRef: fullscreen target. setRefs merges it with the forwarded ref on the same node.
+  const tileRef = React.useRef<HTMLDivElement>(null)
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      ;(tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+      if (typeof ref === 'function') ref(node)
+      else if (ref)
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
+    },
+    [ref]
+  )
+
  const participantName = getParticipantName(trackReference.participant)
  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })

  const interactiveProps = {
    ...elementProps,
-    // Ensure the tile is focusable to expose contextual controls to keyboard users.
    tabIndex: 0,
    'aria-label': t('containerLabel', { name: participantName }),
    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
@@ -134,30 +166,63 @@ export const ParticipantTile: (
    },
  }

+  const isVideoTrack =
+    isTrackReference(trackReference) &&
+    (trackReference.publication?.kind === 'video' ||
+      trackReference.source === Track.Source.Camera ||
+      trackReference.source === Track.Source.ScreenShare)
+
+  let trackMedia: React.ReactNode = null
+  if (isVideoTrack) {
+    if (isRemoteScreenShare) {
+      trackMedia = (
+        <ScreenShareZoomableVideo
+          trackRef={trackReference}
+          tileRef={tileRef}
+          onSubscriptionStatusChanged={handleSubscribe}
+          manageSubscription={autoManageSubscription}
+        />
+      )
+    } else {
+      trackMedia = (
+        <VideoTrack
+          trackRef={trackReference}
+          onSubscriptionStatusChanged={handleSubscribe}
+          manageSubscription={autoManageSubscription}
+        />
+      )
+    }
+  } else if (isTrackReference(trackReference)) {
+    trackMedia = (
+      <AudioTrack
+        trackRef={trackReference}
+        onSubscriptionStatusChanged={handleSubscribe}
+      />
+    )
+  }
+
  return (
-    <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
+    <div
+      ref={setRefs}
+      style={{ position: 'relative' }}
+      {...interactiveProps}
+      onMouseEnter={() => setIsTileHovered(true)}
+      onMouseLeave={() => {
+        setIsTileHovered(false)
+        setIsIdle(false)
+        if (idleTimerRef.current) {
+          window.clearTimeout(idleTimerRef.current)
+          idleTimerRef.current = null
+        }
+      }}
+      onMouseMove={handleTileMouseMove}
+    >
      <TrackRefContextIfNeeded trackRef={trackReference}>
        <ParticipantContextIfNeeded participant={trackReference.participant}>
          <FullScreenShareWarning trackReference={trackReference} />
          {children ?? (
            <>
-              {isTrackReference(trackReference) &&
-              (trackReference.publication?.kind === 'video' ||
-                trackReference.source === Track.Source.Camera ||
-                trackReference.source === Track.Source.ScreenShare) ? (
-                <VideoTrack
-                  trackRef={trackReference}
-                  onSubscriptionStatusChanged={handleSubscribe}
-                  manageSubscription={autoManageSubscription}
-                />
-              ) : (
-                isTrackReference(trackReference) && (
-                  <AudioTrack
-                    trackRef={trackReference}
-                    onSubscriptionStatusChanged={handleSubscribe}
-                  />
-                )
-              )}
+              {trackMedia}
              <div className="lk-participant-placeholder">
                <ParticipantPlaceholder
                  participant={trackReference.participant}
@@ -236,7 +301,7 @@ export const ParticipantTile: (
          {!disableMetadata && !disableTileControls && (
            <ParticipantTileFocus
              trackRef={trackReference}
-              hasKeyboardFocus={hasKeyboardFocus}
+              isVisible={isOverlayVisible}
            />
          )}
        </ParticipantContextIfNeeded>
@@ -2,7 +2,6 @@ import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
-  RiFullscreenLine,
  RiImageCircleAiFill,
  RiMicLine,
  RiMicOffLine,
@@ -15,41 +14,13 @@ import {
 } from '@livekit/components-react'
 import { useTranslation } from 'react-i18next'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { useFullScreen } from '../hooks/useFullScreen'
 import { type Participant, Track } from 'livekit-client'
 import { MuteAlertDialog } from './MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'

-const ZoomButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
-    trackRef,
-  })
-
-  if (!isFullscreenAvailable) {
-    return
-  }
-
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={t('fullScreen')}
-      onPress={() => toggleFullScreen()}
-    >
-      <RiFullscreenLine />
-    </Button>
-  )
-}
-
 const FocusButton = ({
  trackRef,
 }: {
@@ -127,26 +98,17 @@ const MuteButton = ({ participant }: { participant: Participant }) => {
  )
 }

-const MOUSE_IDLE_TIME = 3000
-
 export const ParticipantTileFocus = ({
  trackRef,
-  hasKeyboardFocus,
+  isVisible,
 }: {
  trackRef: TrackReferenceOrPlaceholder
-  hasKeyboardFocus: boolean
+  isVisible: boolean
 }) => {
-  const [hovered, setHovered] = useState(false)
  const [opacity, setOpacity] = useState(0)

-  const idleTimerRef = useRef<number | null>(null)
-  const [isIdleRef, setIsIdleRef] = useState(false)
-
-  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
-
  useEffect(() => {
    if (isVisible) {
-      // Wait for next frame to ensure element is mounted
      requestAnimationFrame(() => {
        setOpacity(0.6)
      })
@@ -155,24 +117,14 @@ export const ParticipantTileFocus = ({
    }
  }, [isVisible])

-  const handleMouseMove = () => {
-    if (idleTimerRef.current) {
-      window.clearTimeout(idleTimerRef.current)
-    }
-    idleTimerRef.current = window.setTimeout(() => {
-      setIsIdleRef(true)
-    }, MOUSE_IDLE_TIME)
-    setIsIdleRef(false)
-  }
-
  const participant = trackRef.participant

  const isScreenShare = trackRef.source == Track.Source.ScreenShare
-  const isLocal = trackRef.participant.isLocal

  const canMute = useCanMute(participant)

  return (
+    // Pointer-events: none so this overlay doesn't block the zoom surface below.
    <div
      className={css({
        position: 'absolute',
@@ -183,11 +135,9 @@ export const ParticipantTileFocus = ({
        alignItems: 'center',
        width: '100%',
        height: '100%',
+        pointerEvents: 'none',
      })}
      aria-hidden={!isVisible}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onMouseMove={handleMouseMove}
    >
      {isVisible && (
        <div
@@ -197,6 +147,7 @@ export const ParticipantTileFocus = ({
            zIndex: 1,
            borderRadius: '0.25rem',
            display: 'flex',
+            pointerEvents: 'auto',
            _hover: {
              opacity: '0.95 !important',
            },
@@ -213,7 +164,7 @@ export const ParticipantTileFocus = ({
            })}
          >
            <FocusButton trackRef={trackRef} />
-            {!isScreenShare ? (
+            {!isScreenShare && (
              <>
                {participant.isLocal ? (
                  <EffectsButton />
@@ -221,8 +172,6 @@ export const ParticipantTileFocus = ({
                  canMute && <MuteButton participant={participant} />
                )}
              </>
-            ) : (
-              !isLocal && <ZoomButton trackRef={trackRef} />
            )}
          </HStack>
        </div>
@@ -0,0 +1,26 @@
+import { VideoTrack } from '@livekit/components-react'
+import { type TrackReference } from '@livekit/components-core'
+import { memo } from 'react'
+
+interface ScreenShareVideoTrackProps {
+  trackRef: TrackReference
+  onSubscriptionStatusChanged: (subscribed: boolean) => void
+  manageSubscription?: boolean
+}
+
+// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
+export const ScreenShareVideoTrack = memo(
+  ({
+    trackRef,
+    onSubscriptionStatusChanged,
+    manageSubscription,
+  }: ScreenShareVideoTrackProps) => (
+    <VideoTrack
+      trackRef={trackRef}
+      onSubscriptionStatusChanged={onSubscriptionStatusChanged}
+      manageSubscription={manageSubscription}
+    />
+  )
+)
+
+ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'
@@ -0,0 +1,203 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { Button } from '@/primitives'
+import {
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
+  RiFullscreenExitLine,
+  RiZoomInLine,
+  RiZoomOutLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { isMacintosh } from '@/utils/livekit'
+import { srOnly } from '@/styles/a11y'
+
+interface ScreenShareZoomControlsProps {
+  containerRef: React.RefObject<HTMLDivElement | null>
+  isZoomed: boolean
+  zoomPercentage: number
+  canZoomIn: boolean
+  canZoomOut: boolean
+  onZoomIn: () => void
+  onZoomOut: () => void
+  onResetZoom: () => void
+}
+
+export const ScreenShareZoomControls = ({
+  containerRef,
+  isZoomed,
+  zoomPercentage,
+  canZoomIn,
+  canZoomOut,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+}: ScreenShareZoomControlsProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
+  const announce = useScreenReaderAnnounce()
+
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  // Tracks whether this tile's container triggered fullscreen (vs another share's).
+  const wasThisTileFullscreen = useRef(false)
+  const [isFullscreenAvailable] = useState(
+    () => typeof document !== 'undefined' && document.fullscreenEnabled
+  )
+
+  // Covers Esc and browser UI exits, not just the toolbar button.
+  // Only this tile's instance announces to avoid duplicates with multiple shares.
+  useEffect(() => {
+    const onChange = () => {
+      const isThisTileFullscreen =
+        document.fullscreenElement === containerRef.current
+      setIsFullscreen(isThisTileFullscreen)
+
+      if (isThisTileFullscreen) {
+        wasThisTileFullscreen.current = true
+        announce(t('fullScreenEntered'), 'assertive')
+      } else if (wasThisTileFullscreen.current) {
+        wasThisTileFullscreen.current = false
+        announce(t('fullScreenExited'), 'assertive')
+      }
+    }
+    document.addEventListener('fullscreenchange', onChange)
+    return () => document.removeEventListener('fullscreenchange', onChange)
+  }, [announce, t, containerRef])
+
+  const toggleFullScreen = useCallback(async () => {
+    try {
+      if (document.fullscreenElement === containerRef.current) {
+        await document.exitFullscreen()
+      } else {
+        // Tile container so zoom controls stay visible in fullscreen.
+        await containerRef.current?.requestFullscreen()
+      }
+    } catch (error) {
+      console.error('Error toggling fullscreen:', error)
+    }
+  }, [containerRef])
+
+  const wheelShortcutVisual = isMacintosh() ? '⌘+scroll' : 'Ctrl+scroll'
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        bottom: '12px',
+        right: '12px',
+        zIndex: 2,
+        pointerEvents: 'auto',
+      })}
+    >
+      <HStack
+        gap={0}
+        role="toolbar"
+        aria-label={t('toolbarLabel')}
+        className={css({
+          backgroundColor: 'primaryDark.50',
+          borderRadius: '2rem',
+          padding: '0.5rem',
+          alignItems: 'center',
+          opacity: 0.7,
+          transition: 'opacity 200ms linear',
+          _hover: {
+            opacity: 0.95,
+          },
+        })}
+      >
+        <span className={srOnly}>
+          {t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
+        </span>
+        {/* Animated wrapper: collapses to 0 when not zoomed. padding/margin
+            trick keeps overflow:hidden from clipping focus rings. */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            overflow: 'hidden',
+            transition: 'max-width 200ms ease-out, opacity 200ms ease-out',
+            padding: '3px',
+            margin: '-3px',
+          })}
+          style={{
+            maxWidth: isZoomed ? '12rem' : '0',
+            opacity: isZoomed ? 1 : 0,
+          }}
+          aria-hidden={!isZoomed}
+        >
+          <Button
+            size="sm"
+            variant="primaryTextDark"
+            square
+            tooltip={t('fitToWindow')}
+            aria-label={t('fitToWindow')}
+            isDisabled={!isZoomed}
+            onPress={onResetZoom}
+          >
+            <RiFullscreenExitLine size={20} />
+          </Button>
+          <Button
+            size="sm"
+            variant="primaryTextDark"
+            square
+            tooltip={t('zoomOutWithShortcut', {
+              shortcut: wheelShortcutVisual,
+            })}
+            aria-label={t('zoomOut')}
+            isDisabled={!isZoomed || !canZoomOut}
+            onPress={onZoomOut}
+          >
+            <RiZoomOutLine size={20} />
+          </Button>
+          {/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
+          <span
+            aria-hidden="true"
+            className={css({
+              color: 'white',
+              fontSize: '0.8125rem',
+              fontWeight: 500,
+              minWidth: '3.25rem',
+              textAlign: 'center',
+              userSelect: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '0 0.25rem',
+              whiteSpace: 'nowrap',
+            })}
+          >
+            {zoomPercentage} %
+          </span>
+        </div>
+        <Button
+          size="sm"
+          variant="primaryTextDark"
+          square
+          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
+          aria-label={t('zoomIn')}
+          isDisabled={!canZoomIn}
+          onPress={onZoomIn}
+        >
+          <RiZoomInLine size={20} />
+        </Button>
+        {isFullscreenAvailable && (
+          <Button
+            size="sm"
+            variant="primaryTextDark"
+            square
+            tooltip={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
+            aria-label={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
+            onPress={toggleFullScreen}
+          >
+            {isFullscreen ? (
+              <RiCollapseDiagonalLine size={20} />
+            ) : (
+              <RiExpandDiagonalLine size={20} />
+            )}
+          </Button>
+        )}
+      </HStack>
+    </div>
+  )
+}
@@ -0,0 +1,104 @@
+import { css } from '@/styled-system/css'
+import { type TrackReference } from '@livekit/components-core'
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { ScreenShareZoomControls } from './ScreenShareZoomControls'
+import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
+
+interface ScreenShareZoomableVideoProps {
+  trackRef: TrackReference
+  tileRef: React.RefObject<HTMLDivElement | null>
+  onSubscriptionStatusChanged: (subscribed: boolean) => void
+  manageSubscription?: boolean
+}
+
+export const ScreenShareZoomableVideo = ({
+  trackRef,
+  tileRef,
+  onSubscriptionStatusChanged,
+  manageSubscription,
+}: ScreenShareZoomableVideoProps) => {
+  const zoom = useScreenShareZoom()
+  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
+  const announce = useScreenReaderAnnounce()
+
+  // SR announcement: announce zoom level on change, with a one-time pan hint
+  // on the first zoom above 100 % per session.
+  const prevZoomRef = useRef(zoom.zoomPercentage)
+  const hasAnnouncedPanHint = useRef(false)
+  useEffect(() => {
+    if (prevZoomRef.current === zoom.zoomPercentage) return
+    const wasAtDefault = prevZoomRef.current <= 100
+    prevZoomRef.current = zoom.zoomPercentage
+
+    if (wasAtDefault && zoom.isZoomed && !hasAnnouncedPanHint.current) {
+      hasAnnouncedPanHint.current = true
+      announce(t('panHint', { level: zoom.zoomPercentage }), 'polite')
+    } else {
+      announce(t('currentZoomLevel', { level: zoom.zoomPercentage }), 'polite')
+    }
+
+    if (!zoom.isZoomed) hasAnnouncedPanHint.current = false
+  }, [zoom.zoomPercentage, zoom.isZoomed, announce, t])
+
+  // Attach keyboard listener on the tile container (has tabIndex=0).
+  useEffect(() => {
+    const el = tileRef.current
+    if (!el) return
+    el.addEventListener('keydown', zoom.handleKeyDown)
+    return () => el.removeEventListener('keydown', zoom.handleKeyDown)
+  }, [tileRef, zoom.handleKeyDown])
+
+  // Native wheel listener with { passive: false } so preventDefault works.
+  useEffect(() => {
+    const el = zoom.surfaceElRef.current
+    if (!el) return
+    el.addEventListener('wheel', zoom.handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', zoom.handleWheel)
+  }, [zoom.handleWheel, zoom.surfaceElRef])
+
+  return (
+    <>
+      <div
+        ref={zoom.surfaceElRef}
+        className={css({
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          userSelect: 'none',
+          touchAction: 'none',
+        })}
+        {...zoom.moveProps}
+      >
+        <div
+          ref={zoom.transformElRef}
+          style={{
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            transformOrigin: 'center center',
+          }}
+        >
+          <ScreenShareVideoTrack
+            trackRef={trackRef}
+            onSubscriptionStatusChanged={onSubscriptionStatusChanged}
+            manageSubscription={manageSubscription}
+          />
+        </div>
+      </div>
+      <ScreenShareZoomControls
+        containerRef={tileRef}
+        isZoomed={zoom.isZoomed}
+        zoomPercentage={zoom.zoomPercentage}
+        canZoomIn={zoom.canZoomIn}
+        canZoomOut={zoom.canZoomOut}
+        onZoomIn={zoom.zoomIn}
+        onZoomOut={zoom.zoomOut}
+        onResetZoom={zoom.resetZoom}
+      />
+    </>
+  )
+}
@@ -6,8 +6,8 @@ import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
+import { PanelId, useSidePanel } from '../hooks/useSidePanel'
+import React, { ReactNode, useCallback, useRef } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
@@ -15,6 +15,7 @@ import { Tools } from './Tools'
 import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'

 type StyledSidePanelProps = {
  title: string
@@ -29,103 +30,115 @@ type StyledSidePanelProps = {
  isReactionToolbarOpen?: boolean
 }

-const StyledSidePanel = ({
-  title,
-  ariaLabel,
-  children,
-  onClose,
-  isClosed,
-  isReactionToolbarOpen,
-  closeButtonTooltip,
-  isSubmenu = false,
-  onBack,
-  backButtonLabel,
-}: StyledSidePanelProps) => (
-  <aside
-    className={css({
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'box.border',
-      backgroundColor: 'box.bg',
-      color: 'box.text',
-      borderRadius: 8,
-      flex: 1,
-      position: 'absolute',
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: 'var(--sizes-room-side-panel-margin)',
-      marginLeft: 0,
-      marginBottom: 0,
-      padding: 0,
-      gap: 0,
-      right: 0,
-      top: 0,
-      width: 'var(--sizes-room-side-panel)',
-      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
-    })}
-    style={{
-      transform: isClosed
-        ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
-        : 'none',
-      bottom: isReactionToolbarOpen
-        ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
-        : 'var(--sizes-room-control-bar)',
-    }}
-    aria-hidden={isClosed}
-    aria-label={ariaLabel}
-  >
-    <HStack alignItems="center">
-      {isSubmenu && (
-        <Button
-          variant="secondaryText"
-          size="sm"
-          square
-          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
-          aria-label={backButtonLabel}
-          onPress={onBack}
+const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
+  (
+    {
+      title,
+      ariaLabel,
+      children,
+      onClose,
+      isClosed,
+      isReactionToolbarOpen,
+      closeButtonTooltip,
+      isSubmenu = false,
+      onBack,
+      backButtonLabel,
+    },
+    ref
+  ) => (
+    <aside
+      ref={ref}
+      tabIndex={-1}
+      className={css({
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'box.border',
+        backgroundColor: 'box.bg',
+        color: 'box.text',
+        borderRadius: 8,
+        flex: 1,
+        position: 'absolute',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: 'var(--sizes-room-side-panel-margin)',
+        marginLeft: 0,
+        marginBottom: 0,
+        padding: 0,
+        gap: 0,
+        right: 0,
+        top: 0,
+        width: 'var(--sizes-room-side-panel)',
+        transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
+        '&:focus': {
+          outline: 'none',
+        },
+      })}
+      style={{
+        transform: isClosed
+          ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
+          : 'none',
+        bottom: isReactionToolbarOpen
+          ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
+          : 'var(--sizes-room-control-bar)',
+      }}
+      aria-hidden={isClosed}
+      aria-label={ariaLabel}
+    >
+      <HStack alignItems="center">
+        {isSubmenu && (
+          <Button
+            variant="secondaryText"
+            size="sm"
+            square
+            className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+            aria-label={backButtonLabel}
+            onPress={onBack}
+          >
+            <RiArrowLeftLine size={20} aria-hidden="true" />
+          </Button>
+        )}
+        <Heading
+          slot="title"
+          level={1}
+          className={text({ variant: 'h2' })}
+          style={{
+            paddingLeft: isSubmenu ? 0 : '1.5rem',
+            paddingTop: '1rem',
+            display: isClosed ? 'none' : 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+          }}
        >
-          <RiArrowLeftLine size={20} aria-hidden="true" />
-        </Button>
-      )}
-      <Heading
-        slot="title"
-        level={1}
-        className={text({ variant: 'h2' })}
+          {title}
+        </Heading>
+      </HStack>
+      <Div
+        position="absolute"
+        top="5"
+        right="5"
        style={{
-          paddingLeft: isSubmenu ? 0 : '1.5rem',
-          paddingTop: '1rem',
-          display: isClosed ? 'none' : 'flex',
-          justifyContent: 'start',
-          alignItems: 'center',
+          display: isClosed ? 'none' : undefined,
        }}
      >
-        {title}
-      </Heading>
-    </HStack>
-    <Div
-      position="absolute"
-      top="5"
-      right="5"
-      style={{
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      <Button
-        invisible
-        variant="tertiaryText"
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    {children}
-  </aside>
+        <Button
+          invisible
+          variant="tertiaryText"
+          size="xs"
+          onPress={onClose}
+          aria-label={closeButtonTooltip}
+          tooltip={closeButtonTooltip}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {children}
+    </aside>
+  )
 )

+StyledSidePanel.displayName = 'StyledSidePanel'
+
 type PanelProps = {
  isOpen: boolean
  children: React.ReactNode
@@ -162,8 +175,28 @@ export const SidePanel = () => {

  const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()

+  const asideRef = useRef<HTMLElement>(null)
+
+  const focusAside = useCallback(() => {
+    requestAnimationFrame(() => {
+      asideRef.current?.focus({ preventScroll: true })
+    })
+  }, [])
+
+  const handlePanelOpened = useCallback(() => {
+    if (activePanelId === PanelId.CHAT) return
+    focusAside()
+  }, [activePanelId, focusAside])
+
+  useRestoreFocus(isSidePanelOpen, {
+    onOpened: handlePanelOpened,
+    preventScroll: true,
+    activeKey: activePanelId,
+  })
+
  return (
    <StyledSidePanel
+      ref={asideRef}
      title={title}
      ariaLabel={t('ariaLabel', { title })}
      onClose={() => {
@@ -95,8 +95,13 @@ const ToolButton = ({

 export const Tools = () => {
  const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
-    useSidePanel()
+  const {
+    openTranscript,
+    openScreenRecording,
+    activeSubPanelId,
+    isToolsOpen,
+    isSidePanelOpen,
+  } = useSidePanel()
  const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })

  // Restore focus to the element that opened the Tools panel
@@ -113,6 +118,7 @@ export const Tools = () => {
    },
    restoreFocusRaf: true,
    preventScroll: true,
+    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  const isTranscriptEnabled = useIsRecordingModeEnabled(
@@ -13,8 +13,10 @@ import {
 } from './TimerWorker'
 import {
  BackgroundProcessorInterface,
+  SELFIE_SEGMENTER_MODEL_PATH,
  type ProcessorConfig,
  type ProcessorType,
+  MEDIAPIPE_PATH_WASM,
 } from '.'

 const PROCESSING_WIDTH = 256
@@ -153,13 +155,10 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
  }

  async initSegmenter() {
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
-    )
+    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
    this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
      baseOptions: {
-        modelAssetPath:
-          'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter_landscape/float16/latest/selfie_segmenter_landscape.tflite',
+        modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
        delegate: 'CPU', // Use CPU for Firefox.
      },
      runningMode: 'VIDEO',
@@ -11,7 +11,11 @@ import {
  TIMEOUT_TICK,
  timerWorkerScript,
 } from './TimerWorker'
-import { ProcessorType } from '.'
+import {
+  FACE_LANDMARKS_MODEL_PATH,
+  ProcessorType,
+  MEDIAPIPE_PATH_WASM,
+} from '.'

 const PROCESSING_WIDTH = 256 * 3
 const PROCESSING_HEIGHT = 144 * 3
@@ -128,13 +132,10 @@ export class FaceLandmarksProcessor implements TrackProcessor<Track.Kind> {
  }

  async initFaceLandmarker() {
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
-    )
+    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
    this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
      baseOptions: {
-        modelAssetPath:
-          'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
+        modelAssetPath: FACE_LANDMARKS_MODEL_PATH,
        delegate: 'GPU',
      },
      runningMode: 'VIDEO',
@@ -1,13 +1,14 @@
 import type { ProcessorOptions, Track } from 'livekit-client'
 import {
-  BackgroundBlur,
  ProcessorWrapper,
-  VirtualBackground,
+  BackgroundProcessor,
 } from '@livekit/track-processors'
 import {
  type ProcessorConfig,
  BackgroundProcessorInterface,
  ProcessorType,
+  MEDIAPIPE_PATH_WASM,
+  SELFIE_SEGMENTER_MODEL_PATH,
 } from '.'

 export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInterface {
@@ -20,10 +21,24 @@ export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInter

    if (opts.type === 'virtual') {
      this.processorType = ProcessorType.VIRTUAL
-      this.processor = VirtualBackground(opts.imagePath)
+      this.processor = BackgroundProcessor({
+        mode: 'virtual-background',
+        imagePath: opts.imagePath,
+        assetPaths: {
+          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
+          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
+        },
+      })
    } else if (opts.type === 'blur') {
      this.processorType = ProcessorType.BLUR
-      this.processor = BackgroundBlur(opts.blurRadius)
+      this.processor = BackgroundProcessor({
+        mode: 'background-blur',
+        blurRadius: opts.blurRadius,
+        assetPaths: {
+          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
+          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
+        },
+      })
    } else {
      throw new Error(
        'Must provide either imagePath for virtual background or blurRadius for blur'
@@ -4,6 +4,14 @@ import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
 import { UnifiedBackgroundTrackProcessor } from './UnifiedBackgroundTrackProcessor'
 import { FaceLandmarksOptions } from './FaceLandmarksProcessor'

+export const SELFIE_SEGMENTER_MODEL_PATH =
+  '/assets/mediapipe/models/selfie_segmenter_landscape.tflite'
+
+export const FACE_LANDMARKS_MODEL_PATH =
+  '/assets/mediapipe/models/face_landmarker.task'
+
+export const MEDIAPIPE_PATH_WASM = '/assets/mediapipe/wasm'
+
 export enum ProcessorType {
  BLUR = 'blur',
  VIRTUAL = 'virtual',
@@ -1,4 +1,4 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { RiCollapseDiagonalLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -20,12 +20,12 @@ export const FullScreenMenuItem = () => {
    >
      {isCurrentlyFullscreen ? (
        <>
-          <RiFullscreenExitLine size={20} />
+          <RiCollapseDiagonalLine size={20} />
          {t('fullscreen.exit')}
        </>
      ) : (
        <>
-          <RiFullscreenLine size={20} />
+          <RiExpandDiagonalLine size={20} />
          {t('fullscreen.enter')}
        </>
      )}
@@ -0,0 +1,260 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react'
+import { useMove } from 'react-aria'
+import type { MoveMoveEvent } from '@react-types/shared'
+import {
+  MIN_ZOOM,
+  PAN_STEP,
+  WHEEL_ZOOM_SPEED,
+  ZOOM_STEP,
+  type PanOffset,
+  type ZoomSnapshot,
+  buildZoomSnapshot,
+  clampPan,
+  clampZoom,
+  getCursorFromZoomState,
+  getCursorPercentsFromWheelEvent,
+  getPanDeltaPercentsFromMove,
+  getWheelPanOffset,
+  getZoomTransform,
+} from '../utils/screenShareZoom'
+
+/**
+ * Manages zoom and pan state for a remote screen share.
+ *
+ * Performance: zoom/pan live in refs and are applied imperatively to the DOM
+ * (via transformElRef / surfaceElRef) so the hot path (drag, wheel) never
+ * triggers a React re-render. A useSyncExternalStore snapshot is flushed only
+ * when the toolbar UI needs to update (zoom level change, drag end).
+ *
+ * Drag/touch panning is handled by react-aria's useMove (moveProps).
+ * Ctrl/Cmd + wheel zoom is a native listener (must be non-passive to
+ * preventDefault and block browser page zoom).
+ * Arrow key panning and +/-/0 zoom are on a keydown listener attached to the
+ * tile container (which has tabIndex=0 and focus).
+ */
+export const useScreenShareZoom = () => {
+  const zoomRef = useRef(MIN_ZOOM)
+  const panRef = useRef<PanOffset>({ x: 0, y: 0 })
+  const draggingRef = useRef(false)
+
+  // The consumer binds these to the inner transform div and the outer drag surface.
+  const transformElRef = useRef<HTMLDivElement | null>(null)
+  const surfaceElRef = useRef<HTMLDivElement | null>(null)
+
+  // Snapshot store: subscribers are notified only on explicit flush() calls.
+  const snapshotRef = useRef<ZoomSnapshot>(
+    buildZoomSnapshot(MIN_ZOOM, { x: 0, y: 0 }, false)
+  )
+  const listenersRef = useRef(new Set<() => void>())
+
+  const subscribe = useCallback((cb: () => void) => {
+    listenersRef.current.add(cb)
+    return () => {
+      listenersRef.current.delete(cb)
+    }
+  }, [])
+
+  const getSnapshot = useCallback(() => snapshotRef.current, [])
+
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+
+  const flush = useCallback(() => {
+    snapshotRef.current = buildZoomSnapshot(
+      zoomRef.current,
+      panRef.current,
+      draggingRef.current
+    )
+    listenersRef.current.forEach((cb) => cb())
+  }, [])
+
+  const applyTransform = useCallback((transition: boolean) => {
+    const el = transformElRef.current
+    if (!el) return
+    el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
+    el.style.transition = transition ? 'transform 150ms ease-out' : 'none'
+  }, [])
+
+  const applyCursor = useCallback(() => {
+    const el = surfaceElRef.current
+    if (!el) return
+    el.style.cursor = getCursorFromZoomState(
+      zoomRef.current,
+      draggingRef.current
+    )
+  }, [])
+
+  const zoomIn = useCallback(() => {
+    const next = clampZoom(zoomRef.current + ZOOM_STEP)
+    zoomRef.current = next
+    panRef.current = clampPan(panRef.current, next)
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  const zoomOut = useCallback(() => {
+    const next = clampZoom(zoomRef.current - ZOOM_STEP)
+    zoomRef.current = next
+    panRef.current =
+      next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next)
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  const resetZoom = useCallback(() => {
+    zoomRef.current = MIN_ZOOM
+    panRef.current = { x: 0, y: 0 }
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  // Must be attached with { passive: false } so preventDefault() blocks
+  // the browser's native Ctrl+scroll page zoom.
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!e.ctrlKey && !e.metaKey) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const target = e.currentTarget as HTMLElement
+      const prev = zoomRef.current
+      const delta = -e.deltaY * WHEEL_ZOOM_SPEED
+      const next = clampZoom(prev + delta)
+
+      if (next <= MIN_ZOOM) {
+        zoomRef.current = MIN_ZOOM
+        panRef.current = { x: 0, y: 0 }
+      } else {
+        const { cursorXPercent, cursorYPercent } =
+          getCursorPercentsFromWheelEvent(e, target)
+        zoomRef.current = next
+        panRef.current = getWheelPanOffset({
+          pan: panRef.current,
+          prevZoom: prev,
+          nextZoom: next,
+          cursorXPercent,
+          cursorYPercent,
+        })
+      }
+
+      applyTransform(false)
+      applyCursor()
+      flush()
+    },
+    [applyTransform, applyCursor, flush]
+  )
+
+  // useMove handles mouse drag + touch pan. Keyboard arrows are not handled
+  // here because moveProps is on the zoom surface, while focus is on the tile
+  // container, see handleKeyDown below.
+  const { moveProps } = useMove({
+    onMoveStart() {
+      if (zoomRef.current <= MIN_ZOOM) return
+      draggingRef.current = true
+      applyCursor()
+      flush()
+    },
+    onMove(e: MoveMoveEvent) {
+      if (zoomRef.current <= MIN_ZOOM) return
+
+      const el = surfaceElRef.current
+      if (!el) return
+
+      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
+        e.deltaX,
+        e.deltaY,
+        el
+      )
+
+      panRef.current = clampPan(
+        {
+          x: panRef.current.x + deltaXPercent,
+          y: panRef.current.y + deltaYPercent,
+        },
+        zoomRef.current
+      )
+
+      applyTransform(false)
+      // Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
+      // Keyboard: flush so the toolbar reflects the updated position.
+      if (e.pointerType === 'keyboard') {
+        flush()
+      }
+    },
+    onMoveEnd() {
+      draggingRef.current = false
+      applyTransform(true)
+      applyCursor()
+      flush()
+    },
+  })
+
+  const panBy = useCallback(
+    (dx: number, dy: number) => {
+      panRef.current = clampPan(
+        { x: panRef.current.x + dx, y: panRef.current.y + dy },
+        zoomRef.current
+      )
+      applyTransform(true)
+      flush()
+    },
+    [applyTransform, flush]
+  )
+
+  // Attached to the tile container (not the zoom surface) where keyboard
+  // focus lives. Arrows pan, +/-/0 zoom.
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const isZoomed = zoomRef.current > MIN_ZOOM
+      if (!isZoomed && e.key !== '+' && e.key !== '=') return
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault()
+          panBy(PAN_STEP, 0)
+          break
+        case 'ArrowRight':
+          e.preventDefault()
+          panBy(-PAN_STEP, 0)
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          panBy(0, PAN_STEP)
+          break
+        case 'ArrowDown':
+          e.preventDefault()
+          panBy(0, -PAN_STEP)
+          break
+        case '+':
+        case '=':
+          e.preventDefault()
+          zoomIn()
+          break
+        case '-':
+          e.preventDefault()
+          zoomOut()
+          break
+        case '0':
+          e.preventDefault()
+          resetZoom()
+          break
+      }
+    },
+    [panBy, zoomIn, zoomOut, resetZoom]
+  )
+
+  return {
+    ...snapshot,
+    transformElRef,
+    surfaceElRef,
+    moveProps,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleWheel,
+    handleKeyDown,
+  }
+}
@@ -37,7 +37,7 @@ export function Chat({ ...props }: ChatProps) {
  const room = useRoomContext()
  const { send, chatMessages, isSending } = useChat()

-  const { isChatOpen } = useSidePanel()
+  const { isChatOpen, isSidePanelOpen } = useSidePanel()
  const chatSnap = useSnapshot(chatStore)

  // Keep track of the element that opened the chat so we can restore focus
@@ -51,6 +51,7 @@ export function Chat({ ...props }: ChatProps) {
      })
    },
    preventScroll: true,
+    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  // Use useParticipants hook to trigger a re-render when the participant list changes.
@@ -0,0 +1,115 @@
+export const MIN_ZOOM = 1
+export const MAX_ZOOM = 4
+export const ZOOM_STEP = 0.1
+export const WHEEL_ZOOM_SPEED = 0.002
+export const WHEEL_ZOOM_FOCUS_BLEND = 0.3
+export const PAN_STEP = 5
+export const PAN_CLAMP_HALF = 50
+
+export interface PanOffset {
+  x: number
+  y: number
+}
+
+export interface ZoomSnapshot {
+  zoomLevel: number
+  zoomPercentage: number
+  panOffset: PanOffset
+  isZoomed: boolean
+  isDragging: boolean
+  canZoomIn: boolean
+  canZoomOut: boolean
+}
+
+export const clampZoom = (value: number) => {
+  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value))
+}
+
+// Restrict pan so the content edge never passes the viewport center.
+export const clampPan = (pan: PanOffset, zoom: number): PanOffset => {
+  const maxPan = ((zoom - 1) / zoom) * PAN_CLAMP_HALF
+  return {
+    x: Math.max(-maxPan, Math.min(maxPan, pan.x)),
+    y: Math.max(-maxPan, Math.min(maxPan, pan.y)),
+  }
+}
+
+export const buildZoomSnapshot = (
+  zoom: number,
+  pan: PanOffset,
+  dragging: boolean
+): ZoomSnapshot => {
+  return {
+    zoomLevel: zoom,
+    zoomPercentage: Math.round(zoom * 100),
+    panOffset: pan,
+    isZoomed: zoom > MIN_ZOOM,
+    isDragging: dragging,
+    canZoomIn: zoom < MAX_ZOOM,
+    canZoomOut: zoom > MIN_ZOOM,
+  }
+}
+
+export const getZoomTransform = (zoom: number, pan: PanOffset) => {
+  return `scale(${zoom}) translate(${pan.x}%, ${pan.y}%)`
+}
+
+export const getCursorFromZoomState = (zoom: number, dragging: boolean) => {
+  if (zoom <= MIN_ZOOM) return 'default'
+  return dragging ? 'grabbing' : 'grab'
+}
+
+// Blend the current pan toward the cursor position so the zoom "tracks" the pointer.
+export const getWheelPanOffset = ({
+  pan,
+  prevZoom,
+  nextZoom,
+  cursorXPercent,
+  cursorYPercent,
+}: {
+  pan: PanOffset
+  prevZoom: number
+  nextZoom: number
+  cursorXPercent: number
+  cursorYPercent: number
+}): PanOffset => {
+  const zoomRatio = nextZoom / prevZoom
+  return clampPan(
+    {
+      x:
+        pan.x +
+        (cursorXPercent - pan.x) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
+      y:
+        pan.y +
+        (cursorYPercent - pan.y) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
+    },
+    nextZoom
+  )
+}
+
+// Convert cursor pixel position to a % offset from the surface center.
+export const getCursorPercentsFromWheelEvent = (
+  e: WheelEvent,
+  target: HTMLElement
+) => {
+  const rect = target.getBoundingClientRect()
+  return {
+    cursorXPercent:
+      ((e.clientX - rect.left) / rect.width) * 100 - PAN_CLAMP_HALF,
+    cursorYPercent:
+      ((e.clientY - rect.top) / rect.height) * 100 - PAN_CLAMP_HALF,
+  }
+}
+
+// Convert useMove pixel deltas to % of the surface dimensions.
+export const getPanDeltaPercentsFromMove = (
+  deltaX: number,
+  deltaY: number,
+  surface: HTMLElement
+) => {
+  const rect = surface.getBoundingClientRect()
+  return {
+    deltaXPercent: (deltaX / rect.width) * 100,
+    deltaYPercent: (deltaY / rect.height) * 100,
+  }
+}
@@ -6,6 +6,10 @@ export type RestoreFocusOptions = {
  onClosed?: () => void
  restoreFocusRaf?: boolean
  preventScroll?: boolean
+  /** When the panel stays open but its content changes, update the restore target. */
+  activeKey?: string | null
+  /** Return false to skip restoring focus on close (e.g. when switching to another panel). */
+  shouldRestoreOnClose?: () => boolean
 }

 /**
@@ -22,9 +26,12 @@ export function useRestoreFocus(
    onClosed,
    restoreFocusRaf = false,
    preventScroll = true,
+    activeKey,
+    shouldRestoreOnClose,
  } = options

  const prevIsOpenRef = useRef(false)
+  const prevActiveKeyRef = useRef(activeKey)
  const triggerRef = useRef<HTMLElement | null>(null)

  useEffect(() => {
@@ -37,25 +44,41 @@ export function useRestoreFocus(
      onOpened?.()
    }

+    // Panel switched while staying open
+    if (wasOpen && isOpen && activeKey !== prevActiveKeyRef.current) {
+      const activeEl = document.activeElement as HTMLElement | null
+      triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
+      onOpened?.()
+    }
+
    // Just closed
    if (wasOpen && !isOpen) {
      const trigger = triggerRef.current
-      if (trigger && document.contains(trigger)) {
+      const shouldRestore =
+        (shouldRestoreOnClose?.() ?? true) &&
+        trigger &&
+        document.contains(trigger)
+
+      if (shouldRestore) {
        const focus = () => trigger.focus({ preventScroll })
        if (restoreFocusRaf) requestAnimationFrame(focus)
        else focus()
      }
+
      triggerRef.current = null
      onClosed?.()
    }

    prevIsOpenRef.current = isOpen
+    prevActiveKeyRef.current = activeKey
  }, [
    isOpen,
+    activeKey,
    onClosed,
    onOpened,
    preventScroll,
    resolveTrigger,
    restoreFocusRaf,
+    shouldRestoreOnClose,
  ])
 }
@@ -668,6 +668,24 @@
    "muteParticipant": "{{name}} stummschalten",
    "fullScreen": "Vollbild"
  },
+  "screenShareZoom": {
+    "toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
+    "zoomIn": "Vergrößern",
+    "zoomInWithShortcut": "Vergrößern ({{shortcut}})",
+    "zoomOut": "Verkleinern",
+    "zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
+    "wheelShortcut": "Steuerung plus Mausrad",
+    "wheelShortcutMac": "Befehl plus Mausrad",
+    "wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
+    "wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
+    "fitToWindow": "An Fenster anpassen",
+    "fullScreen": "Vollbild",
+    "exitFullScreen": "Vollbild beenden",
+    "currentZoomLevel": "Zoom {{level}} %",
+    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder Pfeiltasten zum Navigieren verwenden.",
+    "fullScreenEntered": "Vollbild aktiviert",
+    "fullScreenExited": "Vollbild deaktiviert"
+  },
  "shortcutsPanel": {
    "title": "Tastenkürzel",
    "categories": {
@@ -667,6 +667,24 @@
    "muteParticipant": "Mute {{name}}",
    "fullScreen": "Full screen"
  },
+  "screenShareZoom": {
+    "toolbarLabel": "Screen share zoom controls",
+    "zoomIn": "Zoom in",
+    "zoomInWithShortcut": "Zoom in ({{shortcut}})",
+    "zoomOut": "Zoom out",
+    "zoomOutWithShortcut": "Zoom out ({{shortcut}})",
+    "wheelShortcut": "Control plus scroll wheel",
+    "wheelShortcutMac": "Command plus scroll wheel",
+    "wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
+    "wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
+    "fitToWindow": "Fit to window",
+    "fullScreen": "Full screen",
+    "exitFullScreen": "Exit full screen",
+    "currentZoomLevel": "Zoom {{level}} %",
+    "panHint": "Zoom {{level}} %. Drag with mouse or use arrow keys to navigate.",
+    "fullScreenEntered": "Full screen enabled",
+    "fullScreenExited": "Full screen disabled"
+  },
  "shortcutsPanel": {
    "title": "Keyboard shortcuts",
    "categories": {
@@ -667,6 +667,24 @@
    "muteParticipant": "Couper le micro de {{name}}",
    "fullScreen": "Plein écran"
  },
+  "screenShareZoom": {
+    "toolbarLabel": "Contrôles de zoom du partage d'écran",
+    "zoomIn": "Zoomer",
+    "zoomInWithShortcut": "Zoomer ({{shortcut}})",
+    "zoomOut": "Dézoomer",
+    "zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
+    "wheelShortcut": "Contrôle plus molette",
+    "wheelShortcutMac": "Commande plus molette",
+    "wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
+    "wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
+    "fitToWindow": "Ajuster à la fenêtre",
+    "fullScreen": "Plein écran",
+    "exitFullScreen": "Quitter le plein écran",
+    "currentZoomLevel": "Zoom {{level}} %",
+    "panHint": "Zoom {{level}} %. Glissez avec la souris ou utilisez les touches fléchées pour naviguer.",
+    "fullScreenEntered": "Plein écran activé",
+    "fullScreenExited": "Plein écran désactivé"
+  },
  "shortcutsPanel": {
    "title": "Raccourcis clavier",
    "categories": {
@@ -667,6 +667,24 @@
    "muteParticipant": "Demp {{name}}",
    "fullScreen": "Volledig scherm"
  },
+  "screenShareZoom": {
+    "toolbarLabel": "Zoombediening voor schermdeling",
+    "zoomIn": "Inzoomen",
+    "zoomInWithShortcut": "Inzoomen ({{shortcut}})",
+    "zoomOut": "Uitzoomen",
+    "zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
+    "wheelShortcut": "Control plus scrollwiel",
+    "wheelShortcutMac": "Command plus scrollwiel",
+    "wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
+    "wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
+    "fitToWindow": "Aanpassen aan venster",
+    "fullScreen": "Volledig scherm",
+    "exitFullScreen": "Volledig scherm verlaten",
+    "currentZoomLevel": "Zoom {{level}} %",
+    "panHint": "Zoom {{level}} %. Sleep met de muis of gebruik de pijltjestoetsen om te navigeren.",
+    "fullScreenEntered": "Volledig scherm ingeschakeld",
+    "fullScreenExited": "Volledig scherm uitgeschakeld"
+  },
  "shortcutsPanel": {
    "title": "Sneltoetsen",
    "categories": {
@@ -2,6 +2,7 @@ import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { visualizer } from 'rollup-plugin-visualizer'
 import svgr from 'vite-plugin-svgr'
+import { viteStaticCopy } from 'vite-plugin-static-copy'

 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -11,18 +12,32 @@ export default defineConfig(({ mode }) => {
      react(),
      svgr({
        svgrOptions: {
-          replaceAttrValues: { '#000': 'currentColor', '#000000': 'currentColor', '#1f1f1f': 'currentColor' },
+          replaceAttrValues: {
+            '#000': 'currentColor',
+            '#000000': 'currentColor',
+            '#1f1f1f': 'currentColor',
+          },
        },
      }),
-      env.VITE_ANALYZE === 'true' && visualizer({
-        open: true,
-        filename: 'rollup-plugin-visualizer/stats.html',
-        gzipSize: true,
-        brotliSize: true,
+      viteStaticCopy({
+        targets: [
+          {
+            src: 'node_modules/@mediapipe/tasks-vision/wasm/*',
+            dest: 'assets/mediapipe/wasm',
+            rename: { stripBase: 4 },
+          },
+        ],
      }),
+      env.VITE_ANALYZE === 'true' &&
+        visualizer({
+          open: true,
+          filename: 'rollup-plugin-visualizer/stats.html',
+          gzipSize: true,
+          brotliSize: true,
+        }),
    ],
    resolve: {
-      tsconfigPaths: true
+      tsconfigPaths: true,
    },
    build: {
      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
Author	SHA1	Message	Date
Cyril	fce967ac12	fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares	2026-07-15 10:23:04 +02:00
Cyril	09ec37d69a	♻️(frontend) refactor screen share zoom pan with useMove and imperative DOM updates use react-aria useMove for pan, zoom/pan refs for DOM updates,	2026-07-13 17:22:19 +02:00
Cyril	620e860474	♿(frontend) add wheel zoom shortcut hints to screen share controls Show Ctrl/Cmd+scroll zoom shortcut in tooltips, aria, SR hints, w/ en/fr/nl/de.	2026-07-13 16:05:55 +02:00
Cyril	e3dd317c8a	fixup! ✨(frontend) add useScreenShareZoom hook for zoom and pan state management	2026-07-13 16:00:01 +02:00
Cyril	66221eb17f	fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares	2026-07-13 15:59:42 +02:00
Cyril	bb2a666856	fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares	2026-07-13 15:47:29 +02:00
Cyril	e37806242d	fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares	2026-07-13 15:41:11 +02:00
Cyril	7c140df11a	fixup! 💄(frontend) use distinct expand/collapse icons for fullscreen actions	2026-07-13 15:38:59 +02:00
Cyril	3abafab65e	💄(frontend) improve screen share zoom toolbar sizing and containment Slightly enlarge toolbar controls while clipping hover states inside the pill so buttons no longer overflow the bar.	2026-07-13 14:54:16 +02:00
Cyril	87b49caf6b	💄(frontend) use distinct expand/collapse icons for fullscreen actions Replace fullscreen icons with expand-diagonal-line and collapse-diagonal-line	2026-07-13 14:46:06 +02:00
Cyril	bd193f0e66	🌐(frontend) add i18n keys for screen share zoom controls English and French labels, SR announcements and pan navigation hint.	2026-07-13 14:08:31 +02:00
Cyril	55316851c9	✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares Wraps VideoTrack with zoom/pan, keyboard nav and screen reader announcements.	2026-07-13 14:08:31 +02:00
Cyril	e3271f6e0f	✨(frontend) add ScreenShareZoomControls toolbar component Bottom-right toolbar with zoom, fit-to-window and fullscreen buttons.	2026-07-13 11:36:00 +02:00
Cyril	aefdcee54d	✨(frontend) add useScreenShareZoom hook for zoom and pan state management Manages zoom level, pan offset, wheel zoom, drag-to-pan and keyboard panBy.	2026-07-13 11:36:00 +02:00
lebaudantoine	ab707d866f	🩹(backend) fix the mail-builder step in docker Upgrading mjml now requires node >=22. I forgot to update the step, responsible to build the mail template in the production image.	2026-07-13 11:32:46 +02:00
snyk-bot	dac0b9c000	⬆️(frontend) upgrade react-aria related dependencies Initiated by Snyk.	2026-07-13 11:32:46 +02:00
Cyril	53cc8642eb	♿️(frontend) fix focus restore when switching side panels restore trigger focus on panel switch while panel remains open	2026-07-11 16:08:57 +02:00
Cyril	c8d9d2fea8	♿️(frontend) focus side panel container on open Focus aside on side panel open so screen readers announce the aria-label	2026-07-11 16:08:57 +02:00
snyk-bot	e910b1f0b7	⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2 Snyk has created this PR to upgrade posthog-js from 1.387.0 to 1.391.2. See this package in npm: posthog-js See this project in Snyk: https://app.eu.snyk.io/org/lasuite-dinum-default/project/96ea03d8-8d09-493d-86bf-363f274e129e?utm_source=github&utm_medium=referral&page=upgrade-pr	2026-07-11 16:06:18 +02:00
lebaudantoine	581e115c03	♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote Copy the MediaPipe WASM modules into the frontend build output and serve them locally, instead of loading them from the Google CDN at runtime. Mediapipe was a transitive dependency, add it explicitly. Requested by some members of the community. It closes #1168	2026-07-11 15:57:59 +02:00
lebaudantoine	8118ef0612	🎨(frontend) format vite config file Apply the project's formatter to the Vite config file to align its style with the rest of the codebase.	2026-07-11 15:57:59 +02:00
lebaudantoine	85f886d9c5	➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets Add vite-plugin-static-copy as a dependency. It will be used to copy and serve the WASM modules shipped by the MediaPipe JS dependency from the frontend build output.	2026-07-11 15:57:59 +02:00
lebaudantoine	b66f82e4b7	♻️(frontend) reorganize JS packages in package.json Sort and regroup the entries in package.json that were not in the expected order.	2026-07-11 15:57:59 +02:00
lebaudantoine	aabb7d629c	♻️(frontend) inline model weights to avoid loading them from remote Inline the model weights instead of fetching them from a Google remote location at runtime. The weights do not update frequently, so inlining removes an external dependency.	2026-07-11 15:57:59 +02:00
lebaudantoine	1e5f5c4fe9	♻️(frontend) refactor background processors to use the new API Update the calls to the background processors imported from livekit-track-processor so they use the new instantiation method instead of the previous, now-deprecated one.	2026-07-11 15:57:59 +02:00
lebaudantoine	f55fa0c42b	🐛(backend) fix info panel crash for unregistered rooms The info panel was crashing when opening a room that was not registered in the database (with ALLOW_UNREGISTERED_ROOMS=true), because the API response did not include the room slug. Instead of adding frontend fallbacks, update the unregistered-room response to include the slug, keeping the API contract consistent with registered rooms. Note: this still relies on the unregistered-room response staying aligned with the registered-room schema. Any future divergence between the two responses could introduce similar issues. A refactoring on the backend side is needed. It closes #1441.	2026-07-10 19:45:56 +02:00