Element v1.11.112

.eslintrc.js

@@ -1,6 +1,11 @@
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
+        "plugin:storybook/recommended",
+    ],
     parserOptions: {
         project: ["./tsconfig.json"],
     },

.github/workflows/build.yml

@@ -45,7 +45,7 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             # When a release commit is pushed to master, manage the release branch
             - name: Check commit message and run release script
@@ -60,7 +60,8 @@ jobs:
                   ./scripts/branch-release.sh
                   exit 0
 
-            - uses: actions/setup-node@v4
+
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -90,7 +91,7 @@ jobs:
             # - run: mv dist/elecord-*.tar.gz dist/elecord.tar.gz
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: webapp
                   path: dist/elecord-*.tar.gz

.gitignore

@@ -30,6 +30,10 @@ electron/pub
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
+
+*storybook.log
+storybook-static
+
 # elecord ignores
 /test
 /playwright

.stylelintrc.js

@@ -70,5 +70,13 @@ module.exports = {
                 ],
             },
         ],
+        "property-no-deprecated": [
+            true,
+            {
+                ignoreProperties: ["-webkit-box-orient", "word-wrap"],
+            },
+        ],
+        "nesting-selector-no-missing-scoping-root": null,
+        "no-invalid-position-declaration": null,
     },
 };

README.md

@@ -24,4 +24,4 @@ The [elecord-web](https://github.com/elecordapp/elecord-web) app is © [hazzuk](
 
 The [elecord logo](https://github.com/elecordapp/elecord-web/blob/master/res/vector-icons/1240x600.png) and it's derivatives are © [hazzuk](https://github.com/hazzuk) used under the terms of the elecord [logo license](https://github.com/elecordapp/elecord-web/blob/master/LOGO_LICENSE.txt).
 
-The original [element-web](https://github.com/element-hq/element-web) project source code is © [New Vector Ltd](https://element.io/) and other contributors. Used under the terms of the [AGPL-3.0-only](https://github.com/elecordapp/elecord-web/blob/master/LICENSE-AGPL-3.0) license.
+The original [element-web](https://github.com/element-hq/element-web) project source code is © [New Vector Ltd](https://element.io/) and other contributors. Used under the terms of the [AGPL-3.0-only](https://github.com/elecordapp/elecord-web/blob/master/LICENSE-AGPL-3.0) license.

config.json

@@ -14,8 +14,7 @@
         "https://scalar.vector.im/_matrix/integrations/v1",
         "https://scalar.vector.im/api",
         "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api",
-        "https://scalar-staging.riot.im/scalar/api"
+        "https://scalar-staging.vector.im/api"
     ],
     "show_labs_settings": false,
     "room_directory": {
@@ -60,4 +59,4 @@
         "url": "https://elecord.app",
         "url_win64": "https://packages.elecord.app/desktop/install/win32/x64/elecord%20Setup.exe"
     }
-}
+}

declaration.d.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector 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.
+ */
+
+declare module "*.module.css";

package.json

@@ -65,36 +65,40 @@
         "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",
-        "postinstall": "patch-package"
+        "postinstall": "patch-package",
+        "storybook": "storybook dev -p 6007",
+        "build-storybook": "storybook build",
+        "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"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.0",
-        "@playwright/test": "1.51.1",
-        "@types/react": "19.1.1",
-        "@types/react-dom": "19.1.2",
-        "oidc-client-ts": "3.2.0",
+        "**/pretty-format/react-is": "19.1.1",
+        "@playwright/test": "1.54.2",
+        "@types/react": "19.1.10",
+        "@types/react-dom": "19.1.7",
+        "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001714",
-        "testcontainers": "10.24.2",
+        "caniuse-lite": "1.0.30001724",
+        "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": "^0.1.1",
+        "@element-hq/element-web-module-api": "1.4.1",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/analytics-events": "^0.29.2",
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^9.0.0",
+        "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.10.2",
-        "@vector-im/matrix-wysiwyg": "2.38.3",
+        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/matrix-wysiwyg": "2.39.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -113,7 +117,7 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "10.1.6",
+        "filesize": "11.0.2",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
@@ -124,22 +128,22 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
-        "linkify-react": "4.2.0",
-        "linkify-string": "4.2.0",
-        "linkifyjs": "4.2.0",
+        "linkify-react": "4.3.2",
+        "linkify-string": "4.3.2",
+        "linkifyjs": "4.3.2",
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "37.5.0",
+        "matrix-js-sdk": "38.2.0",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.236.1",
+        "posthog-js": "1.260.1",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -149,10 +153,10 @@
         "react-focus-lock": "^2.5.1",
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
-        "react-virtualized": "^9.22.5",
+        "react-virtuoso": "^4.14.0",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.15.0",
+        "sanitize-html": "2.17.0",
         "tar-js": "^0.3.0",
         "temporal-polyfill": "^0.3.0",
         "ua-parser-js": "^1.0.2",
@@ -181,20 +185,26 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.9.0",
-        "@element-hq/element-web-playwright-common": "^1.1.5",
+        "@element-hq/element-call-embedded": "0.14.1",
+        "@element-hq/element-web-playwright-common": "^1.4.6",
         "@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": "^3.0.0",
-        "@stylistic/eslint-plugin": "^4.0.0",
+        "@sentry/webpack-plugin": "^4.0.0",
+        "@storybook/addon-designs": "^10.0.1",
+        "@storybook/addon-docs": "^9.0.12",
+        "@storybook/icons": "^1.4.0",
+        "@storybook/react-vite": "^9.0.15",
+        "@storybook/test-runner": "^0.23.0",
+        "@stylistic/eslint-plugin": "^5.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
+        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -213,11 +223,12 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.1",
+        "@types/react": "19.1.10",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.2",
+        "@types/react-dom": "19.1.7",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "2.15.0",
+        "@types/sanitize-html": "2.16.0",
+        "@types/sdp-transform": "^2.4.10",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
@@ -232,10 +243,10 @@
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
-        "cronstrue": "^2.41.0",
+        "cronstrue": "^3.0.0",
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^7.0.0",
-        "dotenv": "^16.0.2",
+        "dotenv": "^17.0.0",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.0.0",
@@ -247,6 +258,7 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-storybook": "^9.0.12",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
@@ -256,14 +268,16 @@
         "glob": "^11.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-image-snapshot": "^6.5.1",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
         "knip": "^5.36.2",
-        "lint-staged": "^15.0.2",
+        "lint-staged": "^16.0.0",
         "matrix-web-i18n": "^3.2.1",
         "mini-css-extract-plugin": "2.9.2",
         "minimist": "^1.2.6",
@@ -276,26 +290,29 @@
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
-        "postcss-mixins": "^11.0.0",
+        "postcss-mixins": "^12.0.0",
         "postcss-nested": "^7.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.5.3",
+        "prettier": "3.6.2",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "stylelint": "^16.13.0",
-        "stylelint-config-standard": "^38.0.0",
+        "storybook": "^9.0.12",
+        "stylelint": "^16.23.0",
+        "stylelint-config-standard": "^39.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^10.20.0",
+        "testcontainers": "^11.0.0",
         "ts-node": "^10.9.1",
         "typescript": "5.8.3",
         "util": "^0.12.5",
+        "vite": "^7.0.1",
+        "vite-plugin-node-polyfills": "^0.24.0",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",
@@ -312,5 +329,6 @@
     },
     "engines": {
         "node": ">=20.0.0"
-    }
+    },
+    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

patches/@element-hq+element-call-embedded+0.9.0.patch → patches/@element-hq+element-call-embedded+0.14.1.patch

@@ -1,7 +1,7 @@
 --- a/node_modules/@element-hq/element-call-embedded/dist/index.html
 +++ b/node_modules/@element-hq/element-call-embedded/dist/index.html
 @@ -1 +1 @@
--<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Element Call</title><script>window.global = window;</script><script type="module" crossorigin src="./assets/index-K2xIZ1TO.js"></script><link rel="stylesheet" crossorigin href="./assets/index-BtY3MdEn.css"></head><body class="no-theme"><div id="root"></div></body></html>
+-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Element Call</title><script>window.global = window;</script><script type="module" crossorigin src="./assets/index-VC5-R1Nr.js"></script><link rel="stylesheet" crossorigin href="./assets/index-DMnN9EKG.css"></head><body class="no-theme"><div id="root"></div></body></html>
 \ No newline at end of file
-+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Element Call</title><script>window.global = window;</script><script type="module" crossorigin src="./assets/index-K2xIZ1TO.js"></script><link rel="stylesheet" crossorigin href="./assets/index-BtY3MdEn.css"><style type="text/css">body {    --cpd-color-text-action-accent: var(--cpd-color-blue-900);    --cpd-color-text-success-primary: var(--cpd-color-blue-900);    --cpd-color-bg-accent-rest: var(--cpd-color-blue-900);    --cpd-color-bg-accent-hovered: var(--cpd-color-blue-1000);    --cpd-color-bg-accent-pressed: var(--cpd-color-blue-1100);    --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800);    --cpd-color-icon-accent-primary: var(--cpd-color-blue-900);    --cpd-color-icon-success-primary: var(--cpd-color-blue-900);}</style></head><body class="no-theme"><div id="root"></div></body></html>
++<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Element Call</title><script>window.global = window;</script><script type="module" crossorigin src="./assets/index-VC5-R1Nr.js"></script><link rel="stylesheet" crossorigin href="./assets/index-DMnN9EKG.css"><style type="text/css">body {    --cpd-color-text-action-accent: var(--cpd-color-blue-900);    --cpd-color-text-success-primary: var(--cpd-color-blue-900);    --cpd-color-bg-accent-rest: var(--cpd-color-blue-900);    --cpd-color-bg-accent-hovered: var(--cpd-color-blue-1000);    --cpd-color-bg-accent-pressed: var(--cpd-color-blue-1100);    --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800);    --cpd-color-icon-accent-primary: var(--cpd-color-blue-900);    --cpd-color-icon-success-primary: var(--cpd-color-blue-900);}</style></head><body class="no-theme"><div id="root"></div></body></html>
 \ No newline at end of file

patches/@types+mdx+2.0.13.patch

@@ -0,0 +1,46 @@
+diff --git a/node_modules/@types/mdx/types.d.ts b/node_modules/@types/mdx/types.d.ts
+index 498bb69..4e89216 100644
+--- a/node_modules/@types/mdx/types.d.ts
++++ b/node_modules/@types/mdx/types.d.ts
+@@ -5,7 +5,7 @@
+  */
+ // @ts-ignore JSX runtimes may optionally define JSX.ElementType. The MDX types need to work regardless whether this is
+ // defined or not.
+-type ElementType = any extends JSX.ElementType ? never : JSX.ElementType;
++type ElementType = any extends JSX.ElementType ? never : React.JSX.ElementType;
+
+ /**
+  * This matches any function component types that ar part of `ElementType`.
+@@ -20,12 +20,12 @@ type ClassElementType = Extract<ElementType, new(props: Record<string, any>) =>
+ /**
+  * A valid JSX string component.
+  */
+-type StringComponent = Extract<keyof JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
++type StringComponent = Extract<keyof React.JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+
+ /**
+  * A JSX element returned by MDX content.
+  */
+-export type Element = JSX.Element;
++export type Element = React.JSX.Element;
+
+ /**
+  * A valid JSX function component.
+@@ -44,7 +44,7 @@ type FunctionComponent<Props> = ElementType extends never
+  */
+ type ClassComponent<Props> = ElementType extends never
+     // If JSX.ElementType isn’t defined, the valid return type is a constructor that returns JSX.ElementClass
+-    ? new(props: Props) => JSX.ElementClass
++    ? new(props: Props) => React.JSX.ElementClass
+     : ClassElementType extends never
+     // If JSX.ElementType is defined, but doesn’t allow constructors, function components are disallowed.
+         ? never
+@@ -70,7 +70,7 @@ interface NestedMDXComponents {
+ export type MDXComponents =
+     & NestedMDXComponents
+     & {
+-        [Key in StringComponent]?: Component<JSX.IntrinsicElements[Key]>;
++        [Key in StringComponent]?: Component<React.JSX.IntrinsicElements[Key]>;
+     }
+     & {
+         /**