Merge branch 'master' into madlittlemods/matrix-public-archive-scratch-changes

Conflicts: scripts/sdk/base-manifest.json scripts/sdk/build.sh src/domain/session/room/RoomViewModel.js src/platform/web/Platform.js src/platform/web/ui/general/html.ts
2022-06-06 15:26:52 -05:00 · 2022-06-06 15:26:52 -05:00 · c24ac43e72
parent ea2d45cab7 8b2299852e
commit c24ac43e72
153 changed files with 3075 additions and 821 deletions
--- a/.gitignore
+++ b/.gitignore
@ -7,4 +7,5 @@ bundle.js
 target
 lib
 *.tar.gz
-.eslintcache
+.eslintcache
+.tmp
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,150 @@
+Contributing code to hydrogen-web
+==================================
+
+Everyone is welcome to contribute code to hydrogen-web, provided that they are
+willing to license their contributions under the same license as the project
+itself. We follow a simple 'inbound=outbound' model for contributions: the act
+of submitting an 'inbound' contribution means that the contributor agrees to
+license the code under the same terms as the project's overall 'outbound'
+license - in this case, Apache Software License v2 (see
+[LICENSE](LICENSE)).
+
+How to contribute
+-----------------
+
+The preferred and easiest way to contribute changes to the project is to fork
+it on github, and then create a pull request to ask us to pull your changes
+into our repo (https://help.github.com/articles/using-pull-requests/)
+
+We use GitHub's pull request workflow to review the contribution, and either
+ask you to make any refinements needed or merge it and make them ourselves.
+
+Things that should go into your PR description:
+ * References to any bugs fixed by the change (in GitHub's `Fixes` notation)
+ * Describe the why and what is changing in the PR description so it's easy for
+   onlookers and reviewers to onboard and context switch.
+ * If your PR makes visual changes, include both **before** and **after** screenshots
+   to easily compare and discuss what's changing.
+ * Include a step-by-step testing strategy so that a reviewer can check out the
+   code locally and easily get to the point of testing your change.
+ * Add comments to the diff for the reviewer that might help them to understand
+   why the change is necessary or how they might better understand and review it.
+
+We use continuous integration, and all pull requests get automatically tested:
+if your change breaks the build, then the PR will show that there are failed
+checks, so please check back after a few minutes.
+
+Tests
+-----
+If your PR is a feature then we require that the PR also includes tests.
+These need to test that your feature works as expected and ideally test edge cases too.
+
+Tests are written as unit tests by exporting a `tests` function from the file to be tested.
+The function returns an object where the key is the test label, and the value is a 
+function that accepts an [assert](https://nodejs.org/api/assert.html) object, and return a Promise or nothing.
+
+Note that there is currently a limitation that files that are not indirectly included from `src/platform/web/main.js` won't be found by the runner.
+
+You can run the tests by running `yarn test`.
+This uses the [impunity](https://github.com/bwindels/impunity) runner.
+
+We don't require tests for bug fixes.
+
+In the future we may formalise this more.
+
+Code style
+----------
+The js-sdk aims to target TypeScript/ES6. All new files should be written in
+TypeScript and existing files should use ES6 principles where possible.
+
+Please disable any automatic formatting tools you may have active.
+If present, you'll be asked to undo any unrelated whitespace changes during code review.
+
+Members should not be exported as a default export in general.
+In general, avoid using `export default`.
+
+The remaining code-style for hydrogen is [in the process of being documented](codestyle.md), but
+contributors are encouraged to read the
+[code style document for matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md)
+and follow the principles set out there.
+
+Please ensure your changes match the cosmetic style of the existing project,
+and ***never*** mix cosmetic and functional changes in the same commit, as it
+makes it horribly hard to review otherwise.
+
+Attribution
+-----------
+If you change or create a file, feel free to add yourself to the copyright holders
+in the license header of that file.
+
+Sign off
+--------
+In order to have a concrete record that your contribution is intentional
+and you agree to license it under the same terms as the project's license, we've
+adopted the same lightweight approach that the Linux Kernel
+(https://www.kernel.org/doc/Documentation/SubmittingPatches), Docker
+(https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other
+projects use: the DCO (Developer Certificate of Origin:
+http://developercertificate.org/). This is a simple declaration that you wrote
+the contribution or otherwise have the right to contribute it to Matrix:
+
+```
+Developer Certificate of Origin
+Version 1.1
+
+Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
+660 York Street, Suite 102,
+San Francisco, CA 94110 USA
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+(a) The contribution was created in whole or in part by me and I
+    have the right to submit it under the open source license
+    indicated in the file; or
+
+(b) The contribution is based upon previous work that, to the best
+    of my knowledge, is covered under an appropriate open source
+    license and I have the right under that license to submit that
+    work with modifications, whether created in whole or in part
+    by me, under the same open source license (unless I am
+    permitted to submit under a different license), as indicated
+    in the file; or
+
+(c) The contribution was provided directly to me by some other
+    person who certified (a), (b) or (c) and I have not modified
+    it.
+
+(d) I understand and agree that this project and the contribution
+    are public and that a record of the contribution (including all
+    personal information I submit with it, including my sign-off) is
+    maintained indefinitely and may be redistributed consistent with
+    this project or the open source license(s) involved.
+```
+
+If you agree to this for your contribution, then all that's needed is to
+include the line in your commit or pull request comment:
+
+```
+Signed-off-by: Your Name <your@email.example.org>
+```
+
+We accept contributions under a legally identifiable name, such as your name on
+government documentation or common-law names (names claimed by legitimate usage
+or repute). Unfortunately, we cannot accept anonymous contributions at this
+time.
+
+Git allows you to add this signoff automatically when using the `-s` flag to
+`git commit`, which uses the name and email set in your `user.name` and
+`user.email` git configs.
+
+If you forgot to sign off your commits before making your pull request and are
+on Git 2.17+ you can mass signoff using rebase:
+
+```
+git rebase --signoff origin/develop
+```
--- a/README.md
+++ b/README.md
@ -10,13 +10,34 @@ Hydrogen's goals are:
 - It is a standalone webapp, but can also be easily embedded into an existing website/webapp to add chat capabilities.
 - Loading (unused) parts of the application after initial page load should be supported

+For embedded usage, see the [SDK instructions](doc/SDK.md).
+
 If you find this interesting, come and discuss on [`#hydrogen:matrix.org`](https://matrix.to/#/#hydrogen:matrix.org).

 # How to use

-Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can run it locally `yarn install` (only the first time) and `yarn start` in the terminal, and point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md).
+Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can also deploy Hydrogen on your own web server:

-Hydrogen uses symbolic links in the codebase, so if you are on Windows, have a look at [making git & symlinks work](https://github.com/git-for-windows/git/wiki/Symbolic-Links) there.
+ 1. Download the [latest release package](https://github.com/vector-im/hydrogen-web/releases).
+ 1. Extract the package to the public directory of your web server.
+ 1. If this is your first deploy:
+    1. copy `config.sample.json` to `config.json` and if needed, make any modifications (unless you've set up your own [sygnal](https://github.com/matrix-org/sygnal) instance, you don't need to change anything in the `push` section).
+    1. Disable caching entirely on the server for:
+        - `index.html`
+        - `sw.js`
+        - `config.json`
+        - All theme manifests referenced in the `themeManifests` of `config.json`, these files are typically called `theme-{name}.json`.
+
+        These resources will still be cached client-side by the service worker. Because of this; you'll still need to refresh the app twice before config.json changes are applied.
+
+## Set up a dev environment
+
+You can run Hydrogen locally by the following commands in the terminal:
+
+ - `yarn install` (only the first time)
+ - `yarn start` in the terminal
+
+Now point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md).

 # FAQ

--- a/doc/SDK.md
+++ b/doc/SDK.md
@ -31,7 +31,8 @@ import {
    createNavigation,
    createRouter,
    RoomViewModel,
-    TimelineView
+    TimelineView,
+    viewClassForTile
 } from "hydrogen-view-sdk";
 import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
 import workerPath from 'hydrogen-view-sdk/main.js?url';
@ -47,12 +48,13 @@ const assetPaths = {
        wasmBundle: olmJsPath
    }
 };
-import "hydrogen-view-sdk/style.css";
+import "hydrogen-view-sdk/theme-element-light.css";
+// OR import "hydrogen-view-sdk/theme-element-dark.css";

 async function main() {
    const app = document.querySelector<HTMLDivElement>('#app')!
    const config = {};
-    const platform = new Platform(app, assetPaths, config, { development: import.meta.env.DEV });
+    const platform = new Platform({container: app, assetPaths, config, options: { development: import.meta.env.DEV }});
    const navigation = createNavigation();
    platform.setNavigation(navigation);
    const urlRouter = createRouter({
@ -87,7 +89,7 @@ async function main() {
            navigation,
        });
        await vm.load();
-        const view = new TimelineView(vm.timelineViewModel);
+        const view = new TimelineView(vm.timelineViewModel, viewClassForTile);
        app.appendChild(view.mount());
    }
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "hydrogen-web",
-  "version": "0.2.26",
+  "version": "0.2.29",
  "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
  "directories": {
    "doc": "doc"
@ -10,9 +10,12 @@
    "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
    "lint-ci": "eslint src/",
    "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
+    "test:postcss": "impunity --entry-point  scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js",
+    "test:sdk": "yarn build:sdk && cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js",
    "start": "vite --port 3000",
-    "build": "vite build",
-    "build:sdk": "./scripts/sdk/build.sh"
+    "build": "vite build && ./scripts/cleanup.sh",
+    "build:sdk": "./scripts/sdk/build.sh",
+    "watch:sdk": "./scripts/sdk/build.sh && yarn run vite build -c vite.sdk-lib-config.js --watch"
  },
  "repository": {
    "type": "git",
@ -30,6 +33,7 @@
    "acorn": "^8.6.0",
    "acorn-walk": "^8.2.0",
    "aes-js": "^3.1.2",
+    "bs58": "^4.0.1",
    "core-js": "^3.6.5",
    "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
    "escodegen": "^2.0.0",
@ -41,17 +45,18 @@
    "node-html-parser": "^4.0.0",
    "postcss-css-variables": "^0.18.0",
    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-value-parser": "^4.2.0",
    "regenerator-runtime": "^0.13.7",
    "text-encoding": "^0.7.0",
    "typescript": "^4.3.5",
-    "vite": "^2.6.14",
-    "xxhashjs": "^0.2.2",
-    "bs58": "^4.0.1"
+    "vite": "^2.9.8",
+    "xxhashjs": "^0.2.2"
  },
  "dependencies": {
    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
    "another-json": "^0.2.0",
    "base64-arraybuffer": "^0.2.0",
-    "dompurify": "^2.3.0"
+    "dompurify": "^2.3.0",
+    "off-color": "^2.0.0"
  }
 }
--- a/scripts/.eslintrc.js
+++ b/scripts/.eslintrc.js
@ -0,0 +1,18 @@
+module.exports = {
+    "env": {
+        "node": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-console": "off",
+        "no-empty": "off",
+        "no-prototype-builtins": "off",
+        "no-unused-vars": "warn"
+    },
+};
+
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@ -0,0 +1,282 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+const path = require('path');
+
+async function readCSSSource(location) {
+    const fs = require("fs").promises;
+    const path = require("path");
+    const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
+    const data = await fs.readFile(resolvedLocation);
+    return data;
+}
+
+function getRootSectionWithVariables(variables) {
+    return `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+}
+
+function appendVariablesToCSS(variables, cssSource) {
+    return cssSource + getRootSectionWithVariables(variables);
+}
+
+function addThemesToConfig(bundle, manifestLocations, defaultThemes) {
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (fileName === "config.json") {
+            const source = new TextDecoder().decode(info.source);
+            const config = JSON.parse(source);
+            config["themeManifests"] = manifestLocations;
+            config["defaultTheme"] = defaultThemes;
+            info.source = new TextEncoder().encode(JSON.stringify(config, undefined, 2));
+        }
+    }
+}
+
+function parseBundle(bundle) {
+    const chunkMap = new Map();
+    const assetMap = new Map();
+    let runtimeThemeChunk;
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (!fileName.endsWith(".css")) {
+            continue;
+        }
+        if (info.type === "asset") {
+            /**
+             * So this is the css assetInfo that contains the asset hashed file name.
+             * We'll store it in a separate map indexed via fileName (unhashed) to avoid
+             * searching through the bundle array later.
+             */
+            assetMap.set(info.name, info);
+            continue;
+        }
+        if (info.facadeModuleId?.includes("type=runtime")) {
+            /**
+             * We have a separate field in manifest.source just for the runtime theme,
+             * so store this separately.
+             */
+            runtimeThemeChunk = info;
+            continue;
+        }
+        const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
+        if (!location) {
+            throw new Error("Cannot find location of css chunk!");
+        }
+        const array = chunkMap.get(location);
+        if (!array) {
+            chunkMap.set(location, [info]);
+        }
+        else {
+            array.push(info);
+        }
+    }
+    return { chunkMap, assetMap, runtimeThemeChunk };
+}
+
+module.exports = function buildThemes(options) {
+    let manifest, variants, defaultDark, defaultLight, defaultThemes = {};
+    let isDevelopment = false;
+    const virtualModuleId = '@theme/'
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+
+    return {
+        name: "build-themes",
+        enforce: "pre",
+
+        configResolved(config) {
+            if (config.command === "serve") {
+                isDevelopment = true;
+            }
+        },
+
+        async buildStart() {
+            if (isDevelopment) { return; }
+            const { themeConfig } = options;
+            for (const [name, location] of Object.entries(themeConfig.themes)) {
+                manifest = require(`${location}/manifest.json`);
+                variants = manifest.values.variants;
+                for (const [variant, details] of Object.entries(variants)) {
+                    const fileName = `theme-${name}-${variant}.css`;
+                    if (name === themeConfig.default && details.default) {
+                        // This is the default theme, stash  the file name for later
+                        if (details.dark) {
+                            defaultDark = fileName;
+                            defaultThemes["dark"] = `${name}-${variant}`;
+                        }
+                        else {
+                            defaultLight = fileName;
+                            defaultThemes["light"] = `${name}-${variant}`;
+                        }
+                    }
+                    // emit the css as built theme bundle
+                    this.emitFile({
+                        type: "chunk",
+                        id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
+                        fileName,
+                    });
+                }
+                // emit the css as runtime theme bundle
+                this.emitFile({
+                    type: "chunk",
+                    id: `${location}/theme.css?type=runtime`,
+                    fileName: `theme-${name}-runtime.css`,
+                });
+            }
+        },
+
+        resolveId(id) {
+            if (id.startsWith(virtualModuleId)) {
+                return '\0' + id;
+            }
+        },
+
+        async load(id) {
+            if (isDevelopment) {
+                /**
+                 * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
+                 * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.
+                 * This virtual file import is removed when hydrogen is built (see transform hook).
+                 */
+                if (id.startsWith(resolvedVirtualModuleId)) {
+                    let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
+                    if (theme === "default") {
+                        theme = options.themeConfig.default;
+                    }
+                    const location = options.themeConfig.themes[theme];
+                    const manifest = require(`${location}/manifest.json`);
+                    const variants = manifest.values.variants;
+                    if (!variant || variant === "default") {
+                        // choose the first default variant for now
+                        // this will need to support light/dark variants as well
+                        variant = Object.keys(variants).find(variantName => variants[variantName].default);
+                    }
+                    if (!file) {
+                        file = "index.js";
+                    }
+                    switch (file) {
+                        case "index.js": {
+                            const isDark = variants[variant].dark;
+                            return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
+                                `import "@theme/${theme}/${variant}/variables.css"`;
+                        }
+                        case "variables.css": { 
+                            const variables = variants[variant].variables;
+                            const css =  getRootSectionWithVariables(variables);
+                            return css;
+                        }
+                    }
+                }
+            }
+            else {
+                const result = id.match(/(.+)\/theme.css\?variant=([^&]+)/);
+                if (result) {
+                    const [, location, variant] = result;
+                    const cssSource = await readCSSSource(location);
+                    const config = variants[variant];
+                    return appendVariablesToCSS(config.variables, cssSource);
+                }
+                return null;
+            }
+        },
+
+        transform(code, id) {
+            if (isDevelopment) {
+                return;
+            }
+            /**
+             * Removes develop-only script tag; this cannot be done in transformIndexHtml hook because
+             * by the time that hook runs, the import is added to the bundled js file which would
+             * result in a runtime error.
+             */
+
+            const devScriptTag =
+                /<script type="module"> import "@theme\/.+"; <\/script>/;
+            if (id.endsWith("index.html")) {
+                const htmlWithoutDevScript = code.replace(devScriptTag, "");
+                return htmlWithoutDevScript;
+            }
+        },
+
+        transformIndexHtml(_, ctx) {
+            if (isDevelopment) {
+                // Don't add default stylesheets to index.html on dev
+                return;
+            } 
+            let darkThemeLocation, lightThemeLocation;
+            for (const [, bundle] of Object.entries(ctx.bundle)) {
+                if (bundle.name === defaultDark) {
+                    darkThemeLocation = bundle.fileName;
+                }
+                if (bundle.name === defaultLight) {
+                    lightThemeLocation = bundle.fileName;
+                }
+            }
+            return [
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: dark)",
+                        href: `./${darkThemeLocation}`,
+                        class: "theme",
+                    }
+                },
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: light)",
+                        href: `./${lightThemeLocation}`,
+                        class: "theme",
+                    }
+                },
+            ];
+},
+
+        generateBundle(_, bundle) {
+            const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
+            const manifestLocations = [];
+            for (const [location, chunkArray] of chunkMap) {
+                const manifest = require(`${location}/manifest.json`);
+                const compiledVariables = options.compiledVariables.get(location);
+                const derivedVariables = compiledVariables["derived-variables"];
+                const icon = compiledVariables["icon"];
+                const builtAssets = {};
+                /**
+                 * Generate a mapping from theme name to asset hashed location of said theme in build output.
+                 * This can be used to enumerate themes during runtime.
+                 */
+                for (const chunk of chunkArray) {
+                    const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
+                    builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName;
+                }
+                manifest.source = {
+                    "built-assets": builtAssets,
+                    "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+                    "derived-variables": derivedVariables,
+                    "icon": icon
+                };
+                const name = `theme-${manifest.name}.json`;
+                manifestLocations.push(`assets/${name}`);
+                this.emitFile({
+                    type: "asset",
+                    name,
+                    source: JSON.stringify(manifest),
+                });
+            }
+            addThemesToConfig(bundle, manifestLocations, defaultThemes);
+        },
+    }
+}
--- a/scripts/build-plugins/service-worker.js
+++ b/scripts/build-plugins/service-worker.js
@ -8,7 +8,7 @@ function contentHash(str) {
    return hasher.digest();
 }

-function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) {
+function injectServiceWorker(swFile, findUnhashedFileNamesFromBundle, placeholdersPerChunk) {
    const swName = path.basename(swFile);
    let root;
    let version;
@ -31,6 +31,7 @@ function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) {
            logger = config.logger;
        },
        generateBundle: async function(options, bundle) {
+            const otherUnhashedFiles = findUnhashedFileNamesFromBundle(bundle);
            const unhashedFilenames = [swName].concat(otherUnhashedFiles);
            const unhashedFileContentMap = unhashedFilenames.reduce((map, fileName) => {
                const chunkOrAsset = bundle[fileName];
--- a/scripts/cleanup.sh
+++ b/scripts/cleanup.sh
@ -0,0 +1,3 @@
+#!/bin/sh
+# Remove icons created in .tmp
+rm -rf .tmp
--- a/scripts/package.sh
+++ b/scripts/package.sh
@ -2,6 +2,9 @@ VERSION=$(jq -r ".version" package.json)
 PACKAGE=hydrogen-web-$VERSION.tar.gz
 yarn build
 pushd target
+# move config file so we don't override it
+# when deploying a new version
+mv config.json config.sample.json
 tar -czvf ../$PACKAGE ./
 popd
 echo $PACKAGE
--- a/scripts/postcss/color.js
+++ b/scripts/postcss/color.js
@ -0,0 +1,40 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const offColor = require("off-color").offColor;
+
+module.exports.derive = function (value, operation, argument, isDark) {
+    const argumentAsNumber = parseInt(argument);
+    if (isDark) {
+        // For dark themes, invert the operation
+        if (operation === 'darker') {
+            operation = "lighter";
+        }
+        else if (operation === 'lighter') {
+            operation = "darker";
+        }
+    }
+    switch (operation) {
+        case "darker": {
+            const newColorString = offColor(value).darken(argumentAsNumber / 100).hex();
+            return newColorString;
+        }
+        case "lighter": {
+            const newColorString = offColor(value).lighten(argumentAsNumber / 100).hex();
+            return newColorString;
+        }
+    }
+}
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@ -0,0 +1,177 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const valueParser = require("postcss-value-parser");
+
+/**
+ * This plugin derives new css variables from a given set of base variables.
+ * A derived css variable has the form --base--operation-argument; meaning that the derived
+ * variable has a value that is generated from the base variable "base" by applying "operation"
+ * with given "argument".
+ * 
+ * eg: given the base variable --foo-color: #40E0D0, --foo-color--darker-20 is a css variable
+ * derived from foo-color by making it 20% more darker.
+ * 
+ * All derived variables are added to the :root section.
+ * 
+ * The actual derivation is done outside the plugin in a callback.
+ */
+
+let aliasMap;
+let resolvedMap;
+let baseVariables;
+let isDark;
+
+function getValueFromAlias(alias) {
+    const derivedVariable = aliasMap.get(alias);
+    return baseVariables.get(derivedVariable) ?? resolvedMap.get(derivedVariable);
+}
+
+function parseDeclarationValue(value) {
+    const parsed = valueParser(value);
+    const variables = [];
+    parsed.walk(node => {
+        if (node.type !== "function") {
+            return;
+        }
+        switch (node.value) {
+            case "var": {
+                const variable = node.nodes[0];
+                variables.push(variable.value);
+                break;
+            }
+            case "url": {
+                const url = node.nodes[0].value;
+                // resolve url with some absolute url so that we get the query params without using regex
+                const params = new URL(url, "file://foo/bar/").searchParams;
+                const primary = params.get("primary");
+                const secondary = params.get("secondary");
+                if (primary) { variables.push(primary); }
+                if (secondary) { variables.push(secondary); }
+                break;
+            }
+        }
+    });
+    return variables;
+}
+
+function resolveDerivedVariable(decl, derive) {
+    const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/;
+    const variableCollection = parseDeclarationValue(decl.value);
+    for (const variable of variableCollection) {
+        const matches = variable.match(RE_VARIABLE_VALUE);
+        if (matches) {
+            const [, wholeVariable, baseVariable, operation, argument] = matches;
+            const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable);
+            if (!value) {
+                throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
+            }
+            const derivedValue = derive(value, operation, argument, isDark);
+            resolvedMap.set(wholeVariable, derivedValue);
+        }
+    }
+}
+
+function extract(decl) {
+    if (decl.variable) {
+        // see if right side is of form "var(--foo)"
+        const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1];
+        // remove -- from the prop
+        const prop = decl.prop.substring(2);
+        if (wholeVariable) {
+            aliasMap.set(prop, wholeVariable);
+            // Since this is an alias, we shouldn't store it in baseVariables
+            return;
+        }
+        baseVariables.set(prop, decl.value);
+    }
+}
+
+function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
+    const newRule = new Rule({ selector: ":root", source: root.source });
+    // Add derived css variables to :root
+    resolvedMap.forEach((value, key) => {
+        const declaration = new Declaration({prop: `--${key}`, value});
+        newRule.append(declaration);
+    });
+    root.append(newRule);
+}
+
+function populateMapWithDerivedVariables(map, cssFileLocation) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    const derivedVariables = [
+        ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
+        ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
+    ];
+    map.set(location, { "derived-variables": derivedVariables });
+}
+
+/**
+ * @callback derive
+ * @param {string} value - The base value on which an operation is applied
+ * @param {string} operation - The operation to be applied (eg: darker, lighter...)
+ * @param {string} argument - The argument for this operation
+ * @param {boolean} isDark - Indicates whether this theme is dark
+ */
+/**
+ * 
+ * @param {Object} opts - Options for the plugin
+ * @param {derive} opts.derive - The callback which contains the logic for resolving derived variables
+ * @param {Map} opts.compiledVariables - A map that stores derived variables so that manifest source sections can be produced
+ */
+module.exports = (opts = {}) => {
+    aliasMap = new Map();
+    resolvedMap = new Map();
+    baseVariables = new Map();
+    isDark = false;
+
+    return {
+        postcssPlugin: "postcss-compile-variables",
+
+        Once(root, {Rule, Declaration, result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't derive variables.
+                return;
+            }
+            isDark = cssFileLocation.includes("dark=true");
+            /*
+            Go through the CSS file once to extract all aliases and base variables.
+            We use these when resolving derived variables later.
+            */
+            root.walkDecls(decl => extract(decl));
+            root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive));
+            addResolvedVariablesToRootSelector(root, {Rule, Declaration});
+            if (opts.compiledVariables){
+                populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
+            }
+            // Also produce a mapping from alias to completely resolved color
+            const resolvedAliasMap = new Map();
+            aliasMap.forEach((value, key) => {
+                resolvedAliasMap.set(key, resolvedMap.get(value));
+            });
+            // Publish the base-variables, derived-variables and resolved aliases to the other postcss-plugins
+            const combinedMap = new Map([...baseVariables, ...resolvedMap, ...resolvedAliasMap]);
+            result.messages.push({
+                type: "resolved-variable-map",
+                plugin: "postcss-compile-variables",
+                colorMap: combinedMap,
+            });
+        },
+    };
+};
+
+module.exports.postcss = true;
--- a/scripts/postcss/css-url-processor.js
+++ b/scripts/postcss/css-url-processor.js
@ -0,0 +1,93 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const valueParser = require("postcss-value-parser");
+const  resolve = require("path").resolve;
+let cssPath;
+
+function colorsFromURL(url, colorMap) {
+    const params = new URL(`file://${url}`).searchParams;
+    const primary = params.get("primary");
+    if (!primary) {
+        return null;
+    }
+    const secondary = params.get("secondary");
+    const primaryColor = colorMap.get(primary);
+    const secondaryColor = colorMap.get(secondary);
+    if (!primaryColor) {
+        throw new Error(`Variable ${primary} not found in resolved color variables!`);
+    }
+    if (secondary && !secondaryColor) {
+        throw new Error(`Variable ${secondary} not found in resolved color variables!`);
+    }
+    return [primaryColor, secondaryColor];
+}
+
+function processURL(decl, replacer, colorMap) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    parsed.walk(node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const urlStringNode = node.nodes[0];
+        const oldURL = urlStringNode.value;
+        const oldURLAbsolute = resolve(cssPath, oldURL);
+        const colors  = colorsFromURL(oldURLAbsolute, colorMap);
+        if (!colors) {
+            // If no primary color is provided via url params, then this url need not be handled.
+            return;
+        }
+        const newURL = replacer(oldURLAbsolute.replace(/\?.+/, ""), ...colors);
+        if (!newURL) {
+            throw new Error("Replacer failed to produce a replacement URL!");
+        }
+        urlStringNode.value = newURL;
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root, {result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't process urls.
+                return;
+            }
+            /*
+            postcss-compile-variables should have sent the list of resolved colours down via results
+            */
+            const {colorMap} = result.messages.find(m => m.type === "resolved-variable-map");
+            if (!colorMap) {
+                throw new Error("Postcss results do not contain resolved colors!");
+            }
+            /*
+            Go through each declaration and if it contains an URL, replace the url with the result
+            of running replacer(url)
+            */
+            cssPath = root.source?.input.file.replace(/[^/]*$/, "");
+            root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
+        },
+    };
+};
+
+module.exports.postcss = true;
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@ -0,0 +1,85 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const valueParser = require("postcss-value-parser");
+
+/**
+ * This plugin extracts content inside url() into css variables and adds the variables to the root section.
+ * This plugin is used in conjunction with css-url-processor plugin to colorize svg icons.
+ */
+let counter;
+let urlVariables;
+const idToPrepend = "icon-url";
+
+function findAndReplaceUrl(decl) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    parsed.walk(node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const url = node.nodes[0].value;
+        if (!url.match(/\.svg\?primary=.+/)) {
+            return;
+        }
+        const variableName = `${idToPrepend}-${counter++}`;
+        urlVariables.set(variableName, url);
+        node.value = "var";
+        node.nodes = [{ type: "word", value: `--${variableName}` }];
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+}
+
+function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
+    const newRule = new Rule({ selector: ":root", source: root.source });
+    // Add derived css variables to :root
+    urlVariables.forEach((value, key) => {
+        const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
+        newRule.append(declaration);
+    });
+    root.append(newRule);
+}
+
+function populateMapWithIcons(map, cssFileLocation) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    const sharedObject = map.get(location);
+    sharedObject["icon"] = Object.fromEntries(urlVariables);
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    urlVariables = new Map();
+    counter = 0;
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root, { Rule, Declaration }) {
+            root.walkDecls(decl => findAndReplaceUrl(decl));
+            if (urlVariables.size) {
+                addResolvedVariablesToRootSelector(root, { Rule, Declaration });
+            }
+            if (opts.compiledVariables){
+                const cssFileLocation = root.source.input.from;
+                populateMapWithIcons(opts.compiledVariables, cssFileLocation);
+            }
+        },
+    };
+};
+
+module.exports.postcss = true;
+
--- a/scripts/postcss/svg-colorizer.js
+++ b/scripts/postcss/svg-colorizer.js
@ -0,0 +1,54 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const fs = require("fs");
+const path = require("path");
+const xxhash = require('xxhashjs');
+
+function createHash(content) {
+    const hasher = new xxhash.h32(0);
+    hasher.update(content);
+    return hasher.digest();
+}
+
+/**
+ * Builds a new svg with the colors replaced and returns its location.
+ * @param {string} svgLocation The location of the input svg file
+ * @param {string} primaryColor Primary color for the new svg
+ * @param {string} secondaryColor Secondary color for the new svg
+ */
+module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) {
+    const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"});
+    let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
+    coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
+    if (svgCode === coloredSVGCode) {
+        throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
+    }
+    const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1];
+    const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
+    const outputPath = path.resolve(__dirname, "../../.tmp");
+    try {
+       fs.mkdirSync(outputPath);
+    }
+    catch (e) {
+        if (e.code !== "EEXIST") {
+            throw e;
+        }
+    }
+    const outputFile = `${outputPath}/${outputName}`;
+    fs.writeFileSync(outputFile, coloredSVGCode);
+    return outputFile;
+}
--- a/scripts/postcss/tests/common.js
+++ b/scripts/postcss/tests/common.js
@ -0,0 +1,30 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const postcss = require("postcss");
+
+module.exports.createTestRunner = function (plugin) {
+    return async function run(input, output, opts = {}, assert) {
+        let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+        assert.strictEqual(
+            result.css.replaceAll(/\s/g, ""),
+            output.replaceAll(/\s/g, "")
+        );
+        assert.strictEqual(result.warnings().length, 0);
+    };
+}
+
+
--- a/scripts/postcss/tests/css-compile-variables.test.js
+++ b/scripts/postcss/tests/css-compile-variables.test.js
@ -0,0 +1,156 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const offColor = require("off-color").offColor;
+const postcss = require("postcss");
+const plugin = require("../css-compile-variables");
+const derive = require("../color").derive;
+const run = require("./common").createTestRunner(plugin);
+
+module.exports.tests = function tests() {
+    return {
+        "derived variables are resolved": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+            }`;
+            const transformedColor = offColor("#ff0").lighten(0.5);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColor.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "derived variables work with alias": async (assert) => {
+            const inputCSS = `
+            :root {
+                --icon-color: #fff;
+            }
+            div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            const colorDarker = offColor("#fff").darken(0.2).hex();
+            const aliasLighter = offColor(colorDarker).lighten(0.15).hex();
+            const outputCSS = inputCSS + `:root {
+                --icon-color--darker-20: ${colorDarker};
+                --my-alias--lighter-15: ${aliasLighter};
+            }
+            `;
+            await run(inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "derived variable throws if base not present in config": async (assert) => {
+            const css = `:root {
+                color: var(--icon-color--darker-20);
+            }`;
+            assert.rejects(async () => await postcss([plugin({ variables: {} })]).process(css, { from: undefined, }));
+        },
+
+        "multiple derived variable in single declaration is parsed correctly": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: linear-gradient(var(--foo-color--lighter-50), var(--foo-color--darker-20));
+            }`;
+            const transformedColor1 = offColor("#ff0").lighten(0.5);
+            const transformedColor2 = offColor("#ff0").darken(0.2);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColor1.hex()};
+                --foo-color--darker-20: ${transformedColor2.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                --my-alias: var(--foo-color);
+                background-color: linear-gradient(var(--my-alias--lighter-50), var(--my-alias--darker-20));
+            }`;
+            const transformedColor1 = offColor("#ff0").lighten(0.5);
+            const transformedColor2 = offColor("#ff0").darken(0.2);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --my-alias--lighter-50: ${transformedColor1.hex()};
+                --my-alias--darker-20: ${transformedColor2.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "compiledVariables map is populated": async (assert) => {
+            const compiledVariables = new Map();
+            const inputCSS = `
+            :root {
+                --icon-color: #fff;
+            }
+            div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            await postcss([plugin({ derive, compiledVariables })]).process(inputCSS, { from: "/foo/bar/test.css", });
+            const actualArray = compiledVariables.get("/foo/bar")["derived-variables"];
+            const expectedArray = ["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"];
+            assert.deepStrictEqual(actualArray.sort(), expectedArray.sort());
+        },
+
+        "derived variable are supported in urls": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+                background: url("./foo/bar/icon.svg?primary=foo-color--darker-5");
+            }
+            a {
+                background: url("foo/bar/icon.svg");
+            }`;
+            const transformedColorLighter = offColor("#ff0").lighten(0.5);
+            const transformedColorDarker = offColor("#ff0").darken(0.05);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColorLighter.hex()};
+                --foo-color--darker-5: ${transformedColorDarker.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        }
+    };
+};
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@ -0,0 +1,71 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const plugin = require("../css-url-to-variables");
+const run = require("./common").createTestRunner(plugin);
+const postcss = require("postcss");
+
+module.exports.tests = function tests() {
+    return {
+        "url is replaced with variable": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
+            }
+            button {
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }`;
+            const outputCSS =
+            `div {
+                background: no-repeat center/80% var(--icon-url-0);
+            }
+            button {
+                background: var(--icon-url-1);
+            }`+
+                `
+            :root {
+                --icon-url-0: url("../img/image.svg?primary=main-color--darker-20");
+                --icon-url-1: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }
+            `;
+            await run(inputCSS, outputCSS, { }, assert);
+        },
+        "non svg urls without query params are not replaced": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat url("./img/foo/bar/image.png");
+            }`;
+            await run(inputCSS, inputCSS, {}, assert);
+        },
+        "map is populated with icons": async (assert) => {
+            const compiledVariables = new Map();
+            compiledVariables.set("/foo/bar", { "derived-variables": ["background-color--darker-20", "accent-color--lighter-15"] });
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
+            }
+            button {
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }`;
+            const expectedObject = {
+                "icon-url-0": "../img/image.svg?primary=main-color--darker-20",
+                "icon-url-1": "/home/foo/bar/cool.svg?primary=blue&secondary=green",
+            };
+            await postcss([plugin({compiledVariables})]).process(inputCSS, { from: "/foo/bar/test.css", });
+            const sharedVariable = compiledVariables.get("/foo/bar");
+            assert.deepEqual(["background-color--darker-20", "accent-color--lighter-15"], sharedVariable["derived-variables"]);
+            assert.deepEqual(expectedObject, sharedVariable["icon"]);
+        }
+    };
+};
+
--- a/scripts/sdk/base-manifest.json
+++ b/scripts/sdk/base-manifest.json
@ -1,7 +1,19 @@
 {
    "name": "hydrogen-view-sdk",
    "description": "Embeddable matrix client library, including view components",
-    "version": "0.0.5",
-    "main": "./lib-build/hydrogen.es.js",
-    "type": "module"
+    "version": "0.0.12",
+    "main": "./lib-build/hydrogen.cjs.js",
+    "exports": {
+        ".": {
+            "import": "./lib-build/hydrogen.es.js",
+            "require": "./lib-build/hydrogen.cjs.js"
+        },
+        "./paths/vite": "./paths/vite.js",
+        "./style.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-light.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-dark.css": "./asset-build/assets/theme-element-dark.css",
+        "./main.js": "./asset-build/assets/main.js",
+        "./download-sandbox.html": "./asset-build/assets/download-sandbox.html",
+        "./assets/*": "./asset-build/assets/*"
+    }
 }
--- a/scripts/sdk/build.sh
+++ b/scripts/sdk/build.sh
@ -1,4 +1,12 @@
 #!/bin/bash
+# Exit whenever one of the commands fail with a non-zero exit code
+set -e
+set -o pipefail
+# Enable extended globs so we can use the `!(filename)` glob syntax
+shopt -s extglob
+
+# Only remove the directory contents instead of the whole directory to maintain
+# the `npm link`/`yarn link` symlink
 rm -rf target/*
 yarn run vite build -c vite.sdk-assets-config.js
 yarn run vite build -c vite.sdk-lib-config.js
@ -8,15 +16,10 @@ mkdir target/paths
 # this doesn't work, the ?url imports need to be in the consuming project, so disable for now
 # ./scripts/sdk/transform-paths.js ./src/platform/web/sdk/paths/vite.js ./target/paths/vite.js
 cp doc/SDK.md target/README.md
-pushd target
-pushd asset-build/assets
-mv main.*.js ../../main.js
-mv index.*.css ../../style.css
-mv download-sandbox.*.html ../../download-sandbox.html
-rm *.js *.wasm
-mv ./* ../../
+pushd target/asset-build
+rm index.html
 popd
-rm -rf asset-build
-mv lib-build/* .
-rm -rf lib-build
+pushd target/asset-build/assets
+# Remove all `*.wasm` and `*.js` files except for `main.js`
+rm !(main).js *.wasm
 popd
--- a/scripts/sdk/create-manifest.js
+++ b/scripts/sdk/create-manifest.js
@ -3,21 +3,7 @@ const fs = require("fs");
 const appManifest = require("../../package.json");
 const baseSDKManifest = require("./base-manifest.json");
 /*
-    need to leave exports out of base-manifest.json because of #vite-bug,
-    with the downside that we can't support environments that support
-    both esm and commonjs modules, so we pick just esm.
-    ```
-    "exports": {
-        ".": {
-            "import": "./hydrogen.es.js",
-            "require": "./hydrogen.cjs.js"
-        },
-        "./paths/vite": "./paths/vite.js",
-        "./style.css": "./style.css"
-    },
-    ```
-
-    Also need to leave typescript type definitions out until the
+    Need to leave typescript type definitions out until the
    typescript conversion is complete and all imports in the d.ts files
    exists.
    ```
--- a/scripts/sdk/test/.gitignore
+++ b/scripts/sdk/test/.gitignore
@ -0,0 +1,3 @@
+node_modules
+dist
+yarn.lock
--- a/scripts/sdk/test/deps.d.ts
+++ b/scripts/sdk/test/deps.d.ts
@ -0,0 +1,2 @@
+// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet
+declare module "hydrogen-view-sdk";
--- a/scripts/sdk/test/esm-entry.ts
+++ b/scripts/sdk/test/esm-entry.ts
@ -0,0 +1,21 @@
+import * as hydrogenViewSdk from "hydrogen-view-sdk";
+import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
+import workerPath from 'hydrogen-view-sdk/main.js?url';
+import olmWasmPath from '@matrix-org/olm/olm.wasm?url';
+import olmJsPath from '@matrix-org/olm/olm.js?url';
+import olmLegacyJsPath from '@matrix-org/olm/olm_legacy.js?url';
+const assetPaths = {
+  downloadSandbox: downloadSandboxPath,
+  worker: workerPath,
+  olm: {
+      wasm: olmWasmPath,
+      legacyBundle: olmLegacyJsPath,
+      wasmBundle: olmJsPath
+  }
+};
+import "hydrogen-view-sdk/theme-element-light.css";
+
+console.log('hydrogenViewSdk', hydrogenViewSdk);
+console.log('assetPaths', assetPaths);
+
+console.log('Entry ESM works ✅');
--- a/scripts/sdk/test/index.html
+++ b/scripts/sdk/test/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app" class="hydrogen"></div>
+    <script type="module" src="./esm-entry.ts"></script>
+  </body>
+</html>
--- a/scripts/sdk/test/package.json
+++ b/scripts/sdk/test/package.json
@ -0,0 +1,8 @@
+{
+  "name": "test-sdk",
+  "version": "0.0.0",
+  "description": "",
+  "dependencies": {
+    "hydrogen-view-sdk": "link:../../../target"
+  }
+}
--- a/scripts/sdk/test/test-sdk-in-commonjs-env.js
+++ b/scripts/sdk/test/test-sdk-in-commonjs-env.js
@ -0,0 +1,13 @@
+// Make sure the SDK can be used in a CommonJS environment.
+// Usage: node scripts/sdk/test/test-sdk-in-commonjs-env.js
+const hydrogenViewSdk = require('hydrogen-view-sdk');
+
+// Test that the "exports" are available:
+// Worker
+require.resolve('hydrogen-view-sdk/main.js');
+// Styles
+require.resolve('hydrogen-view-sdk/theme-element-light.css');
+// Can access files in the assets/* directory
+require.resolve('hydrogen-view-sdk/assets/main.js');
+
+console.log('SDK works in CommonJS ✅');
--- a/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js
+++ b/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js
@ -0,0 +1,19 @@
+const { resolve } = require('path');
+const { build } = require('vite');
+
+async function main() {
+  await build({
+    outDir: './dist',
+    build: {
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, 'index.html')
+        }
+      }
+    }
+  });
+
+  console.log('SDK works in Vite build ✅');
+}
+
+main();
--- a/src/domain/AccountSetupViewModel.js
+++ b/src/domain/AccountSetupViewModel.js
@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";
 import {KeyType} from "../matrix/ssss/index";
 import {Status} from "./session/settings/KeyBackupViewModel.js";

 export class AccountSetupViewModel extends ViewModel {
-    constructor(accountSetup) {
-        super();
-        this._accountSetup = accountSetup;
+    constructor(options) {
+        super(options);
+        this._accountSetup = options.accountSetup;
        this._dehydratedDevice = undefined;
        this._decryptDehydratedDeviceViewModel = undefined;
        if (this._accountSetup.encryptedDehydratedDevice) {
@ -53,7 +53,7 @@ export class AccountSetupViewModel extends ViewModel {
 // this vm adopts the same shape as KeyBackupViewModel so the same view can be reused.
 class DecryptDehydratedDeviceViewModel extends ViewModel {
    constructor(accountSetupViewModel, decryptedCallback) {
-        super();
+        super(accountSetupViewModel.options);
        this._accountSetupViewModel = accountSetupViewModel;
        this._isBusy = false;
        this._status = Status.SetupKey;
--- a/src/domain/LogoutViewModel.ts
+++ b/src/domain/LogoutViewModel.ts
@ -14,11 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "./ViewModel.js";
+import {Options, ViewModel} from "./ViewModel";
 import {Client} from "../matrix/Client.js";

-export class LogoutViewModel extends ViewModel {
-    constructor(options) {
+type LogoutOptions = { sessionId: string; } & Options;
+
+export class LogoutViewModel extends ViewModel<LogoutOptions> {
+    private _sessionId: string;
+    private _busy: boolean;
+    private _showConfirm: boolean;
+    private _error?: Error;
+
+    constructor(options: LogoutOptions) {
        super(options);
        this._sessionId = options.sessionId;
        this._busy = false;
@ -26,19 +33,19 @@ export class LogoutViewModel extends ViewModel {
        this._error = undefined;
    }

-    get showConfirm() {
+    get showConfirm(): boolean {
        return this._showConfirm;
    }

-    get busy() {
+    get busy(): boolean {
        return this._busy;
    }

-    get cancelUrl() {
+    get cancelUrl(): string {
        return this.urlCreator.urlForSegment("session", true);
    }

-    async logout() {
+    async logout(): Promise<void> {
        this._busy = true;
        this._showConfirm = false;
        this.emitChange("busy");
@ -53,7 +60,7 @@ export class LogoutViewModel extends ViewModel {
        }
    }

-    get status() {
+    get status(): string {
        if (this._error) {
            return this.i18n`Could not log out of device: ${this._error.message}`;
        } else {
--- a/src/domain/RootViewModel.js
+++ b/src/domain/RootViewModel.js
@ -18,9 +18,9 @@ import {Client} from "../matrix/Client.js";
 import {SessionViewModel} from "./session/SessionViewModel.js";
 import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
 import {LoginViewModel} from "./login/LoginViewModel.js";
-import {LogoutViewModel} from "./LogoutViewModel.js";
+import {LogoutViewModel} from "./LogoutViewModel";
 import {SessionPickerViewModel} from "./SessionPickerViewModel.js";
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";

 export class RootViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/SessionLoadViewModel.js
+++ b/src/domain/SessionLoadViewModel.js
@ -17,7 +17,7 @@ limitations under the License.
 import {AccountSetupViewModel} from "./AccountSetupViewModel.js";
 import {LoadStatus} from "../matrix/Client.js";
 import {SyncStatus} from "../matrix/Sync.js";
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";

 export class SessionLoadViewModel extends ViewModel {
    constructor(options) {
@ -43,7 +43,7 @@ export class SessionLoadViewModel extends ViewModel {
            this.emitChange("loading");
            this._waitHandle = this._client.loadStatus.waitFor(s => {
                if (s === LoadStatus.AccountSetup) {
-                    this._accountSetupViewModel = new AccountSetupViewModel(this._client.accountSetup);
+                    this._accountSetupViewModel = new AccountSetupViewModel(this.childOptions({accountSetup: this._client.accountSetup}));
                } else {
                    this._accountSetupViewModel = undefined;
                }
--- a/src/domain/SessionPickerViewModel.js
+++ b/src/domain/SessionPickerViewModel.js
@ -15,8 +15,8 @@ limitations under the License.
 */

 import {SortedArray} from "../observable/index.js";
-import {ViewModel} from "./ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber} from "./avatar.js";
+import {ViewModel} from "./ViewModel";
+import {avatarInitials, getIdentifierColorNumber} from "./avatar";

 class SessionItemViewModel extends ViewModel {
    constructor(options, pickerVM) {
--- a/src/domain/ViewModel.ts
+++ b/src/domain/ViewModel.ts
@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2022 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -21,54 +22,80 @@ limitations under the License.
 import {EventEmitter} from "../utils/EventEmitter";
 import {Disposables} from "../utils/Disposables";

-export class ViewModel extends EventEmitter {
-    constructor(options = {}) {
+import type {Disposable} from "../utils/Disposables";
+import type {Platform} from "../platform/web/Platform";
+import type {Clock} from "../platform/web/dom/Clock";
+import type {ILogger} from "../logging/types";
+import type {Navigation} from "./navigation/Navigation";
+import type {URLRouter} from "./navigation/URLRouter";
+
+export type Options = {
+    platform: Platform
+    logger: ILogger
+    urlCreator: URLRouter
+    navigation: Navigation
+    emitChange?: (params: any) => void
+}
+
+export class ViewModel<O extends Options = Options> extends EventEmitter<{change: never}> {
+    private disposables?: Disposables;
+    private _isDisposed = false;
+    private _options: Readonly<O>;
+
+    constructor(options: Readonly<O>) {
        super();
-        this.disposables = null;
-        this._isDisposed = false;
        this._options = options;
    }

-    childOptions(explicitOptions) {
-        const {navigation, urlCreator, platform} = this._options;
-        return Object.assign({navigation, urlCreator, platform}, explicitOptions);
+    childOptions<T extends Object>(explicitOptions: T): T & Options {
+        return Object.assign({}, this._options, explicitOptions);
    }

+    get options(): Readonly<O> { return this._options; }
+
    // makes it easier to pass through dependencies of a sub-view model
-    getOption(name) {
+    getOption<N extends keyof O>(name: N): O[N]  {
        return this._options[name];
    }

-    track(disposable) {
+    observeNavigation(type: string, onChange: (value: string | true | undefined, type: string) => void) {
+      const segmentObservable = this.navigation.observe(type);
+      const unsubscribe = segmentObservable.subscribe((value: string | true | undefined) => {
+        onChange(value, type);
+      })
+      this.track(unsubscribe);
+    }
+
+    track<D extends Disposable>(disposable: D): D {
        if (!this.disposables) {
            this.disposables = new Disposables();
        }
        return this.disposables.track(disposable);
    }

-    untrack(disposable) {
+    untrack(disposable: Disposable): undefined {
        if (this.disposables) {
            return this.disposables.untrack(disposable);
        }
-        return null;
+        return undefined;
    }

-    dispose() {
+    dispose(): void {
        if (this.disposables) {
            this.disposables.dispose();
        }
        this._isDisposed = true;
    }

-    get isDisposed() {
+    get isDisposed(): boolean {
        return this._isDisposed;
    }

-    disposeTracked(disposable) {
+    disposeTracked(disposable: Disposable | undefined): undefined {
        if (this.disposables) {
            return this.disposables.disposeTracked(disposable);
        }
-        return null;
+        return undefined;
    }

    // TODO: this will need to support binding
@ -76,7 +103,7 @@ export class ViewModel extends EventEmitter {
    // 
    // translated string should probably always be bindings, unless we're fine with a refresh when changing the language?
    // we probably are, if we're using routing with a url, we could just refresh.
-    i18n(parts, ...expr) {
+    i18n(parts: TemplateStringsArray, ...expr: any[]) {
        // just concat for now
        let result = "";
        for (let i = 0; i < parts.length; ++i) {
@ -88,11 +115,7 @@ export class ViewModel extends EventEmitter {
        return result;
    }

-    updateOptions(options) {
-        this._options = Object.assign(this._options, options);
-    }
-
-    emitChange(changedProps) {
+    emitChange(changedProps: any): void {
        if (this._options.emitChange) {
            this._options.emitChange(changedProps);
        } else {
@ -100,27 +123,23 @@ export class ViewModel extends EventEmitter {
        }
    }

-    get platform() {
+    get platform(): Platform {
        return this._options.platform;
    }

-    get clock() {
+    get clock(): Clock {
        return this._options.platform.clock;
    }

-    get logger() {
+    get logger(): ILogger {
        return this.platform.logger;
    }

-    /**
-     * The url router, only meant to be used to create urls with from view models.
-     * @return {URLRouter}
-     */
-    get urlCreator() {
+    get urlCreator(): URLRouter {
        return this._options.urlCreator;
    }

-    get navigation() {
+    get navigation(): Navigation {
        return this._options.navigation;
    }
 }
--- a/src/domain/avatar.ts
+++ b/src/domain/avatar.ts
@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export function avatarInitials(name) {
+import { Platform } from "../platform/web/Platform";
+import { MediaRepository } from "../matrix/net/MediaRepository";
+
+export function avatarInitials(name: string): string {
    let firstChar = name.charAt(0);
    if (firstChar === "!" || firstChar === "@" || firstChar === "#") {
        firstChar = name.charAt(1);
@ -29,10 +32,10 @@ export function avatarInitials(name) {
 *
 * @return {number}
 */
-function hashCode(str) {
+function hashCode(str: string): number {
    let hash = 0;
-    let i;
-    let chr;
+    let i: number;
+    let chr: number;
    if (str.length === 0) {
        return hash;
    }
@ -44,11 +47,11 @@ function hashCode(str) {
    return Math.abs(hash);
 }

-export function getIdentifierColorNumber(id) {
+export function getIdentifierColorNumber(id: string): number {
    return (hashCode(id) % 8) + 1;
 }

-export function getAvatarHttpUrl(avatarUrl, cssSize, platform, mediaRepository) {
+export function getAvatarHttpUrl(avatarUrl: string, cssSize: number, platform: Platform, mediaRepository: MediaRepository): string | null {
    if (avatarUrl) {
        const imageSize = cssSize * platform.devicePixelRatio;
        return mediaRepository.mxcUrlThumbnail(avatarUrl, imageSize, imageSize, "crop");
--- a/src/domain/login/CompleteSSOLoginViewModel.js
+++ b/src/domain/login/CompleteSSOLoginViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {LoginFailure} from "../../matrix/Client.js";

 export class CompleteSSOLoginViewModel extends ViewModel {
--- a/src/domain/login/LoginViewModel.js
+++ b/src/domain/login/LoginViewModel.js
@ -15,7 +15,7 @@ limitations under the License.
 */

 import {Client} from "../../matrix/Client.js";
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js";
 import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js";
 import {CompleteSSOLoginViewModel} from "./CompleteSSOLoginViewModel.js";
--- a/src/domain/login/PasswordLoginViewModel.js
+++ b/src/domain/login/PasswordLoginViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {LoginFailure} from "../../matrix/Client.js";

 export class PasswordLoginViewModel extends ViewModel {
--- a/src/domain/login/StartSSOLoginViewModel.js
+++ b/src/domain/login/StartSSOLoginViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";

 export class StartSSOLoginViewModel extends ViewModel{
    constructor(options) {
--- a/src/domain/session/CreateRoomViewModel.js
+++ b/src/domain/session/CreateRoomViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {imageToInfo} from "./common.js";
 import {RoomType} from "../../matrix/room/common";

--- a/src/domain/session/RoomGridViewModel.js
+++ b/src/domain/session/RoomGridViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {addPanelIfNeeded} from "../navigation/index.js";

 function dedupeSparse(roomIds) {
--- a/src/domain/session/SessionStatusViewModel.js
+++ b/src/domain/session/SessionStatusViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {createEnum} from "../../utils/enum";
 import {ConnectionStatus} from "../../matrix/net/Reconnector";
 import {SyncStatus} from "../../matrix/Sync.js";
--- a/src/domain/session/SessionViewModel.js
+++ b/src/domain/session/SessionViewModel.js
@ -25,7 +25,7 @@ import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
 import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
 import {CreateRoomViewModel} from "./CreateRoomViewModel.js";
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
 import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";

--- a/src/domain/session/leftpanel/BaseTileViewModel.js
+++ b/src/domain/session/leftpanel/BaseTileViewModel.js
@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";

 const KIND_ORDER = ["roomBeingCreated", "invite", "room"];

--- a/src/domain/session/leftpanel/LeftPanelViewModel.js
+++ b/src/domain/session/leftpanel/LeftPanelViewModel.js
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomTileViewModel} from "./RoomTileViewModel.js";
 import {InviteTileViewModel} from "./InviteTileViewModel.js";
 import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.js";
--- a/src/domain/session/rightpanel/MemberDetailsViewModel.js
+++ b/src/domain/session/rightpanel/MemberDetailsViewModel.js
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomType} from "../../../matrix/room/common";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";

 export class MemberDetailsViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/rightpanel/MemberListViewModel.js
+++ b/src/domain/session/rightpanel/MemberListViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {MemberTileViewModel} from "./MemberTileViewModel.js";
 import {createMemberComparator} from "./members/comparator.js";
 import {Disambiguator} from "./members/disambiguator.js";
--- a/src/domain/session/rightpanel/MemberTileViewModel.js
+++ b/src/domain/session/rightpanel/MemberTileViewModel.js
@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {ViewModel} from "../../ViewModel";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";

 export class MemberTileViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/rightpanel/RightPanelViewModel.js
+++ b/src/domain/session/rightpanel/RightPanelViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
 import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";
--- a/src/domain/session/rightpanel/RoomDetailsViewModel.js
+++ b/src/domain/session/rightpanel/RoomDetailsViewModel.js
@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {ViewModel} from "../../ViewModel";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";

 export class RoomDetailsViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/room/ComposerViewModel.js
+++ b/src/domain/session/room/ComposerViewModel.js
@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";

 export class ComposerViewModel extends ViewModel {
    constructor(roomVM) {
-        super();
+        super(roomVM.options);
        this._roomVM = roomVM;
        this._isEmpty = true;
        this._replyVM = null;
--- a/src/domain/session/room/InviteViewModel.js
+++ b/src/domain/session/room/InviteViewModel.js
@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";

 export class InviteViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/room/LightboxViewModel.js
+++ b/src/domain/session/room/LightboxViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";

 export class LightboxViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/room/RoomBeingCreatedViewModel.js
+++ b/src/domain/session/room/RoomBeingCreatedViewModel.js
@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";

 export class RoomBeingCreatedViewModel extends ViewModel {
    constructor(options) {
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@ -17,18 +17,21 @@ limitations under the License.

 import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
 import {ComposerViewModel} from "./ComposerViewModel.js"
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {tilesCreator} from "./timeline/tilesCreator.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";
 import {imageToInfo} from "../common.js";
+// TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
+// this is a breaking SDK change though to make this option mandatory
+import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";

 export class RoomViewModel extends ViewModel {
    constructor(options) {
        super(options);
-        const {room} = options;
+        const {room, tileClassForEntry} = options;
        this._room = room;
        this._timelineVM = null;
-        this._tilesCreator = null;
+        this._tileClassForEntry = tileClassForEntry ?? defaultTileClassForEntry;
+        this._tileOptions = undefined;
        this._onRoomChange = this._onRoomChange.bind(this);
        this._timelineError = null;
        this._sendError = null;
@ -47,12 +50,13 @@ export class RoomViewModel extends ViewModel {
        try {
            const timeline = await this._room.openTimeline();
            console.log('timeline', timeline.entries);
-            this._tilesCreator = tilesCreator(this.childOptions({
+            this._tileOptions = this.childOptions({
                roomVM: this,
                timeline,
-            }));
+                tileClassForEntry: this._tileClassForEntry,
+            });
            this._timelineVM = this.track(new TimelineViewModel(this.childOptions({
-                tilesCreator: this._tilesCreator,
+                tileOptions: this._tileOptions,
                timeline,
            })));
            this.emitChange("timelineViewModel");
@ -162,7 +166,12 @@ export class RoomViewModel extends ViewModel {
    }

    _createTile(entry) {
-        return this._tilesCreator(entry);
+        if (this._tileOptions) {
+            const Tile = this._tileOptions.tileClassForEntry(entry);
+            if (Tile) {
+                return new Tile(entry, this._tileOptions);
+            }
+        }
    }
    
    async _sendMessage(message, replyingTo) {
--- a/src/domain/session/room/UnknownRoomViewModel.js
+++ b/src/domain/session/room/UnknownRoomViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";

 export class UnknownRoomViewModel extends ViewModel {
    constructor(options) {
@ -55,4 +55,4 @@ export class UnknownRoomViewModel extends ViewModel {
    get kind() {
        return "unknown";
    }
-}
+}
--- a/src/domain/session/room/timeline/MessageBody.js
+++ b/src/domain/session/room/timeline/MessageBody.js
@ -1,5 +1,5 @@
 import { linkify } from "./linkify/linkify.js";
-import { getIdentifierColorNumber, avatarInitials } from "../../../avatar.js";
+import { getIdentifierColorNumber, avatarInitials } from "../../../avatar";

 /**
 * Parse text into parts such as newline, links and text.
--- a/src/domain/session/room/timeline/ReactionsViewModel.js
+++ b/src/domain/session/room/timeline/ReactionsViewModel.js
@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import {ObservableMap} from "../../../../observable/map/ObservableMap.js";
+import {ObservableMap} from "../../../../observable/map/ObservableMap";

 export class ReactionsViewModel {
    constructor(parentTile) {
@ -222,7 +222,7 @@ export function tests() {
        };
        const tiles = new MappedList(timeline.entries, entry => {
            if (entry.eventType === "m.room.message") {
-                return new BaseMessageTile({entry, roomVM: {room}, timeline, platform: {logger}});
+                return new BaseMessageTile(entry, {roomVM: {room}, timeline, platform: {logger}});
            }
            return null;
        }, (tile, params, entry) => tile?.updateEntry(entry, params, function () {}));
--- a/src/domain/session/room/timeline/TilesCollection.js
+++ b/src/domain/session/room/timeline/TilesCollection.js
@ -18,20 +18,27 @@ import {BaseObservableList} from "../../../../observable/list/BaseObservableList
 import {sortedIndex} from "../../../../utils/sortedIndex";

 // maps 1..n entries to 0..1 tile. Entries are what is stored in the timeline, either an event or fragmentboundary
-// for now, tileCreator should be stable in whether it returns a tile or not.
+// for now, tileClassForEntry should be stable in whether it returns a tile or not.
 // e.g. the decision to create a tile or not should be based on properties
 // not updated later on (e.g. event type)
 // also see big comment in onUpdate
 export class TilesCollection extends BaseObservableList {
-    constructor(entries, tileCreator) {
+    constructor(entries, tileOptions) {
        super();
        this._entries = entries;
        this._tiles = null;
        this._entrySubscription = null;
-        this._tileCreator = tileCreator;
+        this._tileOptions = tileOptions;
        this._emitSpontanousUpdate = this._emitSpontanousUpdate.bind(this);
    }

+    _createTile(entry) {
+        const Tile = this._tileOptions.tileClassForEntry(entry);
+        if (Tile) {
+            return new Tile(entry, this._tileOptions);
+        }
+    }
+
    _emitSpontanousUpdate(tile, params) {
        const entry = tile.lowerEntry;
        const tileIdx = this._findTileIdx(entry);
@ -48,7 +55,7 @@ export class TilesCollection extends BaseObservableList {
        let currentTile = null;
        for (let entry of this._entries) {
            if (!currentTile || !currentTile.tryIncludeEntry(entry)) {
-                currentTile = this._tileCreator(entry);
+                currentTile = this._createTile(entry);
                if (currentTile) {
                    this._tiles.push(currentTile);
                }
@ -121,7 +128,7 @@ export class TilesCollection extends BaseObservableList {
            return;
        }

-        const newTile = this._tileCreator(entry);
+        const newTile = this._createTile(entry);
        if (newTile) {
            if (prevTile) {
                prevTile.updateNextSibling(newTile);
@ -150,9 +157,9 @@ export class TilesCollection extends BaseObservableList {
        const tileIdx = this._findTileIdx(entry);
        const tile = this._findTileAtIdx(entry, tileIdx);
        if (tile) {
-            const action = tile.updateEntry(entry, params, this._tileCreator);
+            const action = tile.updateEntry(entry, params);
            if (action.shouldReplace) {
-                const newTile = this._tileCreator(entry);
+                const newTile = this._createTile(entry);
                if (newTile) {
                    this._replaceTile(tileIdx, tile, newTile, action.updateParams);
                    newTile.setUpdateEmit(this._emitSpontanousUpdate);
@ -303,7 +310,10 @@ export function tests() {
                }
            }
            const entries = new ObservableArray([{n: 5}, {n: 10}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: () => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
            let receivedAdd = false;
            tiles.subscribe({
                onAdd(idx, tile) {
@ -326,7 +336,10 @@ export function tests() {
                }
            }
            const entries = new ObservableArray([{n: 5}, {n: 10}, {n: 15}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: () => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
            const events = [];
            tiles.subscribe({
                onUpdate(idx, tile) {
--- a/src/domain/session/room/timeline/TimelineViewModel.js
+++ b/src/domain/session/room/timeline/TimelineViewModel.js
@ -32,15 +32,15 @@ to the room timeline, which unload entries from memory.
 when loading, it just reads events from a sortkey backwards or forwards...
 */
 import {TilesCollection} from "./TilesCollection.js";
-import {ViewModel} from "../../../ViewModel.js";
+import {ViewModel} from "../../../ViewModel";

 export class TimelineViewModel extends ViewModel {
    constructor(options) {
        console.log('TimelineViewModel asdf', options)
        super(options);
-        const {timeline, tilesCreator} = options;
+        const {timeline, tileOptions} = options;
        this._timeline = this.track(timeline);
-        this._tiles = new TilesCollection(timeline.entries, tilesCreator);
+        this._tiles = new TilesCollection(timeline.entries, tileOptions);
        this._startTile = null;
        this._endTile = null;
        this._topLoadingPromise = null;
--- a/src/domain/session/room/timeline/tiles/BaseMediaTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMediaTile.js
@ -21,8 +21,8 @@ const MAX_HEIGHT = 300;
 const MAX_WIDTH = 400;

 export class BaseMediaTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._decryptedThumbnail = null;
        this._decryptedFile = null;
        this._isVisible = false;
--- a/src/domain/session/room/timeline/tiles/BaseMessageTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMessageTile.js
@ -16,11 +16,11 @@ limitations under the License.

 import {SimpleTile} from "./SimpleTile.js";
 import {ReactionsViewModel} from "../ReactionsViewModel.js";
-import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar.js";
+import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar";

 export class BaseMessageTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;
        this._isContinuation = false;
        this._reactions = null;
@ -28,7 +28,7 @@ export class BaseMessageTile extends SimpleTile {
        if (this._entry.annotations || this._entry.pendingAnnotations) {
            this._updateReactions();
        }
-        this._updateReplyTileIfNeeded(options.tilesCreator, undefined);
+        this._updateReplyTileIfNeeded(undefined);
    }

    notifyVisible() {
@ -126,23 +126,27 @@ export class BaseMessageTile extends SimpleTile {
        }
    }

-    updateEntry(entry, param, tilesCreator) {
-        const action = super.updateEntry(entry, param, tilesCreator);
+    updateEntry(entry, param) {
+        const action = super.updateEntry(entry, param);
        if (action.shouldUpdate) {
            this._updateReactions();
        }
-        this._updateReplyTileIfNeeded(tilesCreator, param);
+        this._updateReplyTileIfNeeded(param);
        return action;
    }

-    _updateReplyTileIfNeeded(tilesCreator, param) {
+    _updateReplyTileIfNeeded(param) {
        const replyEntry = this._entry.contextEntry;
        if (replyEntry) {
            // this is an update to contextEntry used for replyPreview
-            const action = this._replyTile?.updateEntry(replyEntry, param, tilesCreator);
+            const action = this._replyTile?.updateEntry(replyEntry, param);
            if (action?.shouldReplace || !this._replyTile) {
                this.disposeTracked(this._replyTile);
-                this._replyTile = tilesCreator(replyEntry);
+                const tileClassForEntry = this._options.tileClassForEntry;
+                const ReplyTile = tileClassForEntry(replyEntry);
+                if (ReplyTile) {
+                    this._replyTile = new ReplyTile(replyEntry, this._options);
+                }
            }
            if(action?.shouldUpdate) {
                this._replyTile?.emitChange();
--- a/src/domain/session/room/timeline/tiles/BaseTextTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseTextTile.js
@ -21,8 +21,8 @@ import {createEnum} from "../../../../../utils/enum";
 export const BodyFormat = createEnum("Plain", "Html");

 export class BaseTextTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._messageBody = null;
        this._format = null
    }
--- a/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
+++ b/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
@ -18,8 +18,8 @@ import {BaseTextTile} from "./BaseTextTile.js";
 import {UpdateAction} from "../UpdateAction.js";

 export class EncryptedEventTile extends BaseTextTile {
-    updateEntry(entry, params, tilesCreator) {
-        const parentResult = super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        const parentResult = super.updateEntry(entry, params);
        // event got decrypted, recreate the tile and replace this one with it
        if (entry.eventType !== "m.room.encrypted") {
            // the "shape" parameter trigger tile recreation in TimelineView
--- a/src/domain/session/room/timeline/tiles/FileTile.js
+++ b/src/domain/session/room/timeline/tiles/FileTile.js
@ -20,8 +20,8 @@ import {formatSize} from "../../../../../utils/formatSize";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";

 export class FileTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._downloadError = null;
        this._downloading = false;
    }
--- a/src/domain/session/room/timeline/tiles/GapTile.js
+++ b/src/domain/session/room/timeline/tiles/GapTile.js
@ -18,8 +18,8 @@ import {SimpleTile} from "./SimpleTile.js";
 import {UpdateAction} from "../UpdateAction.js";

 export class GapTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._loading = false;
        this._error = null;
        this._isAtTop = true;
@ -81,8 +81,8 @@ export class GapTile extends SimpleTile {
        this._siblingChanged = true;
    }

-    updateEntry(entry, params, tilesCreator) {
-        super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        super.updateEntry(entry, params);
        if (!entry.isGap) {
            return UpdateAction.Remove();
        } else {
@ -125,7 +125,7 @@ export function tests() {
                    tile.updateEntry(newEntry);
                }
            };
-            const tile = new GapTile({entry: new FragmentBoundaryEntry(fragment, true), roomVM: {room}});
+            const tile = new GapTile(new FragmentBoundaryEntry(fragment, true), {roomVM: {room}});
            await tile.fill();
            await tile.fill();
            await tile.fill();
--- a/src/domain/session/room/timeline/tiles/ImageTile.js
+++ b/src/domain/session/room/timeline/tiles/ImageTile.js
@ -18,8 +18,8 @@ limitations under the License.
 import {BaseMediaTile} from "./BaseMediaTile.js";

 export class ImageTile extends BaseMediaTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
        this._lightboxUrl = this.urlCreator.urlForSegments([
            // ensure the right room is active if in grid view
            this.navigation.segment("room", this._room.id),
--- a/src/domain/session/room/timeline/tiles/RoomMemberTile.js
+++ b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
@ -66,23 +66,25 @@ export class RoomMemberTile extends SimpleTile {
 export function tests() {
    return {
        "user removes display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                    prevContent: {displayname: "foo", membership: "join"},
                    content: {membership: "join"},
                    stateKey: "foo@bar.com",
                },
-            });
+                {}
+            );
            assert.strictEqual(tile.announcement, "foo@bar.com removed their name (foo)");
        },
        "user without display name sets a new display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                    prevContent: {membership: "join"},
                    content: {displayname: "foo", membership: "join" },
                    stateKey: "foo@bar.com",
                },
-            });
+                {}
+            );
            assert.strictEqual(tile.announcement, "foo@bar.com changed their name to foo");
        },
    };
--- a/src/domain/session/room/timeline/tiles/SimpleTile.js
+++ b/src/domain/session/room/timeline/tiles/SimpleTile.js
@ -15,13 +15,14 @@ limitations under the License.
 */

 import {UpdateAction} from "../UpdateAction.js";
-import {ViewModel} from "../../../../ViewModel.js";
+import {ViewModel} from "../../../../ViewModel";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";

 export class SimpleTile extends ViewModel {
-    constructor(options) {
+    constructor(entry, options) {
        super(options);
-        this._entry = options.entry;
+        this._entry = entry;
+        this._emitUpdate = undefined;
    }
    // view model props for all subclasses
    // hmmm, could also do instanceof ... ?
@ -44,6 +45,10 @@ export class SimpleTile extends ViewModel {
        return this._entry.asEventKey();
    }

+    get eventId() {
+        return this._entry.id;
+    }
+
    get isPending() {
        return this._entry.isPending;
    }
@ -63,16 +68,20 @@ export class SimpleTile extends ViewModel {

    // TilesCollection contract below
    setUpdateEmit(emitUpdate) {
-        this.updateOptions({emitChange: paramName => {
+        this._emitUpdate = emitUpdate;
+    }
+
+    /** overrides the emitChange in ViewModel to also emit the update over the tiles collection */
+    emitChange(changedProps) {
+        if (this._emitUpdate) {
            // it can happen that after some network call
            // we switched away from the room and the response
            // comes in, triggering an emitChange in a tile that
            // has been disposed already (and hence the change
            // callback has been cleared by dispose) We should just ignore this.
-            if (emitUpdate) {
-                emitUpdate(this, paramName);
-            }
-        }});
+            this._emitUpdate(this, changedProps);
+        }
+        super.emitChange(changedProps);
    }

    get upperEntry() {
--- a/src/domain/session/room/timeline/tiles/index.ts
+++ b/src/domain/session/room/timeline/tiles/index.ts
@ -0,0 +1,94 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {GapTile} from "./GapTile.js";
+import {TextTile} from "./TextTile.js";
+import {RedactedTile} from "./RedactedTile.js";
+import {ImageTile} from "./ImageTile.js";
+import {VideoTile} from "./VideoTile.js";
+import {FileTile} from "./FileTile.js";
+import {LocationTile} from "./LocationTile.js";
+import {RoomNameTile} from "./RoomNameTile.js";
+import {RoomMemberTile} from "./RoomMemberTile.js";
+import {EncryptedEventTile} from "./EncryptedEventTile.js";
+import {EncryptionEnabledTile} from "./EncryptionEnabledTile.js";
+import {MissingAttachmentTile} from "./MissingAttachmentTile.js";
+
+import type {SimpleTile} from "./SimpleTile.js";
+import type {Room} from "../../../../../matrix/room/Room";
+import type {Timeline} from "../../../../../matrix/room/timeline/Timeline";
+import type {FragmentBoundaryEntry} from "../../../../../matrix/room/timeline/entries/FragmentBoundaryEntry";
+import type {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry";
+import type {PendingEventEntry} from "../../../../../matrix/room/timeline/entries/PendingEventEntry";
+import type {Options as ViewModelOptions} from "../../../../ViewModel";
+
+export type TimelineEntry = FragmentBoundaryEntry | EventEntry | PendingEventEntry;
+export type TileClassForEntryFn = (entry: TimelineEntry) => TileConstructor | undefined;
+export type Options = ViewModelOptions & {
+    room: Room,
+    timeline: Timeline
+    tileClassForEntry: TileClassForEntryFn;
+};
+export type TileConstructor = new (entry: TimelineEntry, options: Options) => SimpleTile;
+
+export function tileClassForEntry(entry: TimelineEntry): TileConstructor | undefined {
+    if (entry.isGap) {
+        return GapTile;
+    } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
+        return MissingAttachmentTile;
+    } else if (entry.eventType) {
+        switch (entry.eventType) {
+            case "m.room.message": {
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                const content = entry.content;
+                const msgtype = content && content.msgtype;
+                switch (msgtype) {
+                    case "m.text":
+                    case "m.notice":
+                    case "m.emote":
+                        return TextTile;
+                    case "m.image":
+                        return ImageTile;
+                    case "m.video":
+                        return VideoTile;
+                    case "m.file":
+                        return FileTile;
+                    case "m.location":
+                        return LocationTile;
+                    default:
+                        // unknown msgtype not rendered
+                        return undefined;
+                }
+            }
+            case "m.room.name":
+                return RoomNameTile;
+            case "m.room.member":
+                return RoomMemberTile;
+            case "m.room.encrypted":
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                return EncryptedEventTile;
+            case "m.room.encryption":
+                return EncryptionEnabledTile;
+            default:
+                // unknown type not rendered
+                return undefined;
+        }
+    }
+}
--- a/src/domain/session/room/timeline/tilesCreator.js
+++ b/src/domain/session/room/timeline/tilesCreator.js
@ -1,81 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {GapTile} from "./tiles/GapTile.js";
-import {TextTile} from "./tiles/TextTile.js";
-import {RedactedTile} from "./tiles/RedactedTile.js";
-import {ImageTile} from "./tiles/ImageTile.js";
-import {VideoTile} from "./tiles/VideoTile.js";
-import {FileTile} from "./tiles/FileTile.js";
-import {LocationTile} from "./tiles/LocationTile.js";
-import {RoomNameTile} from "./tiles/RoomNameTile.js";
-import {RoomMemberTile} from "./tiles/RoomMemberTile.js";
-import {EncryptedEventTile} from "./tiles/EncryptedEventTile.js";
-import {EncryptionEnabledTile} from "./tiles/EncryptionEnabledTile.js";
-import {MissingAttachmentTile} from "./tiles/MissingAttachmentTile.js";
-
-export function tilesCreator(baseOptions) {
-    const tilesCreator = function tilesCreator(entry, emitUpdate) {
-        const options = Object.assign({entry, emitUpdate, tilesCreator}, baseOptions);
-        if (entry.isGap) {
-            return new GapTile(options);
-        } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
-            return new MissingAttachmentTile(options);
-        } else if (entry.eventType) {
-            switch (entry.eventType) {
-                case "m.room.message": {
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    const content = entry.content;
-                    const msgtype = content && content.msgtype;
-                    switch (msgtype) {
-                        case "m.text":
-                        case "m.notice":
-                        case "m.emote":
-                            return new TextTile(options);
-                        case "m.image":
-                            return new ImageTile(options);
-                        case "m.video":
-                            return new VideoTile(options);
-                        case "m.file":
-                            return new FileTile(options);
-                        case "m.location":
-                            return new LocationTile(options);
-                        default:
-                            // unknown msgtype not rendered
-                            return null;
-                    }
-                }
-                case "m.room.name":
-                    return new RoomNameTile(options);
-                case "m.room.member":
-                    return new RoomMemberTile(options);
-                case "m.room.encrypted":
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    return new EncryptedEventTile(options);
-                case "m.room.encryption":
-                    return new EncryptionEnabledTile(options);
-                default:
-                    // unknown type not rendered
-                    return null;
-            }
-        }
-    };
-    return tilesCreator;
-}
--- a/src/domain/session/settings/KeyBackupViewModel.js
+++ b/src/domain/session/settings/KeyBackupViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {KeyType} from "../../../matrix/ssss/index";
 import {createEnum} from "../../../utils/enum";

--- a/src/domain/session/settings/SettingsViewModel.js
+++ b/src/domain/session/settings/SettingsViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {KeyBackupViewModel} from "./KeyBackupViewModel.js";

 class PushNotificationStatus {
@ -50,6 +50,7 @@ export class SettingsViewModel extends ViewModel {
        this.minSentImageSizeLimit = 400;
        this.maxSentImageSizeLimit = 4000;
        this.pushNotifications = new PushNotificationStatus();
+        this._activeTheme = undefined;
    }

    get _session() {
@ -76,6 +77,9 @@ export class SettingsViewModel extends ViewModel {
        this.sentImageSizeLimit = await this.platform.settingsStorage.getInt("sentImageSizeLimit");
        this.pushNotifications.supported = await this.platform.notificationService.supportsPush();
        this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
+        if (!import.meta.env.DEV) {
+            this._activeTheme = await this.platform.themeLoader.getActiveTheme();
+        }
        this.emitChange("");
    }

@ -127,6 +131,18 @@ export class SettingsViewModel extends ViewModel {
        return this._formatBytes(this._estimate?.usage);
    }

+    get themes() {
+        return this.platform.themeLoader.themes;
+    }
+
+    get activeTheme() {
+        return this._activeTheme;
+    }
+
+    setTheme(name) {
+        this.platform.themeLoader.setTheme(name);
+    }
+
    _formatBytes(n) {
        if (typeof n === "number") {
            return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
--- a/src/index.html
+++ b/src/index.html
@ -2,8 +2,6 @@
 <!-- this file contains all references to include in the SDK asset build (using vite.sdk-assets-config.js) -->
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/main.css">
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/themes/element/theme.css">
 </head>
 <body>
    <script type="module">
--- a/src/lib.ts
+++ b/src/lib.ts
@ -16,6 +16,7 @@ limitations under the License.

 export {Platform} from "./platform/web/Platform.js";
 export {Client, LoadStatus} from "./matrix/Client.js";
+export {RoomStatus} from "./matrix/room/common";
 // export main view & view models
 export {createNavigation, createRouter} from "./domain/navigation/index.js";
 export {RootViewModel} from "./domain/RootViewModel.js";
@ -27,17 +28,67 @@ export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
 export {RightPanelView} from "./platform/web/ui/session/rightpanel/RightPanelView.js";
 export {MediaRepository} from "./matrix/net/MediaRepository";
 export {TilesCollection} from "./domain/session/room/timeline/TilesCollection.js";
-export {tilesCreator} from "./domain/session/room/timeline/tilesCreator.js";
 export {FragmentIdComparer} from "./matrix/room/timeline/FragmentIdComparer.js";
 export {EventEntry} from "./matrix/room/timeline/entries/EventEntry.js";
 export {encodeKey, decodeKey, encodeEventIdKey, decodeEventIdKey} from "./matrix/storage/idb/stores/TimelineEventStore";
 export {Timeline} from "./matrix/room/timeline/Timeline.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
+export {tileClassForEntry} from "./domain/session/room/timeline/tiles/index";
+export type {TimelineEntry, TileClassForEntryFn, Options, TileConstructor} from "./domain/session/room/timeline/tiles/index";
+// export timeline tile view models
+export {GapTile} from "./domain/session/room/timeline/tiles/GapTile.js";
+export {TextTile} from "./domain/session/room/timeline/tiles/TextTile.js";
+export {RedactedTile} from "./domain/session/room/timeline/tiles/RedactedTile.js";
+export {ImageTile} from "./domain/session/room/timeline/tiles/ImageTile.js";
+export {VideoTile} from "./domain/session/room/timeline/tiles/VideoTile.js";
+export {FileTile} from "./domain/session/room/timeline/tiles/FileTile.js";
+export {LocationTile} from "./domain/session/room/timeline/tiles/LocationTile.js";
+export {RoomNameTile} from "./domain/session/room/timeline/tiles/RoomNameTile.js";
+export {RoomMemberTile} from "./domain/session/room/timeline/tiles/RoomMemberTile.js";
+export {EncryptedEventTile} from "./domain/session/room/timeline/tiles/EncryptedEventTile.js";
+export {EncryptionEnabledTile} from "./domain/session/room/timeline/tiles/EncryptionEnabledTile.js";
+export {MissingAttachmentTile} from "./domain/session/room/timeline/tiles/MissingAttachmentTile.js";
+export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile.js";
+
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
+export {viewClassForTile} from "./platform/web/ui/session/room/common";
+export type {TileViewConstructor, ViewClassForEntryFn} from "./platform/web/ui/session/room/TimelineView";
+// export timeline tile views
+export {AnnouncementView} from "./platform/web/ui/session/room/timeline/AnnouncementView.js";
+export {BaseMediaView} from "./platform/web/ui/session/room/timeline/BaseMediaView.js";
+export {BaseMessageView} from "./platform/web/ui/session/room/timeline/BaseMessageView.js";
+export {FileView} from "./platform/web/ui/session/room/timeline/FileView.js";
+export {GapView} from "./platform/web/ui/session/room/timeline/GapView.js";
+export {ImageView} from "./platform/web/ui/session/room/timeline/ImageView.js";
+export {LocationView} from "./platform/web/ui/session/room/timeline/LocationView.js";
+export {MissingAttachmentView} from "./platform/web/ui/session/room/timeline/MissingAttachmentView.js";
+export {ReactionsView} from "./platform/web/ui/session/room/timeline/ReactionsView.js";
+export {RedactedView} from "./platform/web/ui/session/room/timeline/RedactedView.js";
+export {ReplyPreviewView} from "./platform/web/ui/session/room/timeline/ReplyPreviewView.js";
+export {TextMessageView} from "./platform/web/ui/session/room/timeline/TextMessageView.js";
+export {VideoView} from "./platform/web/ui/session/room/timeline/VideoView.js";
+
 export {Navigation} from "./domain/navigation/Navigation.js";
 export {ComposerViewModel} from "./domain/session/room/ComposerViewModel.js";
 export {MessageComposer} from "./platform/web/ui/session/room/MessageComposer.js";
 export {TemplateView} from "./platform/web/ui/general/TemplateView";
-export {ViewModel} from "./domain/ViewModel.js";
+export {ViewModel} from "./domain/ViewModel";
 export {LoadingView} from "./platform/web/ui/general/LoadingView.js";
 export {AvatarView} from "./platform/web/ui/AvatarView.js";
+export {RoomType} from "./matrix/room/common";
+export {EventEmitter} from "./utils/EventEmitter";
+export {Disposables} from "./utils/Disposables";
+// these should eventually be moved to another library
+export {
+    ObservableArray,
+    SortedArray,
+    MappedList,
+    AsyncMappedList,
+    ConcatList,
+    ObservableMap
+} from "./observable/index";
+export {
+    BaseObservableValue,
+    ObservableValue,
+    RetainedObservableValue
+} from "./observable/ObservableValue";
--- a/src/matrix/Client.js
+++ b/src/matrix/Client.js
@ -132,14 +132,15 @@ export class Client {
        });
    }

-    async startRegistration(homeserver, username, password, initialDeviceDisplayName) {
+    async startRegistration(homeserver, username, password, initialDeviceDisplayName, flowSelector) {
        const request = this._platform.request;
        const hsApi = new HomeServerApi({homeserver, request});
        const registration = new Registration(hsApi, {
            username, 
            password,
            initialDeviceDisplayName,
-        });
+        },
+        flowSelector);
        return registration;
    }

--- a/src/matrix/Session.js
+++ b/src/matrix/Session.js
@ -26,8 +26,8 @@ import {User} from "./User.js";
 import {DeviceMessageHandler} from "./DeviceMessageHandler.js";
 import {Account as E2EEAccount} from "./e2ee/Account.js";
 import {uploadAccountAsDehydratedDevice} from "./e2ee/Dehydration.js";
-import {Decryption as OlmDecryption} from "./e2ee/olm/Decryption.js";
-import {Encryption as OlmEncryption} from "./e2ee/olm/Encryption.js";
+import {Decryption as OlmDecryption} from "./e2ee/olm/Decryption";
+import {Encryption as OlmEncryption} from "./e2ee/olm/Encryption";
 import {Decryption as MegOlmDecryption} from "./e2ee/megolm/Decryption";
 import {KeyLoader as MegOlmKeyLoader} from "./e2ee/megolm/decryption/KeyLoader";
 import {KeyBackup} from "./e2ee/megolm/keybackup/KeyBackup";
@ -123,25 +123,24 @@ export class Session {
        // TODO: this should all go in a wrapper in e2ee/ that is bootstrapped by passing in the account
        // and can create RoomEncryption objects and handle encrypted to_device messages and device list changes.
        const senderKeyLock = new LockMap();
-        const olmDecryption = new OlmDecryption({
-            account: this._e2eeAccount,
-            pickleKey: PICKLE_KEY,
-            olm: this._olm,
-            storage: this._storage,
-            now: this._platform.clock.now,
-            ownUserId: this._user.id,
+        const olmDecryption = new OlmDecryption(
+            this._e2eeAccount,
+            PICKLE_KEY,
+            this._platform.clock.now,
+            this._user.id,
+            this._olm,
            senderKeyLock
-        });
-        this._olmEncryption = new OlmEncryption({
-            account: this._e2eeAccount,
-            pickleKey: PICKLE_KEY,
-            olm: this._olm,
-            storage: this._storage,
-            now: this._platform.clock.now,
-            ownUserId: this._user.id,
-            olmUtil: this._olmUtil,
+        );
+        this._olmEncryption = new OlmEncryption(
+            this._e2eeAccount,
+            PICKLE_KEY,
+            this._olm,
+            this._storage,
+            this._platform.clock.now,
+            this._user.id,
+            this._olmUtil,
            senderKeyLock
-        });
+        );
        this._keyLoader = new MegOlmKeyLoader(this._olm, PICKLE_KEY, 20);
        this._megolmEncryption = new MegOlmEncryption({
            account: this._e2eeAccount,
--- a/src/matrix/e2ee/DecryptionResult.ts
+++ b/src/matrix/e2ee/DecryptionResult.ts
@ -26,35 +26,41 @@ limitations under the License.
 *                                      see DeviceTracker
 */

+import type {DeviceIdentity} from "../storage/idb/stores/DeviceIdentityStore";

+type DecryptedEvent = {
+    type?: string,
+    content?: Record<string, any>
+}

 export class DecryptionResult {
-    constructor(event, senderCurve25519Key, claimedEd25519Key) {
-        this.event = event;
-        this.senderCurve25519Key = senderCurve25519Key;
-        this.claimedEd25519Key = claimedEd25519Key;
-        this._device = null;
-        this._roomTracked = true;
+    private device?: DeviceIdentity;
+    private roomTracked: boolean = true;
+
+    constructor(
+        public readonly event: DecryptedEvent,
+        public readonly senderCurve25519Key: string,
+        public readonly claimedEd25519Key: string
+    ) {}
+
+    setDevice(device: DeviceIdentity): void {
+        this.device = device;
    }

-    setDevice(device) {
-        this._device = device;
+    setRoomNotTrackedYet(): void {
+        this.roomTracked = false;
    }

-    setRoomNotTrackedYet() {
-        this._roomTracked = false;
-    }
-
-    get isVerified() {
-        if (this._device) {
-            const comesFromDevice = this._device.ed25519Key === this.claimedEd25519Key;
+    get isVerified(): boolean {
+        if (this.device) {
+            const comesFromDevice = this.device.ed25519Key === this.claimedEd25519Key;
            return comesFromDevice;
        }
        return false;
    }

-    get isUnverified() {
-        if (this._device) {
+    get isUnverified(): boolean {
+        if (this.device) {
            return !this.isVerified;
        } else if (this.isVerificationUnknown) {
            return false;
@ -63,8 +69,8 @@ export class DecryptionResult {
        }
    }

-    get isVerificationUnknown() {
+    get isVerificationUnknown(): boolean {
        // verification is unknown if we haven't yet fetched the devices for the room
-        return !this._device && !this._roomTracked;
+        return !this.device && !this.roomTracked;
    }
 }
--- a/src/matrix/e2ee/DeviceTracker.js
+++ b/src/matrix/e2ee/DeviceTracker.js
@ -214,11 +214,12 @@ export class DeviceTracker {
        const allDeviceIdentities = [];
        const deviceIdentitiesToStore = [];
        // filter out devices that have changed their ed25519 key since last time we queried them
-        deviceIdentities = await Promise.all(deviceIdentities.map(async deviceIdentity => {
+        await Promise.all(deviceIdentities.map(async deviceIdentity => {
            if (knownDeviceIds.includes(deviceIdentity.deviceId)) {
                const existingDevice = await txn.deviceIdentities.get(deviceIdentity.userId, deviceIdentity.deviceId);
                if (existingDevice.ed25519Key !== deviceIdentity.ed25519Key) {
                    allDeviceIdentities.push(existingDevice);
+                    return;
                }
            }
            allDeviceIdentities.push(deviceIdentity);
@ -363,3 +364,154 @@ export class DeviceTracker {
        return await txn.deviceIdentities.getByCurve25519Key(curve25519Key);
    }
 }
+
+import {createMockStorage} from "../../mocks/Storage";
+import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
+
+export function tests() {
+
+    function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) {
+        return {
+            isTrackingMembers: false,
+            isEncrypted: true,
+            loadMemberList: () => {
+                const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};});
+                const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};});
+                const members = joinedMembers.concat(invitedMembers);
+                const memberMap = members.reduce((map, member) => {
+                    map.set(member.userId, member);
+                    return map;
+                }, new Map());
+                return {members: memberMap, release() {}}
+            },
+            writeIsTrackingMembers(isTrackingMembers) {
+                if (this.isTrackingMembers !== isTrackingMembers) {
+                    return isTrackingMembers;
+                }
+                return undefined;
+            },
+            applyIsTrackingMembersChanges(isTrackingMembers) {
+                if (isTrackingMembers !== undefined) {
+                    this.isTrackingMembers = isTrackingMembers;
+                }
+            },
+        }
+    }
+
+    function createQueryKeysHSApiMock(createKey = (algorithm, userId, deviceId) => `${algorithm}:${userId}:${deviceId}:key`) {
+        return {
+            queryKeys(payload) {
+                const {device_keys: deviceKeys} = payload;
+                const userKeys = Object.entries(deviceKeys).reduce((userKeys, [userId, deviceIds]) => {
+                    if (deviceIds.length === 0) {
+                        deviceIds = ["device1"];
+                    }
+                    userKeys[userId] = deviceIds.filter(d => d === "device1").reduce((deviceKeys, deviceId) => {
+                        deviceKeys[deviceId] = {
+                            "algorithms": [
+                              "m.olm.v1.curve25519-aes-sha2",
+                              "m.megolm.v1.aes-sha2"
+                            ],
+                            "device_id": deviceId,
+                            "keys": {
+                                [`curve25519:${deviceId}`]: createKey("curve25519", userId, deviceId),
+                                [`ed25519:${deviceId}`]: createKey("ed25519", userId, deviceId),
+                            },
+                            "signatures": {
+                                [userId]: {
+                                    [`ed25519:${deviceId}`]: `ed25519:${userId}:${deviceId}:signature`
+                                }
+                            },
+                            "unsigned": {
+                              "device_display_name": `${userId} Phone`
+                            },
+                            "user_id": userId
+                        };
+                        return deviceKeys;
+                    }, {});
+                    return userKeys;
+                }, {});
+                const response = {device_keys: userKeys};
+                return {
+                    async response() {
+                        return response;
+                    }
+                };
+            }
+        };
+    }
+    const roomId = "!abc:hs.tld";
+
+    return {
+        "trackRoom only writes joined members": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]);
+            await tracker.trackRoom(room, NullLoggerInstance.item);
+            const txn = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), {
+                userId: "@alice:hs.tld",
+                roomIds: [roomId],
+                deviceTrackingStatus: TRACKING_STATUS_OUTDATED
+            });
+            assert.deepEqual(await txn.userIdentities.get("@bob:hs.tld"), {
+                userId: "@bob:hs.tld",
+                roomIds: [roomId],
+                deviceTrackingStatus: TRACKING_STATUS_OUTDATED
+            });
+            assert.equal(await txn.userIdentities.get("@charly:hs.tld"), undefined);
+        },
+        "getting devices for tracked room yields correct keys": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room, NullLoggerInstance.item);
+            const hsApi = createQueryKeysHSApiMock();
+            const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
+            assert.equal(devices.length, 2);
+            assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+            assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
+        },
+        "device with changed key is ignored": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room, NullLoggerInstance.item);
+            const hsApi = createQueryKeysHSApiMock();
+            // query devices first time
+            await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities]);
+            // mark alice as outdated, so keys will be fetched again
+            tracker.writeDeviceChanges(["@alice:hs.tld"], txn, NullLoggerInstance.item);
+            await txn.complete();
+            const hsApiWithChangedAliceKey = createQueryKeysHSApiMock((algo, userId, deviceId) => {
+                return `${algo}:${userId}:${deviceId}:${userId === "@alice:hs.tld" ? "newKey" : "key"}`;
+            });
+            const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApiWithChangedAliceKey, NullLoggerInstance.item);
+            assert.equal(devices.length, 2);
+            assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+            assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
+            const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]);
+            // also check the modified key was not stored
+            assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+        }
+    }
+}
--- a/src/matrix/e2ee/megolm/decryption/SessionDecryption.ts
+++ b/src/matrix/e2ee/megolm/decryption/SessionDecryption.ts
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {DecryptionResult} from "../../DecryptionResult.js";
+import {DecryptionResult} from "../../DecryptionResult";
 import {DecryptionError} from "../../common.js";
 import {ReplayDetectionEntry} from "./ReplayDetectionEntry";
 import type {RoomKey} from "./RoomKey";
--- a/src/matrix/e2ee/olm/Decryption.ts
+++ b/src/matrix/e2ee/olm/Decryption.ts
@ -16,32 +16,47 @@ limitations under the License.

 import {DecryptionError} from "../common.js";
 import {groupBy} from "../../../utils/groupBy";
-import {MultiLock} from "../../../utils/Lock";
-import {Session} from "./Session.js";
-import {DecryptionResult} from "../DecryptionResult.js";
+import {MultiLock, ILock} from "../../../utils/Lock";
+import {Session} from "./Session";
+import {DecryptionResult} from "../DecryptionResult";
+import {OlmPayloadType} from "./types";
+
+import type {OlmMessage, OlmPayload} from "./types";
+import type {Account} from "../Account";
+import type {LockMap} from "../../../utils/LockMap";
+import type {Transaction} from "../../storage/idb/Transaction";
+import type {OlmEncryptedEvent} from "./types";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;

 const SESSION_LIMIT_PER_SENDER_KEY = 4;

-function isPreKeyMessage(message) {
-    return message.type === 0;
-}
+type DecryptionResults = {
+    results: DecryptionResult[],
+    errors: DecryptionError[],
+    senderKeyDecryption: SenderKeyDecryption
+};

-function sortSessions(sessions) {
+type CreateAndDecryptResult = {
+    session: Session,
+    plaintext: string
+};
+
+function sortSessions(sessions: Session[]): void {
    sessions.sort((a, b) => {
        return b.data.lastUsed - a.data.lastUsed;
    });
 }

 export class Decryption {
-    constructor({account, pickleKey, now, ownUserId, storage, olm, senderKeyLock}) {
-        this._account = account;
-        this._pickleKey = pickleKey;
-        this._now = now;
-        this._ownUserId = ownUserId;
-        this._storage = storage;
-        this._olm = olm;
-        this._senderKeyLock = senderKeyLock;
-    }
+    constructor(
+        private readonly account: Account,
+        private readonly pickleKey: string,
+        private readonly now: () => number,
+        private readonly ownUserId: string,
+        private readonly olm: Olm,
+        private readonly senderKeyLock: LockMap<string>
+    ) {}
    
    // we need to lock because both encryption and decryption can't be done in one txn,
    // so for them not to step on each other toes, we need to lock.
@ -50,8 +65,8 @@ export class Decryption {
    //  - decryptAll below fails (to release the lock as early as we can)
    //  - DecryptionChanges.write succeeds
    //  - Sync finishes the writeSync phase (or an error was thrown, in case we never get to DecryptionChanges.write) 
-    async obtainDecryptionLock(events) {
-        const senderKeys = new Set();
+    async obtainDecryptionLock(events: OlmEncryptedEvent[]): Promise<ILock> {
+        const senderKeys = new Set<string>();
        for (const event of events) {
            const senderKey = event.content?.["sender_key"];
            if (senderKey) {
@ -61,7 +76,7 @@ export class Decryption {
        // take a lock on all senderKeys so encryption or other calls to decryptAll (should not happen)
        // don't modify the sessions at the same time
        const locks = await Promise.all(Array.from(senderKeys).map(senderKey => {
-            return this._senderKeyLock.takeLock(senderKey);
+            return this.senderKeyLock.takeLock(senderKey);
        }));
        return new MultiLock(locks);
    }
@ -83,18 +98,18 @@ export class Decryption {
     * @param  {[type]} events
     * @return {Promise<DecryptionChanges>}        [description]
     */
-    async decryptAll(events, lock, txn) {
+    async decryptAll(events: OlmEncryptedEvent[], lock: ILock, txn: Transaction): Promise<DecryptionChanges> {
        try {
-            const eventsPerSenderKey = groupBy(events, event => event.content?.["sender_key"]);
-            const timestamp = this._now();
+            const eventsPerSenderKey = groupBy(events, (event: OlmEncryptedEvent) => event.content?.["sender_key"]);
+            const timestamp = this.now();
            // decrypt events for different sender keys in parallel
            const senderKeyOperations = await Promise.all(Array.from(eventsPerSenderKey.entries()).map(([senderKey, events]) => {
-                return this._decryptAllForSenderKey(senderKey, events, timestamp, txn);
+                return this._decryptAllForSenderKey(senderKey!, events, timestamp, txn);
            }));
-            const results = senderKeyOperations.reduce((all, r) => all.concat(r.results), []);
-            const errors = senderKeyOperations.reduce((all, r) => all.concat(r.errors), []);
+            const results = senderKeyOperations.reduce((all, r) => all.concat(r.results), [] as DecryptionResult[]);
+            const errors = senderKeyOperations.reduce((all, r) => all.concat(r.errors), [] as DecryptionError[]);
            const senderKeyDecryptions = senderKeyOperations.map(r => r.senderKeyDecryption);
-            return new DecryptionChanges(senderKeyDecryptions, results, errors, this._account, lock);
+            return new DecryptionChanges(senderKeyDecryptions, results, errors, this.account, lock);
        } catch (err) {
            // make sure the locks are release if something throws
            // otherwise they will be released in DecryptionChanges after having written
@ -104,11 +119,11 @@ export class Decryption {
        }
    }

-    async _decryptAllForSenderKey(senderKey, events, timestamp, readSessionsTxn) {
+    async _decryptAllForSenderKey(senderKey: string, events: OlmEncryptedEvent[], timestamp: number, readSessionsTxn: Transaction): Promise<DecryptionResults> {
        const sessions = await this._getSessions(senderKey, readSessionsTxn);
-        const senderKeyDecryption = new SenderKeyDecryption(senderKey, sessions, this._olm, timestamp);
-        const results = [];
-        const errors = [];
+        const senderKeyDecryption = new SenderKeyDecryption(senderKey, sessions, timestamp);
+        const results: DecryptionResult[] = [];
+        const errors: DecryptionError[] = [];
        // events for a single senderKey need to be decrypted one by one
        for (const event of events) {
            try {
@ -121,10 +136,10 @@ export class Decryption {
        return {results, errors, senderKeyDecryption};
    }

-    _decryptForSenderKey(senderKeyDecryption, event, timestamp) {
+    _decryptForSenderKey(senderKeyDecryption: SenderKeyDecryption, event: OlmEncryptedEvent, timestamp: number): DecryptionResult {
        const senderKey = senderKeyDecryption.senderKey;
        const message = this._getMessageAndValidateEvent(event);
-        let plaintext;
+        let plaintext: string | undefined;
        try {
            plaintext = senderKeyDecryption.decrypt(message);
        } catch (err) {
@ -132,8 +147,8 @@ export class Decryption {
            throw new DecryptionError("OLM_BAD_ENCRYPTED_MESSAGE", event, {senderKey, error: err.message});
        }
        // could not decrypt with any existing session
-        if (typeof plaintext !== "string" && isPreKeyMessage(message)) {
-            let createResult;
+        if (typeof plaintext !== "string" && message.type === OlmPayloadType.PreKey) {
+            let createResult: CreateAndDecryptResult;
            try {
                createResult = this._createSessionAndDecrypt(senderKey, message, timestamp);
            } catch (error) {
@ -143,14 +158,14 @@ export class Decryption {
            plaintext = createResult.plaintext;
        }
        if (typeof plaintext === "string") {
-            let payload;
+            let payload: OlmPayload;
            try {
                payload = JSON.parse(plaintext);
            } catch (error) {
                throw new DecryptionError("PLAINTEXT_NOT_JSON", event, {plaintext, error});
            }
            this._validatePayload(payload, event);
-            return new DecryptionResult(payload, senderKey, payload.keys.ed25519);
+            return new DecryptionResult(payload, senderKey, payload.keys!.ed25519!);
        } else {
            throw new DecryptionError("OLM_NO_MATCHING_SESSION", event,
                {knownSessionIds: senderKeyDecryption.sessions.map(s => s.id)});
@ -158,16 +173,16 @@ export class Decryption {
    }

    // only for pre-key messages after having attempted decryption with existing sessions
-    _createSessionAndDecrypt(senderKey, message, timestamp) {
+    _createSessionAndDecrypt(senderKey: string, message: OlmMessage, timestamp: number): CreateAndDecryptResult {
        let plaintext;
        // if we have multiple messages encrypted with the same new session,
        // this could create multiple sessions as the OTK isn't removed yet
        // (this only happens in DecryptionChanges.write)
        // This should be ok though as we'll first try to decrypt with the new session
-        const olmSession = this._account.createInboundOlmSession(senderKey, message.body);
+        const olmSession = this.account.createInboundOlmSession(senderKey, message.body);
        try {
            plaintext = olmSession.decrypt(message.type, message.body);
-            const session = Session.create(senderKey, olmSession, this._olm, this._pickleKey, timestamp);
+            const session = Session.create(senderKey, olmSession, this.olm, this.pickleKey, timestamp);
            session.unload(olmSession);
            return {session, plaintext};
        } catch (err) {
@ -176,12 +191,12 @@ export class Decryption {
        }
    }

-    _getMessageAndValidateEvent(event) {
+    _getMessageAndValidateEvent(event: OlmEncryptedEvent): OlmMessage {
        const ciphertext = event.content?.ciphertext;
        if (!ciphertext) {
            throw new DecryptionError("OLM_MISSING_CIPHERTEXT", event);
        }
-        const message = ciphertext?.[this._account.identityKeys.curve25519];
+        const message = ciphertext?.[this.account.identityKeys.curve25519];
        if (!message) {
            throw new DecryptionError("OLM_NOT_INCLUDED_IN_RECIPIENTS", event);
        }
@ -189,22 +204,22 @@ export class Decryption {
        return message;
    }

-    async _getSessions(senderKey, txn) {
+    async _getSessions(senderKey: string, txn: Transaction): Promise<Session[]> {
        const sessionEntries = await txn.olmSessions.getAll(senderKey);
        // sort most recent used sessions first
-        const sessions = sessionEntries.map(s => new Session(s, this._pickleKey, this._olm));
+        const sessions = sessionEntries.map(s => new Session(s, this.pickleKey, this.olm));
        sortSessions(sessions);
        return sessions;
    }

-    _validatePayload(payload, event) {
+    _validatePayload(payload: OlmPayload, event: OlmEncryptedEvent): void {
        if (payload.sender !== event.sender) {
            throw new DecryptionError("OLM_FORWARDED_MESSAGE", event, {sentBy: event.sender, encryptedBy: payload.sender});
        }
-        if (payload.recipient !== this._ownUserId) {
+        if (payload.recipient !== this.ownUserId) {
            throw new DecryptionError("OLM_BAD_RECIPIENT", event, {recipient: payload.recipient});
        }
-        if (payload.recipient_keys?.ed25519 !== this._account.identityKeys.ed25519) {
+        if (payload.recipient_keys?.ed25519 !== this.account.identityKeys.ed25519) {
            throw new DecryptionError("OLM_BAD_RECIPIENT_KEY", event, {key: payload.recipient_keys?.ed25519});
        }
        // TODO: check room_id
@ -219,21 +234,20 @@ export class Decryption {

 // decryption helper for a single senderKey
 class SenderKeyDecryption {
-    constructor(senderKey, sessions, olm, timestamp) {
-        this.senderKey = senderKey;
-        this.sessions = sessions;
-        this._olm = olm;
-        this._timestamp = timestamp;
-    }
+    constructor(
+        public readonly senderKey: string,
+        public readonly sessions: Session[],
+        private readonly timestamp: number
+    ) {}

-    addNewSession(session) {
+    addNewSession(session: Session): void {
        // add at top as it is most recent
        this.sessions.unshift(session);
    }

-    decrypt(message) {
+    decrypt(message: OlmMessage): string | undefined {
        for (const session of this.sessions) {
-            const plaintext = this._decryptWithSession(session, message);
+            const plaintext = this.decryptWithSession(session, message);
            if (typeof plaintext === "string") {
                // keep them sorted so will try the same session first for other messages
                // and so we can assume the excess ones are at the end
@ -244,11 +258,11 @@ class SenderKeyDecryption {
        }
    }

-    getModifiedSessions() {
+    getModifiedSessions(): Session[] {
        return this.sessions.filter(session => session.isModified);
    }

-    get hasNewSessions() {
+    get hasNewSessions(): boolean {
        return this.sessions.some(session => session.isNew);
    }

@ -257,19 +271,22 @@ class SenderKeyDecryption {
    // if this turns out to be a real cost for IE11,
    // we could look into adding a less expensive serialization mechanism
    // for olm sessions to libolm
-    _decryptWithSession(session, message) {
+    private decryptWithSession(session: Session, message: OlmMessage): string | undefined {
+        if (message.type === undefined || message.body === undefined) {
+            throw new Error("Invalid message without type or body");
+        }
        const olmSession = session.load();
        try {
-            if (isPreKeyMessage(message) && !olmSession.matches_inbound(message.body)) {
+            if (message.type === OlmPayloadType.PreKey && !olmSession.matches_inbound(message.body)) {
                return;
            }
            try {
-                const plaintext = olmSession.decrypt(message.type, message.body);
+                const plaintext = olmSession.decrypt(message.type as number, message.body!);
                session.save(olmSession);
-                session.lastUsed = this._timestamp;
+                session.data.lastUsed = this.timestamp;
                return plaintext;
            } catch (err) {
-                if (isPreKeyMessage(message)) {
+                if (message.type === OlmPayloadType.PreKey) {
                    throw new Error(`Error decrypting prekey message with existing session id ${session.id}: ${err.message}`);
                }
                // decryption failed, bail out
@ -286,27 +303,27 @@ class SenderKeyDecryption {
 * @property {Array<DecryptionError>} errors  see DecryptionError.event to retrieve the event that failed to decrypt.
 */
 class DecryptionChanges {
-    constructor(senderKeyDecryptions, results, errors, account, lock) {
-        this._senderKeyDecryptions = senderKeyDecryptions;
-        this._account = account;    
-        this.results = results;
-        this.errors = errors;
-        this._lock = lock;
+    constructor(
+        private readonly senderKeyDecryptions: SenderKeyDecryption[],
+        public readonly results: DecryptionResult[],
+        public readonly errors: DecryptionError[],
+        private readonly account: Account,
+        private readonly lock: ILock
+    ) {}
+
+    get hasNewSessions(): boolean {
+        return this.senderKeyDecryptions.some(skd => skd.hasNewSessions);
    }

-    get hasNewSessions() {
-        return this._senderKeyDecryptions.some(skd => skd.hasNewSessions);
-    }
-
-    write(txn) {
+    write(txn: Transaction): void {
        try {
-            for (const senderKeyDecryption of this._senderKeyDecryptions) {
+            for (const senderKeyDecryption of this.senderKeyDecryptions) {
                for (const session of senderKeyDecryption.getModifiedSessions()) {
                    txn.olmSessions.set(session.data);
                    if (session.isNew) {
                        const olmSession = session.load();
                        try {
-                            this._account.writeRemoveOneTimeKey(olmSession, txn);
+                            this.account.writeRemoveOneTimeKey(olmSession, txn);
                        } finally {
                            session.unload(olmSession);
                        }
@ -322,7 +339,7 @@ class DecryptionChanges {
                }
            }
        } finally {
-            this._lock.release();
+            this.lock.release();
        }
    }
 }
--- a/src/matrix/e2ee/olm/Encryption.ts
+++ b/src/matrix/e2ee/olm/Encryption.ts
@ -16,7 +16,33 @@ limitations under the License.

 import {groupByWithCreator} from "../../../utils/groupBy";
 import {verifyEd25519Signature, OLM_ALGORITHM} from "../common.js";
-import {createSessionEntry} from "./Session.js";
+import {createSessionEntry} from "./Session";
+
+import type {OlmMessage, OlmPayload, OlmEncryptedMessageContent} from "./types";
+import type {Account} from "../Account";
+import type {LockMap} from "../../../utils/LockMap";
+import type {Storage} from "../../storage/idb/Storage";
+import type {Transaction} from "../../storage/idb/Transaction";
+import type {DeviceIdentity} from "../../storage/idb/stores/DeviceIdentityStore";
+import type {HomeServerApi} from "../../net/HomeServerApi";
+import type {ILogItem} from "../../../logging/types";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;
+
+type ClaimedOTKResponse = {
+    [userId: string]: {
+        [deviceId: string]: {
+            [algorithmAndOtk: string]: {
+                key: string,
+                signatures: {
+                    [userId: string]: {
+                        [algorithmAndDevice: string]: string
+                    }
+                }
+            }
+        }
+    }
+};

 function findFirstSessionId(sessionIds) {
    return sessionIds.reduce((first, sessionId) => {
@ -36,19 +62,19 @@ const OTK_ALGORITHM = "signed_curve25519";
 const MAX_BATCH_SIZE = 20;

 export class Encryption {
-    constructor({account, olm, olmUtil, ownUserId, storage, now, pickleKey, senderKeyLock}) {
-        this._account = account;
-        this._olm = olm;
-        this._olmUtil = olmUtil;
-        this._ownUserId = ownUserId;
-        this._storage = storage;
-        this._now = now;
-        this._pickleKey = pickleKey;
-        this._senderKeyLock = senderKeyLock;
-    }
+    constructor(
+        private readonly account: Account,
+        private readonly pickleKey: string,
+        private readonly olm: Olm,
+        private readonly storage: Storage,
+        private readonly now: () => number,
+        private readonly ownUserId: string,
+        private readonly olmUtil: Olm.Utility,
+        private readonly senderKeyLock: LockMap<string>
+    ) {}

-    async encrypt(type, content, devices, hsApi, log) {
-        let messages = [];
+    async encrypt(type: string, content: Record<string, any>, devices: DeviceIdentity[], hsApi: HomeServerApi, log: ILogItem): Promise<EncryptedMessage[]> {
+        let messages: EncryptedMessage[] = [];
        for (let i = 0; i < devices.length ; i += MAX_BATCH_SIZE) {
            const batchDevices = devices.slice(i, i + MAX_BATCH_SIZE);
            const batchMessages = await this._encryptForMaxDevices(type, content, batchDevices, hsApi, log);
@ -57,12 +83,12 @@ export class Encryption {
        return messages;
    }

-    async _encryptForMaxDevices(type, content, devices, hsApi, log) {
+    async _encryptForMaxDevices(type: string, content: Record<string, any>, devices: DeviceIdentity[], hsApi: HomeServerApi, log: ILogItem): Promise<EncryptedMessage[]> {
        // TODO: see if we can only hold some of the locks until after the /keys/claim call (if needed) 
        // take a lock on all senderKeys so decryption and other calls to encrypt (should not happen)
        // don't modify the sessions at the same time
        const locks = await Promise.all(devices.map(device => {
-            return this._senderKeyLock.takeLock(device.curve25519Key);
+            return this.senderKeyLock.takeLock(device.curve25519Key);
        }));
        try {
            const {
@ -70,9 +96,9 @@ export class Encryption {
                existingEncryptionTargets,
            } = await this._findExistingSessions(devices);
        
-            const timestamp = this._now(); 
+            const timestamp = this.now(); 

-            let encryptionTargets = [];
+            let encryptionTargets: EncryptionTarget[] = [];
            try {
                if (devicesWithoutSession.length) {
                    const newEncryptionTargets = await log.wrap("create sessions", log => this._createNewSessions(
@ -100,8 +126,8 @@ export class Encryption {
        }
    }

-    async _findExistingSessions(devices) {
-        const txn = await this._storage.readTxn([this._storage.storeNames.olmSessions]);
+    async _findExistingSessions(devices: DeviceIdentity[]): Promise<{devicesWithoutSession: DeviceIdentity[], existingEncryptionTargets: EncryptionTarget[]}> {
+        const txn = await this.storage.readTxn([this.storage.storeNames.olmSessions]);
        const sessionIdsForDevice = await Promise.all(devices.map(async device => {
            return await txn.olmSessions.getSessionIds(device.curve25519Key);
        }));
@ -116,18 +142,18 @@ export class Encryption {
                const sessionId = findFirstSessionId(sessionIds);
                return EncryptionTarget.fromSessionId(device, sessionId);
            }
-        }).filter(target => !!target);
+        }).filter(target => !!target) as EncryptionTarget[];

        return {devicesWithoutSession, existingEncryptionTargets};
    }

-    _encryptForDevice(type, content, target) {
+    _encryptForDevice(type: string, content: Record<string, any>, target: EncryptionTarget): OlmEncryptedMessageContent {
        const {session, device} = target;
        const plaintext = JSON.stringify(this._buildPlainTextMessageForDevice(type, content, device));
-        const message = session.encrypt(plaintext);
+        const message = session!.encrypt(plaintext);
        const encryptedContent = {
            algorithm: OLM_ALGORITHM,
-            sender_key: this._account.identityKeys.curve25519,
+            sender_key: this.account.identityKeys.curve25519,
            ciphertext: {
                [device.curve25519Key]: message
            }
@ -135,27 +161,27 @@ export class Encryption {
        return encryptedContent;
    }

-    _buildPlainTextMessageForDevice(type, content, device) {
+    _buildPlainTextMessageForDevice(type: string, content: Record<string, any>, device: DeviceIdentity): OlmPayload {
        return {
            keys: {
-                "ed25519": this._account.identityKeys.ed25519
+                "ed25519": this.account.identityKeys.ed25519
            },
            recipient_keys: {
                "ed25519": device.ed25519Key
            },
            recipient: device.userId,
-            sender: this._ownUserId,
+            sender: this.ownUserId,
            content,
            type
        }
    }

-    async _createNewSessions(devicesWithoutSession, hsApi, timestamp, log) {
+    async _createNewSessions(devicesWithoutSession: DeviceIdentity[], hsApi: HomeServerApi, timestamp: number, log: ILogItem): Promise<EncryptionTarget[]> {
        const newEncryptionTargets = await log.wrap("claim", log => this._claimOneTimeKeys(hsApi, devicesWithoutSession, log));
        try {
            for (const target of newEncryptionTargets) {
                const {device, oneTimeKey} = target;
-                target.session = await this._account.createOutboundOlmSession(device.curve25519Key, oneTimeKey);
+                target.session = await this.account.createOutboundOlmSession(device.curve25519Key, oneTimeKey);
            }
            await this._storeSessions(newEncryptionTargets, timestamp);
        } catch (err) {
@ -167,12 +193,12 @@ export class Encryption {
        return newEncryptionTargets;
    }

-    async _claimOneTimeKeys(hsApi, deviceIdentities, log) {
+    async _claimOneTimeKeys(hsApi: HomeServerApi, deviceIdentities: DeviceIdentity[], log: ILogItem): Promise<EncryptionTarget[]> {
        // create a Map<userId, Map<deviceId, deviceIdentity>>
        const devicesByUser = groupByWithCreator(deviceIdentities,
-            device => device.userId,
-            () => new Map(),
-            (deviceMap, device) => deviceMap.set(device.deviceId, device)
+            (device: DeviceIdentity) => device.userId,
+            (): Map<string, DeviceIdentity> => new Map(),
+            (deviceMap: Map<string, DeviceIdentity>, device: DeviceIdentity) => deviceMap.set(device.deviceId, device)
        );
        const oneTimeKeys = Array.from(devicesByUser.entries()).reduce((usersObj, [userId, deviceMap]) => {
            usersObj[userId] = Array.from(deviceMap.values()).reduce((devicesObj, device) => {
@ -188,12 +214,12 @@ export class Encryption {
        if (Object.keys(claimResponse.failures).length) {
            log.log({l: "failures", servers: Object.keys(claimResponse.failures)}, log.level.Warn);
        }
-        const userKeyMap = claimResponse?.["one_time_keys"];
+        const userKeyMap = claimResponse?.["one_time_keys"] as ClaimedOTKResponse;
        return this._verifyAndCreateOTKTargets(userKeyMap, devicesByUser, log);
    }

-    _verifyAndCreateOTKTargets(userKeyMap, devicesByUser, log) {
-        const verifiedEncryptionTargets = [];
+    _verifyAndCreateOTKTargets(userKeyMap: ClaimedOTKResponse, devicesByUser: Map<string, Map<string, DeviceIdentity>>, log: ILogItem): EncryptionTarget[] {
+        const verifiedEncryptionTargets: EncryptionTarget[] = [];
        for (const [userId, userSection] of Object.entries(userKeyMap)) {
            for (const [deviceId, deviceSection] of Object.entries(userSection)) {
                const [firstPropName, keySection] = Object.entries(deviceSection)[0];
@ -202,7 +228,7 @@ export class Encryption {
                    const device = devicesByUser.get(userId)?.get(deviceId);
                    if (device) {
                        const isValidSignature = verifyEd25519Signature(
-                            this._olmUtil, userId, deviceId, device.ed25519Key, keySection, log);
+                            this.olmUtil, userId, deviceId, device.ed25519Key, keySection, log);
                        if (isValidSignature) {
                            const target = EncryptionTarget.fromOTK(device, keySection.key);
                            verifiedEncryptionTargets.push(target);
@ -214,8 +240,8 @@ export class Encryption {
        return verifiedEncryptionTargets;
    }

-    async _loadSessions(encryptionTargets) {
-        const txn = await this._storage.readTxn([this._storage.storeNames.olmSessions]);
+    async _loadSessions(encryptionTargets: EncryptionTarget[]): Promise<void> {
+        const txn = await this.storage.readTxn([this.storage.storeNames.olmSessions]);
        // given we run loading in parallel, there might still be some
        // storage requests that will finish later once one has failed.
        // those should not allocate a session anymore.
@ -223,10 +249,10 @@ export class Encryption {
        try {
            await Promise.all(encryptionTargets.map(async encryptionTarget => {
                const sessionEntry = await txn.olmSessions.get(
-                    encryptionTarget.device.curve25519Key, encryptionTarget.sessionId);
+                    encryptionTarget.device.curve25519Key, encryptionTarget.sessionId!);
                if (sessionEntry && !failed) {
-                    const olmSession = new this._olm.Session();
-                    olmSession.unpickle(this._pickleKey, sessionEntry.session);
+                    const olmSession = new this.olm.Session();
+                    olmSession.unpickle(this.pickleKey, sessionEntry.session);
                    encryptionTarget.session = olmSession;
                }
            }));
@ -240,12 +266,12 @@ export class Encryption {
        }
    }

-    async _storeSessions(encryptionTargets, timestamp) {
-        const txn = await this._storage.readWriteTxn([this._storage.storeNames.olmSessions]);
+    async _storeSessions(encryptionTargets: EncryptionTarget[], timestamp: number): Promise<void> {
+        const txn = await this.storage.readWriteTxn([this.storage.storeNames.olmSessions]);
        try {
            for (const target of encryptionTargets) {
                const sessionEntry = createSessionEntry(
-                    target.session, target.device.curve25519Key, timestamp, this._pickleKey);
+                    target.session!, target.device.curve25519Key, timestamp, this.pickleKey);
                txn.olmSessions.set(sessionEntry);
            }
        } catch (err) {
@ -261,23 +287,24 @@ export class Encryption {
 // (and later converted to a session) in case of a new session
 // or an existing session
 class EncryptionTarget {
-    constructor(device, oneTimeKey, sessionId) {
-        this.device = device;
-        this.oneTimeKey = oneTimeKey;
-        this.sessionId = sessionId;
-        // an olmSession, should probably be called olmSession
-        this.session = null;
-    }
+    
+    public session: Olm.Session | null = null;

-    static fromOTK(device, oneTimeKey) {
+    constructor(
+        public readonly device: DeviceIdentity, 
+        public readonly oneTimeKey: string | null,
+        public readonly sessionId: string | null
+    ) {}
+
+    static fromOTK(device: DeviceIdentity, oneTimeKey: string): EncryptionTarget {
        return new EncryptionTarget(device, oneTimeKey, null);
    }

-    static fromSessionId(device, sessionId) {
+    static fromSessionId(device: DeviceIdentity, sessionId: string): EncryptionTarget {
        return new EncryptionTarget(device, null, sessionId);
    }

-    dispose() {
+    dispose(): void {
        if (this.session) {
            this.session.free();
        }
@ -285,8 +312,8 @@ class EncryptionTarget {
 }

 class EncryptedMessage {
-    constructor(content, device) {
-        this.content = content;
-        this.device = device;
-    }
+    constructor(
+        public readonly content: OlmEncryptedMessageContent,
+        public readonly device: DeviceIdentity
+    ) {}
 }
--- a/src/matrix/e2ee/olm/Session.ts
+++ b/src/matrix/e2ee/olm/Session.ts
@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export function createSessionEntry(olmSession, senderKey, timestamp, pickleKey) {
+import type {OlmSessionEntry} from "../../storage/idb/stores/OlmSessionStore";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;
+
+export function createSessionEntry(olmSession: Olm.Session, senderKey: string, timestamp: number, pickleKey: string): OlmSessionEntry {
    return {
        session: olmSession.pickle(pickleKey),
        sessionId: olmSession.session_id(),
@ -24,35 +28,38 @@ export function createSessionEntry(olmSession, senderKey, timestamp, pickleKey)
 }

 export class Session {
-    constructor(data, pickleKey, olm, isNew = false) {
-        this.data = data;
-        this._olm = olm;
-        this._pickleKey = pickleKey;
-        this.isNew = isNew;
+    public isModified: boolean;
+
+    constructor(
+        public readonly data: OlmSessionEntry,
+        private readonly pickleKey: string,
+        private readonly olm: Olm,
+        public isNew: boolean = false
+    ) {
        this.isModified = isNew;
    }

-    static create(senderKey, olmSession, olm, pickleKey, timestamp) {
+    static create(senderKey: string, olmSession: Olm.Session, olm: Olm, pickleKey: string, timestamp: number): Session {
        const data = createSessionEntry(olmSession, senderKey, timestamp, pickleKey);
        return new Session(data, pickleKey, olm, true);
    }

-    get id() {
+    get id(): string {
        return this.data.sessionId;
    }

-    load() {
-        const session = new this._olm.Session();
-        session.unpickle(this._pickleKey, this.data.session);
+    load(): Olm.Session {
+        const session = new this.olm.Session();
+        session.unpickle(this.pickleKey, this.data.session);
        return session;
    }

-    unload(olmSession) {
+    unload(olmSession: Olm.Session): void {
        olmSession.free();
    }

-    save(olmSession) {
-        this.data.session = olmSession.pickle(this._pickleKey);
+    save(olmSession: Olm.Session): void {
+        this.data.session = olmSession.pickle(this.pickleKey);
        this.isModified = true;
    }
 }
--- a/src/matrix/e2ee/olm/types.ts
+++ b/src/matrix/e2ee/olm/types.ts
@ -0,0 +1,48 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const enum OlmPayloadType {
+    PreKey = 0,
+    Normal = 1
+}
+
+export type OlmMessage = {
+    type?: OlmPayloadType,
+    body?: string
+}
+
+export type OlmEncryptedMessageContent = {
+    algorithm?: "m.olm.v1.curve25519-aes-sha2"
+    sender_key?: string,
+    ciphertext?: {
+        [deviceCurve25519Key: string]: OlmMessage
+    }
+}
+
+export type OlmEncryptedEvent = {
+    type?: "m.room.encrypted",
+    content?: OlmEncryptedMessageContent
+    sender?: string
+}
+
+export type OlmPayload = {
+    type?: string;
+    content?: Record<string, any>;
+    sender?: string;
+    recipient?: string;
+    recipient_keys?: {ed25519?: string};
+    keys?: {ed25519?: string};
+}
--- a/src/matrix/net/RequestScheduler.ts
+++ b/src/matrix/net/RequestScheduler.ts
@ -27,8 +27,8 @@ class Request implements IHomeServerRequest {
    public readonly args: any[];
    private responseResolve: (result: any) => void;
    public responseReject: (error: Error) => void;
-    private responseCodeResolve: (result: any) => void;
-    private responseCodeReject: (result: any) => void;
+    private responseCodeResolve?: (result: any) => void;
+    private responseCodeReject?: (result: any) => void;
    private _requestResult?: IHomeServerRequest;
    private readonly _responsePromise: Promise<any>;
    private _responseCodePromise: Promise<any>;
@ -73,7 +73,7 @@ class Request implements IHomeServerRequest {
        const response = await this._requestResult?.response();
        this.responseResolve(response);
        const responseCode = await this._requestResult?.responseCode();
-        this.responseCodeResolve(responseCode);
+        this.responseCodeResolve?.(responseCode);
    }

    get requestResult() {
--- a/src/matrix/registration/Registration.ts
+++ b/src/matrix/registration/Registration.ts
@ -18,6 +18,7 @@ import type {HomeServerApi} from "../net/HomeServerApi";
 import type {BaseRegistrationStage} from "./stages/BaseRegistrationStage";
 import {DummyAuth} from "./stages/DummyAuth";
 import {TermsAuth} from "./stages/TermsAuth";
+import {TokenAuth} from "./stages/TokenAuth";
 import type {
    AccountDetails,
    RegistrationFlow,
@ -108,6 +109,9 @@ export class Registration {
                return new DummyAuth(session, params?.[type]);
            case "m.login.terms":
                return new TermsAuth(session, params?.[type]);
+            case "org.matrix.msc3231.login.registration_token":
+            case "m.login.registration_token":
+                return new TokenAuth(session, params?.[type], type);
            default:
                throw new Error(`Unknown stage: ${type}`);
        }
--- a/src/matrix/registration/stages/TokenAuth.ts
+++ b/src/matrix/registration/stages/TokenAuth.ts
@ -0,0 +1,48 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {AuthenticationData, RegistrationParams} from "../types";
+import {BaseRegistrationStage} from "./BaseRegistrationStage";
+
+export class TokenAuth extends BaseRegistrationStage {
+    private _token?: string;
+    private readonly _type: string;
+
+    constructor(session: string, params: RegistrationParams | undefined, type: string) {
+        super(session, params);
+        this._type = type;
+    }
+
+
+    generateAuthenticationData(): AuthenticationData {
+        if (!this._token) {
+            throw new Error("No token provided for TokenAuth");
+        }
+        return {
+            session: this._session,
+            type: this._type,
+            token: this._token,
+        };    
+    }
+
+    setToken(token: string) {
+        this._token = token;
+    }
+
+    get type(): string {
+        return this._type;
+    }
+}
--- a/src/matrix/room/members/MemberList.js
+++ b/src/matrix/room/members/MemberList.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ObservableMap} from "../../../observable/map/ObservableMap.js";
+import {ObservableMap} from "../../../observable/map/ObservableMap";
 import {RetainedValue} from "../../../utils/RetainedValue";

 export class MemberList extends RetainedValue {
--- a/src/matrix/room/timeline/Timeline.js
+++ b/src/matrix/room/timeline/Timeline.js
@ -24,7 +24,6 @@ import {RoomMember} from "../members/RoomMember.js";
 import {getRelation, ANNOTATION_RELATION_TYPE} from "./relations.js";
 import {REDACTION_TYPE} from "../common";
 import {NonPersistedEventEntry} from "./entries/NonPersistedEventEntry.js";
-import {DecryptionSource} from "../../e2ee/common.js";
 import {EVENT_TYPE as MEMBER_EVENT_TYPE} from "../members/RoomMember.js";

 export class Timeline {
--- a/src/matrix/storage/idb/stores/OlmSessionStore.ts
+++ b/src/matrix/storage/idb/stores/OlmSessionStore.ts
@ -24,19 +24,19 @@ function decodeKey(key: string): { senderKey: string, sessionId: string } {
    return {senderKey, sessionId};
 }

-interface OlmSession {
+export type OlmSessionEntry = {
    session: string;
    sessionId: string;
    senderKey: string;
    lastUsed: number;
 }

-type OlmSessionEntry = OlmSession & { key: string };
+type OlmSessionStoredEntry = OlmSessionEntry & { key: string };

 export class OlmSessionStore {
-    private _store: Store<OlmSessionEntry>;
+    private _store: Store<OlmSessionStoredEntry>;

-    constructor(store: Store<OlmSessionEntry>) {
+    constructor(store: Store<OlmSessionStoredEntry>) {
        this._store = store;
    }

@ -55,20 +55,20 @@ export class OlmSessionStore {
        return sessionIds;
    }

-    getAll(senderKey: string): Promise<OlmSession[]> {
+    getAll(senderKey: string): Promise<OlmSessionEntry[]> {
        const range = this._store.IDBKeyRange.lowerBound(encodeKey(senderKey, ""));
        return this._store.selectWhile(range, session => {
            return session.senderKey === senderKey;
        });
    }

-    get(senderKey: string, sessionId: string): Promise<OlmSession | undefined> {
+    get(senderKey: string, sessionId: string): Promise<OlmSessionEntry | undefined> {
        return this._store.get(encodeKey(senderKey, sessionId));
    }

-    set(session: OlmSession): void {
-        (session as OlmSessionEntry).key = encodeKey(session.senderKey, session.sessionId);
-        this._store.put(session as OlmSessionEntry);
+    set(session: OlmSessionEntry): void {
+        (session as OlmSessionStoredEntry).key = encodeKey(session.senderKey, session.sessionId);
+        this._store.put(session as OlmSessionStoredEntry);
    }

    remove(senderKey: string, sessionId: string): void {
--- a/src/observable/index.js
+++ b/src/observable/index.js
@ -18,14 +18,14 @@ import {SortedMapList} from "./list/SortedMapList.js";
 import {FilteredMap} from "./map/FilteredMap.js";
 import {MappedMap} from "./map/MappedMap.js";
 import {JoinedMap} from "./map/JoinedMap.js";
-import {BaseObservableMap} from "./map/BaseObservableMap.js";
+import {BaseObservableMap} from "./map/BaseObservableMap";
 // re-export "root" (of chain) collections
 export { ObservableArray } from "./list/ObservableArray";
 export { SortedArray } from "./list/SortedArray";
 export { MappedList } from "./list/MappedList";
 export { AsyncMappedList } from "./list/AsyncMappedList";
 export { ConcatList } from "./list/ConcatList";
-export { ObservableMap } from "./map/ObservableMap.js";
+export { ObservableMap } from "./map/ObservableMap";

 // avoid circular dependency between these classes
 // and BaseObservableMap (as they extend it)
--- a/src/observable/list/SortedMapList.js
+++ b/src/observable/list/SortedMapList.js
@ -133,7 +133,7 @@ export class SortedMapList extends BaseObservableList {
    }
 }

-import {ObservableMap} from "../map/ObservableMap.js";
+import {ObservableMap} from "../map/ObservableMap";

 export function tests() {
    return {
--- a/src/observable/map/ApplyMap.js
+++ b/src/observable/map/ApplyMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";

 export class ApplyMap extends BaseObservableMap {
    constructor(source, apply) {
--- a/src/observable/map/BaseObservableMap.ts
+++ b/src/observable/map/BaseObservableMap.ts
@ -16,7 +16,14 @@ limitations under the License.

 import {BaseObservable} from "../BaseObservable";

-export class BaseObservableMap extends BaseObservable {
+export interface IMapObserver<K, V> {
+    onReset(): void;
+    onAdd(key: K, value:V): void;
+    onUpdate(key: K, value: V, params: any): void;
+    onRemove(key: K, value: V): void
+}
+
+export abstract class BaseObservableMap<K, V> extends BaseObservable<IMapObserver<K, V>> {
    emitReset() {
        for(let h of this._handlers) {
            h.onReset();
@ -24,15 +31,15 @@ export class BaseObservableMap extends BaseObservable {
    }
    // we need batch events, mostly on index based collection though?
    // maybe we should get started without?
-    emitAdd(key, value) {
+    emitAdd(key: K, value: V) {
        for(let h of this._handlers) {
            h.onAdd(key, value);
        }
    }

-    emitUpdate(key, value, ...params) {
+    emitUpdate(key, value, params) {
        for(let h of this._handlers) {
-            h.onUpdate(key, value, ...params);
+            h.onUpdate(key, value, params);
        }
    }

@ -42,16 +49,7 @@ export class BaseObservableMap extends BaseObservable {
        }
    }

-    [Symbol.iterator]() {
-        throw new Error("unimplemented");
-    }
-
-    get size() {
-        throw new Error("unimplemented");
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    get(key) {
-        throw new Error("unimplemented");
-    }
+    abstract [Symbol.iterator](): Iterator<[K, V]>;
+    abstract get size(): number;
+    abstract get(key: K): V | undefined;
 }
--- a/src/observable/map/FilteredMap.js
+++ b/src/observable/map/FilteredMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";

 export class FilteredMap extends BaseObservableMap {
    constructor(source, filter) {
@ -166,7 +166,7 @@ class FilterIterator {
    }
 }

-import {ObservableMap} from "./ObservableMap.js";
+import {ObservableMap} from "./ObservableMap";
 export function tests() {
    return {
        "filter preloaded list": assert => {
--- a/src/observable/map/JoinedMap.js
+++ b/src/observable/map/JoinedMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";

 export class JoinedMap extends BaseObservableMap {
    constructor(sources) {
@ -191,7 +191,7 @@ class SourceSubscriptionHandler {
 }


-import { ObservableMap } from "./ObservableMap.js";
+import { ObservableMap } from "./ObservableMap";

 export function tests() {

--- a/src/observable/map/LogMap.js
+++ b/src/observable/map/LogMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";

 export class LogMap extends BaseObservableMap {
    constructor(source, log) {
--- a/src/observable/map/MappedMap.js
+++ b/src/observable/map/MappedMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";
 /*
 so a mapped value can emit updates on it's own with this._emitSpontaneousUpdate that is passed in the mapping function
 how should the mapped value be notified of an update though? and can it then decide to not propagate the update?
--- a/src/observable/map/ObservableMap.ts
+++ b/src/observable/map/ObservableMap.ts
@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableMap} from "./BaseObservableMap.js";
+import {BaseObservableMap} from "./BaseObservableMap";

-export class ObservableMap extends BaseObservableMap {
-    constructor(initialValues) {
+export class ObservableMap<K, V> extends BaseObservableMap<K, V> {
+    private readonly _values: Map<K, V>;
+
+    constructor(initialValues?: (readonly [K, V])[]) {
        super();
        this._values = new Map(initialValues);
    }

-    update(key, params) {
+    update(key: K, params?: any): boolean {
        const value = this._values.get(key);
        if (value !== undefined) {
            // could be the same value, so it's already updated
@ -34,7 +36,7 @@ export class ObservableMap extends BaseObservableMap {
        return false;   // or return existing value?
    }

-    add(key, value) {
+    add(key: K, value: V): boolean {
        if (!this._values.has(key)) {
            this._values.set(key, value);
            this.emitAdd(key, value);
@ -43,7 +45,7 @@ export class ObservableMap extends BaseObservableMap {
        return false;   // or return existing value?
    }

-    remove(key) {
+    remove(key: K): boolean {
        const value = this._values.get(key);
        if (value !== undefined) {
            this._values.delete(key);
@ -54,39 +56,39 @@ export class ObservableMap extends BaseObservableMap {
        }
    }

-    set(key, value) {
+    set(key: K, value: V): boolean {
        if (this._values.has(key)) {
            // We set the value here because update only supports inline updates
            this._values.set(key, value);
-            return this.update(key);
+            return this.update(key, undefined);
        }    
        else {
            return this.add(key, value);
        }
    }

-    reset() {
+    reset(): void {
        this._values.clear();
        this.emitReset();
    }

-    get(key) {
+    get(key: K): V | undefined {
        return this._values.get(key);
    }

-    get size() {
+    get size(): number {
        return this._values.size;
    }

-    [Symbol.iterator]() {
+    [Symbol.iterator](): Iterator<[K, V]> {
        return this._values.entries();
    }

-    values() {
+    values(): Iterator<V> {
        return this._values.values();
    }

-    keys() {
+    keys(): Iterator<K> {
        return this._values.keys();
    }
 }
@ -105,13 +107,16 @@ export function tests() {

        test_add(assert) {
            let fired = 0;
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {value: number}>();
            map.subscribe({
                onAdd(key, value) {
                    fired += 1;
                    assert.equal(key, 1);
                    assert.deepEqual(value, {value: 5}); 
-                }
+                },
+                onUpdate() {},
+                onRemove() {},
+                onReset() {}
            });
            map.add(1, {value: 5});
            assert.equal(map.size, 1);
@ -120,7 +125,7 @@ export function tests() {

        test_update(assert) {
            let fired = 0;
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {number: number}>();
            const value = {number: 5};
            map.add(1, value);
            map.subscribe({
@ -129,7 +134,10 @@ export function tests() {
                    assert.equal(key, 1);
                    assert.deepEqual(value, {number: 6}); 
                    assert.equal(params, "test");
-                }
+                },
+                onAdd() {},
+                onRemove() {},
+                onReset() {}
            });
            value.number = 6;
            map.update(1, "test");
@ -138,9 +146,12 @@ export function tests() {

        test_update_unknown(assert) {
            let fired = 0;
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {number: number}>();
            map.subscribe({
-                onUpdate() { fired += 1; }
+                onUpdate() { fired += 1; },
+                onAdd() {},
+                onRemove() {},
+                onReset() {}
            });
            const result = map.update(1);
            assert.equal(fired, 0);
@ -149,7 +160,7 @@ export function tests() {

        test_set(assert) {
            let add_fired = 0, update_fired = 0;
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {value: number}>();
            map.subscribe({
                onAdd(key, value) {
                    add_fired += 1;
@ -160,7 +171,9 @@ export function tests() {
                    update_fired += 1;
                    assert.equal(key, 1);
                    assert.deepEqual(value, {value: 7}); 
-                }
+                },
+                onRemove() {},
+                onReset() {}
            });
            // Add
            map.set(1, {value: 5});
@ -174,7 +187,7 @@ export function tests() {

        test_remove(assert) {
            let fired = 0;
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {value: number}>();
            const value = {value: 5};
            map.add(1, value);
            map.subscribe({
@ -182,7 +195,10 @@ export function tests() {
                    fired += 1;
                    assert.equal(key, 1);
                    assert.deepEqual(value, {value: 5}); 
-                }
+                },
+                onAdd() {},
+                onUpdate() {},
+                onReset() {}
            });
            map.remove(1);
            assert.equal(map.size, 0);
@ -190,8 +206,8 @@ export function tests() {
        },

        test_iterate(assert) {
-            const results = [];
-            const map = new ObservableMap();
+            const results: any[] = [];
+            const map = new ObservableMap<number, {number: number}>();
            map.add(1, {number: 5});
            map.add(2, {number: 6});
            map.add(3, {number: 7});
@ -204,7 +220,7 @@ export function tests() {
            assert.equal(results.find(([key]) => key === 3)[1].number, 7);
        },
        test_size(assert) {
-            const map = new ObservableMap();
+            const map = new ObservableMap<number, {number: number}>();
            map.add(1, {number: 5});
            map.add(2, {number: 6});
            assert.equal(map.size, 2);
--- a/src/platform/web/LegacyPlatform.js
+++ b/src/platform/web/LegacyPlatform.js
@ -19,6 +19,6 @@ import {hkdf} from "../../utils/crypto/hkdf";

 import {Platform as ModernPlatform} from "./Platform.js";

-export function Platform(container, assetPaths, config, options = null) {
-    return new ModernPlatform(container, assetPaths, config, options, {aesjs, hkdf});
+export function Platform({ container, assetPaths, config, configURL, options = null }) {
+    return new ModernPlatform({ container, assetPaths, config, configURL, options, cryptoExtras: { aesjs, hkdf }});
 }
--- a/Show More
+++ b/Show More