v1.12.4

Upgrade dependency to matrix-js-sdk@39.2.0
v1.12.4-rc.0
2025-11-18 14:36:41 +00:00 · 2025-11-18 14:29:25 +00:00 · 2025-11-11 14:45:49 +00:00 · 2025-11-11 14:18:14 +00:00 · 2025-11-11 12:46:14 +00:00 · 2025-11-11 06:20:27 +00:00
332 changed files with 8501 additions and 2016 deletions
@@ -1,3 +1,10 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
 module.exports = {
    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
@@ -66,7 +66,7 @@ jobs:
              run: VERSION=$(scripts/get-version-from-git.sh) yarn build

            - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: webapp-${{ matrix.image }}
                  path: webapp
@@ -62,7 +62,7 @@ jobs:
                  dpkg-gencontrol -v"$VERSION" -ldebian/tmp/DEBIAN/changelog
                  dpkg-deb -Zxz --root-owner-group --build debian/tmp element-web.deb

-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: element-web.deb
                  path: element-web.deb
@@ -53,7 +53,7 @@ jobs:

            - run: mv dist/element-*.tar.gz dist/develop.tar.gz

-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: webapp
                  path: dist/develop.tar.gz
@@ -25,7 +25,7 @@ jobs:
            actions: read
        steps:
            - name: Download HTML report
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
@@ -74,7 +74,7 @@ jobs:
              run: VERSION=$(scripts/get-version-from-git.sh) yarn build

            - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: webapp
                  path: webapp
@@ -128,7 +128,7 @@ jobs:
                  repository: element-hq/element-web

            - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
              with:
                  name: webapp
                  path: webapp
@@ -172,7 +172,7 @@ jobs:

            - name: Upload blob report to GitHub Actions Artifacts
              if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                  path: blob-report
@@ -212,7 +212,7 @@ jobs:

            - name: Download blob reports from GitHub Actions Artifacts
              if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
              with:
                  pattern: all-blob-reports-*
                  path: all-blob-reports
@@ -228,7 +228,7 @@ jobs:
            # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
            - name: Upload HTML report
              if: always() && inputs.skip != true
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: html-report
                  path: playwright-report
@@ -28,7 +28,7 @@ jobs:
                      Exercise caution. Use test accounts.

            - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
@@ -21,8 +21,14 @@ jobs:
                  cache: "yarn"
                  node-version-file: ".node-version"
                  registry-url: "https://registry.npmjs.org"
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.ELEMENT_NPM_TOKEN }}
+
+            # Ensure npm 11.5.1 or later is installed
+            - name: Update npm
+              run: npm install -g npm@latest
+
+            # Need to setup element web too as it needs the translations
+            - name: 🛠️ Setup EW
+              run: yarn install --pure-lockfile

            - name: 🛠️ Setup
              # When running `install` it also calls the `prepare` step which generates
@@ -31,4 +37,4 @@ jobs:

            - name: 🚀 Publish to npm
              working-directory: packages/shared-components
-              run: npm publish --access public --provenance
+              run: npm publish --access public --tag test --provenance
@@ -27,7 +27,7 @@ jobs:
              run: "sudo apt-get install -y tree"

            - name: Download Diffs
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  run-id: ${{ github.event.workflow_run.id }}
@@ -34,10 +34,6 @@ jobs:
            - name: Install element web dependencies
              run: yarn install --frozen-lockfile

-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
            - name: Install dependencies
              working-directory: packages/shared-components
              run: yarn install --frozen-lockfile
@@ -59,18 +55,12 @@ jobs:
              if: steps.playwright-cache.outputs.cache-hit != 'true'
              run: "yarn playwright install --with-deps --only-shell"

-            - name: Build storybook dependencies
-              # When the first test is ran, it will fail because the dependencies are not yet built.
-              # This step is to ensure that the dependencies are built before running the tests.
-              run: "yarn --cwd packages/shared-components test:storybook:ci"
-              continue-on-error: true
-
            - name: Run Visual tests
              run: "yarn --cwd packages/shared-components test:storybook:ci"

            - name: Upload received images & diffs
              if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: received-images
                  path: packages/shared-components/playwright/shared-component-received
@@ -35,10 +35,6 @@ jobs:
            - name: Typecheck
              run: "yarn run lint:types"

-            - name: Build Element Web resources
-              # Needed to prepare language files for shared components
-              run: "yarn build:res"
-
            - name: Install Shared Component Dependencies
              run: "yarn --cwd packages/shared-components install"

@@ -91,10 +87,6 @@ jobs:
            - name: Run Linter
              run: "yarn run lint:js"

-            - name: Build Element Web resources
-              # Needed to prepare language files for shared components
-              run: "yarn build:res"
-
            - name: Install Shared Component Deps
              run: "yarn --cwd packages/shared-components install --frozen-lockfile"

@@ -29,8 +29,8 @@ env:
 permissions: {}

 jobs:
-    jest:
-        name: Jest
+    jest_ew:
+        name: Jest (Element Web)
        runs-on: ubuntu-24.04
        strategy:
            fail-fast: false
@@ -84,7 +84,7 @@ jobs:

            - name: Upload Artifact
              if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
              with:
                  name: coverage-${{ matrix.runner }}
                  path: |
@@ -93,13 +93,13 @@ jobs:

    complete:
        name: jest-tests
-        needs: jest
+        needs: jest_ew
        if: always()
        runs-on: ubuntu-24.04
        permissions:
            statuses: write
        steps:
-            - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
+            - if: needs.jest_ew.result != 'skipped' && needs.jest_ew.result != 'success'
              run: exit 1

            - name: Skip SonarCloud in merge queue
@@ -112,3 +112,56 @@ jobs:
                  context: SonarCloud Code Analysis
                  sha: ${{ github.sha }}
                  target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+    jest_sc:
+        name: Jest (Shared Components)
+        runs-on: ubuntu-24.04
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              with:
+                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
+
+            - name: Yarn cache
+              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              with:
+                  node-version: "lts/*"
+                  cache: "yarn"
+
+            - name: Install EW Deps
+              run: "yarn install"
+
+            - name: Install Shared Component Deps
+              working-directory: "packages/shared-components"
+              run: "yarn install"
+
+            - name: Jest Cache
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              with:
+                  path: /tmp/jest_cache
+                  key: ${{ hashFiles('**/yarn.lock') }}
+
+            - name: Get number of CPU cores
+              id: cpu-cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
+
+            - name: Run tests
+              working-directory: "packages/shared-components"
+              run: |
+                  yarn test \
+                      --coverage=${{ env.ENABLE_COVERAGE }} \
+                      --ci \
+                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
+                      --cacheDirectory /tmp/jest_cache
+              env:
+                  # tell jest to use coloured output
+                  FORCE_COLOR: true
+
+            - name: Upload Artifact
+              if: env.ENABLE_COVERAGE == 'true'
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
+              with:
+                  name: coverage-sharedcomponents
+                  path: |
+                      packages/shared-components/coverage
+                      !packages/shared-components/coverage/lcov-report
@@ -36,3 +36,4 @@ storybook-static

 /packages/shared-components/node_modules
 /packages/shared-components/dist
+/packages/shared-components/src/i18nKeys.d.ts
@@ -1 +1 @@
-22
+24
@@ -1,3 +1,35 @@
+Changes in [1.12.4](https://github.com/element-hq/element-web/releases/tag/v1.12.4) (2025-11-18)
+================================================================================================
+## ✨ Features
+
+* Apply aria-hidden to emoji in SAS verification ([#31204](https://github.com/element-hq/element-web/pull/31204)). Contributed by @t3chguy.
+* Add options to hide header and composer of room view for the module api ([#31095](https://github.com/element-hq/element-web/pull/31095)). Contributed by @florianduros.
+* Experimental Module API Additions ([#30863](https://github.com/element-hq/element-web/pull/30863)). Contributed by @dbkr.
+* Change polls to use fieldset/legend markup ([#31160](https://github.com/element-hq/element-web/pull/31160)). Contributed by @langleyd.
+* Use compound Button styles for Jitsi button ([#31159](https://github.com/element-hq/element-web/pull/31159)). Contributed by @Half-Shot.
+* Add FocusLock to emoji picker ([#31146](https://github.com/element-hq/element-web/pull/31146)). Contributed by @langleyd.
+* Move room name, avatar, and topic to IOpts. ([#30981](https://github.com/element-hq/element-web/pull/30981)). Contributed by @kaylendog.
+* Add a devtool for looking at users and their devices ([#30983](https://github.com/element-hq/element-web/pull/30983)). Contributed by @uhoreg.
+
+## 🐛 Bug Fixes
+
+* Fix room list handling of membership changes ([#31197](https://github.com/element-hq/element-web/pull/31197)). Contributed by @t3chguy.
+* Fix room list unable to be resized when displayed after a module ([#31186](https://github.com/element-hq/element-web/pull/31186)). Contributed by @florianduros.
+* Inhibit keyboard highlights in dialogs when effector is not in focus ([#31181](https://github.com/element-hq/element-web/pull/31181)). Contributed by @t3chguy.
+* Strip mentions from forwarded messages ([#30884](https://github.com/element-hq/element-web/pull/30884)). Contributed by @twassman.
+* Don't allow pin or edit of messages with a send status ([#31158](https://github.com/element-hq/element-web/pull/31158)). Contributed by @langleyd.
+* Hide room header buttons if the room hasn't been created yet. ([#31092](https://github.com/element-hq/element-web/pull/31092)). Contributed by @Half-Shot.
+* Fix screen readers not indicating the emoji picker search field is focused. ([#31128](https://github.com/element-hq/element-web/pull/31128)). Contributed by @langleyd.
+* Fix emoji picker highlight missing when not active element ([#31148](https://github.com/element-hq/element-web/pull/31148)). Contributed by @t3chguy.
+* Add relevant aria attribute for selected emoji in the emoji picker ([#31125](https://github.com/element-hq/element-web/pull/31125)). Contributed by @t3chguy.
+* Fix tooltips within context menu portals being unreliable ([#31129](https://github.com/element-hq/element-web/pull/31129)). Contributed by @t3chguy.
+* Avoid excessive re-render of room list and member list ([#31131](https://github.com/element-hq/element-web/pull/31131)). Contributed by @florianduros.
+* Make emoji picker height responsive. ([#31130](https://github.com/element-hq/element-web/pull/31130)). Contributed by @langleyd.
+* Emoji Picker: Focused emoji does not move with the arrow keys ([#30893](https://github.com/element-hq/element-web/pull/30893)). Contributed by @langleyd.
+* Fix audio player seek bar position  ([#31127](https://github.com/element-hq/element-web/pull/31127)). Contributed by @florianduros.
+* Add aria label to emoji picker search ([#31126](https://github.com/element-hq/element-web/pull/31126)). Contributed by @langleyd.
+
+
 Changes in [1.12.3](https://github.com/element-hq/element-web/releases/tag/v1.12.3) (2025-11-04)
 ================================================================================================
 ## 🦖 Deprecations
@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.19-labs@sha256:dce1c693ef318bca08c964ba3122ae6248e45a1b96d65c4563c8dc6fe80349a2

 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:cd951bb228ddf85882951d4bf4acefc5314eb2eb66eee002256f4bb17c2293e3 AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:c102f42d665c164b4e5e5549813b1547ac8a9f1d343c7d17ddac106905a1c30b AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:304079937327a6490d5c89df47c8951d76f05b346d4c6e3b10cba2e266cd4904
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:65a7f97c299b919190e96e38e2ff8358132732000d3bc5c00c07cc8763fca53f

 # Need root user to install packages & manipulate the usr directory
 USER root
@@ -407,7 +407,7 @@ The VoIP and Jitsi options are:
 If you run your own rageshake server to collect bug reports, the following options may be of interest:

 1. `bug_report_endpoint_url`: URL for where to submit rageshake logs to. Rageshakes include feedback submissions and bug reports. When
-   not present in the config, the app will disable all rageshake functionality. Set to `https://element.io/bugreports/submit` to submit
+   not present in the config, the app will disable all rageshake functionality. Set to `https://rageshakes.element.io/api/submit` to submit
   rageshakes to us, or use your own rageshake server.
 2. `uisi_autorageshake_app`: If a user has enabled the "automatically send debug logs on decryption errors" flag, this option will be sent
   alongside the rageshake so the rageshake server can filter them by app name. By default, this will be `element-auto-uisi`
@@ -57,7 +57,7 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
                    "https://scalar-staging.vector.im/_matrix/integrations/v1",
                    "https://scalar-staging.vector.im/api"
            ],
-            "bug_report_endpoint_url": "https://element.io/bugreports/submit",
+            "bug_report_endpoint_url": "https://rageshakes.element.io/api/submit",
            "defaultCountryCode": "GB",
            "show_labs_settings": false,
            "features": { },
@@ -17,7 +17,7 @@
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
        "https://scalar-staging.vector.im/api"
    ],
-    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
+    "bug_report_endpoint_url": "https://rageshakes.element.io/api/submit",
    "uisi_autorageshake_app": "element-auto-uisi",
    "show_labs_settings": false,
    "room_directory": {
@@ -17,7 +17,7 @@
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
        "https://scalar-staging.vector.im/api"
    ],
-    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
+    "bug_report_endpoint_url": "https://rageshakes.element.io/api/submit",
    "uisi_autorageshake_app": "element-auto-uisi",
    "show_labs_settings": true,
    "room_directory": {
@@ -17,7 +17,7 @@ const config: Config = {
        // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
        customExportConditions: ["browser", "node"],
    },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/packages/*/src/**/*.test.[t]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
    globalSetup: "<rootDir>/test/globalSetup.ts",
    setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
    setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
@@ -40,6 +40,7 @@ const config: Config = {
        "^!!raw-loader!.*": "jest-raw-loader",
        "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
        "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
+        "counterpart": "<rootDir>/node_modules/counterpart",
    },
    transformIgnorePatterns: [
        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
@@ -48,6 +48,9 @@ export default {
        // would with a normal library).
        "@types/content-type",
        "@types/sdp-transform",
+
+        // Used in EW but failed because of "link:"
+        "@element-hq/web-shared-components",
    ],
    ignoreBinaries: [
        // Used in scripts & workflows
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.12.3",
+    "version": "1.12.4",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -29,7 +29,7 @@
        "UserFriendlyError"
    ],
    "scripts": {
-        "i18n": "matrix-gen-i18n src res packages/shared-components && yarn i18n:sort && yarn i18n:lint",
+        "i18n": "matrix-gen-i18n src res packages/shared-components/src && yarn i18n:sort && yarn i18n:lint",
        "i18n:sort": "jq --sort-keys '.' src/i18n/strings/en_EN.json > src/i18n/strings/en_EN.json.tmp && mv src/i18n/strings/en_EN.json.tmp src/i18n/strings/en_EN.json",
        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
        "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
@@ -65,23 +65,26 @@
        "coverage": "yarn test --coverage",
        "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
+        "install": "yarn --cwd packages/shared-components install --frozen-lockfile",
        "postinstall": "patch-package"
    },
    "resolutions": {
        "**/pretty-format/react-is": "19.2.0",
-        "@playwright/test": "1.56.0",
+        "@playwright/test": "1.56.1",
        "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
+        "@types/serve-static": "1.15.10",
        "oidc-client-ts": "3.3.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001750",
+        "caniuse-lite": "1.0.30001751",
        "testcontainers": "^11.0.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.4.1",
+        "@element-hq/element-web-module-api": "1.5.0",
+        "@element-hq/web-shared-components": "link:packages/shared-components",
        "@fontsource/inconsolata": "^5",
        "@fontsource/inter": "^5",
        "@formatjs/intl-segmenter": "^11.5.7",
@@ -103,7 +106,6 @@
        "browserslist": "^4.23.2",
        "classnames": "^2.2.6",
        "commonmark": "^0.31.0",
-        "counterpart": "^0.18.6",
        "css-tree": "^3.0.0",
        "diff-dom": "^5.0.0",
        "diff-match-patch": "^1.0.5",
@@ -130,7 +132,7 @@
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "39.1.2",
+        "matrix-js-sdk": "39.2.0",
        "matrix-widget-api": "^1.10.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
@@ -138,7 +140,7 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.275.1",
+        "posthog-js": "1.280.1",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -181,12 +183,11 @@
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.16.0",
+        "@element-hq/element-call-embedded": "0.16.1",
        "@element-hq/element-web-playwright-common": "^2.0.0",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "^1.50.1",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@rrweb/types": "^2.0.0-alpha.18",
        "@sentry/webpack-plugin": "^4.0.0",
        "@storybook/react-vite": "^9.1.10",
        "@stylistic/eslint-plugin": "^5.0.0",
@@ -217,7 +218,7 @@
        "@types/qrcode": "^1.3.5",
        "@types/react": "19.2.2",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.16.0",
        "@types/sdp-transform": "^2.4.10",
@@ -1,4 +1,12 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
 module.exports = {
+    root: true,
    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
    extends: [
        "plugin:matrix-org/babel",
@@ -1 +1,2 @@
 dist/
+i18n/i18nKeys.d.ts
@@ -0,0 +1,21 @@
+module.exports = {
+    sourceMaps: true,
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                include: ["@babel/plugin-transform-class-properties"],
+            },
+        ],
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
+        "@babel/preset-react",
+    ],
+    plugins: [
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-transform-numeric-separator",
+        "@babel/plugin-transform-object-rest-spread",
+        "@babel/plugin-transform-optional-chaining",
+        "@babel/plugin-transform-nullish-coalescing-operator",
+        "@babel/plugin-transform-runtime",
+    ],
+};
@@ -0,0 +1,58 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { env } from "process";
+
+import type { Config } from "jest";
+
+const config: Config = {
+    testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        url: "http://localhost/",
+    },
+    testMatch: ["<rootDir>/src/**/*.test.[tj]s?(x)"],
+    setupFilesAfterEnv: ["<rootDir>/src/test/setupTests.ts"],
+    moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
+        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
+        "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
+        "\\.svg$": "<rootDir>/__mocks__/svg.js",
+        "\\$webapp/i18n/languages.json": "<rootDir>/../../__mocks__/languages.json",
+        "^react$": "<rootDir>/node_modules/react",
+        "^react-dom$": "<rootDir>/node_modules/react-dom",
+        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
+        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
+    },
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
+    collectCoverageFrom: [
+        "<rootDir>/src/**/*.{js,ts,tsx}",
+        "<rootDir>/packages/**/*.{js,ts,tsx}",
+        // Coverage chokes on type definition files
+        "!<rootDir>/src/**/*.d.ts",
+    ],
+    coverageReporters: ["text-summary", "lcov"],
+    testResultsProcessor: "@casualbot/jest-sonar-reporter",
+    prettierPath: null,
+    moduleDirectories: ["node_modules", "./src/test/utils"],
+};
+
+// if we're running under GHA, enable the GHA reporter
+if (env["GITHUB_ACTIONS"] !== undefined) {
+    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
+
+    // if we're running against the develop branch, also enable the slow test reporter
+    if (env["GITHUB_REF"] == "refs/heads/develop") {
+        reporters.push("<rootDir>/../../test/slowReporter.cjs");
+    }
+    config.reporters = reporters;
+}
+
+export default config;
@@ -1,6 +1,6 @@
 {
    "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.6",
+    "version": "0.0.0-test.7",
    "description": "Shared components for Element",
    "author": "New Vector Ltd.",
    "repository": {
@@ -19,6 +19,10 @@
                "types": "./dist/element-web-shared-components.d.ts",
                "default": "./dist/element-web-shared-components.mjs"
            }
+        },
+        "./dist/element-web-shared-components.css": {
+            "require": "./dist/element-web-shared-components.css",
+            "import": "./dist/element-web-shared-components.css"
        }
    },
    "types": "dist/element-web-shared-components.d.ts",
@@ -30,8 +34,8 @@
        "package.json"
    ],
    "scripts": {
-        "postinstall": "patch-package",
-        "prepare": "vite build",
+        "test": "jest",
+        "prepare": "patch-package && yarn --cwd ../.. build:res && ts-node scripts/gatherTranslationKeys.ts && vite build",
        "storybook": "storybook dev -p 6007",
        "build-storybook": "storybook build",
        "lint": "yarn lint:types && yarn lint:js",
@@ -39,27 +43,41 @@
        "lint:types": "tsc --noEmit --jsx react",
        "test:storybook": "test-storybook --url http://localhost:6007/",
        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "test:storybook:update": "playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
    },
    "dependencies": {
+        "classnames": "^2.5.1",
+        "counterpart": "^0.18.6",
+        "lodash": "^4.17.21",
        "matrix-web-i18n": "^3.4.0",
        "patch-package": "^8.0.1",
-        "counterpart": "^0.18.6"
+        "react-merge-refs": "^3.0.2",
+        "temporal-polyfill": "^0.3.0"
    },
    "devDependencies": {
+        "@element-hq/element-web-playwright-common": "^2.0.0",
+        "@playwright/test": "^1.50.1",
        "@storybook/addon-a11y": "^9.1.10",
        "@storybook/addon-designs": "^10.0.2",
        "@storybook/addon-docs": "^9.1.10",
        "@storybook/icons": "^1.6.0",
        "@storybook/react-vite": "^9.1.10",
        "@storybook/test-runner": "^0.23.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.0",
+        "@types/counterpart": "^0.18.4",
+        "@types/lodash": "^4.17.20",
+        "@types/react": "^19.2.2",
        "concurrently": "^9.2.1",
        "eslint": "8",
-        "eslint-plugin-storybook": "^9.1.10",
+        "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-storybook": "^10.0.0",
+        "jest": "^30.2.0",
        "jest-image-snapshot": "^6.5.1",
        "patch-package": "^8.0.1",
        "prettier": "^3.6.2",
        "storybook": "^9.1.10",
+        "ts-node": "^10.9.2",
        "typescript": "^5.9.3",
        "vite": "^7.1.9",
        "vite-plugin-dts": "^4.5.4",
@@ -68,5 +86,9 @@
    "engines": {
        "node": ">=20.0.0"
    },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+    "peerDependencies": {
+        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-web": "^8.2.5"
+    }
 }
@@ -0,0 +1,61 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Gathers all the translation keys from element-web's en_EN.json into a TypeScript type definition file
+// that exports a type `TranslationKey` which is a union of all supported translation keys.
+// This prevents having to import the json file and make typescript do the work as this results in vite-dts
+// generating an import to the json file in the .d.ts which doesn't work at runtime: this way, the type
+// gets put into the bundle.
+// XXX: It should *not* be in the 'src' directory, being a generated file, but if it isn't then the type
+// bundler won't bundle the types and will leave the file as a relative import, which will break.
+
+import * as fs from "fs";
+import * as path from "path";
+
+const i18nStringsPath = path.resolve(__dirname, "../../../src/i18n/strings/en_EN.json");
+const outPath = path.resolve(__dirname, "../src/i18nKeys.d.ts");
+
+function gatherKeys(obj: any, prefix: string[] = []): string[] {
+    if (typeof obj !== "object" || obj === null) return [];
+    let keys: string[] = [];
+    for (const key of Object.keys(obj)) {
+        const value = obj[key];
+
+        // add the path (for both leaves and intermediates as then we include plurals)
+        keys.push([...prefix, key].join("|"));
+        if (typeof value === "object" && value !== null) {
+            // If the value is an object, recurse
+            keys = keys.concat(gatherKeys(value, [...prefix, key]));
+        }
+    }
+    return keys;
+}
+
+function main() {
+    const json = JSON.parse(fs.readFileSync(i18nStringsPath, "utf8"));
+    const keys = gatherKeys(json);
+    const typeDef =
+        "/*\n" +
+        " * Copyright 2025 Element Creations Ltd.\n" +
+        " *\n" +
+        " * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial\n" +
+        " * Please see LICENSE files in the repository root for full details.\n" +
+        " */\n" +
+        "\n" +
+        "// This file is auto-generated by gatherTranslationKeys.ts\n" +
+        "// Do not edit manually.\n\n" +
+        "export type TranslationKey =\n" +
+        keys.map((k) => `    | \"${k}\"`).join("\n") +
+        ";\n";
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    fs.writeFileSync(outPath, typeDef, "utf8");
+    console.log(`Wrote ${keys.length} keys to ${outPath}`);
+}
+
+if (require.main === module) {
+    main();
+}
@@ -6,7 +6,7 @@
 */

 .audioPlayer {
-    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
+    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) !important;
 }

 .mediaInfo {
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`AudioPlayerView renders the audio player in default state 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`Clock renders the clock 1`] = `
 <div>
@@ -6,6 +6,6 @@
 */

 .button {
-    border-radius: 32px;
-    background-color: var(--cpd-color-bg-subtle-primary);
+    border-radius: 32px !important;
+    background-color: var(--cpd-color-bg-subtle-primary) !important;
 }
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`PlayPauseButton renders the button in default state 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`Seekbar renders the clock 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`AvatarWithDetails renders a textual event 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`TextualEventView renders a textual event 1`] = `
 <div>
@@ -5,4 +5,4 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-export { TextualEventView } from "./TextualEventView";
+export { TextualEventView, type TextualEventViewSnapshot } from "./TextualEventView";
@@ -21,12 +21,17 @@ export * from "./utils/Box";
 export * from "./utils/Flex";

 // Utils
-export { setLanguage } from "./utils/i18n";
+export * from "./utils/i18n";
 export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
+export * from "./utils/FormattingUtils";

 // MVVM
 export * from "./viewmodel";
 export * from "./useMockedViewModel";
 export * from "./useViewModel";
+
+// i18n (we must export this directly in order to not confuse the type bundler, it seems,
+// otherwise it will leave it as a relative import rather than bundling it)
+export type * from "./i18nKeys.d.ts";
@@ -7,7 +7,7 @@

 .mediaBody {
    background-color: var(--cpd-color-bg-subtle-secondary);
-    border-radius: var(--cpd-space-2x);
+    border-radius: var(--cpd-space-2x) !important;
    max-width: 243px; /* use max-width instead of width so it fits within right panels */

    font: var(--cpd-font-body-md-regular);
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`MediaBody renders the media body 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`Pill renders the pill 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`PillInput renders only the input without children 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`RichItem renders the item in default state 1`] = `
 <div>
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

 exports[`RichItem renders the list 1`] = `
 <div>
@@ -0,0 +1,22 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import fetchMock from "fetch-mock-jest";
+
+import { setLanguage } from "../../src/utils/i18n";
+import en from "../../../../src/i18n/strings/en_EN.json";
+
+export function setupLanguageMock(): void {
+    fetchMock
+        .get("/i18n/languages.json", {
+            en: "en_EN.json",
+        })
+        .get("end:en_EN.json", en);
+}
+setupLanguageMock();
+
+setLanguage("en");
@@ -0,0 +1,47 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Copied from element-web/test/test-utils because, seemingly, if we
+// set that as the modules directory to use it directly, it fails to
+// actually put the right thing in the context somehow.
+
+import React, { type ReactElement } from "react";
+// eslint-disable-next-line no-restricted-imports
+import { render, type RenderOptions } from "@testing-library/react";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
+    return ({ children }: { children: React.ReactNode }) => {
+        if (Wrapper) {
+            return (
+                <Wrapper>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </Wrapper>
+            );
+        } else {
+            return <TooltipProvider>{children}</TooltipProvider>;
+        }
+    };
+};
+
+const customRender = (ui: ReactElement, options: RenderOptions = {}): ReturnType<typeof render> => {
+    return render(ui, {
+        ...options,
+        wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
+    }) as ReturnType<typeof render>;
+};
+
+// eslint-disable-next-line no-restricted-imports
+export * from "@testing-library/react";
+
+/**
+ * This custom render function wraps your component with a TooltipProvider.
+ * See https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export { customRender as render };
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import counterpart from "counterpart";
+
+import { registerTranslations, setMissingEntryGenerator, getLocale, setLocale } from "./i18n";
+
+describe("i18n utils", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should wrap registerTranslations", () => {
+        jest.spyOn(counterpart, "registerTranslations");
+
+        registerTranslations("en", { test: "This is a test" });
+        expect(counterpart.registerTranslations).toHaveBeenCalledWith("en", { test: "This is a test" });
+    });
+
+    it("should wrap setMissingEntryGenerator", () => {
+        jest.spyOn(counterpart, "setMissingEntryGenerator");
+
+        const dummyFn = jest.fn();
+
+        setMissingEntryGenerator(dummyFn);
+        expect(counterpart.setMissingEntryGenerator).toHaveBeenCalledWith(dummyFn);
+    });
+
+    it("should wrap getLocale", () => {
+        jest.spyOn(counterpart, "getLocale");
+
+        getLocale();
+        expect(counterpart.getLocale).toHaveBeenCalled();
+    });
+
+    it("should wrap setLocale", () => {
+        jest.spyOn(counterpart, "setLocale");
+
+        setLocale("en");
+        expect(counterpart.setLocale).toHaveBeenCalledWith("en");
+    });
+});
@@ -22,10 +22,10 @@
 * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
 */
 import React from "react";
-import { type TranslationKey as _TranslationKey, KEY_SEPARATOR } from "matrix-web-i18n";
+import { KEY_SEPARATOR } from "matrix-web-i18n";
 import counterpart from "counterpart";

-import type Translations from "../../../../src/i18n/strings/en_EN.json";
+import type { TranslationKey } from "../index";

 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
@@ -45,16 +45,23 @@ counterpart.setSeparator(KEY_SEPARATOR);
 const FALLBACK_LOCALE = "en";
 counterpart.setFallbackLocale(FALLBACK_LOCALE);

-/**
- * A type representing the union of possible keys into the translation file using `|` delimiter to access nested fields.
- * @example `common|error` to access `error` within the `common` sub-object.
- * {
- *     "common": {
- *         "error": "Error"
- *     }
- * }
- */
-export type TranslationKey = _TranslationKey<typeof Translations>;
+// export wrappers around these functions because if we used counterpart directly from
+// element-web, it operates on a different instance of counterpart
+export function registerTranslations(locale: string, data: object): void {
+    counterpart.registerTranslations(locale, data);
+}
+
+export function setMissingEntryGenerator(callback: (value: string) => void): void {
+    counterpart.setMissingEntryGenerator(callback);
+}
+
+export function getLocale(): string {
+    return counterpart.getLocale();
+}
+
+export function setLocale(value: string): string {
+    return counterpart.setLocale(value);
+}

 // Function which only purpose is to mark that a string is translatable
 // Does not actually do anything. It's helpful for automatic extraction of translatable strings
@@ -17,7 +17,7 @@
        "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
        "strict": true,
        "paths": {
-            "jest-matrix-react": ["../../test/test-utils/jest-matrix-react"],
+            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"],
            "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
        }
    },
@@ -26,7 +26,7 @@ export default defineConfig({
        rollupOptions: {
            // make sure to externalize deps that shouldn't be bundled
            // into your library
-            external: ["react", "react-dom"],
+            external: ["react", "react-dom", "@vector-im/compound-design-tokens", "@vector-im/compound-web"],
            output: {
                // Provide global variables to use in the UMD build
                // for externalized deps
@@ -43,5 +43,12 @@ export default defineConfig({
            $webapp: resolve(__dirname, "..", "..", "webapp"),
        },
    },
-    plugins: [dts({ rollupTypes: true, include: ["src/**/*.{ts,tsx}"], copyDtsFiles: true })],
+    plugins: [
+        dts({
+            rollupTypes: true,
+            include: ["src/**/*.{ts,tsx}"],
+            exclude: ["src/**/*.test.{ts,tsx}"],
+            copyDtsFiles: true,
+        }),
+    ],
 });
@@ -76,6 +76,57 @@ test.describe("Composer", () => {
            await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
        });

+        test.describe("render emoji picker with larger viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 720 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png");
+            });
+        });
+
+        test.describe("render emoji picker with small viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 360 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png");
+            });
+        });
+
+        test("should have focus lock in emoji picker", async ({ page, app }) => {
+            const emojiButton = app.getComposer(false).getByRole("button", { name: "Emoji" });
+
+            // Open emoji picker by clicking the button
+            await emojiButton.click();
+
+            // Wait for emoji picker to be visible
+            const emojiPicker = page.getByTestId("mx_EmojiPicker");
+            await expect(emojiPicker).toBeVisible();
+
+            // Get initial focused element (should be search input)
+            const searchInput = emojiPicker.getByRole("textbox", { name: "Search" });
+            await expect(searchInput).toBeFocused();
+
+            // Try to tab multiple times - focus should stay within emoji picker
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+
+            // Verify we're still within the emoji picker (not back to composer)
+            const focusedElement = await page.evaluate(() => document.activeElement?.closest(".mx_EmojiPicker"));
+            expect(focusedElement).not.toBeNull();
+
+            // Close with Escape key
+            await page.keyboard.press("Escape");
+
+            // Verify emoji picker is closed
+            await expect(emojiPicker).not.toBeVisible();
+
+            // Verify focus returns to emoji button
+            await expect(emojiButton).toBeFocused();
+        });
+
        test.describe("when Control+Enter is required to send", () => {
            test.beforeEach(async ({ app }) => {
                await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);
@@ -56,4 +56,85 @@ test.describe("History sharing", function () {
            });
        },
    );
+
+    test("Messages sent when we believed the room history was unshared should not be visible", async ({
+        labsFlags,
+        browser,
+        page: alicePage,
+        user: aliceCredentials,
+        app: aliceElementApp,
+        homeserver,
+    }, testInfo) => {
+        test.setTimeout(60000);
+
+        // In this test:
+        //   1. Alice creates an encrypted room with Bob.
+        //   2. She sets the history visibility to "shared", but Bob doesn't receive the memo
+        //   3. Bob sends a message
+        //   4. Alice invites Charlie
+        //   5. Charlie can't see the message.
+
+        await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
+        await createRoom(alicePage, "TestRoom", true);
+
+        // Register a second user, and open it in a second instance of the app
+        const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
+        const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
+        const bobElementApp = new ElementAppPage(bobPage);
+        await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
+
+        // ... and a third
+        const charlieCredentials = await homeserver.registerUser(
+            `user_${testInfo.testId}_charlie`,
+            "password",
+            "Charlie",
+        );
+        const charliePage = await createNewInstance(browser, charlieCredentials, {}, labsFlags);
+        const charlieElementApp = new ElementAppPage(charliePage);
+        await charlieElementApp.client.bootstrapCrossSigning(charlieCredentials);
+
+        // Alice invites Bob, and Bob accepts
+        const roomId = await aliceElementApp.getCurrentRoomIdFromUrl();
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await bobPage.getByRole("option", { name: "TestRoom" }).click();
+        await bobPage.getByRole("button", { name: "Accept" }).click();
+
+        // Bob sends a message with "shared" visibility
+        await sendMessageInCurrentRoom(bobPage, "Message1: 'shared' visibility");
+        await expect(alicePage.getByText("Message1")).toBeVisible();
+
+        // Alice sets the history visibility to "joined"
+        await aliceElementApp.client.sendStateEvent(roomId, "m.room.history_visibility", {
+            history_visibility: "joined",
+        });
+        await expect(
+            bobPage.getByText(
+                "Alice made future room history visible to all room members, from the point they joined.",
+            ),
+        ).toBeVisible();
+
+        // Bob stops syncing, and sends a message with "joined" visibility.
+        // (Stopping syncing *before* sending the message means that the active sync will be flushed by sending the
+        // message, so that Alice's change to the history viz below won't be seen by Bob.)
+        await bobPage.route(`**/sync*`, (route) => route.fulfill({}));
+        await sendMessageInCurrentRoom(bobPage, "Message2: 'joined' visibility");
+        await expect(alicePage.getByText("Message2")).toBeVisible();
+
+        // Alice changes the history viz, but Bob doesn't receive the memo
+        await aliceElementApp.client.sendStateEvent(roomId, "m.room.history_visibility", {
+            history_visibility: "shared",
+        });
+        await sendMessageInCurrentRoom(bobPage, "Message3: 'shared' visibility, but Bob thinks it is still 'joined'");
+
+        // Alice now invites Charlie
+        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId);
+        await charliePage.getByRole("option", { name: "TestRoom" }).click();
+        await charliePage.getByRole("button", { name: "Accept" }).click();
+
+        // Message1 should be visible
+        // Message2 should be invisible
+        // Message3 should be undecryptable
+        await expect(charliePage.getByText("Message1")).toBeVisible();
+        await expect(charliePage.getByText("You don't have access to this message")).toBeVisible();
+    });
 });
@@ -30,33 +30,42 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {
        });
    });

-    test("sends and displays pin drop location message successfully", async ({ page, user, app }) => {
-        const roomId = await app.client.createRoom({});
-        await page.goto(`/#/room/${roomId}`);
+    test(
+        "sends and displays pin drop location message successfully",
+        { tag: "@screenshot" },
+        async ({ page, user, app }) => {
+            const roomId = await app.client.createRoom({});
+            await page.goto(`/#/room/${roomId}`);

-        const composerOptions = await app.openMessageComposerOptions();
-        await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+            const composerOptions = await app.openMessageComposerOptions();
+            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();

-        await selectLocationShareTypeOption(page, "Pin").click();
+            await selectLocationShareTypeOption(page, "Pin").click();

-        await page.locator("#mx_LocationPicker_map").click();
+            await page.locator("#mx_LocationPicker_map").click();

-        await submitShareLocation(page);
+            await submitShareLocation(page);

-        await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
-            position: {
-                x: 225,
-                y: 150,
-            },
-        });
+            await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
+                position: {
+                    x: 225,
+                    y: 150,
+                },
+            });

-        // clicking location tile opens maximised map
-        await expect(page.getByRole("dialog")).toBeVisible();
+            // Wait for map to load
+            await expect(page.getByRole("region", { name: "Map" })).toMatchScreenshot(
+                "location-pin-drop-message-map.png",
+            );

-        await app.closeDialog();
+            // clicking location tile opens maximised map
+            await expect(page.getByRole("dialog")).toBeVisible();

-        await expect(page.locator(".mx_Marker")).toBeVisible();
-    });
+            await app.closeDialog();
+
+            await expect(page.locator(".mx_Marker")).toBeVisible();
+        },
+    );

    test(
        "is prompted for and can consent to live location sharing",
@@ -199,6 +199,21 @@ export class ElementAppPage {
        return this.page.locator(".mx_RightPanel");
    }

+    /**
+     * Opens the room info panel if it is not already open.
+     *
+     * TODO: fix this so that it works correctly if, say, the member list was open instead of the room info panel.
+     *
+     * @returns locator to the right panel
+     */
+    public async openRoomInfoPanel(): Promise<Locator> {
+        const locator = this.page.getByTestId("right-panel");
+        if (!(await locator.isVisible())) {
+            await this.page.getByRole("button", { name: "Room info" }).first().click();
+        }
+        return locator;
+    }
+
    /**
     * Opens/closes the memberlist panel
     * @returns locator to the memberlist panel
@@ -217,8 +232,8 @@ export class ElementAppPage {
     * @param userId - The user to invite to the room.
     */
    public async inviteUserToCurrentRoom(userId: string): Promise<void> {
-        await this.toggleRoomInfoPanel(); // TODO skip this if the room info panel is already open
-        await this.page.getByTestId("right-panel").getByRole("menuitem", { name: "Invite" }).click();
+        const rightPanel = await this.openRoomInfoPanel();
+        await rightPanel.getByRole("menuitem", { name: "Invite" }).click();

        const input = this.page.getByRole("dialog").getByTestId("invite-dialog-input");
        await input.fill(userId);
@@ -10,7 +10,7 @@ import {
    type StartedPostgreSqlContainer,
 } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "main@sha256:d5cfd383551b40581f2e598aa7819f6d0cc8eba4cbb726df9f752b383d0f6a7f";
+const TAG = "main@sha256:5957b8a5377c9f767b844fa7f3c800fdb1f7d3d95d3d218fe000fdd2d8f0f2a6";

 /**
 * MatrixAuthenticationServiceContainer which freezes the docker digest to
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.

 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "develop@sha256:a29fb1d2bb9b488fa4e49803c4e73314a120741d307223e800f42fd53b130de5";
+const TAG = "develop@sha256:c655aea58939588cbf774d385bd7969f4f920e905f9fcf87615995c262c4917e";

 /**
 * SynapseContainer which freezes the docker digest to stabilise tests,
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SearchBox {
    flex: 1 1 0;
    min-width: 0;
+    min-height: 36px; /* to avoid jumping when the X to clear shows/hides */

    &.mx_SearchBox_blurred:not(:hover) {
        background-color: transparent;
@@ -211,6 +211,10 @@ Please see LICENSE files in the repository root for full details.
            }
        }

+        &.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
+            background-color: $panel-actions;
+        }
+
        &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
            mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
        }
@@ -61,6 +61,11 @@ Please see LICENSE files in the repository root for full details.
            /* To match the space around the title */
            margin: 0 0 15px 0;
            flex-grow: 0;
+
+            &:not(:focus-within) + .mx_ForwardList_content {
+                /* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
+                --mx_ForwardList_entry_selectedBgColor: transparent;
+            }
        }

        .mx_ForwardList_content {
@@ -90,7 +95,7 @@ Please see LICENSE files in the repository root for full details.

                &:hover,
                &.mx_ForwardList_entry_active {
-                    background-color: $spacePanel-bg-color;
+                    background-color: var(--mx_ForwardList_entry_selectedBgColor, $spacePanel-bg-color);
                }

                .mx_ForwardList_roomButton {
@@ -150,6 +150,16 @@ Please see LICENSE files in the repository root for full details.
            height: unset;
            margin-left: $spacing-16;
        }
+
+        &:not(:focus-within) + #mx_SpotlightDialog_content {
+            /* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
+            --mx_SpotlightDialog_option_selectedBgColor: transparent;
+
+            /* Hide the enter prompt as in this state pressing enter would not actuate that option */
+            .mx_SpotlightDialog_enterPrompt {
+                visibility: hidden;
+            }
+        }
    }

    #mx_SpotlightDialog_content {
@@ -193,6 +203,17 @@ Please see LICENSE files in the repository root for full details.
            }
        }

+        .mx_SpotlightDialog_option {
+            border-radius: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:hover,
+            &[aria-selected="true"] {
+                background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
+            }
+        }
+
        .mx_SpotlightDialog_recentlyViewed {
            > div {
                display: flex;
@@ -202,7 +223,6 @@ Please see LICENSE files in the repository root for full details.
            }

            .mx_SpotlightDialog_option {
-                border-radius: 8px;
                padding: $spacing-4;
                color: $primary-content;
                font-size: $font-12px;
@@ -213,8 +233,6 @@ Please see LICENSE files in the repository root for full details.
                min-width: 58px;
                box-sizing: border-box;
                text-align: center;
-                overflow: hidden;
-                text-overflow: ellipsis;

                .mx_DecoratedRoomAvatar {
                    margin: 0 9px $spacing-4; /* maintain centering */
@@ -223,11 +241,6 @@ Please see LICENSE files in the repository root for full details.
                & + .mx_SpotlightDialog_option {
                    margin-left: $spacing-16;
                }
-
-                &:hover,
-                &[aria-selected="true"] {
-                    background-color: $quinary-content;
-                }
            }
        }

@@ -236,8 +249,9 @@ Please see LICENSE files in the repository root for full details.
        .mx_SpotlightDialog_otherSearches,
        .mx_SpotlightDialog_hiddenResults {
            .mx_SpotlightDialog_option {
+                --mx_SpotlightDialog_option_selectedBgColor: $system;
+
                padding: 6px $spacing-4;
-                border-radius: 8px;
                font-size: $font-15px;
                line-height: $font-24px;
                color: $primary-content;
@@ -245,8 +259,6 @@ Please see LICENSE files in the repository root for full details.
                display: flex;
                align-items: center;
                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;

                .mx_SpotlightDialog_option--endAdornment {
                    display: inline-flex;
@@ -350,7 +362,7 @@ Please see LICENSE files in the repository root for full details.
                    }

                    &:hover::before,
-                    &[aria-selected="true"]::before {
+                    &:focus-visible::before {
                        background-color: $secondary-content;
                    }
                }
@@ -361,8 +373,6 @@ Please see LICENSE files in the repository root for full details.

                &:hover,
                &[aria-selected="true"] {
-                    background-color: $system;
-
                    .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog_option--notifications {
                        display: block;
@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.

 .mx_EmojiPicker {
    width: 340px;
-    height: 450px;
+    height: min(450px, 80vh);
+    max-height: 80vh;

    border-radius: 4px;

@@ -181,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper[tabindex="0"] .mx_EmojiPicker_item {
+.mx_EmojiPicker_body_showHighlight .mx_EmojiPicker_item_wrapper [tabindex="0"] .mx_EmojiPicker_item {
    background-color: $focus-bg-color;
 }

@@ -8,13 +8,18 @@ Please see LICENSE files in the repository root for full details.

 .mx_MPollBody {
    margin-top: 8px;
+    min-width: 0; /* Override fieldset default min-width: min-content */
+    width: 100%; /* Ensure fieldset takes full available width */
+    border: none; /* Remove default fieldset border */
+    padding: 0; /* Remove default fieldset padding */

-    h2 {
+    legend {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: $font-15px;
        line-height: $font-24px;
        margin-top: 0;
        margin-bottom: 8px;
+        letter-spacing: var(--cpd-font-letter-spacing-heading-lg);

        .mx_MPollBody_edited {
            color: $roomtopic-color;
@@ -23,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
        }
    }

-    h2::before {
+    legend::before {
        content: "";
        position: relative;
        display: inline-block;
@@ -13,6 +13,10 @@ Please see LICENSE files in the repository root for full details.
    display: block;
 }

+.mx_E2EIcon.mx_E2EIcon_inline {
+    display: inline-block;
+}
+
 .mx_E2EIcon_warning,
 .mx_E2EIcon_normal,
 .mx_E2EIcon_verified {
@@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details.

    .mx_MediaBody {
        /* leave space for the timestamp */
-        padding-right: 48px;
+        padding-right: 48px !important;
    }

    .mx_MImageBody {
@@ -17,4 +17,5 @@ else
 fi

 DIST_VERSION=$("$DIR"/normalize-version.sh "$DIST_VERSION")
+
 VERSION=$DIST_VERSION yarn build
@@ -6,12 +6,12 @@ sonar.organization=element-hq

 sonar.sources=src,res,packages/shared-components/src
 sonar.tests=test,playwright,src,packages
-sonar.test.inclusions=test/*,playwright/*,src/**/*.test.*,packages/*/src/**/*.test.*
+sonar.test.inclusions=test/*,playwright/*,src/**/*.test.*,packages/*/src/**/*.test.*,packages/*/src/test/**/*
 sonar.exclusions=__mocks__,docs,element.io,nginx

 sonar.cpd.exclusions=src/i18n/strings/*.json
 sonar.typescript.tsconfigPath=./tsconfig.json
-sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.javascript.lcov.reportPaths=coverage/lcov.info,packages/shared-components/coverage/lcov.info
 sonar.coverage.exclusions=\
  test/**/*,\
  playwright/**/*,\
@@ -21,5 +21,6 @@ sonar.coverage.exclusions=\
  src/components/views/dialogs/devtools/**/*,\
  src/utils/SessionLock.ts,\
  src/**/*.d.ts,\
-  src/vector/mobile_guide/**/*
+  src/vector/mobile_guide/**/* \
+  packages/shared-components/src/test/**/*
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml
@@ -98,7 +98,7 @@ declare global {
        mxToastStore: ToastStore;
        mxDeviceListener: DeviceListener;
        mxRoomListStore: RoomListStore;
-        mxRoomListStoreV3: RoomListStoreV3Class;
+        getRoomListStoreV3: () => RoomListStoreV3Class;
        mxRoomListLayoutStore: RoomListLayoutStore;
        mxPlatformPeg: PlatformPeg;
        mxIntegrationManagers: typeof IntegrationManagers;
@@ -55,7 +55,6 @@ import UploadConfirmDialog from "./components/views/dialogs/UploadConfirmDialog"
 import { createThumbnail } from "./utils/image-media";
 import { attachMentions, attachRelation } from "./utils/messages.ts";
 import { doMaybeLocalRoomAction } from "./utils/local-room";
-import { SdkContextClass } from "./contexts/SDKContext";
 import { blobIsAnimated } from "./utils/Image.ts";

 // scraped out of a macOS hidpi (5660ppm) screenshot png
@@ -428,10 +427,21 @@ export default class ContentMessages {
        return this.mediaConfig?.["m.upload.size"] ?? null;
    }

+    /**
+     * Sends a list of files to a room.
+     * @param files - The files to send.
+     * @param roomId - The ID of the room to send the files to.
+     * @param relation - The relation to the event being replied to.
+     * @param replyToEvent - The event being replied to, if any.
+     * @param matrixClient - The Matrix client to use for sending the files.
+     * @param context - The context in which the files are being sent.
+     * @returns A promise that resolves when the files have been sent.
+     */
    public async sendContentListToRoom(
        files: File[],
        roomId: string,
        relation: IEventRelation | undefined,
+        replyToEvent: MatrixEvent | undefined,
        matrixClient: MatrixClient,
        context = TimelineRenderingType.Room,
    ): Promise<void> {
@@ -440,7 +450,6 @@ export default class ContentMessages {
            return;
        }

-        const replyToEvent = SdkContextClass.instance.roomViewStore.getQuotingEvent();
        if (!this.mediaConfig) {
            // hot-path optimization to not flash a spinner if we don't need to
            const modal = Modal.createDialog(Spinner, undefined, "mx_Dialog_spinner");
@@ -13,7 +13,7 @@ import { type Optional } from "matrix-events-sdk";
 import { _t, getUserLanguage } from "./languageHandler";
 import { getUserTimezone } from "./TimezoneHandler";

-export { formatSeconds } from "../packages/shared-components/src/utils/DateUtils";
+export { formatSeconds } from "@element-hq/web-shared-components";

 export const MINUTE_MS = 60000;
 export const HOUR_MS = MINUTE_MS * 60;
@@ -31,7 +31,7 @@ const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
    [Views.LOCK_STOLEN]: "SessionLockStolen",
 };

-const loggedInPageTypeMap: Record<PageType, ScreenName> = {
+const loggedInPageTypeMap: Record<PageType | string, ScreenName> = {
    [PageType.HomePage]: "Home",
    [PageType.RoomView]: "Room",
    [PageType.UserView]: "User",
@@ -48,10 +48,10 @@ export default class PosthogTrackers {
    }

    private view: Views = Views.LOADING;
-    private pageType?: PageType;
+    private pageType?: PageType | string;
    private override?: ScreenName;

-    public trackPageChange(view: Views, pageType: PageType | undefined, durationMs: number): void {
+    public trackPageChange(view: Views, pageType: PageType | string | undefined, durationMs: number): void {
        this.view = view;
        this.pageType = pageType;
        if (this.override) return;
@@ -732,8 +732,8 @@ export const Commands = [
    new Command({
        command: "help",
        description: _td("slash_command|help"),
-        runFn: function () {
-            Modal.createDialog(SlashCommandHelpDialog);
+        runFn: function (cli, roomId, threadId, args) {
+            Modal.createDialog(SlashCommandHelpDialog, { roomId });
            return success();
        },
        category: CommandCategories.advanced,
@@ -967,14 +967,15 @@ interface ICmd {

 /**
 * Process the given text for /commands and returns a parsed command that can be used for running the operation.
+ * @param {string} roomId The room ID where the command was issued.
 * @param {string} input The raw text input by the user.
 * @return {ICmd} The parsed command object.
 * Returns an empty object if the input didn't match a command.
 */
-export function getCommand(input: string): ICmd {
+export function getCommand(roomId: string, input: string): ICmd {
    const { cmd, args } = parseCommandString(input);

-    if (cmd && CommandMap.has(cmd) && CommandMap.get(cmd)!.isEnabled(MatrixClientPeg.get())) {
+    if (cmd && CommandMap.has(cmd) && CommandMap.get(cmd)!.isEnabled(MatrixClientPeg.get(), roomId)) {
        return {
            cmd: CommandMap.get(cmd),
            args,
@@ -9,7 +9,8 @@ Please see LICENSE files in the repository root for full details.
 */

 // Import i18n.tsx instead of languageHandler to avoid circular deps
-import { _td, type TranslationKey } from "../../packages/shared-components/src/utils/i18n";
+import { _td, type TranslationKey } from "@element-hq/web-shared-components";
+
 import { IS_MAC, IS_ELECTRON, Key } from "../Keyboard";
 import { type IBaseSetting } from "../settings/Settings";
 import { type KeyCombo } from "../KeyBindingsManager";
@@ -8,9 +8,9 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type ReactNode } from "react";
 import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import { Flex } from "@element-hq/web-shared-components";

 import SdkConfig from "../../SdkConfig";
-import { Flex } from "../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../languageHandler";
 import { Icon as AppleIcon } from "../../../res/themes/element/img/compound/apple.svg";
 import { Icon as MicrosoftIcon } from "../../../res/themes/element/img/compound/microsoft.svg";
--- a/Show More
+++ b/Show More