diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 1c1111f7..3dad74ae 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -5,7 +5,7 @@ > Every PR must have a linked issue > that a maintainer has reviewed and approved **before you started writing code**. > PRs that don't meet this requirement will not be reviewed. -> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) for ElementCall decided for this approach. +> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) for ElementCall decided for this approach. ## Content @@ -39,7 +39,7 @@ Uncomment the markdown table below and fill in the last line: ## Checklist - [ ] A linked, pre-approved issue exists for this feature or UI change. -- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) in full. +- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) in full. - [ ] Pull request includes screenshots or videos for any UI changes. - [ ] Tests written for new code (and existing touched code where feasible). - [ ] Linter and other CI checks pass. diff --git a/.github/workflows/build-element-call.yaml b/.github/workflows/build-element-call.yaml index f4071975..b35948d7 100644 --- a/.github/workflows/build-element-call.yaml +++ b/.github/workflows/build-element-call.yaml @@ -44,7 +44,9 @@ jobs: node-version-file: ".node-version" - name: Install dependencies # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present) - run: "pnpm install --frozen-lockfile --ignore-pnpmfile" + run: "scripts/layered.sh --ignore-pnpmfile" + env: + PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }} - name: Build Element Call run: pnpm run build:"$PACKAGE":"$BUILD_MODE" env: diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index ba7cde51..3fe10723 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -6,7 +6,7 @@ on: - opened - labeled push: - branches: [livekit, full-mesh] + branches: [main] jobs: build_full_element_call: # Use the full package vite build @@ -22,8 +22,8 @@ jobs: SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} deploy_develop: - # Deploy livekit branch to call.element.dev after build completes - if: github.ref == 'refs/heads/livekit' + # Deploy main branch to call.element.dev after build completes + if: github.ref == 'refs/heads/main' needs: build_full_element_call runs-on: ubuntu-latest steps: @@ -43,8 +43,8 @@ jobs: } }) docker_for_develop: - # Build docker and publish docker for livekit branch after build completes - if: github.ref == 'refs/heads/livekit' + # Build docker and publish docker for main branch after build completes + if: github.ref == 'refs/heads/main' needs: build_full_element_call permissions: contents: write diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index ad92e7d1..c59ba402 100644 --- a/.github/workflows/lint.yaml +++ b/.github/workflows/lint.yaml @@ -1,6 +1,12 @@ name: Lint, format & type check on: pull_request: {} + workflow_call: + inputs: + matrix-js-sdk-sha: + type: string + required: false + description: The matrix-js-sdk commit to build against instead of the locked one jobs: lint: name: Lint, format & type check @@ -9,6 +15,8 @@ jobs: - name: Checkout code uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 with: + # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here. + repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }} persist-credentials: false - name: Enable Corepack run: corepack enable @@ -19,7 +27,10 @@ jobs: node-version-file: ".node-version" - name: Install dependencies # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present) - run: "pnpm install --frozen-lockfile --ignore-pnpmfile" + run: "scripts/layered.sh --ignore-pnpmfile" + env: + PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }} + JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }} - name: Formatting run: "pnpm run format:check" - name: i18n diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 3f86f093..5e2703f6 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -3,6 +3,25 @@ on: pull_request: {} push: branches: [main] + workflow_call: + inputs: + matrix-js-sdk-sha: + type: string + required: false + description: The matrix-js-sdk commit to build against instead of the locked one + disable_coverage: + type: boolean + required: false + default: false + description: Skip generating and uploading coverage reports + disable_e2e_tests: + type: boolean + required: false + default: false + description: Skip the end-to-end tests + secrets: + CODECOV_TOKEN: + required: false jobs: vitest: name: Run unit tests @@ -11,6 +30,8 @@ jobs: - name: Checkout code uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 with: + # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here. + repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }} persist-credentials: false - name: Enable Corepack run: corepack enable @@ -21,7 +42,10 @@ jobs: node-version-file: ".node-version" - name: Install dependencies # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present) - run: "pnpm install --frozen-lockfile --ignore-pnpmfile" + run: "scripts/layered.sh --ignore-pnpmfile" + env: + PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }} + JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }} - name: Get Playwright version run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV - name: Cache Playwright binaries @@ -35,8 +59,11 @@ jobs: if: steps.playwright-cache.outputs.cache-hit != 'true' run: pnpm playwright install --with-deps - name: Vitest - run: "pnpm run test:coverage" + run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE" + env: + ENABLE_COVERAGE: ${{ !inputs.disable_coverage }} - name: Upload to codecov + if: ${{ !inputs.disable_coverage }} uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7 env: CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} @@ -45,11 +72,14 @@ jobs: fail_ci_if_error: true playwright: name: Run end-to-end tests + if: ${{ !inputs.disable_e2e_tests }} timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 with: + # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here. + repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }} persist-credentials: false - name: Enable Corepack run: corepack enable @@ -59,7 +89,10 @@ jobs: node-version-file: ".node-version" - name: Install dependencies # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present) - run: pnpm install --frozen-lockfile --ignore-pnpmfile + run: scripts/layered.sh --ignore-pnpmfile + env: + PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }} + JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }} - name: Get Playwright version run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV - name: Cache Playwright binaries diff --git a/.gitignore b/.gitignore index 5cbed94e..17cc34ef 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ public/config.json backend/synapse_tmp/* backend/synapse_tmp_othersite/* /coverage + +# Transient agent scratch files +/agent-workspace/ config.json # Yarn @@ -39,3 +42,6 @@ yarn-error.log *storybook.log storybook-static .pnpm-store/ + +# Nested checkout made by scripts/layered.sh +/matrix-js-sdk/ diff --git a/.oxlintrc.json b/.oxlintrc.json index d06f2a47..c89ab8a2 100644 --- a/.oxlintrc.json +++ b/.oxlintrc.json @@ -39,6 +39,17 @@ "jsdoc/check-property-names": "error", "jsdoc/require-param-description": "warn", "react/display-name": "error", + // TODO: These React Compiler-based rules joined oxlint's correctness + // category in v1.81 and flag many pre-existing patterns, including hooks + // like useLatest/useInitial/useReactiveState that intentionally access + // refs during render. Re-evaluate them when adopting the React Compiler. + "react/immutability": "off", + "react/no-deriving-state-in-effects": "off", + "react/preserve-manual-memoization": "off", + "react/refs": "off", + "react/set-state-in-effect": "off", + "react/static-components": "off", + "react/use-memo": "off", // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness. // "rxjs/no-exposed-subjects": "error", // "rxjs/finnish": [ diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 757c1f8a..5b841b82 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,14 +7,16 @@ Please see LICENSE in the repository root for full details. import type { Preview } from "@storybook/react-vite"; import { TooltipProvider } from "@vector-im/compound-web"; -import i18n from "i18next"; import { logger } from "matrix-js-sdk/lib/logger"; import EN from "../locales/en/app.json"; import { initReactI18next } from "react-i18next"; +import { i18n } from "../src/utils/i18n"; import "../src/index.css"; -// Bare-minimum i18n config +// Bare-minimum i18n config. +// Unlike the app, stories register the instance as react-i18next's default +// rather than wrapping every story in an . i18n .use(initReactI18next) .init({ diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000..a47c4163 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,56 @@ +# AGENTS.md — Element Call + +MatrixRTC (MSC4143) + LiveKit video calling, shipped standalone, as a widget in +Element Web and Element X, as embedded packages, and as a React component in a +host's page. It is the MatrixRTC reference implementation. + +## Non-negotiables + +- Features and UI changes need a pre-approved issue. No issue, no review. +- Exactly one `PR-*` label per PR. CI enforces it; it drives the changelog. +- New behaviour ships with unit tests, a story if it renders, and an e2e spec if it + is user-facing. All three. +- Reuse an existing component. If you genuinely cannot, say so in the PR body and + name what you rejected — never add a new one silently. +- Nothing reads the page. No `window.location`, `document.body`, `window.inner*`, + `@media`, global `i18next` or the `widget` global — take it from a provider. +- The change works standalone, as a widget and as a component. Say what you checked. +- Every gate below is green before you push. +- Hand off after the first implementation, before the quality pass. Then commit on + the user's word where the setup allows it, or hand them the message. + +## Read before you + +| … | … | +| -------------------------------- | ---------------------------------------------------------- | +| start a task of any size | [docs/agents/workflow.md](docs/agents/workflow.md) | +| touch call logic or a view model | [docs/agents/architecture.md](docs/agents/architecture.md) | +| write any code | [docs/agents/code-style.md](docs/agents/code-style.md) | +| write a test, story or e2e spec | [docs/agents/testing.md](docs/agents/testing.md) | +| open a PR | [CONTRIBUTING.md](CONTRIBUTING.md) | +| implement from a feature spec | [FEATURES_SPEC/AGENTS.md](FEATURES_SPEC/AGENTS.md) | + +## Gates + +```sh +pnpm lint # tsc, oxlint, knip, component externals +pnpm format # oxfmt +pnpm test # vitest: unit and storybook projects +pnpm i18n:check +``` + +`knip` fails on dead code; a file deliberately inert ahead of its consumer goes in +`knip.ts` `ignoreFiles` with a reason. + +## A good PR + +- One slice, under ~400 changed lines, green on its own, linked to its issue. +- View model + marble tests, thin view, a story per state, an e2e spec. +- Any new shared component called out explicitly, with why nothing existing fit. +- Template filled for real: what, why, before/after screenshots, repro steps. +- Comments only where the code can't give the reason — see + [code-style.md](docs/agents/code-style.md#comments). +- Anything that redraws continuously — an animation frame, a stream — says what it + costs, or better, counts the redraws in a test. +- Branch `/`. Plain imperative commit subjects, no prefixes. +- Once review starts, fix forward. Never force-push a regeneration over a review. diff --git a/README.md b/README.md index ecbabcf2..5f1ed6bd 100644 --- a/README.md +++ b/README.md @@ -34,15 +34,16 @@ You can find the latest development version continuously deployed to ## ✨ Key Features ✅ **Decentralized & Federated** – No central authority; works across Matrix -homeservers. -✅ **End-to-End Encrypted** – Secure and private calls. -✅ **Standalone & Widget Mode** – Use as an independent app or embed in Matrix -clients. -✅ **WebRTC-based** – No additional software required. +homeservers. +✅ **End-to-End Encrypted** – Secure and private calls. +✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed +in Matrix clients as a widget, or (experimentally) mount it as a React component +inside your own application. +✅ **WebRTC-based** – No additional software required. ✅ **Scalable with LiveKit** – Supports large meetings via SFU -([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)). +([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)). ✅ **Raise Hand** – Participants can signal when they want to speak, helping to -organize the flow of the meeting. +organize the flow of the meeting. ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding engagement and interactivity to the conversation. @@ -90,7 +91,9 @@ and voice calls within Matrix rooms. Element Call offers two packaging options: one for standalone or widget deployment, and another for seamless widget-based integration into messenger -apps. Below is an overview of each option. +apps. A third, experimental option builds it as a React component library for +applications that want to render a call inside their own page rather than in an +iframe. Below is an overview of each option. **Full Package** – Supports both **Standalone** and **Widget** mode. It is hosted as a static web page and can be accessed via a URL when used as a widget. @@ -107,6 +110,11 @@ recommended method for embedding Element Call. Element Call Embedded Package

+**Component Package (experimental)** – A library build of Element Call as a +React component, consumed as a dependency by a host application that already +has a Matrix client. See +[Element Call as a component](#element-call-as-a-component-experimental) below. + For more details on the packages, see the [Embedded vs. Standalone Guide](./docs/embedded_standalone.md). @@ -213,6 +221,113 @@ See also: - [Developing with linked packages](./docs/linking.md) +#### Element Call as a component (experimental) + +Element Call can also be embedded directly into another React application +rather than being loaded in an iframe as a widget. `pnpm build:component` +builds it as a library into `component/dist` (the bundle, its stylesheet and +type declarations), and + +```sh +pnpm dev:component +``` + +serves a harness on port 3001 that stands in for such an application: it signs +in twice against the development backend and shows two calls side by side, in +resizable boxes, with page furniture of its own around them. Use it to see how +Element Call behaves when it does not own the page — the size it is given, +whether it stays inside its container, and what it says to its host, which is +logged along the bottom. The harness is served with the same development +certificate as the app, so unless the development CA is trusted, the browser +needs a certificate exception for `https://localhost:3001` as well (see the +note under [Backend](#backend)). It reads the same `public/config.json` as +`pnpm dev` if one exists, and runs with Element Call's defaults otherwise. + +The call lays itself out for the size of the element it is mounted in, not the +window: a host that shrinks the container to a corner of its page gets the +picture-in-picture layout, just as a host that shrank the whole iframe used to. +The breakpoints in the stylesheets the component uses are +`@container element-call` queries against its root element for the same reason; +for the standalone app the root is the page, so they mean what the media queries +they replaced did. (The standalone-only views, such as the home and login pages, +still use plain media queries, since the component never shows them.) + +The component's stylesheet is confined to the element it is mounted in: the +build rewrites every selector so that it matches only Element Call's root or +what is inside it, with `html`, `body` and `:root` standing for that root (see +`component/build/scopeStylesToRoot.ts`). A host's own page keeps its styles, +and Element Call brings its own fonts and design tokens along. + +The component speaks every language the app does. English is bundled in; the +other locales are split into chunks the host's bundler loads the first time +they are needed. It starts in the browser's language, and follows the host's +own language setting through the `language` prop (`supportedLanguages` lists +the tags it accepts, and anything else falls back to its base language or to +English). The `theme` prop works the same way and takes the same values as the +widget's `theme` URL parameter: `light`, `dark`, `light-high-contrast` or +`dark-high-contrast`. Both can change while a call is running without +disturbing it. + +A host must call and await `initializeElementCall(config)` once before +rendering the component: it loads the `Intl` polyfills, applies the +deployment-wide `config.json`-style configuration and sets up translations. +The component itself takes the host's `client` and the `roomId` to call in, an +`intent` saying what the user asked for (which decides whether to show the +lobby, ring, and so on), an optional `config` overriding what the intent +implies, and an optional `hostBridge` through which Element Call tells the host +that the user has joined or hung up, that it wants to stay on screen, and so +on. The host makes its own requests (`join`, `hangUp`, `setDeviceMute`) through +the handle exposed on `ref`. The full API is documented in the type declarations +(`component/index.tsx` and `component/host.ts`). + +A few things differ from the widget on purpose: the component draws a solid +background rather than a gradient unless told otherwise, never offers to edit +the user's profile (the account is the host's), scopes its keyboard shortcuts to +its own root element so that several instances can share a page, and only shows +its own post-call and error screens when the host has not supplied a `close()` +callback; with one, it asks the host to unmount it instead. The +[global JS controls](./docs/controls.md) on `window` are unchanged and remain +page-wide, so with several instances on one page they apply to all of them. + +The package is not published yet. A host installs it as a git dependency on the +`component` directory of this repository, + +```json +"@element-hq/element-call-component": "github:element-hq/element-call#main&path:/component" +``` + +whose `prepare` script runs the build on install. That build needs pnpm (via +Corepack) on the host's machine, runs a full `pnpm install` of this repository, +since it inherits the `--max-old-space-size` setting of +the app build; the host's pnpm also has to allow it to run at all +(`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm +project of its own for this reason, so pnpm commands run from inside that +directory target it rather than the repository; run them from the repository +root. The host imports the component from +`@element-hq/element-call-component` and the stylesheet from +`@element-hq/element-call-component/style.css`, and has to provide `react`, +`react-dom`, `matrix-js-sdk`, `livekit-client`, `@vector-im/compound-web` and +`@vector-im/compound-design-tokens` itself, since the bundle leaves them +external. Compound's stylesheet are the host's to load too: the component shares +the host's copy of Compound, (required for example for tooltips) + +The component is large, and a host will usually load it lazily, only once a +call is shown. Everything a host needs in order to talk about a call before +then is also exported +from `@element-hq/element-call-component/api` (a small entry point that does not +load the component). + +- props and the types they are made of +- the handle +- the host bridge +- `UserIntent` +- `HeaderStyle` +- `BackgroundStyle` enums +- `configurationForIntent`, the defaults each intent implies + Import from it wherever a value such as + `BackgroundStyle.Solid` is needed on a path that must stay light; the main + entry point re-exports all of it too. + ### Backend A docker compose file `docker-compose-dev.yml` is provided to start the @@ -274,7 +389,10 @@ running Playwright by following However the Playwright tests are run, an element-call instance must be running on https://localhost:3000 (this is configured in `playwright.config.ts`) - this -is what will be tested. +is what will be tested. The tests under `playwright/component` instead drive +the component harness (`pnpm dev:component`) on https://localhost:3001, which +Playwright starts as a second web server; it is always a Vite dev server, even +when the app itself is served from Docker with `USE_DOCKER`. The local backend environment should be running for the test to work: `pnpm backend` @@ -373,7 +491,7 @@ We do this so that we can reuse the labels between repositories. ## 📝 Copyright & License -Copyright 2021-2025 New Vector Ltd +Copyright 2021-2026 New Vector Ltd This software is dual-licensed by New Vector Ltd (Element). It can be used either: diff --git a/backend/app-service-othersite.yaml b/backend/app-service-othersite.yaml new file mode 100644 index 00000000..ef2a7ada --- /dev/null +++ b/backend/app-service-othersite.yaml @@ -0,0 +1,17 @@ +id: "lk-jwt-service-othersite" +as_token: "ec_dev_as_token_othersite_0123456789ab" +hs_token: "ec_dev_hs_token_othersite_0123456789ab" +sender_localpart: "_lk_jwt_service" +namespaces: + users: + - exclusive: false + regex: "@.*:homeserver-1" # Cover all local users +# Required for Synapse to call POST /_matrix/app/v1/ping on this service. +url: "http://auth-server-1:16080" +# Enable membership look-ups via /is_joined. +io.element.msc4502.scopes: + ["urn:matrix:client:io.element.msc4502:rooms:is_joined"] +# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this +# service. +io.element.msc4512.proxy_prefix: "rtc/livekit" +io.element.msc4512.proxy_url: "http://auth-server-1:16080" diff --git a/backend/app-service.yaml b/backend/app-service.yaml new file mode 100644 index 00000000..b480df64 --- /dev/null +++ b/backend/app-service.yaml @@ -0,0 +1,17 @@ +id: "lk-jwt-service" +as_token: "ec_dev_as_token_main_0123456789ab" +hs_token: "ec_dev_hs_token_main_0123456789ab" +sender_localpart: "_lk_jwt_service" +namespaces: + users: + - exclusive: false + regex: "@.*:homeserver" # Cover all local users +# Required for Synapse to call POST /_matrix/app/v1/ping on this service. +url: "http://auth-server:6080" +# Enable membership look-ups via /is_joined. +io.element.msc4502.scopes: + ["urn:matrix:client:io.element.msc4502:rooms:is_joined"] +# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this +# service. +io.element.msc4512.proxy_prefix: "rtc/livekit" +io.element.msc4512.proxy_url: "http://auth-server:6080" diff --git a/backend/dev_homeserver-othersite.yaml b/backend/dev_homeserver-othersite.yaml index 3f4c1841..18f98650 100644 --- a/backend/dev_homeserver-othersite.yaml +++ b/backend/dev_homeserver-othersite.yaml @@ -42,6 +42,13 @@ experimental_features: msc4354_enabled: true # MatrixRTC msc4143_enabled: true + # Enable membership look-up via /is_joined. + msc4502_enabled: true + # Enable C-S & S-S request proxying for application services. + msc4512_enabled: true + +app_service_config_files: + - /data/cfg/app-service.yaml # The maximum allowed duration by which sent events can be delayed, as # per MSC4140. Must be a positive value if set. Defaults to no diff --git a/backend/dev_homeserver.yaml b/backend/dev_homeserver.yaml index e38e91e5..e99a5093 100644 --- a/backend/dev_homeserver.yaml +++ b/backend/dev_homeserver.yaml @@ -42,6 +42,13 @@ experimental_features: msc4354_enabled: true # MatrixRTC msc4143_enabled: true + # Enable membership look-up via /is_joined. + msc4502_enabled: true + # Enable C-S & S-S request proxying for application services. + msc4512_enabled: true + +app_service_config_files: + - /data/cfg/app-service.yaml # The maximum allowed duration by which sent events can be delayed, as # per MSC4140. Must be a positive value if set. Defaults to no diff --git a/backend/playwright_homeserver-othersite.yaml b/backend/playwright_homeserver-othersite.yaml index 5bce4c1d..a647b74a 100644 --- a/backend/playwright_homeserver-othersite.yaml +++ b/backend/playwright_homeserver-othersite.yaml @@ -42,6 +42,13 @@ experimental_features: msc4354_enabled: true # MatrixRTC msc4143_enabled: true + # Enable membership look-up via /is_joined. + msc4502_enabled: true + # Enable C-S & S-S request proxying for application services. + msc4512_enabled: true + +app_service_config_files: + - /data/cfg/app-service.yaml # The maximum allowed duration by which sent events can be delayed, as # per MSC4140. Must be a positive value if set. Defaults to no diff --git a/backend/playwright_homeserver.yaml b/backend/playwright_homeserver.yaml index d0439e42..8497c017 100644 --- a/backend/playwright_homeserver.yaml +++ b/backend/playwright_homeserver.yaml @@ -42,6 +42,13 @@ experimental_features: msc4354_enabled: true # MatrixRTC msc4143_enabled: true + # Enable membership look-up via /is_joined. + msc4502_enabled: true + # Enable C-S & S-S request proxying for application services. + msc4512_enabled: true + +app_service_config_files: + - /data/cfg/app-service.yaml # The maximum allowed duration by which sent events can be delayed, as # per MSC4140. Must be a positive value if set. Defaults to no diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css new file mode 100644 index 00000000..8d548404 --- /dev/null +++ b/component/ElementCall.module.css @@ -0,0 +1,51 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/* The container a host mounts us into. It fills whatever space the host gives +it, and nothing we draw may leave it. + +That takes two separate things, which are easy to mistake for one. `isolation` +gives us a stacking context, so nothing inside can be layered above the host's +own interface. Containment makes us the containing block for `position: fixed` +descendants, and clips what we paint to our own box: without it, the modal +scrim and dialog — which are positioned `fixed` and centred, since in the app +they are meant to cover the page — resolve against the viewport and appear in +the middle of the host's window rather than in the middle of the call. + +The clipping cuts both ways: a menu near the edge of a small container is +trimmed rather than overflowing into the host. That is the trade being a +component rather than a page makes. */ +.root { + display: flex; + flex-direction: column; + inline-size: 100%; + block-size: 100%; + isolation: isolate; + contain: layout paint; + position: relative; + background-color: var(--cpd-color-bg-canvas-default); + color: var(--cpd-color-text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; +} + +/* The call itself. It is a stacking context of its own, as the standalone +page's `#root` is, so that the layers the call view uses for its header, footer +and overlays stay below the modals and toasts, which are portalled into the +root and carry no layer of their own. + +What Compound floats — tooltips, menus — is not in here at all: it goes into +the host's body, as it would for any other component on the host's page, and is +styled and layered by the host's copy of Compound. */ +.content { + display: flex; + flex-direction: column; + block-size: 100%; + position: relative; + isolation: isolate; +} diff --git a/component/api.ts b/component/api.ts new file mode 100644 index 00000000..c9e7a2fd --- /dev/null +++ b/component/api.ts @@ -0,0 +1,124 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * EXPERIMENTAL + * + * What a host needs in order to talk about Element Call, without Element Call: + * the component's props and the types they are made of, the handle and the + * host bridge, the intents a call can be started with and the configuration + * each implies. + * + * This is an entry point of its own, `@element-hq/element-call-component/api`, + * so that a host can import it on a path that must stay light — a call model + * that needs `BackgroundStyle.Solid` as a value, say — and load the component + * itself, and everything it brings, only when a call is shown. The main entry + * point re-exports all of it, so a host that does not care may import + * everything from there. + * + * Nothing in here may reach anything that is not a type or a constant: the + * point of this module is what it does not import. + */ + +import type { Ref } from "react"; +import type { MatrixClient } from "matrix-js-sdk"; + +import type { UrlProperties } from "../src/UrlParams"; +import type { ElementCallHandle, ElementCallHostBridge } from "./host"; +import { + BackgroundStyle, + configurationForIntent, + HeaderStyle, + type UrlConfiguration, + UserIntent, +} from "../src/UrlConfiguration"; + +// How the host and Element Call talk to each other, and what they say +export type { ElementCallHandle, ElementCallHostBridge } from "./host"; +export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge"; +export type { JoinCallData } from "../src/widget"; +// The deployment-wide configuration, as distinct from ElementCallConfiguration +// below, which is per call +export type { ConfigOptions } from "../src/config/ConfigOptions"; +// The values that appear in ElementCallConfiguration and in the intent, and +// what each intent means by default +export { + BackgroundStyle, + configurationForIntent, + HeaderStyle, + type UrlConfiguration, + UserIntent, +}; + +/** + * How Element Call should behave. Everything is optional; anything left out + * takes the default that {@link ElementCallProps.intent} implies. + * + * This is the behaviour a widget can be configured with through its URL, plus + * the one fact about the call a host has a say in here, the background. The + * rest of what a widget's URL carries — who the user is, how to reach the + * homeserver, where to report analytics, the shared secret of a room that is + * encrypted with one — a component host supplies by other routes, or not at + * all; and what can change while the call is running, the theme and the + * language, is a prop of its own. + */ +export type ElementCallConfiguration = Partial & + Partial>; + +export interface ElementCallProps { + /** + * The client to place the call with. Element Call does not authenticate + * anyone or manage a session of its own; this one is the host's. + */ + client: MatrixClient; + /** The room to call in. The host's client must already know about it. */ + roomId: string; + /** + * What the user asked for — whether they started the call or joined one that + * was already running, and whether it is a call in a group or a DM. Element + * Call decides what each of those means: whether to show the lobby first, + * whether to ring, and so on. + * + * Defaults to joining an existing group call, which is the most conservative + * reading, but a host that knows which button the user pressed should say so. + */ + intent?: UserIntent; + /** + * How Element Call should behave, overriding whatever {@link intent} implies. + * A host that finds itself setting a lot of these probably wants a different + * intent instead. + * + * Compared by value, so it is fine to write this inline; only a change to + * what it says restarts anything. + */ + config?: ElementCallConfiguration; + /** + * What Element Call tells the host while the call is running: that the user + * has joined or hung up, that it would like to be kept on screen, and so on. + * Without one, Element Call assumes nobody is listening. + */ + hostBridge?: ElementCallHostBridge; + /** + * What the host tells Element Call: to hang up, to mute, to join. Available + * once the component has rendered. + */ + ref?: Ref; + /** + * The theme to show Element Call in, `light` or `dark`. Left out, Element + * Call picks. Changes take effect at once, and cost nothing else. + */ + theme?: string; + /** + * The language to show Element Call in, as a BCP 47 tag: one of the + * `supportedLanguages` the main entry point exports, or something that falls + * back to one (`de-AT` to `de`). Left out, the browser's language is used. + * + * Translations are one thing shared by every Element Call on the page, so + * the most recently set language wins for all of them. + */ + language?: string; +} diff --git a/component/build/scopeStylesToRoot.test.ts b/component/build/scopeStylesToRoot.test.ts new file mode 100644 index 00000000..ae42062c --- /dev/null +++ b/component/build/scopeStylesToRoot.test.ts @@ -0,0 +1,112 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, it } from "vitest"; +import postcss from "postcss"; + +import { ROOT_SELECTOR, scopeStylesToRoot } from "./scopeStylesToRoot"; + +const inRoot = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`; +const isRoot = `:where(${ROOT_SELECTOR})`; + +async function scope(css: string, file = "base.css"): Promise { + const result = await postcss([scopeStylesToRoot()]).process(css, { + from: file, + }); + return result.css; +} + +describe("scopeStylesToRoot", () => { + it("makes the root stand in for the document", async () => { + expect(await scope("html { line-height: 1.15 }")).toBe( + `${isRoot} { line-height: 1.15 }`, + ); + expect(await scope("body { margin: 0 }")).toBe(`${isRoot} { margin: 0 }`); + expect(await scope(":root { --a: 1 }")).toBe(`${isRoot} { --a: 1 }`); + expect(await scope("body.no-scroll-body { position: fixed }")).toBe( + `${isRoot}.no-scroll-body { position: fixed }`, + ); + expect(await scope("body .x { color: red }")).toBe( + `${isRoot} .x { color: red }`, + ); + }); + + it("collapses selectors that all became the root", async () => { + expect(await scope("html, body, input { font: inherit }")).toBe( + `${isRoot},input${inRoot} { font: inherit }`, + ); + }); + + it("confines everything else to the root and what is inside it", async () => { + expect(await scope("h1 { margin: 0 }")).toBe(`h1${inRoot} { margin: 0 }`); + expect(await scope(".cpd-theme-dark { --a: 1 }")).toBe( + `.cpd-theme-dark${inRoot} { --a: 1 }`, + ); + expect(await scope("* { box-sizing: border-box }")).toBe( + `*${inRoot} { box-sizing: border-box }`, + ); + expect(await scope(".a > .b + .c { color: red }")).toBe( + `.a>.b+.c${inRoot} { color: red }`, + ); + }); + + it("keeps pseudo-elements last", async () => { + expect(await scope("button::-moz-focus-inner { border: 0 }")).toBe( + `button${inRoot}::-moz-focus-inner { border: 0 }`, + ); + expect(await scope(".a .b:hover::after { content: '' }")).toBe( + `.a .b:hover${inRoot}::after { content: '' }`, + ); + expect(await scope("p:first-letter { color: red }")).toBe( + `p${inRoot}:first-letter { color: red }`, + ); + }); + + it("leaves alone what already names the root", async () => { + const css = `${ROOT_SELECTOR}[data-platform="ios"] { --a: 1 }`; + expect(await scope(css)).toBe(css); + }); + + it("reaches into layers and media queries", async () => { + expect( + await scope( + "@layer normalize { h1 { margin: 0 } } @media (min-width: 1px) { p { margin: 0 } }", + ), + ).toBe( + `@layer normalize { h1${inRoot} { margin: 0 } } @media (min-width: 1px) { p${inRoot} { margin: 0 } }`, + ); + }); + + it("does not touch keyframes or nested rules", async () => { + expect( + await scope("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }"), + ).toBe("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }"); + expect( + await scope( + ".a { color: red; &:hover { color: blue } .b { color: green } }", + ), + ).toBe( + `.a${inRoot} { color: red; &:hover { color: blue } .b { color: green } }`, + ); + }); + + it("only touches the bare selectors of a CSS module", async () => { + const file = "Settings.module.css"; + expect(await scope("pre { font-size: 1px }", file)).toBe( + `pre${inRoot} { font-size: 1px }`, + ); + expect(await scope(".modal pre { font-size: 1px }", file)).toBe( + `.modal pre${inRoot} { font-size: 1px }`, + ); + expect(await scope(".box_abc12 { border: 0 }", file)).toBe( + ".box_abc12 { border: 0 }", + ); + expect(await scope(".a .b_abc12:hover { border: 0 }", file)).toBe( + ".a .b_abc12:hover { border: 0 }", + ); + }); +}); diff --git a/component/build/scopeStylesToRoot.ts b/component/build/scopeStylesToRoot.ts new file mode 100644 index 00000000..e7d9e1d6 --- /dev/null +++ b/component/build/scopeStylesToRoot.ts @@ -0,0 +1,162 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { + type AtRule, + type Container, + type Document, + type Plugin, + type Rule, +} from "postcss"; +import selectorParser, { + type Node, + type Pseudo, + type Selector, +} from "postcss-selector-parser"; + +/** + * How the stylesheets find Element Call's root element. The attribute is put + * there by `useTheme`, on the container the host gives the component. + */ +export const ROOT_SELECTOR = "[data-element-call-root]"; + +// Both are `:where()`, which has no specificity of its own, so the rules keep +// exactly the weight they had before being scoped and nothing in Element Call's +// cascade changes — only where it applies. +// +// The root, or anything inside it. Appended to the element a rule is about, +// rather than prepended to the whole selector, so that a rule about the root +// itself (its theme class, say) still matches. +const IN_ROOT = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`; +// The root itself, standing in for the document. +const IS_ROOT = `:where(${ROOT_SELECTOR})`; + +/** + * Confines a stylesheet to Element Call's root element, for the build of + * Element Call as a component. + * + * As a page of its own, Element Call can style the document: normalize.css and + * its own base styles speak of `html`, `body` and bare elements, and its custom + * properties are declared on `:root`. As a component, all of that would land on + * the host's document too. This rewrites every selector so that it matches only + * the root or its descendants: + * + * - `html`, `body` and `:root` become the root element, which is what stands in + * for the document inside a host. + * - Everything else keeps its selector and gains `:where([data-element-call-root], + * [data-element-call-root] *)` on the element it styles. + * - Selectors that already name the root are left alone, as are keyframe + * selectors and rules nested inside another rule, which are relative to it. + * + * CSS modules are scoped by their class names already, so only their selectors + * that would match by element alone — `pre` rather than `.pre` — are touched. + * + * The root's custom properties are still inherited by everything inside it, + * the way they were from `:root`. Compound's own stylesheet — the design + * tokens, the component styles, the fonts — is not in this build at all: the + * host supplies it, unscoped, along with its copy of Compound. + */ +export function scopeStylesToRoot(): Plugin { + return { + postcssPlugin: "element-call-scope-styles-to-root", + Once(root) { + const isModule = + root.source?.input.file?.endsWith(".module.css") ?? false; + root.walkRules((rule) => { + if (isRelative(rule)) return; + rule.selector = (isModule ? scopeBare : scopeAll).processSync( + rule.selector, + { lossless: false }, + ); + }); + }, + }; +} + +/** Whether a rule's selectors are relative to something other than the document. */ +function isRelative(rule: Rule): boolean { + let parent: Container | Document | undefined = rule.parent; + while (parent !== undefined) { + if (parent.type === "rule") return true; + if (parent.type === "atrule") { + const { name } = parent as AtRule; + if (name.endsWith("keyframes") || name === "page") return true; + } + parent = parent.parent; + } + return false; +} + +const processor = (isModule: boolean): ReturnType => + selectorParser((selectors) => { + selectors.each((selector) => { + scopeSelector(selector, isModule); + }); + // Mapping `html, body` onto the root leaves the same selector twice + const seen = new Set(); + selectors.each((selector) => { + const text = String(selector).trim(); + if (seen.has(text)) selector.remove(); + else seen.add(text); + }); + }); + +// Everything, for stylesheets that speak of the document; only what a class +// does not already confine, for CSS modules +const scopeAll = processor(false); +const scopeBare = processor(true); + +function scopeSelector(selector: Selector, isModule: boolean): void { + if (String(selector).includes(ROOT_SELECTOR)) return; + + const compounds = splitCompounds(selector); + if (compounds.length === 0) return; + + // Something said of the document is said of the root instead + const document = compounds[0].find(isDocumentSelector); + if (document !== undefined) { + document.replaceWith(pseudo(IS_ROOT)); + return; + } + + const subject = compounds.at(-1)!; + if (isModule && subject.some((node) => node.type === "class")) return; + + // Pseudo-elements have to come last in a compound selector + const pseudoElement = subject.find(isPseudoElement); + if (pseudoElement === undefined) selector.append(pseudo(IN_ROOT)); + else selector.insertBefore(pseudoElement, pseudo(IN_ROOT)); +} + +/** The compound selectors making up a complex selector, in order. */ +function splitCompounds(selector: Selector): Node[][] { + const compounds: Node[][] = [[]]; + for (const node of selector.nodes) { + if (node.type === "combinator") compounds.push([]); + else if (node.type !== "comment") compounds.at(-1)!.push(node); + } + return compounds.filter((compound) => compound.length > 0); +} + +function isDocumentSelector(node: Node): boolean { + return ( + (node.type === "tag" && (node.value === "html" || node.value === "body")) || + (node.type === "pseudo" && node.value === ":root") + ); +} + +function isPseudoElement(node: Node): node is Pseudo { + if (node.type !== "pseudo") return false; + return ( + node.value.startsWith("::") || + [":before", ":after", ":first-line", ":first-letter"].includes(node.value) + ); +} + +function pseudo(text: string): Pseudo { + return selectorParser().astSync(text).nodes[0].nodes[0].clone() as Pseudo; +} diff --git a/component/dev/DevHostBridge.ts b/component/dev/DevHostBridge.ts new file mode 100644 index 00000000..b69779a9 --- /dev/null +++ b/component/dev/DevHostBridge.ts @@ -0,0 +1,46 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { type ElementCallHostBridge } from "../index"; + +/** + * A host bridge that reports everything it is told, so that the harness can + * watch what Element Call says to its host. (What the host says to Element + * Call goes through the component's handle, and is logged by the pane.) + */ +export function createDevHostBridge( + log: (message: string) => void, + /** What the host does when Element Call asks to be closed. */ + onClose: () => void, +): ElementCallHostBridge { + /** + * Records something Element Call told the host. Nothing is sent anywhere, so + * this is only asynchronous because a real host's answer would have to be. + */ + const told = async (message: string): Promise => { + log(`→ ${message}`); + await Promise.resolve(); + }; + + return { + setAlwaysOnScreen: async (alwaysOnScreen): Promise => + await told(`setAlwaysOnScreen(${alwaysOnScreen})`), + contentLoaded: async (): Promise => await told("contentLoaded"), + notifyJoined: async (): Promise => await told("notifyJoined"), + notifyHungUp: async (): Promise => await told("notifyHungUp"), + notifyDeviceMute: async (state): Promise => + await told( + `notifyDeviceMute(audio: ${state.audio_enabled}, video: ${state.video_enabled})`, + ), + // Present because this host really can dismiss Element Call, which is what + // makes it offer a close affordance at all + close: async (): Promise => { + await told("close"); + onClose(); + }, + }; +} diff --git a/component/dev/Harness.module.css b/component/dev/Harness.module.css new file mode 100644 index 00000000..0b116a24 --- /dev/null +++ b/component/dev/Harness.module.css @@ -0,0 +1,140 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +.credentials { + display: flex; + flex-direction: column; + gap: 8px; + max-inline-size: 420px; + margin: 48px auto; + padding: 24px; + background-color: #ffffff; + border: 1px solid #d4d4d8; + border-radius: 8px; +} + +.field { + display: flex; + flex-direction: column; + gap: 4px; +} + +.error { + color: #b91c1c; +} + +.harness { + display: grid; + grid-template-rows: auto 1fr auto; + block-size: 100%; +} + +.header, +.paneBar { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 12px; + border-block-end: 1px solid #d4d4d8; + background-color: #ffffff; +} + +.header h1 { + font-size: 16px; + margin: 0; +} + +.middle { + display: flex; + min-block-size: 0; +} + +.sidebar { + flex: 0 0 220px; + padding: 12px; + border-inline-end: 1px solid #d4d4d8; + background-color: #ffffff; + overflow-y: auto; +} + +.panes { + display: flex; + flex-wrap: wrap; + /* So that a pane is the size it was dragged to, rather than being stretched + to fill the row */ + align-items: flex-start; + align-content: flex-start; + gap: 16px; + padding: 16px; + flex: 1; + min-inline-size: 0; + overflow: auto; +} + +.pane { + display: flex; + flex-direction: column; + border: 1px solid #d4d4d8; + border-radius: 8px; + overflow: hidden; + background-color: #ffffff; +} + +.paneBar { + flex-wrap: wrap; + gap: 6px; + border-block-end: none; +} + +/* The space the host gives Element Call. Resizable so that the sizes it has to +cope with can be found by dragging rather than by rebuilding, and `overflow: +hidden` both to enable the resize handle and to show up anything inside Element +Call that does not fit the box it was given. */ +.paneCall { + inline-size: 560px; + block-size: 420px; + min-inline-size: 180px; + min-block-size: 180px; + resize: both; + overflow: hidden; +} + +.log { + max-block-size: 180px; + overflow-y: auto; + padding: 8px 12px; + border-block-start: 1px solid #d4d4d8; + background-color: #ffffff; + font-size: 12px; +} + +.log h2 { + font-size: 13px; + margin: 0 0 4px; +} + +.log ol { + margin: 0; + padding: 0; + list-style: none; +} + +/* A host overlay, which Element Call must not be able to draw over */ +.dialogScrim { + position: fixed; + inset: 0; + display: grid; + place-items: center; + background-color: rgb(0 0 0 / 50%); + z-index: 10; +} + +.dialog { + padding: 24px; + border-radius: 8px; + background-color: #ffffff; +} diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx new file mode 100644 index 00000000..ded9155a --- /dev/null +++ b/component/dev/Harness.tsx @@ -0,0 +1,380 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { + type FC, + type FormEvent, + type ReactNode, + useCallback, + useMemo, + useRef, + useState, +} from "react"; +import { type MatrixClient } from "matrix-js-sdk"; +import { logger } from "matrix-js-sdk/lib/logger"; + +import { + ElementCall, + type ElementCallHandle, + supportedLanguages, +} from "../index"; +import { createDevHostBridge } from "./DevHostBridge"; +import { createSession, joinRoom } from "./session"; +import styles from "./Harness.module.css"; + +interface Credentials { + homeserver: string; + username: string; + password: string; + room: string; +} + +const CREDENTIALS_KEY = "element-call-component-harness"; + +const DEFAULT_CREDENTIALS: Credentials = { + homeserver: "https://synapse.m.localhost", + username: "", + password: "", + room: "", +}; + +/** + * The credentials to start with: the last ones used, so that a reload does not + * mean typing them again, overridden by anything in the query string. + * + * A host reading its own URL is entirely proper — it was Element Call doing so + * that was the mistake. It lets the end-to-end tests, or a shared link, say + * which account and room to use. + */ +function loadCredentials(): Credentials { + let stored: Partial = {}; + try { + const json = localStorage.getItem(CREDENTIALS_KEY); + if (json !== null) stored = JSON.parse(json) as Credentials; + } catch (e) { + logger.warn("Could not read the stored harness credentials", e); + } + + const query = new URLSearchParams(location.search); + const fromUrl = Object.fromEntries( + (["homeserver", "username", "password", "room"] as const) + .map((name) => [name, query.get(name)]) + .filter(([, value]) => value !== null), + ) as Partial; + + return { ...DEFAULT_CREDENTIALS, ...stored, ...fromUrl }; +} + +interface Session { + label: string; + client: MatrixClient; +} + +type State = + | { phase: "credentials" } + | { phase: "starting"; progress: string } + | { phase: "started"; roomId: string; sessions: Session[] } + | { phase: "failed"; error: string }; + +interface LogEntry { + pane: string; + message: string; + at: string; +} + +/** + * One Element Call component, with the controls a host would have over it: the + * requests it can make of Element Call, and the ability to take it off screen + * altogether. + */ +const Pane: FC<{ + session: Session; + roomId: string; + theme: string | undefined; + language: string | undefined; + log: (pane: string, message: string) => void; +}> = ({ session, roomId, theme, language, log }): ReactNode => { + const [mounted, setMounted] = useState(true); + + const bridge = useMemo( + () => + createDevHostBridge( + (message) => log(session.label, message), + () => setMounted(false), + ), + [log, session.label], + ); + + // What the host asks of Element Call goes through the component's handle. + // Worth saying out loud when a request is refused — asking to hang up when + // there is no call, say — since that is the sort of thing the harness is for. + const handle = useRef(null); + const ask = ( + name: string, + make: (handle: ElementCallHandle) => Promise, + ): void => { + if (handle.current === null) { + log(session.label, `← ${name}: not mounted`); + return; + } + log(session.label, `← ${name}`); + make(handle.current).then( + (reply) => + log( + session.label, + `→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`, + ), + (e: unknown) => log(session.label, `→ ${name} refused: ${e}`), + ); + }; + + return ( +
+
+ {session.label} + {session.client.getDeviceId()} + + + +
+ {/* Resizable, because how Element Call copes with the size it is given is + one of the things we cannot find out from the standalone app */} +
+ {mounted && ( + + )} +
+
+ ); +}; + +/** Host furniture, to make it visible if Element Call styles anything but itself. */ +const HostChrome: FC = (): ReactNode => ( + +); + +/** + * A dialog of the host's own, over the top of the calls. Element Call as a + * component has to sit underneath this — being unable to is one of the reasons + * for a component rather than an iframe. + */ +const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => ( +
+
+

A dialog belonging to the host

+

This should cover the calls completely.

+ +
+
+); + +/** + * Stands in for a host application using the Element Call component: it owns the Matrix + * clients, the page and the space each call is given, and reaches Element Call + * only through the component's public interface. + * + * Two calls at once, from two devices of the same account, so that a real call + * happens between them and anything Element Call keeps once per process rather + * than once per call shows itself. + */ +export const Harness: FC = (): ReactNode => { + const [credentials, setCredentials] = useState(loadCredentials); + const [state, setState] = useState({ phase: "credentials" }); + const [entries, setEntries] = useState([]); + const [dialogOpen, setDialogOpen] = useState(false); + // The host's language setting, which Element Call follows. Undefined means + // the host has none and Element Call uses the browser's. + const [language, setLanguage] = useState(undefined); + const [theme, setTheme] = useState(undefined); + + const log = useCallback((pane: string, message: string): void => { + setEntries((entries) => + [ + ...entries, + { pane, message, at: new Date().toLocaleTimeString() }, + ].slice(-100), + ); + }, []); + + const start = useCallback( + (event: FormEvent): void => { + event.preventDefault(); + localStorage.setItem(CREDENTIALS_KEY, JSON.stringify(credentials)); + const { homeserver, username, password, room } = credentials; + + const progress = (message: string): void => + setState({ phase: "starting", progress: message }); + progress("Starting"); + + void (async (): Promise => { + try { + // One at a time: two logins at once from the same account is the + // shape of request homeservers rate limit + const sessions: Session[] = []; + for (const label of ["Call A", "Call B"]) + sessions.push({ + label, + client: await createSession( + homeserver, + username, + password, + (message) => progress(`${label}: ${message}`), + ), + }); + + progress("Joining the room"); + let roomId = room; + for (const { client } of sessions) + roomId = await joinRoom(client, roomId); + + setState({ phase: "started", roomId, sessions }); + } catch (e) { + logger.error("The harness could not start", e); + setState({ phase: "failed", error: `${e}` }); + } + })(); + }, + [credentials], + ); + + const field = ( + name: keyof Credentials, + label: string, + type = "text", + ): ReactNode => ( + + ); + + if (state.phase !== "started") + return ( +
+

Element Call component harness

+

+ Signs in twice and shows the Element Call component twice, in a page + that is not Element Call's own. +

+ {field("homeserver", "Homeserver")} + {field("username", "Username")} + {field("password", "Password", "password")} + {field("room", "Room ID or alias")} + + {state.phase === "starting" &&

{state.progress}

} + {state.phase === "failed" && ( +

{state.error}

+ )} +
+ ); + + return ( +
+
+

Element Call component harness

+ {state.roomId} + + + +
+
+ +
+ {state.sessions.map((session) => ( + + ))} +
+
+
+

Host bridge

+
    + {entries.map((entry, i) => ( +
  1. + {entry.at} {entry.pane}{" "} + {entry.message} +
    2. + ))} +
+
+ {dialogOpen && setDialogOpen(false)} />} +
+ ); +}; diff --git a/component/dev/host.css b/component/dev/host.css new file mode 100644 index 00000000..76e70f60 --- /dev/null +++ b/component/dev/host.css @@ -0,0 +1,23 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/* The host page's own styles. Deliberately plain, and deliberately not using +Element Call's design tokens: the harness should look like it does because of +this file, not because Element Call styled it. */ + +html, +body, +#root { + height: 100%; +} + +body { + margin: 0; + font-family: system-ui, sans-serif; + background-color: #f4f4f5; + color: #18181b; +} diff --git a/component/dev/index.html b/component/dev/index.html new file mode 100644 index 00000000..7174e935 --- /dev/null +++ b/component/dev/index.html @@ -0,0 +1,21 @@ + + + + + + + Element Call component harness + + + +
+ + + diff --git a/component/dev/main.tsx b/component/dev/main.tsx new file mode 100644 index 00000000..b9d12e2d --- /dev/null +++ b/component/dev/main.tsx @@ -0,0 +1,52 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { logger } from "matrix-js-sdk/lib/logger"; + +// What a host provides along with its copy of Compound: its stylesheet, the +// design tokens and the fonts they name. The component does not bundle them. +import "@fontsource/inter/400.css"; +import "@fontsource/inter/500.css"; +import "@fontsource/inter/600.css"; +import "@fontsource/inter/700.css"; +import "@fontsource/inconsolata/400.css"; +import "@fontsource/inconsolata/700.css"; +import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"; +import "@vector-im/compound-web/dist/style.css"; +import { type ConfigOptions, initializeElementCall } from "../index"; +import { Harness } from "./Harness"; +// After Element Call's, so that the host has the last word on its own page +import "./host.css"; + +/** + * The development app's own `config.json`, so that the harness runs Element + * Call the way `pnpm dev` does. It is not in the repository — developers copy + * it from `config/config.devenv.json` — so its absence is expected rather than + * an error. + */ +async function loadConfig(): Promise { + try { + const response = await fetch("/config.json"); + if (response.ok) return (await response.json()) as ConfigOptions; + logger.warn( + `No config.json (${response.status}); running with Element Call's defaults`, + ); + } catch (e) { + logger.warn("Could not read config.json", e); + } + return {}; +} + +await initializeElementCall(await loadConfig()); + +createRoot(document.getElementById("root")!).render( + + + , +); diff --git a/component/dev/session.ts b/component/dev/session.ts new file mode 100644 index 00000000..5a424a40 --- /dev/null +++ b/component/dev/session.ts @@ -0,0 +1,79 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { + ClientEvent, + createClient, + type MatrixClient, + MemoryStore, + SyncState, +} from "matrix-js-sdk"; + +/** + * Logs in and brings up a client the way a host application would, so that the + * component is handed a real one rather than something Element Call built for + * itself. + * + * Everything is kept in memory and a fresh login happens on every reload. That + * costs a device on the development homeserver each time, which is harmless, + * and buys the harness two clients that cannot tread on each other's storage. + * Persisting the login to make reloads quicker would mean persisting the + * crypto store too: reusing a device ID with a fresh crypto store generates new + * device keys, and uploading them conflicts with the ones the server already + * holds. + */ +export async function createSession( + homeserver: string, + username: string, + password: string, + onProgress: (message: string) => void, +): Promise { + onProgress("Logging in"); + const login = await createClient({ baseUrl: homeserver }).login( + "m.login.password", + { identifier: { type: "m.id.user", user: username }, password }, + ); + + const client = createClient({ + baseUrl: homeserver, + accessToken: login.access_token, + userId: login.user_id, + deviceId: login.device_id, + store: new MemoryStore(), + useAuthorizationHeader: true, + fallbackICEServerAllowed: true, + }); + + onProgress(`Setting up crypto for ${login.device_id}`); + await client.initRustCrypto({ useIndexedDB: false }); + + onProgress(`Syncing ${login.device_id}`); + await client.startClient(); + await new Promise((resolve) => { + const onSync = (state: SyncState): void => { + if (state !== SyncState.Prepared && state !== SyncState.Syncing) return; + client.off(ClientEvent.Sync, onSync); + resolve(); + }; + client.on(ClientEvent.Sync, onSync); + }); + + return client; +} + +/** + * The room to call in, joining it if this session is not in it yet — a host + * hands Element Call a room it already knows about, so the harness has to get + * itself into that position first. + */ +export async function joinRoom( + client: MatrixClient, + roomIdOrAlias: string, +): Promise { + const room = await client.joinRoom(roomIdOrAlias); + return room.roomId; +} diff --git a/component/host.test.ts b/component/host.test.ts new file mode 100644 index 00000000..696470cd --- /dev/null +++ b/component/host.test.ts @@ -0,0 +1,161 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { renderHook } from "@testing-library/react"; +import { createRef } from "react"; +import { describe, expect, test, vi } from "vitest"; + +import { + type ElementCallHandle, + type ElementCallHostBridge, + useComponentHostBridge, +} from "./host"; + +describe("useComponentHostBridge", () => { + test("keeps one identity while the host supplies new objects", () => { + const { result, rerender } = renderHook( + ({ supplied }: { supplied: ElementCallHostBridge }) => + useComponentHostBridge(supplied, undefined, undefined), + { initialProps: { supplied: {} } }, + ); + const first = result.current; + rerender({ supplied: { notifyJoined: async () => {} } }); + expect(result.current).toBe(first); + }); + + test("forwards to whatever the host most recently supplied", async () => { + const before = vi.fn().mockResolvedValue(undefined); + const after = vi.fn().mockResolvedValue(undefined); + const { result, rerender } = renderHook( + ({ supplied }: { supplied: ElementCallHostBridge }) => + useComponentHostBridge(supplied, undefined, undefined), + { initialProps: { supplied: { notifyJoined: before } } }, + ); + rerender({ supplied: { notifyJoined: after } }); + + await result.current.notifyJoined(); + expect(before).not.toHaveBeenCalled(); + expect(after).toHaveBeenCalledOnce(); + }); + + test("is quiet about what the host did not implement", async () => { + const { result } = renderHook(() => + useComponentHostBridge(undefined, undefined, undefined), + ); + await expect(result.current.contentLoaded()).resolves.toBeUndefined(); + await expect( + result.current.notifyDeviceMute({ + audio_enabled: true, + video_enabled: false, + }), + ).resolves.toBeUndefined(); + expect(result.current.supportsReactions).toBe(true); + // Starting the user unmuted unasked is something a host has to opt into + expect(result.current.allowJoinUnmutedViaIntent).toBe(false); + }); + + test("lets the host allow joining unmuted on the intent", () => { + const { result, rerender } = renderHook( + ({ supplied }: { supplied: ElementCallHostBridge }) => + useComponentHostBridge(supplied, undefined, undefined), + { initialProps: { supplied: {} } }, + ); + expect(result.current.allowJoinUnmutedViaIntent).toBe(false); + + // Read through to whatever the host most recently said + rerender({ supplied: { allowJoinUnmutedViaIntent: true } }); + expect(result.current.allowJoinUnmutedViaIntent).toBe(true); + }); + + test("only has a close when the host has one, since that is a signal", () => { + const { result, rerender } = renderHook( + ({ supplied }: { supplied: ElementCallHostBridge }) => + useComponentHostBridge(supplied, undefined, undefined), + { initialProps: { supplied: {} } }, + ); + expect(result.current.close).toBeUndefined(); + + const close = vi.fn().mockResolvedValue(undefined); + rerender({ supplied: { close } }); + expect(result.current.close).toBeDefined(); + }); + + test("never offers profile changes, since the account is the host's", () => { + const { result } = renderHook(() => + useComponentHostBridge(undefined, undefined, undefined), + ); + expect(result.current.supportsProfileChanges).toBe(false); + }); + + describe("the handle", () => { + test("delivers a request to what is listening and resolves on its reply", async () => { + const ref = createRef(); + const { result } = renderHook(() => + useComponentHostBridge(undefined, ref, undefined), + ); + + const received = vi.fn(); + result.current.deviceMute$.subscribe(({ data, reply }) => { + received(data); + reply({ audio_enabled: data.audio_enabled!, video_enabled: true }); + }); + + await expect( + ref.current!.setDeviceMute({ audio_enabled: false }), + ).resolves.toEqual({ audio_enabled: false, video_enabled: true }); + expect(received).toHaveBeenCalledWith({ audio_enabled: false }); + }); + + test("refuses a request nothing in Element Call is listening for", async () => { + const ref = createRef(); + renderHook(() => useComponentHostBridge(undefined, ref, undefined)); + + await expect(ref.current!.hangUp()).rejects.toThrow( + "Nothing in Element Call can hang up right now", + ); + }); + }); + + describe("the theme", () => { + test("reaches a subscriber that arrives after it was set", () => { + const { result } = renderHook(() => + useComponentHostBridge(undefined, undefined, "light"), + ); + const names: (string | undefined)[] = []; + result.current.themeChange$.subscribe(({ data }) => + names.push(data.name), + ); + expect(names).toEqual(["light"]); + }); + + test("follows the prop", () => { + const { result, rerender } = renderHook( + ({ theme }: { theme: string | undefined }) => + useComponentHostBridge(undefined, undefined, theme), + { initialProps: { theme: "light" } }, + ); + const names: (string | undefined)[] = []; + result.current.themeChange$.subscribe(({ data }) => + names.push(data.name), + ); + + rerender({ theme: "dark" }); + expect(names).toEqual(["light", "dark"]); + }); + + test("says nothing when the host leaves the theme to Element Call", () => { + const { result } = renderHook(() => + useComponentHostBridge(undefined, undefined, undefined), + ); + const names: (string | undefined)[] = []; + result.current.themeChange$.subscribe(({ data }) => + names.push(data.name), + ); + expect(names).toEqual([]); + }); + }); +}); diff --git a/component/host.ts b/component/host.ts new file mode 100644 index 00000000..c0b2db89 --- /dev/null +++ b/component/host.ts @@ -0,0 +1,201 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * How a host application and the Element Call component talk to each other. + * + * Inside Element Call the host is a {@link HostBridge}, which carries the + * host's requests as rxjs observables because that is what the widget API and + * the view models work in. A host should not have to know about rxjs, or agree + * with us on a version of it, so a component host sees neither: it implements + * plain async callbacks for what Element Call tells it, and makes its own + * requests through an imperative handle on the component, the way it would + * call `play()` on a video element. This module adapts the one to the other. + */ + +import { type Ref, useEffect, useImperativeHandle } from "react"; +import { ReplaySubject, Subject } from "rxjs"; + +import { + type DeviceMuteRequest, + type DeviceMuteState, + type HostBridge, + type HostRequest, +} from "../src/HostBridge"; +import { type JoinCallData } from "../src/widget"; +import { useInitial } from "../src/useInitial"; +import { useLatest } from "../src/useLatest"; + +/** + * What Element Call tells the application hosting it as a component. + * Everything is optional: a host implements what it wants to hear about. + * + * Compared by nothing — Element Call always calls whichever one it was most + * recently given, so this may be written inline. + */ +export interface ElementCallHostBridge { + /** + * Asks the host to keep Element Call on screen (or stop doing so), so that a + * call in progress is not torn down when the user navigates elsewhere. + */ + setAlwaysOnScreen?(alwaysOnScreen: boolean): Promise; + /** Tells the host that Element Call has finished loading. */ + contentLoaded?(): Promise; + /** Tells the host that the user has joined the call. */ + notifyJoined?(): Promise; + /** Tells the host that the user has hung up. */ + notifyHungUp?(): Promise; + /** Tells the host the user's current audio and video mute state. */ + notifyDeviceMute?(state: DeviceMuteState): Promise; + /** + * Asks the host to close Element Call: to unmount the component. Its + * presence is what makes Element Call offer a close button on its error + * screens, and leave the host to decide what is shown once a call has ended. + * Without it, Element Call shows its own post-call screen, if it has one for + * the situation, or nothing. + */ + close?(): Promise; + /** + * Whether Element Call may send and receive reactions in this room. + * Defaults to true. + */ + readonly supportsReactions?: boolean; + /** + * Whether the user may start unmuted when the intent skips the lobby, so + * that they never see their devices before joining. Defaults to false: the + * user starts muted and unmutes themselves. A host that chose the intent on + * the user's behalf, and is sure they expect to be heard and seen at once, + * says so here — as a Matrix client hosting Element Call as a widget does. + */ + readonly allowJoinUnmutedViaIntent?: boolean; +} + +/** + * What a host can ask of a mounted Element Call, reached through the + * component's `ref`. Each request resolves once Element Call has acted on it, + * and rejects if nothing in Element Call is in a position to act: hanging up + * when there is no call, say. + */ +export interface ElementCallHandle { + /** + * Joins the call, when Element Call was configured to `preload` and is + * waiting to be told to. Says which devices to join with. + */ + join(devices: JoinCallData): Promise; + /** Leaves the call. */ + hangUp(): Promise; + /** + * Changes the mute state, for whichever of audio and video is given, and + * reports the state that results. + */ + setDeviceMute(request: DeviceMuteRequest): Promise; +} + +/** Hands a request to Element Call and waits for it to be acknowledged. */ +async function request( + listeners: Subject>, + what: string, + data: Data, +): Promise { + if (!listeners.observed) + throw new Error(`Nothing in Element Call can ${what} right now`); + return await new Promise((resolve) => + listeners.next({ data, reply: resolve }), + ); +} + +/** + * The {@link HostBridge} the rest of Element Call sees, built from what a + * component host supplies and wired to the handle it is given. + * + * The bridge is created once and never changes identity — everything that + * depends on it would otherwise restart when the host re-rendered with a new + * object — and forwards each call to whatever the host most recently passed. + */ +export function useComponentHostBridge( + supplied: ElementCallHostBridge | undefined, + ref: Ref | undefined, + /** The theme the host wants, or undefined to leave it to Element Call. */ + theme: string | undefined, +): HostBridge { + const latest = useLatest(supplied ?? {}); + + const requests = useInitial(() => ({ + // The theme is state, not an event: a `theme` prop rather than a request + // on the handle. It travels this channel because that is how the rest of + // Element Call hears about a host's theme, and replays so that whatever + // subscribes after the host has set it — everything, on first render — + // still hears the current one. + themeChange$: new ReplaySubject>(1), + join$: new Subject>(), + hangUp$: new Subject>>(), + deviceMute$: new Subject>(), + })); + + useEffect(() => { + if (theme !== undefined) + requests.themeChange$.next({ data: { name: theme }, reply: () => {} }); + }, [requests, theme]); + + const bridge = useInitial((): HostBridge => ({ + setAlwaysOnScreen: async (alwaysOnScreen) => { + await latest.current.setAlwaysOnScreen?.(alwaysOnScreen); + }, + contentLoaded: async () => { + await latest.current.contentLoaded?.(); + }, + notifyJoined: async () => { + await latest.current.notifyJoined?.(); + }, + notifyHungUp: async () => { + await latest.current.notifyHungUp?.(); + }, + notifyDeviceMute: async (state) => { + await latest.current.notifyDeviceMute?.(state); + }, + // Whether these exist is itself information, so they are read through + // rather than wrapped unconditionally + get close() { + const close = latest.current.close; + return close === undefined + ? undefined + : async (): Promise => await close(); + }, + // Not offered to a component host: the client it hands over holds the + // credentials to fetch media itself. A widget's client does not, which + // is what the internal bridge's `downloadMedia` is for. + get supportsReactions(): boolean { + return latest.current.supportsReactions ?? true; + }, + get allowJoinUnmutedViaIntent(): boolean { + return latest.current.allowJoinUnmutedViaIntent ?? false; + }, + // Whatever the host says or does not say, the account is its own: it + // signed the user in and handed us the client. So Element Call never + // offers to edit the profile from inside a component. + supportsProfileChanges: false, + ...requests, + })); + + useImperativeHandle( + ref, + (): ElementCallHandle => ({ + join: async (devices) => + await request(requests.join$, "join a call", devices), + hangUp: async () => await request(requests.hangUp$, "hang up", {}), + setDeviceMute: async (muteRequest) => + await request( + requests.deviceMute$, + "change the mute state", + muteRequest, + ), + }), + [requests], + ); + + return bridge; +} diff --git a/component/index.tsx b/component/index.tsx new file mode 100644 index 00000000..8f901c13 --- /dev/null +++ b/component/index.tsx @@ -0,0 +1,278 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * EXPERIMENTAL + * + * Element Call as a React component, for an application that wants to show a + * call inside itself rather than in an iframe. + * + * The host supplies the client and says which room to call in; Element Call + * supplies the call. Everything it would otherwise take from the page it is on + * — the URL, the document body, a Matrix session of its own — comes from the + * host instead, or is confined to the container it is mounted in. + */ + +// The element defaults and custom properties every Element Call stylesheet +// builds on. Written for a page, they speak of `html`, `body` and bare +// elements; the component build confines them, and every other stylesheet in +// this bundle, to the root element below (see build/scopeStylesToRoot.ts), so +// that the host's document is left as it was. +// +// Compound is not in here. The component uses the host's copy of it (a peer +// dependency, left external by the build), and the host loads Compound's +// stylesheet, design tokens and fonts along with it: what Compound floats into +// the host's body — tooltips, menus — is then styled by the same stylesheet as +// everything else there, and Element Call's root takes the tokens and fonts of +// the theme class it carries, as any element on the host's page would. +// +// Where these land relative to the component stylesheets is the bundler's +// choice — the standalone app puts them first, this build puts them in the +// middle — so nothing in base.css may depend on winning or losing against a +// component's own rules at equal specificity. It currently does not: what it +// declares unlayered is custom properties on Element Call's root, which +// components inherit rather than compete with. +import "../src/base.css"; + +import { + type FC, + type JSX, + type ReactNode, + useEffect, + useLayoutEffect, + useMemo, + useRef, + useState, +} from "react"; +import { logger } from "matrix-js-sdk/lib/logger"; +import { I18nextProvider } from "react-i18next"; +import { TooltipProvider } from "@vector-im/compound-web"; +import { ErrorBoundary } from "@sentry/react"; +import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill"; +import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js"; + +import LanguageDetector from "i18next-browser-languagedetector"; + +import EN from "../locales/en/app.json"; +import { CallView } from "../src/room/CallView"; +import { ErrorPage } from "../src/FullScreenView"; +import { ClientProvider } from "../src/ClientContext"; +import { HostBridgeProvider } from "../src/HostBridge"; +import { RootElementProvider, useRootElement } from "../src/RootElementContext"; +import { + configurationForIntent, + componentProperties, + type UrlParams, + UrlParamsProvider, + UserIntent, + useUrlParams, +} from "../src/UrlParams"; +import { MediaDevicesContext } from "../src/MediaDevicesContext"; +import { MediaDevices } from "../src/state/MediaDevices"; +import { ObservableScope } from "../src/state/ObservableScope"; +import { ProcessorProvider } from "../src/livekit/TrackProcessorContext"; +import { Config } from "../src/config/Config"; +import { type ConfigOptions } from "../src/config/ConfigOptions"; +import { i18n } from "../src/utils/i18n"; +import { useTheme } from "../src/useTheme"; +import { useStableValue } from "../src/useStableValue"; +import styles from "./ElementCall.module.css"; +import { useComponentHostBridge } from "./host"; +import { type ElementCallProps } from "./api"; +import { supportedLanguages, translationsBackend } from "./localization"; + +// The languages Element Call can be shown in +export { supportedLanguages } from "./localization"; +// Everything a host needs to talk about Element Call — the props, the handle, +// the host bridge, the intents and what each means — also available without +// the component itself from `@element-hq/element-call-component/api` +export * from "./api"; + +/** + * Prepares the things Element Call needs before it can be shown: translations, + * `Intl` polyfills for older browsers, and its configuration. + * + * Await this once, before rendering {@link ElementCall}. + */ +export async function initializeElementCall( + config: ConfigOptions = {}, +): Promise { + const polyfills: Promise[] = []; + if (shouldPolyfillSegmenter()) + polyfills.push(import("@formatjs/intl-segmenter/polyfill-force")); + if (shouldPolyfillDurationFormat()) + polyfills.push(import("@formatjs/intl-durationformat/polyfill-force.js")); + await Promise.all(polyfills); + + Config.initWith(config); + await i18n + .use(translationsBackend) + .use(new LanguageDetector()) + .init({ + fallbackLng: "en", + defaultNS: "app", + keySeparator: ".", + nsSeparator: false, + pluralSeparator: "_", + contextSeparator: "|", + supportedLngs: [...supportedLanguages], + interpolation: { escapeValue: false }, + // English is bundled in, so the fallback never has to be loaded; every + // other language arrives from the backend when first asked for. + partialBundledLanguages: true, + resources: { en: { app: EN } }, + detection: { + // The browser's language, until the host says otherwise through the + // `language` prop. Nothing is remembered: the choice is the host's. + order: ["navigator"], + caches: [], + }, + }); +} + +/** Applies the theme and background to the container, before it is painted. */ +const Decoration: FC<{ children: JSX.Element }> = ({ children }) => { + useTheme(); + const { background } = useUrlParams(); + const rootElement = useRootElement(); + useLayoutEffect(() => { + rootElement.setAttribute("data-background", background); + }, [rootElement, background]); + return children; +}; + +export const ElementCall: FC = ({ + client, + roomId, + intent = UserIntent.JoinExistingCall, + config, + hostBridge: suppliedHostBridge, + ref, + theme, + language, +}): ReactNode => { + const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme); + + useEffect(() => { + if (language !== undefined) + i18n + .changeLanguage(language) + .catch((e) => logger.error(`Could not switch to ${language}`, e)); + }, [language]); + + // The container is what Element Call decorates and portals into, so nothing + // inside can render until we have it. + const [container, setContainer] = useState(null); + + // Element Call has no URL of its own to read any of this from, and the + // host's URL is not Element Call's business, so the defaults come from the + // intent with the host's wishes over the top. + // + // Everything downstream — the mute state, the call view model and with it + // the media connection — is keyed on the identity of this object, so it has + // to be stable for as long as its contents are. A host writing `config` + // inline would otherwise tear the call down on every render. + const stableConfig = useStableValue(config); + const params = useMemo( + (): UrlParams => ({ + ...componentProperties, + roomId, + ...configurationForIntent(intent), + ...stableConfig, + }), + [roomId, intent, stableConfig], + ); + + // Created in an effect so that the scope it lives in ends when the component + // is unmounted (or these options change), rather than keeping its device + // observers running for the rest of the page's life. Null until then, which + // is one render. + const { controlledAudioDevices, callIntent } = params; + const [mediaDevices, setMediaDevices] = useState(null); + useEffect(() => { + const scope = new ObservableScope(); + setMediaDevices( + new MediaDevices(scope, { controlledAudioDevices, callIntent }), + ); + return (): void => { + setMediaDevices(null); + scope.end(); + }; + }, [controlledAudioDevices, callIntent]); + + const room = client.getRoom(roomId); + const rtcSession = useMemo( + () => (room === null ? null : client.matrixRTC.getRoomSession(room)), + [client, room], + ); + + if (rtcSession === null) + logger.error( + `Element Call was asked to call in ${roomId}, which its host's client does not know about`, + ); + + // Everything the call needs is in hand once these exist, and the first + // render with them is where the call itself appears: the moment the host + // is told that Element Call has loaded, as the widget tells its client once + // its own initialisation is over. Once per mount, however often the pieces + // are later swapped out. + const ready = + container !== null && rtcSession !== null && mediaDevices !== null; + const announcedLoaded = useRef(false); + useEffect(() => { + if (!ready || announcedLoaded.current) return; + announcedLoaded.current = true; + hostBridge + .contentLoaded() + .catch((e) => logger.error("Could not tell the host we had loaded", e)); + }, [ready, hostBridge]); + + return ( + + + +
+ {ready && ( + // Stands in for the standalone page's `#root`: see `.content` + // in ElementCall.module.css +
+ + {/* Whatever goes wrong in here is shown in here. Left to + propagate, an error would unmount the host's own tree. */} + } + // A broken call should not hold the host on screen + onError={() => void hostBridge.setAlwaysOnScreen(false)} + > + + + + + + + + + + + + + +
+ )} +
+ + + + ); +}; diff --git a/component/localization.test.ts b/component/localization.test.ts new file mode 100644 index 00000000..fae1c706 --- /dev/null +++ b/component/localization.test.ts @@ -0,0 +1,46 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, test } from "vitest"; + +import { supportedLanguages, translationsBackend } from "./localization"; + +const read = async ( + language: string, + namespace = "app", +): Promise> => + await new Promise((resolve, reject) => + translationsBackend.read(language, namespace, (error, data) => { + if (error) reject(error); + else resolve(data as Record); + }), + ); + +describe("component translations", () => { + test("offer every language in locales/, tagged as its directory is", () => { + expect(supportedLanguages).toContain("en"); + expect(supportedLanguages).toContain("de"); + expect(supportedLanguages).toContain("zh-Hans"); + expect(new Set(supportedLanguages).size).toBe(supportedLanguages.length); + }); + + test("load a language's translations on demand", async () => { + const de = await read("de"); + expect(de).toHaveProperty("action"); + expect(de).not.toEqual(await read("en")); + }); + + test("refuse a language there are no translations for", async () => { + await expect(read("xx")).rejects.toThrow("No app translations for xx"); + }); + + test("refuse a namespace there are no translations for", async () => { + await expect(read("en", "other")).rejects.toThrow( + "No other translations for en", + ); + }); +}); diff --git a/component/localization.ts b/component/localization.ts new file mode 100644 index 00000000..b6417281 --- /dev/null +++ b/component/localization.ts @@ -0,0 +1,55 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * Translations for Element Call as a component. + * + * The standalone app fetches its locale files at runtime from URLs its own + * build emits, which a host serving the library from somewhere else could not + * resolve. The component instead has the bundler split every locale into a + * chunk of its own, loaded the first time its language is asked for; English, + * the fallback, is bundled in so that the first paint never waits for it. + */ + +import { type BackendModule, type ResourceKey } from "i18next"; + +import { languageOfLocalePath } from "../src/utils/i18n"; + +/** Every locale, as a lazily imported module. */ +const translations = import.meta.glob<{ default: ResourceKey }>( + "../locales/*/app.json", +); + +/** + * The languages Element Call can be shown in, as BCP 47 tags — `en`, `de`, + * `zh-Hans` and so on. A language that is not one of these falls back to its + * base language where there is one (`de-AT` to `de`), and to English otherwise. + */ +export const supportedLanguages: readonly string[] = [ + ...new Set(Object.keys(translations).map(languageOfLocalePath)), +]; + +/** Loads translations on demand. */ +export const translationsBackend: BackendModule = { + type: "backend", + init(): void {}, + read(language: string, namespace: string, callback): void { + const load = translations[`../locales/${language}/${namespace}.json`]; + if (load === undefined) { + callback(new Error(`No ${namespace} translations for ${language}`), null); + return; + } + load().then( + (module) => callback(null, module.default), + (error: unknown) => + callback( + error instanceof Error ? error : new Error(String(error)), + null, + ), + ); + }, +}; diff --git a/component/package.json b/component/package.json new file mode 100644 index 00000000..ee81cd51 --- /dev/null +++ b/component/package.json @@ -0,0 +1,48 @@ +{ + "name": "@element-hq/element-call-component", + "version": "0.0.0", + "description": "Element Call as a React component. Consumed straight from the repository as a git dependency (github:element-hq/element-call#&path:/component): the host's package manager runs `prepare`, which builds `dist/`.", + "license": "SEE LICENSE IN ../README.md", + "repository": { + "type": "git", + "url": "https://github.com/element-hq/element-call", + "directory": "component" + }, + "type": "module", + "devEngines": { + "packageManager": { + "name": "pnpm" + } + }, + "files": [ + "dist" + ], + "main": "./dist/element-call.js", + "module": "./dist/element-call.js", + "types": "./dist/types/component/index.d.ts", + "exports": { + ".": { + "types": "./dist/types/component/index.d.ts", + "default": "./dist/element-call.js" + }, + "./api": { + "types": "./dist/types/component/api.d.ts", + "default": "./dist/api.js" + }, + "./style.css": "./dist/element-call.css" + }, + "sideEffects": [ + "*.css" + ], + "scripts": { + "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component" + }, + "peerDependencies": { + "@vector-im/compound-design-tokens": "^11.0.0", + "@vector-im/compound-web": "^10.0.0", + "livekit-client": "^2.18.1", + "matrix-js-sdk": "*", + "react": "^19", + "react-dom": "^19" + } +} diff --git a/component/pnpm-lock.yaml b/component/pnpm-lock.yaml new file mode 100644 index 00000000..490c2e4f --- /dev/null +++ b/component/pnpm-lock.yaml @@ -0,0 +1,9 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: false + excludeLinksFromLockfile: false + +importers: + + .: {} diff --git a/component/pnpm-workspace.yaml b/component/pnpm-workspace.yaml new file mode 100644 index 00000000..d6c26ac6 --- /dev/null +++ b/component/pnpm-workspace.yaml @@ -0,0 +1,14 @@ +# Makes `component/` a pnpm project of its own rather than a directory inside +# the repository's workspace. That matters when a host installs the component +# straight from this repository (`github:element-hq/element-call#…&path:/component`): +# pnpm prepares such a dependency by running `pnpm install` in this directory, +# and only a project root gets its `prepare` script (see package.json) run, which +# is what builds `dist/`. Inside the repository's own workspace the install +# would silently target the repository instead and build nothing. +# +# Consequence for development: pnpm commands run from within this directory see +# this project, not the repository; run them from the repository root. + +# Nothing to install here: the peers in package.json are the host's, and the +# build runs against the repository's own node_modules (see `prepare`). +autoInstallPeers: false diff --git a/component/tsconfig.build.json b/component/tsconfig.build.json new file mode 100644 index 00000000..cdbe5753 --- /dev/null +++ b/component/tsconfig.build.json @@ -0,0 +1,20 @@ +{ + // Declaration output for the component package (`pnpm build:component:types`). + // The root tsconfig only type-checks; this one emits `.d.ts` files, and nothing + // else, for everything the component's entry point reaches. The layout under + // `dist/types` mirrors the repository (`component/index.d.ts`, `src/…`), which + // is what `package.json` points its `types` at. + "extends": "../tsconfig.json", + "compilerOptions": { + "noEmit": false, + "emitDeclarationOnly": true, + "declaration": true, + "declarationMap": false, + "rootDir": "..", + "outDir": "./dist/types" + }, + // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs, + // `import.meta.env`, …) that the sources they reach rely on. + "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"], + "exclude": [] +} diff --git a/config/config.devenv.json b/config/config.devenv.json index 48602406..b78314d3 100644 --- a/config/config.devenv.json +++ b/config/config.devenv.json @@ -7,10 +7,7 @@ }, "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf", "matrix_rtc_session": { - "wait_for_key_rotation_ms": 3000, "membership_event_expiry_ms": 180000000, - "delayed_leave_event_delay_ms": 18000, - "delayed_leave_event_restart_ms": 4000, "network_error_retry_ms": 100 } } diff --git a/config/config.sample.json b/config/config.sample.json index 0baa522e..387c0a3d 100644 --- a/config/config.sample.json +++ b/config/config.sample.json @@ -11,10 +11,7 @@ "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf", "matrix_rtc_mode": "compatibility", "matrix_rtc_session": { - "wait_for_key_rotation_ms": 3000, "membership_event_expiry_ms": 180000000, - "delayed_leave_event_delay_ms": 18000, - "delayed_leave_event_restart_ms": 4000, "network_error_retry_ms": 100 } } diff --git a/config/config_netlify_preview.json b/config/config_netlify_preview.json index 313f0d02..f8e4fc53 100644 --- a/config/config_netlify_preview.json +++ b/config/config_netlify_preview.json @@ -7,10 +7,7 @@ }, "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf", "matrix_rtc_session": { - "wait_for_key_rotation_ms": 3000, "membership_event_expiry_ms": 180000000, - "delayed_leave_event_delay_ms": 18000, - "delayed_leave_event_restart_ms": 4000, "network_error_retry_ms": 100 }, "posthog": { diff --git a/config/config_netlify_preview_sdk.json b/config/config_netlify_preview_sdk.json index 784f0c7e..77d885ea 100644 --- a/config/config_netlify_preview_sdk.json +++ b/config/config_netlify_preview_sdk.json @@ -7,10 +7,7 @@ }, "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf", "matrix_rtc_session": { - "wait_for_key_rotation_ms": 3000, "membership_event_expiry_ms": 180000000, - "delayed_leave_event_delay_ms": 18000, - "delayed_leave_event_restart_ms": 4000, "network_error_retry_ms": 100 } } diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml index 3dc86f2f..3de89ec3 100644 --- a/docker-compose-dev.yml +++ b/docker-compose-dev.yml @@ -3,7 +3,7 @@ networks: services: auth-service: - image: ghcr.io/element-hq/lk-jwt-service:0.4.4 + image: ghcr.io/element-hq/lk-jwt-service:0.7.0 pull_policy: always hostname: auth-server environment: @@ -15,6 +15,14 @@ services: # a self-signed certificate - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING - LIVEKIT_FULL_ACCESS_HOMESERVERS=* + # Registers this instance as an application service on the main homeserver + - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml + - LIVEKIT_HS_SERVER_NAME=synapse.m.localhost + # Neither homeserver serves /.well-known/matrix/client, so the C-S API + # location has to be given explicitly. + - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008 + volumes: + - ./backend/app-service.yaml:/etc/lk-jwt-service/app-service.yaml:Z deploy: restart_policy: condition: on-failure @@ -25,7 +33,7 @@ services: - ecbackend auth-service-1: - image: ghcr.io/element-hq/lk-jwt-service:0.4.4 + image: ghcr.io/element-hq/lk-jwt-service:0.7.0 pull_policy: always hostname: auth-server-1 environment: @@ -37,6 +45,14 @@ services: # a self-signed certificate - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING - LIVEKIT_FULL_ACCESS_HOMESERVERS=* + # Registers this instance as an application service on the other homeserver. + - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml + - LIVEKIT_HS_SERVER_NAME=synapse.othersite.m.localhost + # Neither homeserver serves /.well-known/matrix/client, so the C-S API + # location has to be given explicitly. + - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008 + volumes: + - ./backend/app-service-othersite.yaml:/etc/lk-jwt-service/app-service.yaml:Z deploy: restart_policy: condition: on-failure @@ -94,7 +110,10 @@ services: synapse: hostname: homeserver - image: ghcr.io/element-hq/synapse:latest + # develop (not latest) is required for application service C-S/S-S proxying + # (MSC4512) and membership look-ups (MSC4502), which are not in a stable + # release yet. + image: ghcr.io/element-hq/synapse:develop pull_policy: always environment: - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml @@ -107,12 +126,16 @@ services: volumes: - ./backend/synapse_tmp:/data:Z - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z + - ./backend/app-service.yaml:/data/cfg/app-service.yaml:Z networks: - ecbackend synapse-1: hostname: homeserver-1 - image: ghcr.io/element-hq/synapse:latest + # develop (not latest) is required for application service C-S/S-S proxying + # (MSC4512) and membership look-ups (MSC4502), which are not in a stable + # release yet. + image: ghcr.io/element-hq/synapse:develop pull_policy: always environment: - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml @@ -125,6 +148,7 @@ services: volumes: - ./backend/synapse_tmp_othersite:/data:Z - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z + - ./backend/app-service-othersite.yaml:/data/cfg/app-service.yaml:Z networks: - ecbackend diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml index 3ed06606..bce7db34 100644 --- a/docker-compose-playwright.yml +++ b/docker-compose-playwright.yml @@ -3,17 +3,23 @@ services: synapse: # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates. - image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a + # develop (not latest) is required for application service C-S/S-S proxying + # (MSC4512) and membership look-ups (MSC4502), which are not in a stable + # release yet. + image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7 volumes: - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z synapse-1: # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates. - image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a + # develop (not latest) is required for application service C-S/S-S proxying + # (MSC4512) and membership look-ups (MSC4502), which are not in a stable + # release yet. + image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7 volumes: - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z element-web: # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates. - image: ghcr.io/element-hq/element-web:develop@sha256:133160c3c1e506276145cbb8ccaf48253f0a96af635129d785826265e4f3ca10 + image: ghcr.io/element-hq/element-web:develop@sha256:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6 element-web-1: # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates. - image: ghcr.io/element-hq/element-web:develop@sha256:133160c3c1e506276145cbb8ccaf48253f0a96af635129d785826265e4f3ca10 + image: ghcr.io/element-hq/element-web:develop@sha256:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6 diff --git a/docs/README.md b/docs/README.md index 56c96a6c..8bd14846 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,8 +3,18 @@ This folder contains documentation for setup, usage, and development of Element Call. - [Embedded vs standalone mode](./embedded_standalone.md) +- [Element Call as a React component (experimental)](../README.md#element-call-as-a-component-experimental) - [Url format and parameters](./url_params.md) - [Global JS controls](./controls.md) - [MatrixRTC modes](./matrix_rtc_modes.md) - [Self-Hosting](./self_hosting.md) - [Developing with linked packages](./linking.md) + +### Writing code for Element Call (agent-readable conventions) + +Entry point: [AGENTS.md](../AGENTS.md). + +- [Agent workflow](./agents/workflow.md) +- [Architecture](./agents/architecture.md) +- [Code style](./agents/code-style.md) +- [Testing](./agents/testing.md) diff --git a/docs/agents/architecture.md b/docs/agents/architecture.md new file mode 100644 index 00000000..fab783c1 --- /dev/null +++ b/docs/agents/architecture.md @@ -0,0 +1,85 @@ +# Architecture + +## Logic lives in view models; components render + +- Call logic lives in `src/state/`. A component that derives call state is + misplaced logic. +- Composing behaviors: a factory taking `(scope, ...deps$)`, returning named + behaviors plus callbacks. Copy `src/state/LayoutSwitchViewModel.ts`. Prefer this + for anything new. +- Owning a resource: a class taking the scope in its constructor — `MediaDevices`, + `MuteStates`, `TileStore`, `Publisher`, `Connection`. Both styles are current; + don't convert one to the other in passing. +- `foo$` is an observable. `Behavior`, an observable with a current value, is + the default for anything a view reads. + +## The view model / view contract + +- Components take `vm: ViewModel` and read state through `useBehavior`. + See `CallFooter`, `InCallView`, `LobbyView`, `SettingsModal`. +- A snapshot is `Actions & State`; every field becomes a `foo$` behavior, and none + is optional. +- An unavailable action is `undefined`, not a separate `canDoThing` flag — the + presence of the callback drives the rendering. +- Subscribe in an effect only to drive a side effect off an event stream, as + `ReactionAudioRenderer` does; never to read state a behavior already holds. + +## Scopes own lifetimes + +- `ObservableScope` bounds every subscription a view model creates. +- Reference only the scope defined in the same function; one captured from an + enclosing scope outlives its owner, and `no-observablescope-leak` rejects it. + +## Nothing reads the page + +Element Call can be mounted several times inside a host's React tree, so it owns +neither window, URL, document nor router. Each seam defaults to the old standalone +and widget behaviour. + +| Never | Use | +| --------------------------------------------- | ------------------------------------------------------------- | +| the `widget` global | `useHostBridge()` — `src/HostBridge.ts` | +| `getUrlParams()`, `window.location` | `useUrlParams()` | +| `useNavigate("/")`, `` | `useLeaveToHome()`, `LeaveToHomeLink` | +| `document.body` | `useRootElement()` | +| `window.innerWidth/Height`, `useMediaQuery` | `useRootSizeMatches()` in views, `windowSize$` in view models | +| global `i18next` | the instance in `src/utils/i18n.ts` | +| config or analytics reading their environment | `Config.initWith()`, `PosthogAnalytics.configure()` | + +- View models take values as options, never `getUrlParams()` + (`callViewModelOptionsFromParams`, `CallViewModelOptions.hostBridge`). +- The host bridge is the only channel to the host: `createWidgetHostBridge(widget)`, + `nullHostBridge` standalone, `useComponentHostBridge`. State a capability + (`supportsReactions`, `supportsProfileChanges`); never infer it from being a + widget. +- Shortcuts and portals attach to the root element, so two instances don't fight. +- Known debt, not precedent: `Grid` measures `window.innerHeight`; `ErrorView`'s + reload and `getAbsoluteRoomUrl` use `window.location`; recaptcha appends to + `document.body` on the standalone login path. + +## Context differences are options, not checks + +- Named options with per-intent defaults (`configurationForIntent`), never a + runtime check for who is hosting. +- `controlledAudioDevices`, not the platform, is what makes `MediaDevices` pick + `AndroidControlledAudioOutput` / `IOSControlledAudioOutput` over the web + `AudioOutput`. Intent presets set it on non-desktop; standalone leaves it off. +- URL params are a published contract: change one, update `docs/url_params.md`. + +## Build targets + +Code that builds in only one is a bug. + +- `build:full` — standalone app, also widget mode. +- `build:embedded` — `@element-hq/element-call-embedded`. +- `build:sdk` — SDK library, entry `sdk/main.ts`. +- `build:component` — `@element-hq/element-call-component`, sources in `component/` + (its own pnpm project; run pnpm from the repo root). Host API is in the README; + `pnpm lint:externals` rejects an import of a `react` / `react-dom` / + `matrix-js-sdk` / `livekit-client` / `@vector-im/compound-web` / + `@vector-im/compound-design-tokens` subpath the externals list omits. + Compound's stylesheets are loaded by `src/index.css` for the page and by the + host for the component, never by `src/base.css`. Two entry + points: `index.tsx` (the component) and `api.ts` (types, enums and + `configurationForIntent`, for a host that must not load the component). `api.ts` + may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`. diff --git a/docs/agents/code-style.md b/docs/agents/code-style.md new file mode 100644 index 00000000..31bf488a --- /dev/null +++ b/docs/agents/code-style.md @@ -0,0 +1,95 @@ +# Code style + +_Clean Code_ (Robert C. Martin): small functions, intention-revealing names, low +noise. + +## Reuse before you build + +Look before you write, in this order: + +1. **Compound Web** — `@vector-im/compound-web` for buttons, tooltips, alerts, + dialogs, menus, form controls, avatars; icons in + `@vector-im/compound-design-tokens/assets/web/icons`. +2. **This repo** — `src/button/`, `src/components/`, `src/input/`, `src/form/`, + `src/tabs/`, and `Modal`, `Avatar`, `Toast`, `Slider`, `ErrorView`, + `FullScreenView` at the root of `src/`. +3. **The nearest existing feature** — grep for the same shape first. A hook is + often what you want to extract, not a component. + +If nothing fits, name the new shared component in the PR body and say what you +rejected and why — never add one silently. Extend or parameterise before forking, +and extract shared logic into a hook both callers use before copying it; if you +copy, the PR says so. + +## Ordering + +- **Newspaper order.** Headline first, detail down. A file opens with what it + exists to provide. +- **Stepdown rule.** Caller above callee. A helper used by one function sits + beneath it, which needs a `function` declaration, not a `const` arrow. Existing + arrow components above their callers are not a pattern to extend — nor to churn. +- **Suites.** Test cases first, helpers below. Older suites invert this; follow the + rule in new ones, don't reorder old ones. +- **Names.** What a thing means, not what it is made of: `naturalLayout$`, not + `computedLayout$`. + +## Comments + +No comment is the default. One earns its place by giving a reason the code +cannot: a platform quirk, an outside constraint, a trap that looks like a +simplification. + +- Say the reason, then stop. Test each sentence: does the reason still stand + without it? If so, cut it. Most reasons fit on a line, so a long comment is + worth a second look — it is usually carrying something that isn't one. +- Write about the line the comment sits on, in terms of what the code does + there — leave layout to the stylesheet and measurements to the design. +- Name the condition ("where the platform can't route audio"), not the browser + or the spec entry. +- Put history — what was tried, removed or rejected, the dev journal — in the + commit or the PR description. +- In tests, comment only structure that looks wrong but isn't: batching, timers, + why this scroll position. + +Before keeping one: would it still be true after a CSS change or a refactor of +its caller? If not, cut it. + +## TypeScript, React and RxJS idiom win on a clash + +- Hooks stay unconditional at the top of a component. +- `useCallback` / `useMemo` dependency arrays sometimes force inlining. +- An RxJS pipeline stays one expression. Name the behavior, not each operator. +- A long factory is fine when it reads as a list of named behaviors. + `CallViewModel.ts` is long because the domain is. +- Marble test tables are dense on purpose. + +## Enforced by lint + +- Copyright header on every file: `Copyright Element Creations Ltd.` + plus the AGPL / commercial SPDX line. +- `logger` from `matrix-js-sdk/lib/logger`, never `console`, and no top-level + `logger.getChild()`. The `console` ban is only enforced under `src/*/**`. +- No floating or misused promises; async functions typed `Promise`. +- Inline type imports (`import { type Foo }`), so matrix-js-sdk stays lazily + loadable. +- Deep-import `matrix-js-sdk/lib/` as the codebase does. Banned is the bare + `matrix-js-sdk/lib`, `lib/index` and anything under `src/`. + +## CSS + +- Compound components and `--cpd-*` tokens in CSS modules. A hardcoded colour or px + spacing is a design question, not a licence to inline a hex. +- Size against the root, not the window: `@container element-call (…)` and + `cqw` / `cqh`, never `@media (width)` or `vw` / `vh`. Media queries stay correct + only in standalone-only views — home, login. +- Style `[data-element-call-root]`, never `body` or `:root`; the component build + makes those stand for the root (`component/build/scopeStylesToRoot.ts`). + +## Strings and a11y + +- Strings through `t()`: add the key, run `pnpm i18n`, fill `locales/en/app.json`. + Other locales come from Localazy; never hand-edit them. +- `t` from `useTranslation()`, or `src/utils/i18n.ts` outside React. Never the + `i18next` global — several instances share a page. +- Accessible names on controls, `aria-pressed` on toggles, keyboard reachability. + `jsx-a11y` rules are errors; `vitest-axe` is available. diff --git a/docs/agents/testing.md b/docs/agents/testing.md new file mode 100644 index 00000000..35a9548a --- /dev/null +++ b/docs/agents/testing.md @@ -0,0 +1,53 @@ +# Testing + +Three layers; a user-facing feature needs all three. Unit proves the logic, +Storybook proves the rendering, e2e proves the feature. Codecov gates 80% on the +lines a PR touches. + +## Unit + +- View model tests use `withTestScheduler` + `testScope()` from `src/utils/test.ts` + and read as ASCII timelines. Copy `LayoutSwitchViewModel.test.ts`. +- Component tests use Testing Library, queried by role and accessible name. +- Reuse the factories in `src/utils/test.ts` — `mockRemoteParticipant`, + `mockMatrixRoom`, `mockLivekitRoom`, `MockRTCSession`. Hand-rolled mocks drift. +- Snapshots live in `__snapshots__/`; update with `pnpm test -u`. +- How often something redraws is testable: drive the frames and count commits, not + render calls. An effect with no dependency array runs once per commit. +- `component/**/*.test.ts` runs in the same jsdom project as `src`. + +## Storybook + +A deliverable, not documentation: `pnpm test:storybook` runs every story as a real +browser test in the same CI job as the unit suite. **A UI change without a story is +incomplete.** Only three stories exist so far, so copy `CallFooter.stories.tsx`. + +- Drive the component from a snapshot via `useStaticViewModel`, never internals. +- One named story per state that matters — loading, error, empty, denied, mobile. +- Assert in a `play` function with `userEvent` / `expect` from `storybook/test`. +- Mobile is `globals: { viewport: { value: "mobile2" } }`, not a second component. +- Expose interesting props through `argTypes`. + +`.storybook/preview.tsx` supplies `TooltipProvider`, `src/index.css` and English +translations. The browser is Playwright's, so a fresh clone needs +`pnpm playwright install` once. + +## End-to-end + +- `playwright/*.spec.ts` — standalone, on Chromium and Firefox. +- `playwright/widget/` — widget mode, where cross-context bugs surface. +- `playwright/component/` — the component in a host page, via the harness on port + 3001 that Playwright starts as a second web server. Catches container-relative + layout, styles escaping the root, two instances on a page, host-bridge reports. +- `playwright/mobile/` — Pixel 7, `mobile` project only. + +Test what a user observes: the peer sees the change, it survives a reconnect, it is +right after a reload. Reuse `playwright/spa-helpers.ts`, +`playwright/widget/test-helpers.ts`, `playwright/fixtures/`. + +```sh +pnpm test # unit + storybook +pnpm backend # Synapse + LiveKit, required for e2e +pnpm test:playwright # or :open +pnpm dev:component # component harness, port 3001 +``` diff --git a/docs/agents/workflow.md b/docs/agents/workflow.md new file mode 100644 index 00000000..2170f4a8 --- /dev/null +++ b/docs/agents/workflow.md @@ -0,0 +1,50 @@ +# Agent workflow + +## Scratch files live in `agent-workspace/` + +Git-ignored. One kebab-case subfolder per task, matching the branch topic: +`agent-workspace//`. + +| File | Purpose | +| --------------------------- | -------------------------------------------------------------------------------- | +| `plan.md` | The concrete approach — files, symbols, edit order — once direction is confirmed | +| `commit-msg.txt` | `git commit -F agent-workspace//commit-msg.txt` | +| `pr-body.md` | `gh pr create --body-file agent-workspace//pr-body.md` | +| `implementation-summary.md` | What was built, decisions, trade-offs | +| `NN-prompt.md` | Raw prompt text, numbered, when worth keeping | + +- Nothing here is durable. The folder is ignored, so anything worth keeping is + promoted into the PR body, a doc, or a feature spec before the task ends. +- Never write scratch files to the repo root. Stray `load_test_summary.md` and + `config.json_` files are what this folder prevents. +- Start `pr-body.md` from `.github/PULL_REQUEST_TEMPLATE.md` and fill every + section. +- Commit subjects are plain imperative English. No conventional-commits prefixes. +- A `plan.md` and a feature spec sit at different altitudes; neither replaces the + other. A spec in `FEATURES_SPEC/` is durable and deliberately abstract — + behaviour, decisions, acceptance criteria — so the feature can be rebuilt against + a `main` nobody has seen yet. A plan is one slice of it landing on today's + `main`: the paths, symbols and edit order the spec's decisions and criteria must + not name. `FEATURES_SPEC/AGENTS.md` wins wherever the two genuinely overlap. + +## Hand off before the quality pass + +- Implement the change, run the narrowest check that rules out an obviously broken + handoff, then stop and ask whether the direction is right. +- Full `pnpm lint`, the whole suite, coverage and benchmarks come after the + direction is confirmed. +- Wider refactors, extra tests and documentation polish are follow-up work, not + part of the first handoff. +- If a check is needed before feedback, keep it to the touched code and say why. + +## Commit and PR readiness + +- Commit once the user confirms direction, or asks for one. Not before. Where the + setup has no git identity, a sandbox included, write the message to + `commit-msg.txt` and hand it over instead. +- Ready means every gate in [AGENTS.md](../../AGENTS.md#gates) is green and the + change is covered at the layers [testing.md](./testing.md) asks for. Read the diff + against [code-style.md](./code-style.md) first. +- Re-run the whole checklist after any fix. Only on green, either way. +- Once a human has started reviewing, fix forward — never force-push a + regeneration over a review in progress. diff --git a/docs/embedded_standalone.md b/docs/embedded_standalone.md index 456ce120..a85ca6ea 100644 --- a/docs/embedded_standalone.md +++ b/docs/embedded_standalone.md @@ -3,6 +3,9 @@ Element Call is available as two different packages: Full Package and Embedded Package. The Full Package is designed for standalone use, while the Embedded Package is designed for widget mode only. +There is also an experimental third option, a build of Element Call as a React component for applications +that want to render a call inside their own page rather than in an iframe; see +[Element Call as a component](../README.md#element-call-as-a-component-experimental) in the README. The table below provides a comparison of the two packages: diff --git a/docs/linking.md b/docs/linking.md index 3a18844d..3ee49a1a 100644 --- a/docs/linking.md +++ b/docs/linking.md @@ -60,6 +60,21 @@ git config --local core.hooksPath .githooks This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook. +## Testing against a matrix-js-sdk branch in CI + +Linking covers local development. In CI, `scripts/layered.sh` plays the same +role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh` +looks for a matrix-js-sdk branch with the same name as the pull request's head +branch (in the fork first, when the pull request comes from one). If there is +one, it is cloned, packed and installed over the locked version. If there is +none, the install stays as `pnpm-lock.yaml` pins it. + +This means a change that needs a not yet merged matrix-js-sdk change can be tested +by giving both branches the same name. This mirrors how element-web tests against +matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull +request falls back to the lockfile and needs a lockfile bump to stay green, +which is also what keeps `main` consistent after the merge. + ## Background Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document. diff --git a/docs/matrix_rtc_modes.md b/docs/matrix_rtc_modes.md index a30248ba..4f2e864c 100644 --- a/docs/matrix_rtc_modes.md +++ b/docs/matrix_rtc_modes.md @@ -24,7 +24,7 @@ homeserver does not support sticky events. This is the default. MSC4354 and all clients on v0.17.0 or later. The local membership requests its token from the Matrix 2.0 JWT endpoint of the [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) -and identifies the room by a hashed identity instead of a `livekit_alias`. +and identifies the room by a hashed identity instead of the Matrix `room_id`. (Remote memberships always try the new endpoint first and fall back to the legacy one, so remote participants can be on either.) diff --git a/embedded/web/package.json b/embedded/web/package.json index f698acc6..a22af56f 100644 --- a/embedded/web/package.json +++ b/embedded/web/package.json @@ -1,6 +1,6 @@ { "name": "@lotusguild/element-call-embedded", - "version": "0.25.0-lotus.29", + "version": "0.28.0-lotus.1", "files": [ "README.md", "LICENSE-AGPL-3.0", diff --git a/knip.ts b/knip.ts index 8412d591..d9de80c8 100644 --- a/knip.ts +++ b/knip.ts @@ -9,7 +9,13 @@ import { type KnipConfig } from "knip"; export default { vite: { - config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"], + config: [ + "vite.config.ts", + "vite-embedded.config.ts", + "vite-sdk.config.ts", + "vite-component.config.ts", + "vite-component-dev.config.ts", + ], }, entry: ["src/main.tsx", "eslint/index.js", "i18next.config.ts"], ignoreBinaries: [ diff --git a/locales/en/app.json b/locales/en/app.json index 2013b893..9f7e9c03 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -117,6 +117,7 @@ "peer_connection_timeout_description": "Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our <0>troubleshooting guide or contact your server administrator.", "room_creation_restricted": "Failed to create call", "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.", + "screen_share_failed": "Could not start screen sharing", "sfu_token_refused": "Can't join this call", "sticky_events_required": "Homeserver does not support Matrix 2.0 calls", "sticky_events_required_description": "This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.", @@ -165,6 +166,12 @@ "login_auth_links_prompt": "Not registered yet?", "login_subheading": "To continue to Element", "login_title": "Login", + "microphone_level": { + "label": "Microphone level", + "no_device": "No microphone found. Connect one, then try again.", + "permission_denied": "Microphone access is blocked. Allow it, then try again.", + "value": "{{level}} of {{max}}" + }, "microphone_off": "Microphone off", "microphone_on": "Microphone on", "mute_microphone_button_label": "Mute microphone", @@ -217,11 +224,14 @@ "activating": "Activating…", "camera": "Camera", "camera_numbered": "Camera {{n}}", + "camera_source": "Camera Source", "change_device_button": "Change audio device", "default": "Default", "default_named": "Default <2>({{name}})", + "default_named_plain": "Default ({{name}})", "handset": "Handset", "loudspeaker": "Loudspeaker", + "mic_source": "Mic Source", "microphone": "Microphone", "microphone_numbered": "Microphone {{n}}", "speaker": "Speaker", diff --git a/package.json b/package.json index 2f4faa60..b30f57ce 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "dev": "pnpm dev:full", "dev:full": "vite", "dev:embedded": "vite --config vite-embedded.config.js", + "dev:component": "vite --config vite-component-dev.config.ts", "build": "pnpm build:full", - "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build", + "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build", "build:full:production": "pnpm build:full", "build:full:development": "pnpm build:full --mode development", "build:embedded": "pnpm build:full --config vite-embedded.config.js", @@ -16,13 +17,19 @@ "build:sdk:development": "pnpm build:sdk --mode development", "build:sdk": "pnpm build:full --config vite-sdk.config.js", "build:sdk:production": "pnpm build:sdk", + "build:component": "pnpm build:component:js && pnpm build:component:types", + "build:component:js": "pnpm build:full --config vite-component.config.js", + "build:component:types": "tsc -p component/tsconfig.build.json", + "build:component:production": "pnpm build:component", + "build:component:development": "pnpm build:component:js --mode development && pnpm build:component:types", "serve": "vite preview", "format": "oxfmt", "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc", - "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip", - "lint:oxlint": "oxlint src playwright", - "lint:oxlint-fix": "oxlint --fix src playwright", + "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip && pnpm lint:externals", + "lint:oxlint": "oxlint src component playwright", + "lint:oxlint-fix": "oxlint --fix src component playwright", "lint:knip": "knip", + "lint:externals": "node scripts/check-component-externals.mjs", "lint:types": "tsc", "i18n": "npx i18next-cli extract", "i18n:check": "npx i18next-cli extract --ci", @@ -76,12 +83,12 @@ "@types/sdp-transform": "^2.4.5", "@typescript-eslint/utils": "^8.61.0", "@use-gesture/react": "^10.2.11", - "@vector-im/compound-design-tokens": "^10.0.0", + "@vector-im/compound-design-tokens": "^11.0.0", "@vector-im/compound-web": "^10.0.0", "@vitejs/plugin-react": "^6.0.2", "@vitest/browser-playwright": "^4.1.5", "@vitest/coverage-v8": "^4.0.18", - "@vitest/ui": "4.1.10", + "@vitest/ui": "4.1.11", "babel-plugin-react-compiler": "^1.0.0", "classnames": "^2.3.1", "copy-to-clipboard": "^3.3.3", @@ -100,13 +107,13 @@ "matrix-widget-api": "^1.18.0", "node-stdlib-browser": "^1.3.1", "normalize.css": "^8.0.1", - "observable-hooks": "^4.2.3", - "oxfmt": "^0.61.0", + "oxfmt": "^0.66.0", "oxlint": "^1.70.0", "oxlint-tsgolint": "^0.25.0", "pako": "^2.0.4", "postcss": "^8.4.41", "postcss-preset-env": "^10.0.0", + "postcss-selector-parser": "^7.1.1", "posthog-js": "1.408.2", "qrcode": "^1.5.4", "react": "19", @@ -122,7 +129,6 @@ "uuid": "^14.0.0", "vaul": "^1.0.0", "vite": "^8.0.0", - "vite-plugin-generate-file": "^0.3.0", "vite-plugin-html": "^3.2.2", "vite-plugin-node-polyfills": "^0.28.0", "vite-plugin-node-stdlib-browser": "^0.2.1", diff --git a/playwright.config.ts b/playwright.config.ts index 85e65e13..e6dcc524 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -11,6 +11,8 @@ import { join } from "path"; import path from "node:path"; import { fileURLToPath } from "node:url"; +import { COMPONENT_HARNESS_URL } from "./playwright/component/harness.ts"; + const baseURL = process.env.USE_DOCKER ? "http://localhost:8080" : "https://localhost:3000"; @@ -84,6 +86,11 @@ export default defineConfig({ // enumerateDevices work on CI runners without real hardware. "media.navigator.streams.fake": true, "media.navigator.permission.disabled": true, + // Vite serves HTTPS over HTTP/2, and Firefox intermittently stalls + // on Node's HTTP/2 server with a page that never finishes loading + // (one run in five or so, locally). Every server in the suite + // still speaks HTTP/1.1, so nothing is lost by insisting on it. + "network.http.http2.enabled": false, }, }, }, @@ -115,14 +122,29 @@ export default defineConfig({ ], /* Run your local dev server before starting the tests */ - webServer: { - command: "./scripts/playwright-webserver-command.sh", - url: baseURL, - reuseExistingServer: !process.env.CI, - ignoreHTTPSErrors: true, - gracefulShutdown: { - signal: "SIGTERM", - timeout: 500, + webServer: [ + { + command: "./scripts/playwright-webserver-command.sh", + url: baseURL, + reuseExistingServer: !process.env.CI, + ignoreHTTPSErrors: true, + gracefulShutdown: { + signal: "SIGTERM", + timeout: 500, + }, }, - }, + { + // The harness that embeds Element Call as a component. Always a Vite dev + // server, whether or not the app itself is being served from Docker, + // since there is nothing to build: it is a development page only. + command: "pnpm dev:component", + url: COMPONENT_HARNESS_URL, + reuseExistingServer: !process.env.CI, + ignoreHTTPSErrors: true, + gracefulShutdown: { + signal: "SIGTERM", + timeout: 500, + }, + }, + ], }); diff --git a/playwright/audio-menu.spec.ts b/playwright/audio-menu.spec.ts new file mode 100644 index 00000000..99385c89 --- /dev/null +++ b/playwright/audio-menu.spec.ts @@ -0,0 +1,229 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, test, type Locator, type Page } from "@playwright/test"; + +import { SpaHelpers } from "./spa-helpers.ts"; +import { installFakeDevices } from "./utils/fake-devices.ts"; + +test.describe("the quick audio menu", () => { + test("lists speakers and microphones with a live level meter", async ({ + page, + }) => { + await installFakeDevices(page, { microphones: 3, speakers: 3 }); + await joinACall(page, "Menu user", "Audio menu"); + await openAudioMenu(page); + + await expect(page.getByRole("group", { name: "Speaker" })).toBeVisible(); + await expect(page.getByRole("group", { name: "Microphone" })).toBeVisible(); + // By name, not count: the browser adds its own fake output and a Default. + for (const n of [1, 2, 3]) + await expect( + page + .getByRole("group", { name: "Speaker" }) + .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }), + ).toBeVisible(); + + await expect( + page.getByRole("menuitemradio", { checked: true }), + ).toHaveCount(2); + const meter = page.getByRole("meter", { name: "Microphone level" }); + await expect(meter).toBeVisible(); + await expect(meter).toHaveAttribute("aria-valuenow", /\d+/); + await expect(meter).toHaveAttribute("aria-valuetext", /\d+ of \d+/); + + // Both browsers here can route audio; the platform that can't is a unit check. + await expect( + page + .getByRole("group", { name: "Speaker" }) + .getByRole("menuitemradio") + .first(), + ).toHaveAttribute("aria-disabled", "false"); + }); + + test("moves the microphone and the speaker without disturbing the call", async ({ + browser, + }) => { + // Two browsers and a real call. + test.slow(); + const hostContext = await browser.newContext({ reducedMotion: "reduce" }); + const host = await hostContext.newPage(); + await installFakeDevices(host, { microphones: 3, speakers: 3 }); + await joinACall(host, "Host", "Device switch"); + + const inviteLink = await SpaHelpers.getCallInviteLink(host); + const guestContext = await browser.newContext({ reducedMotion: "reduce" }); + const guest = await guestContext.newPage(); + await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Guest"); + await SpaHelpers.expectVideoTilesCount(guest, 2); + + await openAudioMenu(host); + await selectDevice(host, "Microphone", "Fake Microphone 2"); + await openAudioMenu(host); + await selectDevice(host, "Speaker", "Fake Speaker 2"); + + // Not a rejoin: neither side drops, and the guest still has both tiles. + await expect( + host.getByRole("dialog", { name: "Reconnecting…" }), + ).not.toBeVisible(); + await expect( + guest.getByRole("dialog", { name: "Reconnecting…" }), + ).not.toBeVisible(); + await SpaHelpers.expectVideoTilesCount(guest, 2); + await expect(guest.getByText("Waiting for media...")).not.toBeVisible(); + + await hostContext.close(); + await guestContext.close(); + }); + + test("keeps the meter moving while muted, and sends nothing", async ({ + browser, + }) => { + // Two browsers and a real call. + test.slow(); + const hostContext = await browser.newContext({ reducedMotion: "reduce" }); + const host = await hostContext.newPage(); + await installFakeDevices(host); + await joinACall(host, "Muted host", "Muted meter"); + + const inviteLink = await SpaHelpers.getCallInviteLink(host); + const guestContext = await browser.newContext({ reducedMotion: "reduce" }); + const guest = await guestContext.newPage(); + await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Listener"); + await SpaHelpers.expectVideoTilesCount(guest, 2); + + const mute = host.getByTestId("incall_mute"); + await mute.click(); + await expect(mute).toHaveAttribute("aria-checked", "false"); + await openAudioMenu(host); + + const meter = host.getByRole("meter", { name: "Microphone level" }); + await expect(meter).toBeVisible(); + // By test id: the modal menu hides the rest of the call from the a11y tree. + await expect(mute).toHaveAttribute("aria-checked", "false"); + await expect(mute).toBeVisible(); + // And the guest is shown the mute. + await expect( + guest.getByTestId("videoTile").filter({ hasText: "Muted host" }), + ).toBeVisible(); + + await hostContext.close(); + await guestContext.close(); + }); + + test("keeps the meter at the foot of the list while it scrolls", async ({ + page, + }) => { + await installFakeDevices(page, { microphones: 20, speakers: 4 }); + await joinACall(page, "Scroller", "Long device list"); + await openAudioMenu(page); + + const meter = page.getByRole("meter", { name: "Microphone level" }); + await expect(meter).toBeVisible(); + + // Scrolled so the microphones start at the top: only there does a pinned + // meter differ from one that is simply last. + const list = page.locator("[role='menu'] div[role='none']").first(); + await list.evaluate((element) => { + const group = element.querySelector("[role='group'][aria-label*='icro']"); + element.scrollTop += + group!.getBoundingClientRect().top - + element.getBoundingClientRect().top; + }); + + await expect(meter).toBeInViewport(); + await expectPinnedInside(meter, list); + await expect( + page.getByRole("menuitemradio", { name: "Fake Microphone 20" }), + ).toBeVisible(); + }); + + test("shows the focus ring only when the keyboard moved the focus", async ({ + page, + browserName, + }) => { + test.skip( + browserName === "firefox", + "Headless Firefox does not deliver synthetic key presses reliably; see reconnect.spec.ts", + ); + await installFakeDevices(page); + await joinACall(page, "Keyboard user", "Focus ring"); + await openAudioMenu(page); + + const first = page.getByRole("menuitemradio").first(); + // Opened by pointer: no ring, though Radix has moved focus into the menu. + await expect.poll(async () => outlineWidth(first)).toBe(0); + + await page.keyboard.press("ArrowDown"); + const focused = page.locator("[role='menuitemradio']:focus"); + await expect.poll(async () => outlineWidth(focused)).toBeGreaterThan(0); + + // And the pointer takes it away again. + await first.hover(); + await expect.poll(async () => outlineWidth(focused)).toBe(0); + }); +}); + +/** Creates a call and joins it, leaving the page in the call. */ +async function joinACall( + page: Page, + userName: string, + callName: string, +): Promise { + await page.goto("/"); + await SpaHelpers.createCall(page, userName, callName, true); + await expect(page.getByTestId("name_tag")).toContainText(userName); + // The media controls stay disabled until devices have enumerated. + await expect(page.getByTestId("incall_mute")).toBeEnabled({ + timeout: 10_000, + }); +} + +async function openAudioMenu(page: Page): Promise { + await page.getByRole("button", { name: "Microphone" }).click(); + await expect(page.getByRole("menu")).toBeVisible(); +} + +async function selectDevice( + page: Page, + section: "Speaker" | "Microphone", + name: string, +): Promise { + const item = page + .getByRole("group", { name: section }) + .getByRole("menuitemradio", { name }); + await item.click(); + // Selecting doesn't close the menu, so dismiss it. + await page.keyboard.press("Escape"); + await expect(page.getByRole("menu")).not.toBeVisible(); +} + +/** Asserts the meter sits within the scrollport and inside the menu's frame. */ +async function expectPinnedInside( + meter: Locator, + list: Locator, +): Promise { + const meterBox = (await meter.boundingBox())!; + const listBox = (await list.boundingBox())!; + const frame = (await meter.page().getByRole("menu").boundingBox())!; + + expect(meterBox.y + meterBox.height).toBeLessThanOrEqual( + listBox.y + listBox.height + 1, + ); + expect(meterBox.y).toBeGreaterThanOrEqual(listBox.y - 1); + expect(meterBox.x).toBeGreaterThan(frame.x); + expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width); +} + +/** Painted outline width, in px. */ +async function outlineWidth(item: Locator): Promise { + if ((await item.count()) === 0) return 0; + return item.first().evaluate((element) => { + const { outlineStyle, outlineWidth } = getComputedStyle(element); + return outlineStyle === "none" ? 0 : Number.parseFloat(outlineWidth) || 0; + }); +} diff --git a/playwright/component/audio-menu.spec.ts b/playwright/component/audio-menu.spec.ts new file mode 100644 index 00000000..f4d81159 --- /dev/null +++ b/playwright/component/audio-menu.spec.ts @@ -0,0 +1,135 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, type Locator, type Page, test } from "@playwright/test"; + +import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts"; +import { installFakeDevices } from "../utils/fake-devices.ts"; + +/** + * The device menu with Element Call as a component in a host page, where the + * portalled menu must be sized against the call, not the window. Driven from + * the lobby: it builds the same menu, without two connections' worth of flake. + */ + +// Sign-in, crypto setup and sync happen twice before anything shows. +test.describe.configure({ timeout: 180_000 }); + +test("sizes the device list against the call, not the window", async ({ + page, +}) => { + await installFakeDevices(page, { microphones: 20, speakers: 4 }); + const { username, roomId } = await createUserAndRoom("menusize"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + + // A short call in a much taller page. + const container = pane.getByTestId("call-container"); + await resizeContainer(container, { width: 900, height: 400 }); + await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + + const list = await openDeviceList(page, pane); + const callHeight = (await container.boundingBox())!.height; + const windowHeight = page.viewportSize()!.height; + const listHeight = (await list.boundingBox())!.height; + + expect(callHeight).toBeLessThan(windowHeight * 0.75); + expect(listHeight).toBeLessThanOrEqual(callHeight); + expect(listHeight).toBeLessThan(windowHeight * 0.6); +}); + +test("follows the call area when the host resizes it", async ({ page }) => { + await installFakeDevices(page, { microphones: 20, speakers: 4 }); + const { username, roomId } = await createUserAndRoom("menuresize"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + + const container = pane.getByTestId("call-container"); + await resizeContainer(container, { width: 900, height: 360 }); + await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + + const list = await openDeviceList(page, pane); + const whenShort = (await list.boundingBox())!.height; + + // The host grows the call while the menu is open. + await resizeContainer(container, { width: 900, height: 700 }); + await expect + .poll(async () => (await list.boundingBox())!.height) + .toBeGreaterThan(whenShort); +}); + +test("keeps every device reachable in a small container", async ({ page }) => { + await installFakeDevices(page, { microphones: 20, speakers: 4 }); + const { username, roomId } = await createUserAndRoom("menureach"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + + const container = pane.getByTestId("call-container"); + await resizeContainer(container, { width: 400, height: 360 }); + await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + + const list = await openDeviceList(page, pane); + // More devices than fit, so the list must scroll. + expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe( + true, + ); + + const last = page.getByRole("menuitemradio", { name: "Fake Microphone 20" }); + await last.scrollIntoViewIfNeeded(); + await expect(last).toBeInViewport(); + // Reachable means clickable: the menu may be drawn outside the call area. + await last.click(); + await expect(last).toHaveAttribute("aria-checked", "true"); +}); + +test("tracks the focus source of its own call, not the page", async ({ + page, +}) => { + await installFakeDevices(page); + const { username, roomId } = await createUserAndRoom("menufocus"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const other = panes.nth(1); + + await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + await openDeviceList(page, pane); + const menu = page.getByRole("menu"); + + // Asserted on the attribute: the component build's scoped stylesheet doesn't + // reach the portalled menu, so its ring can't be read here. + await expect(menu).toHaveAttribute("data-focus-source", "pointer"); + + // A key pressed in the other call says nothing about this menu. + await other.evaluate((element) => + element.dispatchEvent( + new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }), + ), + ); + await expect(menu).toHaveAttribute("data-focus-source", "pointer"); + + await page.keyboard.press("ArrowDown"); + await expect(menu).toHaveAttribute("data-focus-source", "keyboard"); +}); + +/** Opens a component's microphone menu and returns its device list. */ +async function openDeviceList(page: Page, pane: Locator): Promise { + await pane + .getByRole("button", { name: "Microphone" }) + .click({ timeout: 60_000 }); + await expect(page.getByRole("menu")).toBeVisible(); + const list = page.locator("[role='menu'] div[role='none']").first(); + await expect(list).toBeVisible(); + return list; +} diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts new file mode 100644 index 00000000..e4376ddb --- /dev/null +++ b/playwright/component/component-call.spec.ts @@ -0,0 +1,285 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, type Locator, type Page, test } from "@playwright/test"; + +import { + createUserAndRoom, + expectWithin, + resizeContainer, + startHarness, +} from "./harness.ts"; +import { SpaHelpers } from "../spa-helpers.ts"; + +/** + * Element Call embedded as a React component, driven through the development + * harness in `component/dev`. + * + * What these cover that the widget tests cannot is everything that follows from + * sharing a page with a host: whether Element Call stays inside the space it + * was given, and whether two of it can exist at once. As a widget, the iframe + * guaranteed both. + */ + +// Each test signs in twice, sets up crypto twice and syncs twice before +// anything is on screen, and then waits for media to connect; the waits below +// are sized for that, so the tests have to be too +test.describe.configure({ timeout: 180_000 }); + +/** The settings button, whichever of the two the footer is currently showing. */ +function settingsButton(pane: Locator): Locator { + return pane + .getByTestId("settings-bottom-left") + .or(pane.getByTestId("settings-bottom-center")) + .filter({ visible: true }) + .first(); +} + +test("holds a call between two components on one page", async ({ page }) => { + const { username, roomId } = await createUserAndRoom("twocomponents"); + const panes = await startHarness(page, username, roomId); + + // Each component shows a lobby of its own, and neither has joined anything + // just by being rendered + for (const index of [0, 1]) + await expect(panes.nth(index).getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + + for (const index of [0, 1]) + await panes.nth(index).getByTestId("lobby_joinCall").click(); + + // Two devices of one account, so each component should see itself and the + // other. This is the part that proves two Element Calls in one page are two + // calls, and not one shared thing wearing two hats. + for (const index of [0, 1]) + await expect(panes.nth(index).getByTestId("videoTile")).toHaveCount(2, { + timeout: 60_000, + }); +}); + +test("keeps its modals inside the container it was given", async ({ page }) => { + const { username, roomId } = await createUserAndRoom("containment"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const container = pane.getByTestId("call-container"); + + // In the flat container the harness gives it by default, Element Call hides + // its controls a few seconds after the call starts, as it would in a flat + // window. A full-size container keeps them on screen to be clicked. + await resizeContainer(container, { width: 900, height: 640 }); + await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 }); + await expect(pane.getByTestId("footer-container")).toBeVisible({ + timeout: 60_000, + }); + + // Both of these are positioned `fixed`, and were centred on the window + // rather than the container until it was made a containing block. The + // settings dialog spilled over the host's interface; the reaction picker sat + // at 82vh, which put it below the container entirely and so out of sight. + await settingsButton(pane).click(); + await expectWithin(pane.getByRole("dialog"), container); + await pane.getByTestId("modal_close").click(); + + await pane.getByRole("button", { name: "Reactions" }).click(); + await expectWithin( + pane.getByRole("dialog", { name: "Pick reaction" }), + container, + ); +}); + +test("keeps the call inside the container, wherever the host put it", async ({ + page, +}) => { + const { username, roomId } = await createUserAndRoom("tileswithin"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const container = pane.getByTestId("call-container"); + + // Large enough for the layout switch to be offered + await resizeContainer(container, { width: 900, height: 640 }); + await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 }); + await expect(pane.getByTestId("footer-container")).toBeVisible({ + timeout: 60_000, + }); + + // The spotlight layout draws its tile in the fixed grid, which is positioned + // against Element Call's root rather than laid out in flow. The harness puts + // the container below a header of its own, so a grid offset measured from + // the top of the page instead of from the root would land the tile on top of + // the footer and out of the bottom of the container. + await pane.getByRole("radio", { name: "Spotlight" }).check(); + const tile = pane.getByTestId("videoTile").first(); + await expect(tile).toBeVisible({ timeout: 60_000 }); + await expectWithin(tile, container); +}); + +test("leaves the host's own page unstyled", async ({ page }) => { + const { username, roomId } = await createUserAndRoom("hoststyles"); + const panes = await startHarness(page, username, roomId); + await expect(panes.first().getByTestId("lobby_joinCall")).toBeVisible({ + timeout: 60_000, + }); + + // Element Call's stylesheet is written for a page of its own: normalize.css + // gives `html` a line height, Compound gives `body` its font and feature + // settings, and the design tokens live on `:root`. None of that may reach the + // host's document — the harness sets none of these itself, so anything other + // than the browser's defaults here came from us. + const host = await page.evaluate(() => { + const html = getComputedStyle(document.documentElement); + const body = getComputedStyle(document.body); + return { + lineHeight: html.lineHeight, + fontFeatureSettings: body.fontFeatureSettings, + token: html.getPropertyValue("--cpd-color-text-primary"), + }; + }); + expect(host).toEqual({ + lineHeight: "normal", + fontFeatureSettings: "normal", + token: "", + }); + + // While inside the container, the same rules do apply + const root = panes.first().locator("[data-element-call-root]"); + await expect(root).toHaveCSS("font-feature-settings", /"kern"/); +}); + +test("tells its host what it is doing", async ({ page }) => { + const { username, roomId } = await createUserAndRoom("hostbridge"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const log = page.getByTestId("bridge-log"); + + // Every component reports to its host through the bridge, whether that host + // is a widget container or an application embedding it directly + await expect(log).toContainText("contentLoaded", { timeout: 60_000 }); + + await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 }); + await expect(log).toContainText("notifyJoined", { timeout: 60_000 }); + await expect(log).toContainText("setAlwaysOnScreen(true)", { + timeout: 60_000, + }); + + // And takes instructions back: the host asking for a mute should come back + // as the component reporting the new state + await pane.getByRole("button", { name: "Mute" }).click(); + await expect(log).toContainText("notifyDeviceMute(audio: false", { + timeout: 30_000, + }); +}); + +test("lays itself out for the space it is given, not the page", async ({ + page, +}) => { + const { username, roomId } = await createUserAndRoom("containersize"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const container = pane.getByTestId("call-container"); + const call = pane.locator("[data-layout]"); + + await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 }); + await expect(call).toBeVisible({ timeout: 60_000 }); + await expect(call).not.toHaveAttribute("data-layout", "pip"); + + // As a widget, Element Call's container and its window were one and the same: + // a host wanting a picture-in-picture made the iframe small, and Element Call + // saw the window shrink. A component gets no such signal from the window, + // which stays as large as it ever was; only the container changes. + await resizeContainer(container, { width: 300, height: 300 }); + await expect(call).toHaveAttribute("data-layout", "pip"); + + await resizeContainer(container, { width: 900, height: 700 }); + await expect(call).not.toHaveAttribute("data-layout", "pip"); +}); + +/** + * The shape of a call at whatever size it has been given: the layout it chose, + * how much of the height the tile and the footer take, and which controls the + * footer shows. Two calls with the same shape look the same, participants aside. + */ +async function callShape(scope: Page | Locator): Promise<{ + layout: string | null; + tileHeight: number; + footerHeight: number; + buttons: (string | null)[]; +}> { + const call = scope.locator("[data-layout]"); + const footer = scope.getByTestId("footer-container"); + await expect(footer).toBeVisible(); + // The tile arrives with the media connection, which can take a while + const tile = scope.getByTestId("videoTile").first(); + await expect(tile).toBeVisible({ timeout: 60_000 }); + const tileBox = (await tile.boundingBox())!; + const footerBox = (await footer.boundingBox())!; + // Buttons and switches alike: the mute controls are switches + const buttons = await footer + .locator("button") + .filter({ visible: true }) + .evaluateAll((elements) => + elements.map((element) => element.getAttribute("aria-label")), + ); + return { + layout: await call.getAttribute("data-layout"), + tileHeight: Math.round(tileBox.height), + footerHeight: Math.round(footerBox.height), + buttons, + }; +} + +test("looks the same in a small container as in a small window", async ({ + page, + browser, +}) => { + // Two calls to set up, one of them through the harness's two logins + test.setTimeout(300_000); + const size = { width: 300, height: 300 }; + + // The reference is Element Call owning a window of that size, which is what + // a mobile app's webview or a browser's picture-in-picture gives it, and + // what its small-window styling was written for. + // No permissions to grant: each browser is launched with fake media that is + // handed out without asking (see playwright.config.ts), and Firefox rejects + // a request for `camera` or `microphone` outright + const referenceContext = await browser.newContext({ + viewport: size, + ignoreHTTPSErrors: true, + }); + const referencePage = await referenceContext.newPage(); + await referencePage.goto("/"); + await SpaHelpers.createCall(referencePage, "Reference", "smallwindow", true); + const reference = await callShape(referencePage); + await referencePage.screenshot({ + path: test.info().outputPath("small-window.png"), + }); + + // The component gets a container of that size, in a window that is far larger + const { username, roomId } = await createUserAndRoom("smallcontainer"); + const panes = await startHarness(page, username, roomId); + const pane = panes.first(); + const container = pane.getByTestId("call-container"); + await resizeContainer(container, size); + await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 }); + await expect(pane.locator("[data-layout]")).toBeVisible({ timeout: 60_000 }); + const component = await callShape(pane); + await container.screenshot({ + path: test.info().outputPath("small-container.png"), + }); + await referenceContext.close(); + + // The breakpoints in Element Call's stylesheets are container queries, so a + // small container gets the compact footer a small window does, rather than + // the full-width one the window's own size would call for + expect(component).toEqual(reference); + // And that footer is the compact one: a single row of controls, not the + // full-height bar with its logo and layout switch that a large window gets + expect(component.footerHeight).toBeLessThan(size.height / 3); + expect(component.tileHeight + component.footerHeight).toBeLessThanOrEqual( + size.height, + ); +}); diff --git a/playwright/component/harness.ts b/playwright/component/harness.ts new file mode 100644 index 00000000..19bc2e08 --- /dev/null +++ b/playwright/component/harness.ts @@ -0,0 +1,132 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, type Locator, type Page } from "@playwright/test"; + +import { SynapseAdmin } from "../utils/synapse-admin.ts"; + +/** + * Where the component harness is served — `component/dev`, which embeds Element + * Call the way a host application would. Not the `baseURL` the rest of the + * suite uses: these tests drive a page that contains Element Call rather than + * Element Call itself. + */ +export const COMPONENT_HARNESS_URL = "https://localhost:3001"; + +const HOMESERVER_URL = "https://synapse.m.localhost"; +const PASSWORD = "foobarbaz1!"; + +/** + * Registers a user through the Synapse admin API and creates a room for it to + * call in, without touching a browser. The harness signs into this account + * twice, giving two devices in one page and so a real call between the two + * components. + */ +export async function createUserAndRoom( + name: string, +): Promise<{ username: string; roomId: string }> { + const username = `${name}_${Date.now()}`; + const { access_token: accessToken } = await SynapseAdmin.forHomeserver( + HOMESERVER_URL, + ).registerUser(username, PASSWORD, name); + + const response = await fetch( + `${HOMESERVER_URL}/_matrix/client/v3/createRoom`, + { + method: "POST", + headers: { + Authorization: `Bearer ${accessToken}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ name: `${name}'s call`, preset: "private_chat" }), + }, + ); + if (!response.ok) + throw new Error( + `Could not create a room: ${response.status} ${await response.text()}`, + ); + const { room_id: roomId } = (await response.json()) as { room_id: string }; + + return { username, roomId }; +} + +/** + * Opens the harness signed in as the given user, and waits for both embedded + * calls to appear. + * + * @returns The two containers the host gave Element Call, in order. + */ +export async function startHarness( + page: Page, + username: string, + roomId: string, +): Promise { + const query = new URLSearchParams({ + homeserver: HOMESERVER_URL, + username, + password: PASSWORD, + room: roomId, + }); + await page.goto(`${COMPONENT_HARNESS_URL}/?${query.toString()}`); + await page.getByRole("button", { name: "Start" }).click(); + + const panes = page.getByTestId("call-pane"); + // Two logins, two crypto setups and two initial syncs happen first + await expect(panes).toHaveCount(2, { timeout: 120_000 }); + return panes; +} + +/** + * Asserts that one element is drawn entirely inside another. + * + * This is the check that being a component rather than an iframe costs us: an + * iframe could not paint outside itself whatever its stylesheets said, whereas + * a component shares the page and has to be made to stay put. + */ +export async function expectWithin( + inner: Locator, + outer: Locator, +): Promise { + await expect(inner).toBeVisible(); + // Wait for animations to settle. + await inner.evaluate(async (element) => { + for (const animation of element.getAnimations({ subtree: true })) + await animation.finished; + }); + + const innerBox = await inner.boundingBox(); + const outerBox = await outer.boundingBox(); + if (innerBox === null || outerBox === null) + throw new Error("Expected both elements to be laid out"); + + // A pixel of slack, for subpixel layout + const slack = 1; + expect(innerBox.x).toBeGreaterThanOrEqual(outerBox.x - slack); + expect(innerBox.y).toBeGreaterThanOrEqual(outerBox.y - slack); + expect(innerBox.x + innerBox.width).toBeLessThanOrEqual( + outerBox.x + outerBox.width + slack, + ); + expect(innerBox.y + innerBox.height).toBeLessThanOrEqual( + outerBox.y + outerBox.height + slack, + ); +} + +/** + * Gives one of the harness's containers a new size. Element Call lays itself + * out for the size of its container, so this is how a test puts it into a + * particular mode: a flat or narrow one, a picture-in-picture, or a full-size + * window, without the window itself changing at all. + */ +export async function resizeContainer( + container: Locator, + size: { width: number; height: number }, +): Promise { + await container.evaluate((element, { width, height }) => { + element.style.width = `${width}px`; + element.style.height = `${height}px`; + }, size); +} diff --git a/playwright/fixtures/widget-user.ts b/playwright/fixtures/widget-user.ts index 2c43ee1b..a60776c9 100644 --- a/playwright/fixtures/widget-user.ts +++ b/playwright/fixtures/widget-user.ts @@ -109,10 +109,15 @@ export const widgetTest = test.extend({ await TestHelpers.dismissInviteUnknownUserModal(ewPage1); // Accept the invite + await TestHelpers.closeReleaseAnnouncement( + ewPage2, + "Introducing Sections", + ); + await TestHelpers.expandAllSections(ewPage2); await expect( - ewPage2.getByRole("option", { name: "Welcome Room" }), + TestHelpers.roomListItem(ewPage2, "Welcome Room"), ).toBeVisible(); - await ewPage2.getByRole("option", { name: "Welcome Room" }).click(); + await TestHelpers.roomListItem(ewPage2, "Welcome Room").click(); await ewPage2.getByRole("button", { name: "Accept" }).click(); await expect( ewPage2 @@ -127,7 +132,7 @@ export const widgetTest = test.extend({ await ewPage1 .getByRole("navigation", { name: "Room list" }) - .getByRole("button", { name: "New conversation" }) + .getByRole("button", { name: "New", exact: true }) .click(); await ewPage1.getByRole("menuitem", { name: "Start chat" }).click(); @@ -152,8 +157,12 @@ export const widgetTest = test.extend({ ).toBeVisible(); // Accept the DM invite from brooks - // This how playwright record selects the DM invite in the room list - await ewPage2.getByRole("option", { name: "Open room" }).click(); + await TestHelpers.closeReleaseAnnouncement( + ewPage2, + "Introducing Sections", + ); + await TestHelpers.expandAllSections(ewPage2); + await TestHelpers.roomListItem(ewPage2, brooksDisplayName).click(); await ewPage2.getByRole("button", { name: "Start chatting" }).click(); } diff --git a/playwright/reconnect.spec.ts b/playwright/reconnect.spec.ts index bd4dd199..81e70b9c 100644 --- a/playwright/reconnect.spec.ts +++ b/playwright/reconnect.spec.ts @@ -7,6 +7,8 @@ Please see LICENSE in the repository root for full details. import { expect, test } from "@playwright/test"; +import { SpaHelpers } from "./spa-helpers"; + // Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode test.skip( ({ browserName }) => browserName === "firefox", @@ -17,6 +19,12 @@ test("can only interact with header and footer while reconnecting", async ({ page, }) => { await page.goto("/"); + + // The reconnecting state is entered via the probablyLeft timer, which + // mirrors the delayed leave event's timeout. With delegation that timeout + // is one hour, putting it out of reach of the clock fast-forward below. + // Keep the leave client-managed so its short timeout applies. + await SpaHelpers.disableLeaveDelegation(page); await page.getByTestId("home_callName").click(); await page.getByTestId("home_callName").fill("Test call"); await page.getByTestId("home_displayName").click(); diff --git a/playwright/spa-call-sticky.spec.ts b/playwright/spa-call-sticky.spec.ts index 1dbda735..b45399da 100644 --- a/playwright/spa-call-sticky.spec.ts +++ b/playwright/spa-call-sticky.spec.ts @@ -19,6 +19,7 @@ async function setupTwoUserSpaCall( browser: Browser, page: Page, browserName: string, + opts: { disableGuestLeaveDelegation?: boolean } = {}, ): Promise<{ guestPage: Page }> { test.skip( browserName === "firefox", @@ -52,6 +53,9 @@ async function setupTwoUserSpaCall( await guestPage.goto("/"); + if (opts.disableGuestLeaveDelegation) + await SpaHelpers.disableLeaveDelegation(guestPage); + let pevaraHasSentStickyEvent = false; const pevaraResolver = Promise.withResolvers(); @@ -102,7 +106,13 @@ test("One to One rejoin after improper leave does not crash EC", async ({ page, browserName, }) => { - const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName); + // With delegation, the backend sends the guest's delayed leave event within + // moments of the improper leave, so the stale membership this test needs + // would be cleaned up before the rejoin. Keep the guest's leave + // client-managed so the stale membership lingers. + const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName, { + disableGuestLeaveDelegation: true, + }); await SpaHelpers.expectVideoTilesCount(page, 2); await SpaHelpers.expectVideoTilesCount(guestPage, 2); diff --git a/playwright/spa-helpers.ts b/playwright/spa-helpers.ts index 5f99e32d..71150b8b 100644 --- a/playwright/spa-helpers.ts +++ b/playwright/spa-helpers.ts @@ -111,6 +111,24 @@ async function setRtcModeFromSettings( await page.getByTestId("modal_close").click(); } +/** + * Makes the delayed-leave delegation support probes fail so that the client + * manages its delayed leave event itself instead of delegating it to the + * backend. + * + * Must be installed before the page joins a call. + */ +async function disableLeaveDelegation(page: Page): Promise { + // Covers both the transport probe (/delegate_delayed_leave) + // and the homeserver probe (MSC4195, .../rtc/livekit/delegate_delayed_leave). + await page.route("**/delegate_delayed_leave", async (route) => + route.fulfill({ + status: 404, + headers: { "Access-Control-Allow-Origin": "*" }, + }), + ); +} + /** * Expect a certain number of video tiles to be present and visible. */ @@ -133,5 +151,6 @@ export const SpaHelpers = { createCall, getCallInviteLink, joinCallFromInviteLink, + disableLeaveDelegation, expectVideoTilesCount, }; diff --git a/playwright/utils/fake-devices.ts b/playwright/utils/fake-devices.ts new file mode 100644 index 00000000..e67f053b --- /dev/null +++ b/playwright/utils/fake-devices.ts @@ -0,0 +1,85 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { type Page } from "@playwright/test"; + +/** + * Adds synthetic devices beside the browser's one fake microphone and speaker, + * so the menu has a choice to show. They share one capture and `setSinkId` is + * accepted but not honoured: routing still needs hardware and a manual check. + * Call before the page navigates. + */ +export async function installFakeDevices( + page: Page, + { microphones = 2, speakers = 2 } = {}, +): Promise { + await page.addInitScript( + ({ microphones, speakers }) => { + const synthetic = ( + kind: MediaDeviceKind, + count: number, + name: string, + ): MediaDeviceInfo[] => + Array.from({ length: count }, (_, i) => { + const info = { + deviceId: `${kind}-${i + 1}`, + groupId: `${kind}-group-${i + 1}`, + kind, + label: `${name} ${i + 1}`, + }; + return { ...info, toJSON: () => info } as MediaDeviceInfo; + }); + const ids = new Set( + [ + ...synthetic("audioinput", microphones, ""), + ...synthetic("audiooutput", speakers, ""), + ].map((d) => d.deviceId), + ); + + const devices = navigator.mediaDevices; + const enumerate = devices.enumerateDevices.bind(devices); + devices.enumerateDevices = async (): Promise => [ + ...(await enumerate()), + ...synthetic("audioinput", microphones, "Fake Microphone"), + ...synthetic("audiooutput", speakers, "Fake Speaker"), + ]; + + // Our ids name no hardware, so drop the exact-device constraint. + const getUserMedia = devices.getUserMedia.bind(devices); + devices.getUserMedia = async ( + constraints?: MediaStreamConstraints, + ): Promise => { + const audio = constraints?.audio; + if (typeof audio === "object") { + const requested = audio.deviceId; + const id = + typeof requested === "object" && requested !== null + ? ((requested as ConstrainDOMStringParameters).exact as string) + : (requested as string | undefined); + if (id !== undefined && ids.has(id)) + return getUserMedia({ ...constraints, audio: true }); + } + return getUserMedia(constraints); + }; + + // Accept routing to our ids on both media elements and the AudioContext, + // which the app also routes. + for (const proto of [ + HTMLMediaElement.prototype, + AudioContext.prototype, + ]) { + const sink = proto as { setSinkId?: (id: string) => Promise }; + const setSinkId = sink.setSinkId; + if (setSinkId === undefined) continue; + sink.setSinkId = async function (id: string): Promise { + if (!ids.has(id)) await setSinkId.call(this, id); + }; + } + }, + { microphones, speakers }, + ); +} diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts index 0322596a..86cbe8c2 100644 --- a/playwright/widget/test-helpers.ts +++ b/playwright/widget/test-helpers.ts @@ -11,6 +11,7 @@ import { type JSHandle, type Page, type FrameLocator, + type Locator, } from "@playwright/test"; import { type MatrixClient } from "matrix-js-sdk"; @@ -203,6 +204,16 @@ export class TestHelpers { } } + public static async expandAllSections(page: Page): Promise { + try { + await page + .getByRole("button", { name: "Expand all sections" }) + .click({ timeout: 2000 }); + } catch { + // Already expanded or button not present + } + } + public static async createRoom( name: string, page: Page, @@ -212,7 +223,7 @@ export class TestHelpers { await page .getByRole("navigation", { name: "Room list" }) - .getByRole("button", { name: "New conversation" }) + .getByRole("button", { name: "New", exact: true }) .click(); await page.getByRole("menuitem", { name: "New Room" }).click({ @@ -253,9 +264,9 @@ export class TestHelpers { roomName: string, page: Page, ): Promise { - await page.getByRole("option", { name: roomName }).click({ - timeout: 10000, - }); + await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections"); + await TestHelpers.expandAllSections(page); + await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 }); await page.getByRole("button", { name: "Accept" }).click({ timeout: 5000, }); @@ -350,6 +361,17 @@ export class TestHelpers { .click(); } + /** + * Locates a room in the room list by its name. + * + * Matches on the aria-label prefix because the item's role differs between + * the flat room list (`option`) and the sectioned room list (`button`), and + * the label may carry a suffix such as " invitation.". + */ + public static roomListItem(page: Page, roomName: string): Locator { + return page.locator(`[aria-label^="Open room ${roomName}"]`); + } + /** * Switches to a room in the room list by its name. * @param page - The EW page @@ -359,7 +381,8 @@ export class TestHelpers { page: Page, roomName: string, ): Promise { - await page.getByRole("option", { name: `Open room ${roomName}` }).click(); + await TestHelpers.expandAllSections(page); + await TestHelpers.roomListItem(page, roomName).click(); } public static async dismissInviteUnknownUserModal(page: Page): Promise { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5d8f89ca..23e2eaa3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,7 +24,7 @@ importers: devDependencies: '@codecov/vite-plugin': specifier: ^1.3.0 - version: 1.9.1(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@fontsource/inconsolata': specifier: ^5.1.0 version: 5.3.0 @@ -39,34 +39,34 @@ importers: version: 11.7.12 '@livekit/components-core': specifier: ^0.12.0 - version: 0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1) + version: 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1) '@livekit/components-react': specifier: ^2.0.0 - version: 2.9.24(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1) + version: 2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1) '@livekit/track-processors': specifier: ^0.7.1 - version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22)) + version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22)) '@mediapipe/tasks-vision': specifier: ^0.10.18 version: 0.10.35 '@playwright/test': specifier: ^1.60.0 - version: 1.62.0 + version: 1.62.1 '@radix-ui/react-dialog': specifier: ^1.0.4 - version: 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@radix-ui/react-slider': specifier: ^1.1.2 - version: 1.4.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 1.4.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@radix-ui/react-visually-hidden': specifier: ^1.0.3 - version: 1.2.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 1.2.11(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@react-spring/web': specifier: ^10.0.0 version: 10.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@rolldown/plugin-babel': specifier: ^0.2.3 - version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@sentry/react': specifier: ^8.0.0 version: 8.55.2(react@19.2.8) @@ -75,13 +75,13 @@ importers: version: 3.6.1(supports-color@7.2.0) '@storybook/addon-docs': specifier: ^10.3.6 - version: 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)) '@storybook/addon-vitest': specifier: ^10.3.6 - version: 10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.10) + version: 10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.11) '@storybook/react-vite': specifier: ^10.3.6 - version: 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@testing-library/dom': specifier: ^10.1.0 version: 10.4.1 @@ -90,10 +90,10 @@ importers: version: 6.9.1 '@testing-library/react': specifier: ^16.0.0 - version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 16.3.3(@testing-library/dom@10.4.1)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@testing-library/user-event': specifier: ^14.5.1 - version: 14.6.1(@testing-library/dom@10.4.1) + version: 14.6.7(@testing-library/dom@10.4.1) '@types/eslint': specifier: ^9.6.1 version: 9.6.1 @@ -117,37 +117,37 @@ importers: version: 1.5.6 '@types/react': specifier: ^19.0.0 - version: 19.2.17 + version: 19.2.18 '@types/react-dom': specifier: ^19.0.0 - version: 19.2.3(@types/react@19.2.17) + version: 19.2.5(@types/react@19.2.18) '@types/sdp-transform': specifier: ^2.4.5 version: 2.15.0 '@typescript-eslint/utils': specifier: ^8.61.0 - version: 8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3) + version: 8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3) '@use-gesture/react': specifier: ^10.2.11 version: 10.3.1(react@19.2.8) '@vector-im/compound-design-tokens': - specifier: ^10.0.0 - version: 10.2.4(@types/react@19.2.17)(react@19.2.8) + specifier: ^11.0.0 + version: 11.1.0(@types/react@19.2.18)(react@19.2.8) '@vector-im/compound-web': specifier: ^10.0.0 - version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@vitejs/plugin-react': specifier: ^6.0.2 - version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@vitest/browser-playwright': specifier: ^4.1.5 - version: 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) + version: 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) '@vitest/coverage-v8': specifier: ^4.0.18 - version: 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10) + version: 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11) '@vitest/ui': - specifier: 4.1.10 - version: 4.1.10(vitest@4.1.10) + specifier: 4.1.11 + version: 4.1.11(vitest@4.1.11) babel-plugin-react-compiler: specifier: ^1.0.0 version: 1.0.0 @@ -162,19 +162,19 @@ importers: version: link:eslint eslint-plugin-storybook: specifier: ^10.3.6 - version: 10.5.5(eslint@8.57.1(supports-color@7.2.0))(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3) + version: 10.6.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3) fetch-mock: specifier: 11.1.5 version: 11.1.5(node-fetch@2.7.0) i18next: specifier: ^26.0.0 - version: 26.3.6(typescript@5.9.3) + version: 26.4.1(typescript@5.9.3) i18next-browser-languagedetector: specifier: ^8.0.0 version: 8.2.1 i18next-cli: specifier: ^1.61.0 - version: 1.67.3(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3) + version: 1.72.4(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3) jsdom: specifier: ^26.0.0 version: 26.1.0(supports-color@7.2.0) @@ -183,7 +183,7 @@ importers: version: 5.88.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(@types/node@24.13.3)(typescript@5.9.3) livekit-client: specifier: ^2.18.1 - version: 2.22.0(@types/dom-mediacapture-record@1.0.22) + version: 2.22.3(@types/dom-mediacapture-record@1.0.22) lodash-es: specifier: ^4.17.21 version: 4.18.1 @@ -192,25 +192,22 @@ importers: version: 1.9.2 matrix-js-sdk: specifier: github:matrix-org/matrix-js-sdk#develop - version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a + version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999 matrix-widget-api: specifier: ^1.18.0 - version: 1.18.0 + version: 1.19.0 node-stdlib-browser: specifier: ^1.3.1 version: 1.3.1 normalize.css: specifier: ^8.0.1 version: 8.0.1 - observable-hooks: - specifier: ^4.2.3 - version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2) oxfmt: - specifier: ^0.61.0 - version: 0.61.0 + specifier: ^0.66.0 + version: 0.66.0 oxlint: specifier: ^1.70.0 - version: 1.76.0(oxlint-tsgolint@0.25.0) + version: 1.81.0(oxlint-tsgolint@0.25.0) oxlint-tsgolint: specifier: ^0.25.0 version: 0.25.0 @@ -219,10 +216,13 @@ importers: version: 2.2.0 postcss: specifier: ^8.4.41 - version: 8.5.25 + version: 8.5.26 postcss-preset-env: specifier: ^10.0.0 - version: 10.6.1(postcss@8.5.25) + version: 10.6.1(postcss@8.5.26) + postcss-selector-parser: + specifier: ^7.1.1 + version: 7.1.3 posthog-js: specifier: 1.408.2 version: 1.408.2 @@ -237,10 +237,10 @@ importers: version: 19.2.8(react@19.2.8) react-i18next: specifier: ^16.0.0 <16.7.0 - version: 16.6.6(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3) + version: 16.6.6(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3) react-router-dom: specifier: ^7.0.0 - version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react-use-measure: specifier: ^2.1.1 version: 2.1.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -249,10 +249,10 @@ importers: version: 7.8.2 sass: specifier: ^1.42.1 - version: 1.102.0 + version: 1.103.1 storybook: specifier: ^10.3.6 - version: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + version: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) typescript: specifier: ^5.8.3 version: 5.9.3 @@ -261,37 +261,34 @@ importers: version: 4.7.1 uuid: specifier: ^14.0.0 - version: 14.0.1 + version: 14.0.2 vaul: specifier: ^1.0.0 - version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) vite: specifier: ^8.0.0 - version: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) - vite-plugin-generate-file: - specifier: ^0.3.0 - version: 0.3.1 + version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) vite-plugin-html: specifier: ^3.2.2 - version: 3.2.2(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vite-plugin-node-polyfills: specifier: ^0.28.0 - version: 0.28.0(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 0.28.0(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vite-plugin-node-stdlib-browser: specifier: ^0.2.1 - version: 0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vite-plugin-svgr: specifier: ^4.0.0 - version: 4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vite-plugin-wasm: specifier: ^3.6.0 - version: 3.6.0(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 3.6.0(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vitest: specifier: ^4.1.5 - version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) vitest-axe: specifier: ^1.0.0-pre.3 - version: 1.0.0-pre.5(vitest@4.1.10) + version: 1.0.0-pre.5(vitest@4.1.11) packages: @@ -728,8 +725,8 @@ packages: peerDependencies: postcss: ^8.4 - '@emnapi/core@1.11.1': - resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==} + '@emnapi/core@1.11.0': + resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==} '@emnapi/core@1.11.2': resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==} @@ -737,8 +734,8 @@ packages: '@emnapi/core@1.9.2': resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==} - '@emnapi/runtime@1.11.1': - resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==} + '@emnapi/runtime@1.11.0': + resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==} '@emnapi/runtime@1.11.2': resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==} @@ -752,158 +749,158 @@ packages: '@emnapi/wasi-threads@1.2.2': resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==} - '@esbuild/aix-ppc64@0.28.1': - resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==} + '@esbuild/aix-ppc64@0.28.2': + resolution: {integrity: sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==} engines: {node: '>=18'} cpu: [ppc64] os: [aix] - '@esbuild/android-arm64@0.28.1': - resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==} + '@esbuild/android-arm64@0.28.2': + resolution: {integrity: sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==} engines: {node: '>=18'} cpu: [arm64] os: [android] - '@esbuild/android-arm@0.28.1': - resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==} + '@esbuild/android-arm@0.28.2': + resolution: {integrity: sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==} engines: {node: '>=18'} cpu: [arm] os: [android] - '@esbuild/android-x64@0.28.1': - resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==} + '@esbuild/android-x64@0.28.2': + resolution: {integrity: sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==} engines: {node: '>=18'} cpu: [x64] os: [android] - '@esbuild/darwin-arm64@0.28.1': - resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==} + '@esbuild/darwin-arm64@0.28.2': + resolution: {integrity: sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==} engines: {node: '>=18'} cpu: [arm64] os: [darwin] - '@esbuild/darwin-x64@0.28.1': - resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==} + '@esbuild/darwin-x64@0.28.2': + resolution: {integrity: sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==} engines: {node: '>=18'} cpu: [x64] os: [darwin] - '@esbuild/freebsd-arm64@0.28.1': - resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==} + '@esbuild/freebsd-arm64@0.28.2': + resolution: {integrity: sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==} engines: {node: '>=18'} cpu: [arm64] os: [freebsd] - '@esbuild/freebsd-x64@0.28.1': - resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==} + '@esbuild/freebsd-x64@0.28.2': + resolution: {integrity: sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==} engines: {node: '>=18'} cpu: [x64] os: [freebsd] - '@esbuild/linux-arm64@0.28.1': - resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==} + '@esbuild/linux-arm64@0.28.2': + resolution: {integrity: sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==} engines: {node: '>=18'} cpu: [arm64] os: [linux] - '@esbuild/linux-arm@0.28.1': - resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==} + '@esbuild/linux-arm@0.28.2': + resolution: {integrity: sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==} engines: {node: '>=18'} cpu: [arm] os: [linux] - '@esbuild/linux-ia32@0.28.1': - resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==} + '@esbuild/linux-ia32@0.28.2': + resolution: {integrity: sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==} engines: {node: '>=18'} cpu: [ia32] os: [linux] - '@esbuild/linux-loong64@0.28.1': - resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==} + '@esbuild/linux-loong64@0.28.2': + resolution: {integrity: sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==} engines: {node: '>=18'} cpu: [loong64] os: [linux] - '@esbuild/linux-mips64el@0.28.1': - resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==} + '@esbuild/linux-mips64el@0.28.2': + resolution: {integrity: sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==} engines: {node: '>=18'} cpu: [mips64el] os: [linux] - '@esbuild/linux-ppc64@0.28.1': - resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==} + '@esbuild/linux-ppc64@0.28.2': + resolution: {integrity: sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==} engines: {node: '>=18'} cpu: [ppc64] os: [linux] - '@esbuild/linux-riscv64@0.28.1': - resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==} + '@esbuild/linux-riscv64@0.28.2': + resolution: {integrity: sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==} engines: {node: '>=18'} cpu: [riscv64] os: [linux] - '@esbuild/linux-s390x@0.28.1': - resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==} + '@esbuild/linux-s390x@0.28.2': + resolution: {integrity: sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==} engines: {node: '>=18'} cpu: [s390x] os: [linux] - '@esbuild/linux-x64@0.28.1': - resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==} + '@esbuild/linux-x64@0.28.2': + resolution: {integrity: sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==} engines: {node: '>=18'} cpu: [x64] os: [linux] - '@esbuild/netbsd-arm64@0.28.1': - resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==} + '@esbuild/netbsd-arm64@0.28.2': + resolution: {integrity: sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==} engines: {node: '>=18'} cpu: [arm64] os: [netbsd] - '@esbuild/netbsd-x64@0.28.1': - resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==} + '@esbuild/netbsd-x64@0.28.2': + resolution: {integrity: sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==} engines: {node: '>=18'} cpu: [x64] os: [netbsd] - '@esbuild/openbsd-arm64@0.28.1': - resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==} + '@esbuild/openbsd-arm64@0.28.2': + resolution: {integrity: sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==} engines: {node: '>=18'} cpu: [arm64] os: [openbsd] - '@esbuild/openbsd-x64@0.28.1': - resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==} + '@esbuild/openbsd-x64@0.28.2': + resolution: {integrity: sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==} engines: {node: '>=18'} cpu: [x64] os: [openbsd] - '@esbuild/openharmony-arm64@0.28.1': - resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==} + '@esbuild/openharmony-arm64@0.28.2': + resolution: {integrity: sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==} engines: {node: '>=18'} cpu: [arm64] os: [openharmony] - '@esbuild/sunos-x64@0.28.1': - resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==} + '@esbuild/sunos-x64@0.28.2': + resolution: {integrity: sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==} engines: {node: '>=18'} cpu: [x64] os: [sunos] - '@esbuild/win32-arm64@0.28.1': - resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==} + '@esbuild/win32-arm64@0.28.2': + resolution: {integrity: sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==} engines: {node: '>=18'} cpu: [arm64] os: [win32] - '@esbuild/win32-ia32@0.28.1': - resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==} + '@esbuild/win32-ia32@0.28.2': + resolution: {integrity: sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==} engines: {node: '>=18'} cpu: [ia32] os: [win32] - '@esbuild/win32-x64@0.28.1': - resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==} + '@esbuild/win32-x64@0.28.2': + resolution: {integrity: sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==} engines: {node: '>=18'} cpu: [x64] os: [win32] @@ -993,12 +990,12 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} deprecated: Use @eslint/object-schema instead - '@inquirer/ansi@2.0.7': - resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==} + '@inquirer/ansi@2.0.8': + resolution: {integrity: sha512-WpQM+Ti6Z40EFwwt+uL2p4UabT+W179zHp6HhLVOzfbwnVn05IPO/eXIZXGNqcT1jbQ15SujNLzQ39k4QPPxBQ==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} - '@inquirer/checkbox@5.2.1': - resolution: {integrity: sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==} + '@inquirer/checkbox@5.2.4': + resolution: {integrity: sha512-oKT5RNeO9oKYizSyOxKb66IrKUsYVMQD2tnjllYW4wmSOe9WawfL3OE2p82JuvAyo+/nDIEem5P4Bm/ZIVYVew==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1006,8 +1003,8 @@ packages: '@types/node': optional: true - '@inquirer/confirm@6.1.1': - resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==} + '@inquirer/confirm@6.3.1': + resolution: {integrity: sha512-HvnOHal39DTenOVoRpIy8Z+n4YYfNa3Qhi/P8zFqn9/d1crpmQG0DPx34rwOeOFvotgKr9Vov/14OmKR/Iwfjw==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1015,8 +1012,8 @@ packages: '@types/node': optional: true - '@inquirer/core@11.2.1': - resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==} + '@inquirer/core@12.0.2': + resolution: {integrity: sha512-9pBhkxE14uUlnHhs8lOt7qVPtS4caRY6CjADl8COejl9Mf7w8i6Uoe3DrljCqYtmYM3Iv2Q6EmPxx/oTYbvTAQ==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1024,8 +1021,8 @@ packages: '@types/node': optional: true - '@inquirer/editor@5.2.2': - resolution: {integrity: sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==} + '@inquirer/editor@5.3.2': + resolution: {integrity: sha512-7ruKO5d/wxhGHxdCQ3eyP/aBNrPTZ+Ju7ERtnAwuIsu0RSLs6kotlTRkOxHatbD6sDaEEdwsD82pzFiT9ESIyQ==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1033,8 +1030,8 @@ packages: '@types/node': optional: true - '@inquirer/expand@5.1.1': - resolution: {integrity: sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==} + '@inquirer/expand@5.1.4': + resolution: {integrity: sha512-12o4aYnjWouoq0fyVhYIL+hwXAaga+kntA/wrijFmVvn2heinkdvkbEXRt1Ob/9IOJ285US5tntjfI/Ukt2YkA==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1042,8 +1039,8 @@ packages: '@types/node': optional: true - '@inquirer/external-editor@3.0.3': - resolution: {integrity: sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==} + '@inquirer/external-editor@3.0.5': + resolution: {integrity: sha512-f3QQJRIX5ZEneBHNUIuPjmbdzHnmRFJA8r2dkcb8q+OM5Uv5KtnuAttQumnrjcBVBM3mcTX1CkmtAkU58VRZxg==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1051,12 +1048,12 @@ packages: '@types/node': optional: true - '@inquirer/figures@2.0.7': - resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==} + '@inquirer/figures@2.0.9': + resolution: {integrity: sha512-EAWgUTGQ/Umgga51dE3B2PUHbufuXarDfg86uVgoSgNHNNQnyFKcOrQLWVqYMghuSyHh8+2HUH0Js9cTC1WAdg==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} - '@inquirer/input@5.1.2': - resolution: {integrity: sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==} + '@inquirer/input@5.1.5': + resolution: {integrity: sha512-2MkYYFD1Owt1eRBwHhsLSutysRodWasA4DVpl42KJKGmzwBTXRYAIXujisrt0UW0UohUlMjNjLfMDbw4emRbfw==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1064,8 +1061,8 @@ packages: '@types/node': optional: true - '@inquirer/number@4.1.1': - resolution: {integrity: sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==} + '@inquirer/number@4.2.2': + resolution: {integrity: sha512-tjW1gMIQsFb/9Ie11i8SpuPARBdyCVfC5XOeVugWovrdm8CpjzN+A1CBX5QwCCN2mtNmpgDDCnuLCCT94cQ5zA==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1073,8 +1070,8 @@ packages: '@types/node': optional: true - '@inquirer/password@5.1.1': - resolution: {integrity: sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==} + '@inquirer/password@5.2.1': + resolution: {integrity: sha512-InA6nJxMCXPavPBiTKYHIsYiWz/mkIsk1rkI6pKp5w18gVawqrZOj7eSzSmPJa3j0pVxXm6RlrFP1BE9YeOixA==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1082,8 +1079,8 @@ packages: '@types/node': optional: true - '@inquirer/prompts@8.5.2': - resolution: {integrity: sha512-IYR/3C/paEVVQYQvdDlFZVjRCJVYHHON0XXMH91KO9GSxs0TdKYWlUdvfQl2EfAHDxUaN3IBffkE/BDTh5nJ6g==} + '@inquirer/prompts@8.7.1': + resolution: {integrity: sha512-xJIKWyrFNUKj3R5VEub/iKodG9Sh/MbCeApZUbATJgHTw8YoAJ2gOT78HlvO6NMFiRvjm6ySM7aiAew/zVY0Sw==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1091,8 +1088,8 @@ packages: '@types/node': optional: true - '@inquirer/rawlist@5.3.1': - resolution: {integrity: sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==} + '@inquirer/rawlist@5.3.4': + resolution: {integrity: sha512-c4fDwOpQsjJDHjXdHJE1/xXH6w9/BAiyu3QKzH9Ww5Xm1q37mzyUNa20L7qdtM1ECi4e+oUEKjhK8hR37OMAMQ==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1100,8 +1097,8 @@ packages: '@types/node': optional: true - '@inquirer/search@4.2.1': - resolution: {integrity: sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==} + '@inquirer/search@4.3.2': + resolution: {integrity: sha512-YIaEhWmfkdHEWOKwhF/oJar35FFTTrAdzNbJDo9lSsRT6E/obRPx9oVm4rkTMtlcJSqGYttNtLbcHQef9Qw2yw==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1109,8 +1106,8 @@ packages: '@types/node': optional: true - '@inquirer/select@5.2.1': - resolution: {integrity: sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==} + '@inquirer/select@5.2.4': + resolution: {integrity: sha512-L9ubNaJdoBsiom/AfPKq0QLHTkhhCFCtszzdVidGremrlJjPZfGlmvp+IULKIbnYjtVFWnvb4mhiEdNTZ12ugA==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1118,8 +1115,8 @@ packages: '@types/node': optional: true - '@inquirer/type@4.0.7': - resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==} + '@inquirer/type@4.1.1': + resolution: {integrity: sha512-yJoHYrMnxIsJZCY+0Vb66Dy3he3kL3e2wOBKhoSwWWAzZAY82emlxwgprCtp6yRixvNRNq9ztfRWQYPNr3Go7A==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -1156,6 +1153,9 @@ packages: '@jridgewell/sourcemap-codec@1.5.5': resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + '@jridgewell/sourcemap-codec@1.6.0': + resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==} + '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} @@ -1191,8 +1191,8 @@ packages: '@types/dom-mediacapture-transform': ^0.1.9 livekit-client: ^1.12.0 || ^2.1.0 - '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': - resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==} + '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': + resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==} engines: {node: '>= 18'} '@mdx-js/react@3.1.1': @@ -1210,12 +1210,12 @@ packages: '@emnapi/core': ^1.7.1 '@emnapi/runtime': ^1.7.1 - '@napi-rs/wasm-runtime@1.2.2': - resolution: {integrity: sha512-JfB4kuJQjaoHuCTseIINHtHWeJnvgEcxjwA5t/Y00ZgaOO1Crz3fjT/p8kT28zA/Caz7oiUMn3d6H2yOVCVwuw==} + '@napi-rs/wasm-runtime@1.2.3': + resolution: {integrity: sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==} engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0} peerDependencies: - '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.3 - '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.3 + '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.4 + '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.4 '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -1411,16 +1411,16 @@ packages: '@oxc-project/types@0.127.0': resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==} - '@oxc-project/types@0.139.0': - resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==} + '@oxc-project/types@0.148.0': + resolution: {integrity: sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==} '@oxc-resolver/binding-android-arm-eabi@11.19.1': resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==} cpu: [arm] os: [android] - '@oxc-resolver/binding-android-arm-eabi@11.24.2': - resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==} + '@oxc-resolver/binding-android-arm-eabi@11.21.2': + resolution: {integrity: sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==} cpu: [arm] os: [android] @@ -1429,8 +1429,8 @@ packages: cpu: [arm64] os: [android] - '@oxc-resolver/binding-android-arm64@11.24.2': - resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==} + '@oxc-resolver/binding-android-arm64@11.21.2': + resolution: {integrity: sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==} cpu: [arm64] os: [android] @@ -1439,8 +1439,8 @@ packages: cpu: [arm64] os: [darwin] - '@oxc-resolver/binding-darwin-arm64@11.24.2': - resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==} + '@oxc-resolver/binding-darwin-arm64@11.21.2': + resolution: {integrity: sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==} cpu: [arm64] os: [darwin] @@ -1449,8 +1449,8 @@ packages: cpu: [x64] os: [darwin] - '@oxc-resolver/binding-darwin-x64@11.24.2': - resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==} + '@oxc-resolver/binding-darwin-x64@11.21.2': + resolution: {integrity: sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==} cpu: [x64] os: [darwin] @@ -1459,8 +1459,8 @@ packages: cpu: [x64] os: [freebsd] - '@oxc-resolver/binding-freebsd-x64@11.24.2': - resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==} + '@oxc-resolver/binding-freebsd-x64@11.21.2': + resolution: {integrity: sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==} cpu: [x64] os: [freebsd] @@ -1469,8 +1469,8 @@ packages: cpu: [arm] os: [linux] - '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2': - resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==} + '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2': + resolution: {integrity: sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==} cpu: [arm] os: [linux] @@ -1479,8 +1479,8 @@ packages: cpu: [arm] os: [linux] - '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2': - resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==} + '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2': + resolution: {integrity: sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==} cpu: [arm] os: [linux] @@ -1490,8 +1490,8 @@ packages: os: [linux] libc: [glibc] - '@oxc-resolver/binding-linux-arm64-gnu@11.24.2': - resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==} + '@oxc-resolver/binding-linux-arm64-gnu@11.21.2': + resolution: {integrity: sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==} cpu: [arm64] os: [linux] libc: [glibc] @@ -1502,8 +1502,8 @@ packages: os: [linux] libc: [musl] - '@oxc-resolver/binding-linux-arm64-musl@11.24.2': - resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==} + '@oxc-resolver/binding-linux-arm64-musl@11.21.2': + resolution: {integrity: sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==} cpu: [arm64] os: [linux] libc: [musl] @@ -1514,8 +1514,8 @@ packages: os: [linux] libc: [glibc] - '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2': - resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==} + '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2': + resolution: {integrity: sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==} cpu: [ppc64] os: [linux] libc: [glibc] @@ -1526,8 +1526,8 @@ packages: os: [linux] libc: [glibc] - '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2': - resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==} + '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2': + resolution: {integrity: sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==} cpu: [riscv64] os: [linux] libc: [glibc] @@ -1538,8 +1538,8 @@ packages: os: [linux] libc: [musl] - '@oxc-resolver/binding-linux-riscv64-musl@11.24.2': - resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==} + '@oxc-resolver/binding-linux-riscv64-musl@11.21.2': + resolution: {integrity: sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==} cpu: [riscv64] os: [linux] libc: [musl] @@ -1550,8 +1550,8 @@ packages: os: [linux] libc: [glibc] - '@oxc-resolver/binding-linux-s390x-gnu@11.24.2': - resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==} + '@oxc-resolver/binding-linux-s390x-gnu@11.21.2': + resolution: {integrity: sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==} cpu: [s390x] os: [linux] libc: [glibc] @@ -1562,8 +1562,8 @@ packages: os: [linux] libc: [glibc] - '@oxc-resolver/binding-linux-x64-gnu@11.24.2': - resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==} + '@oxc-resolver/binding-linux-x64-gnu@11.21.2': + resolution: {integrity: sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==} cpu: [x64] os: [linux] libc: [glibc] @@ -1574,8 +1574,8 @@ packages: os: [linux] libc: [musl] - '@oxc-resolver/binding-linux-x64-musl@11.24.2': - resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==} + '@oxc-resolver/binding-linux-x64-musl@11.21.2': + resolution: {integrity: sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==} cpu: [x64] os: [linux] libc: [musl] @@ -1585,8 +1585,8 @@ packages: cpu: [arm64] os: [openharmony] - '@oxc-resolver/binding-openharmony-arm64@11.24.2': - resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==} + '@oxc-resolver/binding-openharmony-arm64@11.21.2': + resolution: {integrity: sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==} cpu: [arm64] os: [openharmony] @@ -1595,8 +1595,8 @@ packages: engines: {node: '>=14.0.0'} cpu: [wasm32] - '@oxc-resolver/binding-wasm32-wasi@11.24.2': - resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==} + '@oxc-resolver/binding-wasm32-wasi@11.21.2': + resolution: {integrity: sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==} engines: {node: '>=14.0.0'} cpu: [wasm32] @@ -1605,8 +1605,8 @@ packages: cpu: [arm64] os: [win32] - '@oxc-resolver/binding-win32-arm64-msvc@11.24.2': - resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==} + '@oxc-resolver/binding-win32-arm64-msvc@11.21.2': + resolution: {integrity: sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==} cpu: [arm64] os: [win32] @@ -1620,129 +1620,129 @@ packages: cpu: [x64] os: [win32] - '@oxc-resolver/binding-win32-x64-msvc@11.24.2': - resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==} + '@oxc-resolver/binding-win32-x64-msvc@11.21.2': + resolution: {integrity: sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==} cpu: [x64] os: [win32] - '@oxfmt/binding-android-arm-eabi@0.61.0': - resolution: {integrity: sha512-BaS+1OVvg9sr+Xav0+KdWedQRcAzrdoEcwMZeqoc2F6ieC1s/t5eM35YQoRPQ7vAqkZ+p3tbQb1r9I9mrV5oGA==} + '@oxfmt/binding-android-arm-eabi@0.66.0': + resolution: {integrity: sha512-2Me9eoptv6ERdEuI2P8AOlYdHHraXebJaM6SC0kc2Dfb+mLrep2db+fedBPKaYn673h/vBgvP4tkOdAbaudX6w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [android] - '@oxfmt/binding-android-arm64@0.61.0': - resolution: {integrity: sha512-of8atAV0M1egGcVOMbgZCvc10sFOP3ayQBNQV5h5G3fNq8gACdEswfFk9bzGrdbM23rtg0Coxi7np7oPLcueNw==} + '@oxfmt/binding-android-arm64@0.66.0': + resolution: {integrity: sha512-u7O+bSSF0HGsDKkQQxBqvLGVepu93RA+JKu+ONqvfh4sCnCEbj31wZj4iG5gk3XfRwrmYj0/8catkO2LcblQKQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [android] - '@oxfmt/binding-darwin-arm64@0.61.0': - resolution: {integrity: sha512-7l8+5ov4BGwtAcmpzvEik/TG3bciwyw/S3e6j5GKH7pcQqcgCVxD3AuJeP6upto+SOTBKQ4wrrdbMt0gq8fHSQ==} + '@oxfmt/binding-darwin-arm64@0.66.0': + resolution: {integrity: sha512-/ikyMIVjX/sdo7KtjxoEsSUosfPzveVhT9RWMx9yGqFDKFJ89JAEKuEeLBmurDjrkb4w8tOnAdSO3SBaplY3bw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [darwin] - '@oxfmt/binding-darwin-x64@0.61.0': - resolution: {integrity: sha512-Fnz4dDDXBb7udk+DmwelNjxbD6yptyxwCqwCH2ebo4RVLxVsRfFsn/AHJC49KIltPrVokamGv4SSOsiV50DTxQ==} + '@oxfmt/binding-darwin-x64@0.66.0': + resolution: {integrity: sha512-q5xUsKeFqawa9NXa6ZGXWimFV19m8MogKPdTaSVDAAk2EQKBmBZRDeluwcl1p8ty/OFc9s9888OKEh3xfPVH0g==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [darwin] - '@oxfmt/binding-freebsd-x64@0.61.0': - resolution: {integrity: sha512-mddOebKNCP+AucmzfNsk3jgbr681qAUvgMqi865GW5gWLJ/AnzXbvjQRrny0e++NAN8aphav/aRSrfFxNsNjpA==} + '@oxfmt/binding-freebsd-x64@0.66.0': + resolution: {integrity: sha512-CR+x4VzMY0pRXLK/xFQ/RzsSFkP5t2Z2mef0QY6OP/rTRcMUoMLCOM62/3Fp/t0K+UDoBKxvMyeb6D0zPMjleA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [freebsd] - '@oxfmt/binding-linux-arm-gnueabihf@0.61.0': - resolution: {integrity: sha512-svx59iYL+DbaZGZUIoice4W0CjRXGExnbz7Re+awIb60rVxBS2KrU7Hnlx+nZYanLGLpjneUEgo/VFEKkSZAyQ==} + '@oxfmt/binding-linux-arm-gnueabihf@0.66.0': + resolution: {integrity: sha512-ZEYmO/LbH9tTQCADILHGZE4GeOXOAj2VzedHkASNwjmwlwtutJCLpCJbIs37wRGTFgWRoEcD72jpMX+IBJUGjQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [linux] - '@oxfmt/binding-linux-arm-musleabihf@0.61.0': - resolution: {integrity: sha512-BYK9MPJPCf6d+fLKMTruThmEyCtHzQ1zLcsrTlUVkmnoXIaHAbfpeLYQwX1tkjs7W11dyzoi6HFvKcdnvX1zNg==} + '@oxfmt/binding-linux-arm-musleabihf@0.66.0': + resolution: {integrity: sha512-hNtR9/oU0CeTkq7JnRkmBQwqe17v2ZaAMLC4VcN7IIOWeRyWDk0knSPWS9iiLmtbZ2RRBBtsG01jQgkZmKCJeQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [linux] - '@oxfmt/binding-linux-arm64-gnu@0.61.0': - resolution: {integrity: sha512-QUaCNLq2/EC6G5ljOuFanl9Lgw6ZWp4co7rs4+KOMUzbGfA4Lq58FHRjjF9sVIG+93XSbo343MxFATrOU1qctA==} + '@oxfmt/binding-linux-arm64-gnu@0.66.0': + resolution: {integrity: sha512-uwOVQ8i6I1LT/+eDzfsgrrcZp8Fn6NPVUPn8fF5gdFGekFf0PddF+LEuwsD0/pbNUcKZhDj2rQ5UpITh9gF4iQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [glibc] - '@oxfmt/binding-linux-arm64-musl@0.61.0': - resolution: {integrity: sha512-S6uvJ6MXnRXl+zTs0CARNDvkE+cymj0EVWEKKsyKnlLlqTyQJBjw5s4D2pSIOZc+S46cy4STefzcr/sm0VzVPA==} + '@oxfmt/binding-linux-arm64-musl@0.66.0': + resolution: {integrity: sha512-tTkF2Dmx4nGAjmBlZb+UtTGqR/EK4ZrW9qBfzte07a9XWqzoGGKzpFFlyNDhQe+Uwql94+ReCTeNbhOXscw1Dg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [musl] - '@oxfmt/binding-linux-ppc64-gnu@0.61.0': - resolution: {integrity: sha512-6VDlRcytvZG6UlSIdAFKDLbppo9tvPxrWzle6vHldYFMeuDPQEfMKrkwezp7FaBq1wik9ra554ZZeRPsyIkFpg==} + '@oxfmt/binding-linux-ppc64-gnu@0.66.0': + resolution: {integrity: sha512-F3cKHUav4yXOHn6GFnwpBhSYsJOYKKf9eqO/9jlEuqPxNw9zb98E9ZFct79gcg8pibUGkbveEu9WDlmXJpDzKw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] libc: [glibc] - '@oxfmt/binding-linux-riscv64-gnu@0.61.0': - resolution: {integrity: sha512-KkBTYbzExpbmn15XjKPLu2fRV2PVlq+KWt+brad5rwIa03vdYoaDRWiS7raHII/dCTR6Ro4UpYUCH4t6lif4WQ==} + '@oxfmt/binding-linux-riscv64-gnu@0.66.0': + resolution: {integrity: sha512-K5fDaNZfDyQMYA/3qL21bqyN0X9T15LLwwbFPt2aHc94+ZG7bh0vZEsy2y7NlRnjjHFSwN+Hzg6ldJtbOriH4Q==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] libc: [glibc] - '@oxfmt/binding-linux-riscv64-musl@0.61.0': - resolution: {integrity: sha512-69tzIq7sJLVB9dxYYtvMzcSSsnZHSO+U2U19O2RqDqgj6+Q4O7HjSXdaszbcgqzhsUwzSH7z5kWvk8nmf6BHTg==} + '@oxfmt/binding-linux-riscv64-musl@0.66.0': + resolution: {integrity: sha512-44Yc+I+qOmTElRcEhm5hUKIUJEQIOugymz4ua4tB0Wox7tGAfIbjzmXz/HDAtw1Ij6gmBwZlzh4hc9679RhWeA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] libc: [musl] - '@oxfmt/binding-linux-s390x-gnu@0.61.0': - resolution: {integrity: sha512-Oqi/N0OvtOVXsPKAOOhKgGH3msRYF8BLJaNBbWiupRiKoKVyc8JRKPCfarkQJC+RgP9U8raUKLe+bNwd0HUMiA==} + '@oxfmt/binding-linux-s390x-gnu@0.66.0': + resolution: {integrity: sha512-1e29Eg9hEj2kRBB19M0seIehPbbXHCk35GvImjDvb79rjjYjXCRmtbUNHJcgoktZAMIzXrTbxDBKmTc1V4bg3A==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] libc: [glibc] - '@oxfmt/binding-linux-x64-gnu@0.61.0': - resolution: {integrity: sha512-3TKwv/ed4uwJSemAA8P9XcoqETpjQI4waquF9UilhA9Mn/dhr1PdUEXWlL74mtc6ZNfmKPA9+NEJm01nRF8CVA==} + '@oxfmt/binding-linux-x64-gnu@0.66.0': + resolution: {integrity: sha512-vODY1UQo10gngn0+D4xHKU84F1Twm1LqrzV4SqPXvmQKSd87paehvZ6jqA5wKs6XQrlWul9clYMDVHcoW9CPMA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [glibc] - '@oxfmt/binding-linux-x64-musl@0.61.0': - resolution: {integrity: sha512-uFso4u4nLkVSlMCpgjyvWV60Gt7GvDQHnk1mmRxHIkZTMB0ljpUKwCD9FYGgN9H97x2wYl0UwEjgRZaPIuhEhw==} + '@oxfmt/binding-linux-x64-musl@0.66.0': + resolution: {integrity: sha512-YDzXx2JsT4+HL4MdkVrYjO55NS5lUKNm8rLC4ZPou8+seu0v0jhecSh+ufoO6+xEa8gccEezMlI2WHJi4ApUgw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [musl] - '@oxfmt/binding-openharmony-arm64@0.61.0': - resolution: {integrity: sha512-keGLkzeOvkMpNmPp4hffXWpfoSsY6e1K8++KXD4mSSfxdvM8q9QUDsYY689TB1k6Co832DZn1MnaaVx6cIBMWQ==} + '@oxfmt/binding-openharmony-arm64@0.66.0': + resolution: {integrity: sha512-mJjUYd8lj0+j4JkYyEM+5qKBf1Rnrpgjn/SVYKJhicVDqLz566ooa7Fs8zflPqt+dnZDV7X054rVIQX6ZcQNlQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [openharmony] - '@oxfmt/binding-win32-arm64-msvc@0.61.0': - resolution: {integrity: sha512-VzsAISkFxmNhJ5LBDEL9VuH6tJsVJMtqYit2LyIUf/HLnsCe4Pg9SMOjjVQzGWt0bnpyfJ94CrqTqcpNZzK+ug==} + '@oxfmt/binding-win32-arm64-msvc@0.66.0': + resolution: {integrity: sha512-soV+0vESv7e5ntCHWC61x4gg8OSak6IHHnWsZmHrJFlvMj2AK+kmldErCNkVkrvc1Ts2/++rJXn+IuAb2WMXhw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [win32] - '@oxfmt/binding-win32-ia32-msvc@0.61.0': - resolution: {integrity: sha512-xv4t7yzwJoYaLB6Zv28B3W+j7brEjsyv50rLTAQgmxJzddce9fAMCxed8dSAkbWES0zz2J29nYK5FaTuD2YBHg==} + '@oxfmt/binding-win32-ia32-msvc@0.66.0': + resolution: {integrity: sha512-YCPi23uRIEYuIKTZohAkKbPFpujQ5QBuUM5iDv+UqbCmTPAkaFsxjsSuB8xlBpRT0G7eP/4HMF+cPDSqHtOD9A==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ia32] os: [win32] - '@oxfmt/binding-win32-x64-msvc@0.61.0': - resolution: {integrity: sha512-6EZXFkqOwxdDYjIn3TSNnPk3ST5E5GiYd4FiM6UF/mCL/LZSfr6D6UygTfW3R1PCQP2quCKpCEGRlij8E3VYbg==} + '@oxfmt/binding-win32-x64-msvc@0.66.0': + resolution: {integrity: sha512-bwTQcv/JVRPkOqQtMF0X7vpvpncDQiBcXHxZ9S2hR12Hlo8bvBdUR5x5XnxzDZ3kM0qoZw1rv7KaD66Ly+pFWA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [win32] @@ -1777,124 +1777,124 @@ packages: cpu: [x64] os: [win32] - '@oxlint/binding-android-arm-eabi@1.76.0': - resolution: {integrity: sha512-ZHIE5Zt9AsPDcY4nOlofXt0YfneEeo+QrKMPcPzLf2Z6Q8VtV2W73d7SFJ920WUwyik783u/doKCs3KXdwG+7w==} + '@oxlint/binding-android-arm-eabi@1.81.0': + resolution: {integrity: sha512-IcCRsXiedJoJopY6mpZUBEeVFsUrutmrG7dZ87zMuKJlhg70Ora9bBl1WcCxZQtyI10YpnVdEso5oCg7YcfSHw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [android] - '@oxlint/binding-android-arm64@1.76.0': - resolution: {integrity: sha512-shm/ngQilHK6bs+ElJWa4oHfNj5vL1Gl/iVEJldTQjpr0/67oSgr0KUpbmcnLig5Fo0v/l6j2567A7TOL89ONA==} + '@oxlint/binding-android-arm64@1.81.0': + resolution: {integrity: sha512-GRrIPyTGVhx3L3h+0T5xT2A0jFAcdPv4+IfuXpGDLIdl6XeYhgg/zw72A5ILZoUgRqZuM8F1y+V/gfDriXSxzQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [android] - '@oxlint/binding-darwin-arm64@1.76.0': - resolution: {integrity: sha512-rvJmrAPKSQ9aWJ6wIS6CK2tJjwzfW0ApQH9qokq6sfDvmHwoyIHxHFMq7z7i7GiV6fdE6s8qvBqWKPTu8RmT6Q==} + '@oxlint/binding-darwin-arm64@1.81.0': + resolution: {integrity: sha512-qNQ9tXRgLuKbqSV1S2h9h4KPHjbovO7RRR2/enUOtHzTkFZ7B9X5zqqHJua8dRyc7dBy7Aoyq5pqTSLFVcAzGQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [darwin] - '@oxlint/binding-darwin-x64@1.76.0': - resolution: {integrity: sha512-U/zYdb7VYKGY6pA9Vd2rYl9O/HlCylcOlb5PGPvVLtg+oLGsk6H3XGKEMHKyqD3nmmtmlmwb/8SwU2vfSAtvMw==} + '@oxlint/binding-darwin-x64@1.81.0': + resolution: {integrity: sha512-q0QTm32jWga2Gv4j7IaVZN0jYMi9UV73sWVgFtDA4iIfqwMCLLZ3ve+9KwfYtsaKZSgQhmPaogeZWqDZpcY1Pw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [darwin] - '@oxlint/binding-freebsd-x64@1.76.0': - resolution: {integrity: sha512-WvKG9CAriuo0XNiFzpXjDngUZcRGFNpaK2kLyMUsnJlShxkT96u+BpJQ3KqdQwGOrvI14L6V8bAwXwAYNNY6Jg==} + '@oxlint/binding-freebsd-x64@1.81.0': + resolution: {integrity: sha512-/+8wVWDXEC7wHVAhOc59Fw/SkMc1arLkFD8iQCaSsmzenK1X4doFqquL9H1wrtGUzaiycVqkf/sSpcILK6W1UA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [freebsd] - '@oxlint/binding-linux-arm-gnueabihf@1.76.0': - resolution: {integrity: sha512-qJ5+RH99TqFRq3UCDxkW0zJJu9c+OAHFY72vGlxZLEpuO+MpKo3POgqb8sYipL9KYm8XY6ofb0HsOuvY6hQNqQ==} + '@oxlint/binding-linux-arm-gnueabihf@1.81.0': + resolution: {integrity: sha512-4xt422FEgioRq9hAL4Tq7fujGUWnc8z1BJ+Oi8RN8vB8axaP+sdK6a2xdlcQCCYnJg9QMuMFS0AucuIFx/EacA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [linux] - '@oxlint/binding-linux-arm-musleabihf@1.76.0': - resolution: {integrity: sha512-PvPCVptkgVARsucgIqFQQcSmJ6xc6GtnVB5bRBekRahTc9eObMtjHfMjy5M+C2tHt5UCMttWM9RuSk/H9NqYeg==} + '@oxlint/binding-linux-arm-musleabihf@1.81.0': + resolution: {integrity: sha512-u3vna8KdGplH4DRCW9K54D68fcMo7IxVrkCJWwXnIhwtBdnDnYrmzOUA/XjmBlPpcLsgw9Z5BNdY4za9+Dj+MQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [linux] - '@oxlint/binding-linux-arm64-gnu@1.76.0': - resolution: {integrity: sha512-3KeFDx8Bu4HPAXbuHZOr/oHvN+QT+JQhMw/NYPz7Z071xLSsG27Jfh9PIQVEY7hk1I+jr43ExqRIeJ6VKk2yLw==} + '@oxlint/binding-linux-arm64-gnu@1.81.0': + resolution: {integrity: sha512-3j9k+gsYsE7nv71GWotXsqsa2l9/aJenD7dVHNt/CBvsb0SgRjSMnHFeP59IXUAl1wvVFhqGl2wJNMwWU3UBlA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [glibc] - '@oxlint/binding-linux-arm64-musl@1.76.0': - resolution: {integrity: sha512-oPFkkKTgl0K/EIg9fQ8oA3IGcI05/Mq1en04iFa41mmNPT+6KEiByVazTOZZJiHMBBrbsns1YJ2e1Scqwzesjw==} + '@oxlint/binding-linux-arm64-musl@1.81.0': + resolution: {integrity: sha512-k5iAp3dNxW0/uDCBY+WSm8jKB2szu7SkEQZdgRRpDXvuDd69vvDcqhB3A/pWCfCwXyenjNjFn9Td1fVoyAc+Yg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [musl] - '@oxlint/binding-linux-ppc64-gnu@1.76.0': - resolution: {integrity: sha512-gN7yZ0eqflA5Fhf1wvHxGUltIV3FsvmB1zhNMDEK9vSHhc7E6qg9CuPeBgPZab66Tjzq6w6kHAtNEvnTHf4cyw==} + '@oxlint/binding-linux-ppc64-gnu@1.81.0': + resolution: {integrity: sha512-TFqLja3uYmVSte6nof9GWrex9Z8WgdZrNiLC6Te5rXGDqXB2y4j/26iFhwosXiAFqDhE9JJVuuCkDKLwptTn1g==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] libc: [glibc] - '@oxlint/binding-linux-riscv64-gnu@1.76.0': - resolution: {integrity: sha512-S/HqMbn22mQrjtErUxEoS/a55u8kIeXvreIxiJu5G7Le3UecEd6SQZxrDIpuhtgaFnsY/nVra3ytP+pRljDilA==} + '@oxlint/binding-linux-riscv64-gnu@1.81.0': + resolution: {integrity: sha512-UEcySvGS0NOVo7h7n7CYyJL9+6gFAh7Zc/ToDXVScFvzHSTIxtzkMVU30rmQ6+nQ1LF+UdiRDdJajpDu+OylLg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] libc: [glibc] - '@oxlint/binding-linux-riscv64-musl@1.76.0': - resolution: {integrity: sha512-ZIga3097VJZolGZk6SrIAUokIGfRkxRlhiHDUznZptGBfwrhD7pNfD1rzEzsCwvk/1DX0A1bLz+liuNh5QKIVQ==} + '@oxlint/binding-linux-riscv64-musl@1.81.0': + resolution: {integrity: sha512-H+diDbhD00+wI1IRP8Kz88x/lat+DgtoBJzoTthS16xkTJGNaEkfb8gzmd1rzc/2uDQQMl7GNl+JFUacVeWxIA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] libc: [musl] - '@oxlint/binding-linux-s390x-gnu@1.76.0': - resolution: {integrity: sha512-ZGiiA7pFzMJSyMWYZTVlPgbTsx+Vl8ihLGMIujPwaslUF7kIPPWAbVmAlTc+9lWDV+DCiB8Ikixu+lSHeOIIWQ==} + '@oxlint/binding-linux-s390x-gnu@1.81.0': + resolution: {integrity: sha512-8znJ/5TekjOKg1j1Acho4PJMdiAHLtlcXuWEiipOhAMV6rQcXdmDdXCbheyDczN6TjBwiNfjcP81k4AthrKRzw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] libc: [glibc] - '@oxlint/binding-linux-x64-gnu@1.76.0': - resolution: {integrity: sha512-JLiy5WuvEBFTT6ErIFV35SLzi0R7Iri6MKU6dZbTxfIx8pndbbPs3Mj780nMipBFcPkti+okAPOJ9POKkHFEgg==} + '@oxlint/binding-linux-x64-gnu@1.81.0': + resolution: {integrity: sha512-Q2Wj70yFsvn5QjlmifFzbj4H+kJy53bwqc41o1fzoM7MpLV1NIbhg/LpWXRfC6KOkSAdUx1Wd8VJsdPmhp/HRA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [glibc] - '@oxlint/binding-linux-x64-musl@1.76.0': - resolution: {integrity: sha512-z7lgKQtbo/I1NIe8G5NHLesxJDv0tRSUWTpXKb9Pm3E9nKFKfO4IOSDtFroKgXtOYb0jQbcdH+0wzTyMXVes+A==} + '@oxlint/binding-linux-x64-musl@1.81.0': + resolution: {integrity: sha512-cPInHp/ddEe5qkyK2IiyQ8Q3Mp2oLLEhhsGgTK2oZx4L6+llGam1H1yBvJZ7qHfOXj8N3hxBS8sj4tO+gtFlIg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [musl] - '@oxlint/binding-openharmony-arm64@1.76.0': - resolution: {integrity: sha512-JOjKymIpb9QcYfEhZsN6h4V9Ivd474W38cNIBRv6bg2TbIvogbMTH0Mg6YWW9TiRDqfcX+/Hyfsbo5vcSE5guQ==} + '@oxlint/binding-openharmony-arm64@1.81.0': + resolution: {integrity: sha512-0CQxSX4ajqm07AHBf5U33qQzXKdd7wtq/oTL/7vpY6RNNuxrRi8W4bqUV1Jyu/vj+9KmxQyDhxfeVX1nQL6kfg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [openharmony] - '@oxlint/binding-win32-arm64-msvc@1.76.0': - resolution: {integrity: sha512-pqDWZiwcmByWUEm1NFUBNiT6aentCcaoMWJv0HbXEmuYermJ4sg8ppVrshubYP2MZ6SHccJJcpr6x469PuDFIw==} + '@oxlint/binding-win32-arm64-msvc@1.81.0': + resolution: {integrity: sha512-l0hbeISm9673hVrrQU8j/p2M7YH9Ouoj7p7E/QM55NTrKVLP+P3PF8hLu+OY+x0VtGRW+ggiQKZqmdYps9H+TA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [win32] - '@oxlint/binding-win32-ia32-msvc@1.76.0': - resolution: {integrity: sha512-Ba0O659kgMv6pwO3z9PdO+K3aMxQRaw9HnG+e6AtOfgwcKFvYilciQYBoUBmxfQvOCKZe1SwjMkuB542NkuDMQ==} + '@oxlint/binding-win32-ia32-msvc@1.81.0': + resolution: {integrity: sha512-ksqPP5jbFXcYreEQ7zdJh06rJQBymCTyGRCdaXjfcf2aG4f8KxUWY5wcgYHmaTK+FJ4bPG5sUAdOX+6trnH1JA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ia32] os: [win32] - '@oxlint/binding-win32-x64-msvc@1.76.0': - resolution: {integrity: sha512-5qcirPHO8nKfkoowEVWtpAoVTcYDy6g0UT0NGic450Qv8J2NrOqg4uQ8QppRP4MDTC7Xx47lbZnmadTH03CGGA==} + '@oxlint/binding-win32-x64-msvc@1.81.0': + resolution: {integrity: sha512-IZuUCwGw9emG5JtCp+fYGB+Z4OWEoeEcM8R5BA1pYw63/ieYFVdcU2ylxTpHbVHSenZnsYE+ZZ20uHAJszQ4cA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [win32] @@ -1985,8 +1985,8 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} - '@playwright/test@1.62.0': - resolution: {integrity: sha512-9zOJ6ZQRAena31MpOH9VSzIz8Ou3YJ/wtY/eQm5T2uhfhG7/U3COrMS8xOtUrZrp9OgdmzEnIYODye3nY1VqzA==} + '@playwright/test@1.62.1': + resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==} engines: {node: '>=20'} hasBin: true @@ -2411,97 +2411,98 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@rolldown/binding-android-arm64@1.1.5': - resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==} + '@rolldown/binding-android-arm-eabi@1.2.7': + resolution: {integrity: sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm] + os: [android] + + '@rolldown/binding-android-arm64@1.2.7': + resolution: {integrity: sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [android] - '@rolldown/binding-darwin-arm64@1.1.5': - resolution: {integrity: sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==} + '@rolldown/binding-darwin-arm64@1.2.7': + resolution: {integrity: sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [darwin] - '@rolldown/binding-darwin-x64@1.1.5': - resolution: {integrity: sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==} + '@rolldown/binding-darwin-x64@1.2.7': + resolution: {integrity: sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [darwin] - '@rolldown/binding-freebsd-x64@1.1.5': - resolution: {integrity: sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==} + '@rolldown/binding-freebsd-x64@1.2.7': + resolution: {integrity: sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [freebsd] - '@rolldown/binding-linux-arm-gnueabihf@1.1.5': - resolution: {integrity: sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==} + '@rolldown/binding-linux-arm-gnueabihf@1.2.7': + resolution: {integrity: sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm] os: [linux] - '@rolldown/binding-linux-arm64-gnu@1.1.5': - resolution: {integrity: sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==} + '@rolldown/binding-linux-arm64-gnu@1.2.7': + resolution: {integrity: sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [glibc] - '@rolldown/binding-linux-arm64-musl@1.1.5': - resolution: {integrity: sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==} + '@rolldown/binding-linux-arm64-musl@1.2.7': + resolution: {integrity: sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] libc: [musl] - '@rolldown/binding-linux-ppc64-gnu@1.1.5': - resolution: {integrity: sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==} + '@rolldown/binding-linux-ppc64-gnu@1.2.7': + resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] libc: [glibc] - '@rolldown/binding-linux-s390x-gnu@1.1.5': - resolution: {integrity: sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==} + '@rolldown/binding-linux-s390x-gnu@1.2.7': + resolution: {integrity: sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] libc: [glibc] - '@rolldown/binding-linux-x64-gnu@1.1.5': - resolution: {integrity: sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==} + '@rolldown/binding-linux-x64-gnu@1.2.7': + resolution: {integrity: sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [glibc] - '@rolldown/binding-linux-x64-musl@1.1.5': - resolution: {integrity: sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==} + '@rolldown/binding-linux-x64-musl@1.2.7': + resolution: {integrity: sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] libc: [musl] - '@rolldown/binding-openharmony-arm64@1.1.5': - resolution: {integrity: sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==} + '@rolldown/binding-openharmony-arm64@1.2.7': + resolution: {integrity: sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [openharmony] - '@rolldown/binding-wasm32-wasi@1.1.5': - resolution: {integrity: sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [wasm32] - - '@rolldown/binding-win32-arm64-msvc@1.1.5': - resolution: {integrity: sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==} + '@rolldown/binding-win32-arm64-msvc@1.2.7': + resolution: {integrity: sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [win32] - '@rolldown/binding-win32-x64-msvc@1.1.5': - resolution: {integrity: sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==} + '@rolldown/binding-win32-x64-msvc@1.2.7': + resolution: {integrity: sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [win32] @@ -2799,22 +2800,22 @@ packages: '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} - '@storybook/addon-docs@10.5.5': - resolution: {integrity: sha512-0YpKlimS4XE0kQ8Maa5coeefQxdyDrBHg1wOP3WTPuBe4FolFSCDveR0ge2+vuUBk+fZfn2+l+3Q2jmAWaRGDg==} + '@storybook/addon-docs@10.6.0': + resolution: {integrity: sha512-Fk3rUQWeGyCfL170OkmRp6Ruyv7MHPb/xrKa6YNk7FlGmlVLi5tKzh2T/0J13vWEy8wiu2MV3IBu8iRsaUR+Cw==} peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^10.5.5 + storybook: ^10.6.0 peerDependenciesMeta: '@types/react': optional: true - '@storybook/addon-vitest@10.5.5': - resolution: {integrity: sha512-Ymq9ErkSkYiIDuqpJ2+hE5GCQ5J6TCLOWhutqArvwaeAO+HAibM82XNExpJ1/kvPqk9y961GDPkv2W15I88JIw==} + '@storybook/addon-vitest@10.6.0': + resolution: {integrity: sha512-GY2SwSXLNgyMqjQ59J7YTkEQTHdEbBMggOvbbuhuPUBhWo97OGSDCmn1UW3nXDZvkoWyWhF9T9628m1uei7FbA==} peerDependencies: '@vitest/browser': ^3.0.0 || ^4.0.0 '@vitest/browser-playwright': ^4.0.0 '@vitest/runner': ^3.0.0 || ^4.0.0 - storybook: ^10.5.5 + storybook: ^10.6.0 vitest: ^3.0.0 || ^4.0.0 peerDependenciesMeta: '@vitest/browser': @@ -2826,30 +2827,12 @@ packages: vitest: optional: true - '@storybook/builder-vite@10.5.5': - resolution: {integrity: sha512-dQoJ7gUl8y0z5rV9cE0mz6qTBNmN9R4GOLIZk98rJ8CwduNJOb9eGZXusDzzvnYcp8TnNkqDtyx4tXQSUDInPQ==} + '@storybook/builder-vite@10.6.0': + resolution: {integrity: sha512-7zt8tYB6dnSO8fbjUz91MHexGDpf9HrLlA3FAmlVb+2ZL3eWUs499L3I6BDUymcWu7oW5WCBJlB8ERj8ZLLzig==} peerDependencies: - storybook: ^10.5.5 + storybook: ^10.6.0 vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 - '@storybook/csf-plugin@10.5.5': - resolution: {integrity: sha512-/euibhRFqklYCZqUseokojmfYcQpXshVY2QmA1qCuxMz9SzVFD3iSTw+aFLTxpsJGGdcZJk8fnm/rEthLzZ9jA==} - peerDependencies: - esbuild: ^0.28.0 - rollup: '*' - storybook: ^10.5.5 - vite: '*' - webpack: '*' - peerDependenciesMeta: - esbuild: - optional: true - rollup: - optional: true - vite: - optional: true - webpack: - optional: true - '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} @@ -2858,40 +2841,40 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@storybook/react-dom-shim@10.5.5': - resolution: {integrity: sha512-PIk7N3LLrZIxfNxmkvmQN1d5UQ70XEedT8n0GhBiXnM6XL09xPGB8n8TZXeJBRYluKhDQcAyQeT0/OZmcDVQJg==} + '@storybook/react-dom-shim@10.6.0': + resolution: {integrity: sha512-ZE0l4xL6d00rKFeJhRDuh0t3r+/2ffhx47lIyaSWrTD5kuM3nDjKDxCIWwX4E3gLV+oNX8E1prXRMuEWJUJwJg==} peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^10.5.5 + storybook: ^10.6.0 peerDependenciesMeta: '@types/react': optional: true '@types/react-dom': optional: true - '@storybook/react-vite@10.5.5': - resolution: {integrity: sha512-Uy7VV72kVSkw6aDTAPQupXUeZX5LF6e4zqNvTZ+36qxsXAkaFgw7HPEm7L1tsaRfiV+s9anU7UvX47tfJpYGuQ==} + '@storybook/react-vite@10.6.0': + resolution: {integrity: sha512-nc1dqnmjGOcDJvPCkAn4Hmu1gi7dNHHoibNmlBp0d1adosejELZxuNjHBkPl/KxZjbzP3jljQHnHB/guxd8e2g==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^10.5.5 + storybook: ^10.6.0 typescript: '>= 4.9.x' vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 peerDependenciesMeta: typescript: optional: true - '@storybook/react@10.5.5': - resolution: {integrity: sha512-T2Xj0ey7a9RHU6coYLC0L5lhjcdyhLCs9wNv15FvHvgmrRobkynEV72kq5vGW8tFkahNWI1X9+GZPQ6r8Nm38w==} + '@storybook/react@10.6.0': + resolution: {integrity: sha512-0xfYYPRHcr5ta1hmXJCSezH4JGuUHJ+xVF9f1j+Y/MWEMOQE4wnaKWKsk/HLrDjZkT5hKfvmogt9b0yduP6zEQ==} peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^10.5.5 + storybook: ^10.6.0 typescript: '>= 4.9.x' peerDependenciesMeta: '@types/react': @@ -2969,86 +2952,86 @@ packages: peerDependencies: '@svgr/core': '*' - '@swc/core-darwin-arm64@1.15.47': - resolution: {integrity: sha512-GsoMtan3ojGGMGFbl31mmRu5ctZ56re8grGE8mO/OHJ8O+JRkzod02fe7X6ZQ8JvamA3imkEkx/h3u+vsOgPgA==} + '@swc/core-darwin-arm64@1.16.2': + resolution: {integrity: sha512-i/j0HNbnn79qnTVPicvay92Nark8fW8NQqn1e2mGERjUXNpBV0+SwQxlRpk2zBhn6laJ8PDI6Kn1nHZhnz3LCA==} engines: {node: '>=10'} cpu: [arm64] os: [darwin] - '@swc/core-darwin-x64@1.15.47': - resolution: {integrity: sha512-leTi7Rx3KF4zcC637iqWgk9SoV8VXAD8ppQYXsep63px5A/UftOcxLN1pmr8Z1si/YvX90ompP/rHgpYkgwXWg==} + '@swc/core-darwin-x64@1.16.2': + resolution: {integrity: sha512-HrwqHyEyHVXO3qTk8EkNK7/b6sOZSEoNh+pot6RdE5x0LbNqfo8LtJUvi3UTXr+5ja/o5HbJdW80eCXo+NjbiA==} engines: {node: '>=10'} cpu: [x64] os: [darwin] - '@swc/core-linux-arm-gnueabihf@1.15.47': - resolution: {integrity: sha512-hBqHuoWKKIsKmDBn9qVeWqj5GWZhtlcczVaqQmNRXsDfq+voR5CxKRfamA367QjJXtceYuliLFfEL8QsskRM2g==} + '@swc/core-linux-arm-gnueabihf@1.16.2': + resolution: {integrity: sha512-MdXi83Z/gGp1LIrg+h7HKxiul/z/Bty/ZJSvYAFqDl9zteC1XLSAZdScquKtXPp50rdyXqritTDCqQBhwVfZKA==} engines: {node: '>=10'} cpu: [arm] os: [linux] - '@swc/core-linux-arm64-gnu@1.15.47': - resolution: {integrity: sha512-TBxvRz+B4K205TWHHZxWVxkC2RFNP/Mz3PNcECBos5PsKwxjg3QSJzdoebr0VCf0Bfh8HOPldKxAP/8XkFe9gA==} + '@swc/core-linux-arm64-gnu@1.16.2': + resolution: {integrity: sha512-/jcTmK6Ktz3owM3YtiKvjofV6p3VpHnYzTIrOGwDIOsDigRAAVuZ8east33wYO/7UTdKYFlyHNnJNT0WJqOA3Q==} engines: {node: '>=10'} cpu: [arm64] os: [linux] libc: [glibc] - '@swc/core-linux-arm64-musl@1.15.47': - resolution: {integrity: sha512-3Yu3Uq/VgytqsPjTMbkPU1ExADytbdWbruJYhA584E9jrpE2Ki+R6VVPoZCeAVk1Cb7QxcRTgblw6bSa6a/R+w==} + '@swc/core-linux-arm64-musl@1.16.2': + resolution: {integrity: sha512-4gFarKaFnlJTSlJYKmMhV4u+3YE4uYfiydpBoYjmgQhCf9lAieOq+WilZaK9vVSHeqLuQpTEiGULZqAdsRX5Dw==} engines: {node: '>=10'} cpu: [arm64] os: [linux] libc: [musl] - '@swc/core-linux-ppc64-gnu@1.15.47': - resolution: {integrity: sha512-wfdMi5IaOaNtmh2/6geRoxIdNfqylUZFdtzTKS655y1axWfIWyx7As74vv0wVdjeCIZ3WmCI9odDd4rUttXOSQ==} + '@swc/core-linux-ppc64-gnu@1.16.2': + resolution: {integrity: sha512-syqSLGd6KlZ1PciNzs6bIUlhOuFztZufebOHaERjc4N4SqNZxyqYd4I+jj/EfOYnpe0kNjccn9HJLN1p5dz3+w==} engines: {node: '>=10'} cpu: [ppc64] os: [linux] libc: [glibc] - '@swc/core-linux-s390x-gnu@1.15.47': - resolution: {integrity: sha512-3hHYBY0yx8Ez7GMRrkhXHQzMdR5IZA6Wq5Ee4svlgwvSECLpnAJ9+0AimEGUFDvuLwE7nV/2+PYe8+Nm4rvNcQ==} + '@swc/core-linux-s390x-gnu@1.16.2': + resolution: {integrity: sha512-ZBBLK+ewGyXLzWeMS7wbKtWBdnif6etn7xvPY/iOfbdsjX/+bgkp1pQt2lWF2wlu2hXYZuhJ/tHZE/QR8/apzg==} engines: {node: '>=10'} cpu: [s390x] os: [linux] libc: [glibc] - '@swc/core-linux-x64-gnu@1.15.47': - resolution: {integrity: sha512-TjfhjgP/jGCfFHYC3JQPhJA1HwErbIJ9JfREDc1KNkvY6P0LodCgKVIlQ5deeTbkG7ih3bF5PHJLuLpaZjdRyQ==} + '@swc/core-linux-x64-gnu@1.16.2': + resolution: {integrity: sha512-LyHJgxCA4Tje0ysBMbEb0tt/ie8kgUKoFE3JAKFhpevmTmhYEoC0H9s47WuDsqiFckF1ITUguZIXJG6K5e0dvg==} engines: {node: '>=10'} cpu: [x64] os: [linux] libc: [glibc] - '@swc/core-linux-x64-musl@1.15.47': - resolution: {integrity: sha512-CQpS8Ge/avfjZd0UEwG/sds83Uu32deQXcV1Jo3jD0mmvQQqtYAjpsDZXugmheeAwmt+YIuoVtVHro8LMYHqsQ==} + '@swc/core-linux-x64-musl@1.16.2': + resolution: {integrity: sha512-PghXJlVM1cgtLfNUR1vxFo1z+PDRAe8cWAJlZZ7spmeiN7BospGXg/MHUg7oNSgwSX7Zo//YKv9P5yD9apsFJQ==} engines: {node: '>=10'} cpu: [x64] os: [linux] libc: [musl] - '@swc/core-win32-arm64-msvc@1.15.47': - resolution: {integrity: sha512-0W8IKHsUTYiT7G2RqtOoVWk+89yzZikIiDUb/sCK6BmQDBhN91hQSfyUtW12jhEWLzYgcfmisfsZrmZE+84U1A==} + '@swc/core-win32-arm64-msvc@1.16.2': + resolution: {integrity: sha512-StTOSefYBxemvNYYUI3UmO1a8y+hSPjjfHogC2TEHL+Z1PlEBim/XtLas5rS04jAzT9RrNmbtX911SZ42H9jSQ==} engines: {node: '>=10'} cpu: [arm64] os: [win32] - '@swc/core-win32-ia32-msvc@1.15.47': - resolution: {integrity: sha512-ZIp49d2Z4/ka2jO9otOg4hDvTdPmp86kVOgS2M5FCPI7eKKZ1W0boxWn+8XeZrfERtFGW0AlMRm4JhlJa7l3NA==} + '@swc/core-win32-ia32-msvc@1.16.2': + resolution: {integrity: sha512-fycER209DYIzsibpTMC+chND05OfOjgztWL9U8OE6/uUlsOUZH3eh98isBLEnOymYUhlJLEt5++W1+KL/FOh5Q==} engines: {node: '>=10'} cpu: [ia32] os: [win32] - '@swc/core-win32-x64-msvc@1.15.47': - resolution: {integrity: sha512-2h8Iek95vnixkBRCo+H8p09+Q5ll2NgSMFrWTy0iKt7+/t+8/T5mBpiT6c0ZxSS7wcWjwZ9sGZkK70tTSYHdDw==} + '@swc/core-win32-x64-msvc@1.16.2': + resolution: {integrity: sha512-cSd1z6ivSrJPVr+moVwOHWjeKy6TpO4/Shwcv5KCrKYXCccxwh4pRy1C3fDioNx2PF1jPZWHKZjtXt+Be9VbaQ==} engines: {node: '>=10'} cpu: [x64] os: [win32] - '@swc/core@1.15.47': - resolution: {integrity: sha512-FbsO5JcfOjfH38W/rohBRBweJeERsAuIP4f377lmkmxTcq9exjtx4SkRuZY5CdfhR2CBVwDIJegBpJDffwNsOg==} + '@swc/core@1.16.2': + resolution: {integrity: sha512-95I4kiSMeveI/Mhi+tE4fiWcWLUMfzfKrk0jtr8LRMqHgOgq+xHS+zExkDqoO4b5OeeuXHMWVdD5MeP3X6sULw==} engines: {node: '>=10'} peerDependencies: '@swc/helpers': '>=0.5.17' @@ -3070,8 +3053,8 @@ packages: resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==} engines: {node: '>=14', npm: '>=6', yarn: '>=1'} - '@testing-library/react@16.3.2': - resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==} + '@testing-library/react@16.3.3': + resolution: {integrity: sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==} engines: {node: '>=18'} peerDependencies: '@testing-library/dom': ^10.0.0 @@ -3085,8 +3068,8 @@ packages: '@types/react-dom': optional: true - '@testing-library/user-event@14.6.1': - resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} + '@testing-library/user-event@14.6.7': + resolution: {integrity: sha512-MPCpX8bxe8zS+JmmTwLp8jd0dy1rAm60Te/SL8JrQM3qvQJcBOs1d7IefJMyZzqM3EWBrDn/LWDt1BCGu4ASfg==} engines: {node: '>=12', npm: '>=6'} peerDependencies: '@testing-library/dom': '>=7.21.4' @@ -3172,13 +3155,13 @@ packages: '@types/qrcode@1.5.6': resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==} - '@types/react-dom@19.2.3': - resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==} + '@types/react-dom@19.2.5': + resolution: {integrity: sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg==} peerDependencies: '@types/react': ^19.2.0 - '@types/react@19.2.17': - resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==} + '@types/react@19.2.18': + resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==} '@types/resolve@1.20.6': resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==} @@ -3192,41 +3175,41 @@ packages: '@types/trusted-types@2.0.7': resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} - '@typescript-eslint/project-service@8.65.0': - resolution: {integrity: sha512-SxnPhbTsGahizDgbu7oqFH/xVtzIqMd/s+WtnSxNxJZJpLbdT5IPdzg8EZxO3+PoKahXmwJLeNQOpKJb3/bi7Q==} + '@typescript-eslint/project-service@8.69.0': + resolution: {integrity: sha512-yi4obFrHMmnsesWehHbkg9zMA7Jt8cXT+mKM08G999pH1yT6nqgsHx7MYm0uY1wAj8CqiBXYRJ7WAT0QdQHQXg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '>=4.8.4 <6.1.0' - '@typescript-eslint/scope-manager@8.65.0': - resolution: {integrity: sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg==} + '@typescript-eslint/scope-manager@8.69.0': + resolution: {integrity: sha512-ewfspqWvSxKSOaplqAUNbaSFO0eB6w1EtQ+esfYFRm3614Ty4uNtExkcbgd6nWsXphbqKyf9ZYdbZdv2xEoWEQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/tsconfig-utils@8.65.0': - resolution: {integrity: sha512-j6GzGqCiRdA7Qhur2VVmKZAkBLfnHFQfx4TaJGL9RMveZqCo48jSHHO0DTgizEnGhtWnqmbtCUSrqSkdiY/0Hg==} + '@typescript-eslint/tsconfig-utils@8.69.0': + resolution: {integrity: sha512-xNqK7YTDZsLniQMV/4rpFR8Z5JlqeRvVjuG1YgF/mdPVH84HSD19L8CczMA0qg2RfwEV231GHH3VnToJDo4MfQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '>=4.8.4 <6.1.0' - '@typescript-eslint/types@8.65.0': - resolution: {integrity: sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg==} + '@typescript-eslint/types@8.69.0': + resolution: {integrity: sha512-K3VrubUPhlo9VDBS6QdI8YB5j7ClpqLRdefcz6PFrhnwicehBweqQ9Evhl4l+FYz0HdDmMqIiSX0aldGRYtDCA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/typescript-estree@8.65.0': - resolution: {integrity: sha512-JboAE2swaYt4tb1fHhHTABE2K+OLy09XfcTbhnk4Pw96f9dd2e9iYsJ28gBggHlo5z5x1rkyWvcPoTuNTd4oGg==} + '@typescript-eslint/typescript-estree@8.69.0': + resolution: {integrity: sha512-AdFkgqck3Vudb/kWnxlyafU/4aBhHrbQ9locP2N4psXTy5mOBg0SHJumnLvx7r6g1gV4DKvUFwV2nJZBoqOD8w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '>=4.8.4 <6.1.0' - '@typescript-eslint/utils@8.65.0': - resolution: {integrity: sha512-gXiwIHsYreboxeJucHKPvgwl7dXt50mF8s1/c00cP/WoVTyWKFdtfhRWwZiXYFU5H2O8vVoSLNrexFZjYS/SGA==} + '@typescript-eslint/utils@8.69.0': + resolution: {integrity: sha512-tUbx60BBqQa31kXF5MCsOOLL5E/WzUuxIn7YpAvq+eaUlqvk8/NXnXMBNAdLCr0icjkzem7iUA5QqWHe/hJ1aw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 typescript: '>=4.8.4 <6.1.0' - '@typescript-eslint/visitor-keys@8.65.0': - resolution: {integrity: sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A==} + '@typescript-eslint/visitor-keys@8.69.0': + resolution: {integrity: sha512-+rmdgPA+EXkNgKYvHvFfhrs35utXbwaC5PGpDquSXcoXQDKUA5UjV0LmTucG/4JXkM31BTu4TilHtrN8IVBe8w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@ungap/structured-clone@1.3.3': @@ -3240,8 +3223,8 @@ packages: peerDependencies: react: '>= 16.8.0' - '@vector-im/compound-design-tokens@10.2.4': - resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==} + '@vector-im/compound-design-tokens@11.1.0': + resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==} peerDependencies: '@adobe/leonardo-contrast-colors': ^1.0.0 '@types/react': '*' @@ -3257,8 +3240,8 @@ packages: react: optional: true - '@vector-im/compound-web@10.0.1': - resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==} + '@vector-im/compound-web@10.1.0': + resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==} peerDependencies: '@fontsource/inconsolata': ^5 '@fontsource/inter': ^5 @@ -3269,35 +3252,38 @@ packages: '@types/react': optional: true - '@vitejs/plugin-react@6.0.5': - resolution: {integrity: sha512-BOVzne/NL162sMdResB25mUv+vWMF5NoAjNf09TeGlE7ZpszZWSD3winycicLJw72yeVsoCn/2kOhEuCvEShMA==} + '@vitejs/plugin-react@6.1.1': + resolution: {integrity: sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==} engines: {node: ^20.19.0 || >=22.12.0} peerDependencies: '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0 babel-plugin-react-compiler: ^1.0.0 + oxc-transform-react: ^0.145.0 vite: ^8.0.0 peerDependenciesMeta: '@rolldown/plugin-babel': optional: true babel-plugin-react-compiler: optional: true + oxc-transform-react: + optional: true - '@vitest/browser-playwright@4.1.10': - resolution: {integrity: sha512-nMoXGEiRpT7m3W7NsbvrM2aKNwiNHZf+zEpUCvMteGjZFvfT96Q9fh7QyB98dvDWXiKvrLxA7bJ1mCOOv+JQPw==} + '@vitest/browser-playwright@4.1.11': + resolution: {integrity: sha512-riLBxPqwnJ0lWs2DN2WeUfYeKLoAjbP2Xx8cLQdSddzMi20sksIa6K2mPz79DyMZKKVKH2ksOC2yJvtNcZg8cg==} peerDependencies: playwright: '*' - vitest: 4.1.10 + vitest: 4.1.11 - '@vitest/browser@4.1.10': - resolution: {integrity: sha512-UDwuWGwXj646CBx/bQHOaJSX7np0I8JL/UKQYa1e4QrVHH8VdWtx8eaOuf8sy0ShwDgR6NjJAsp5eF6vjF6qng==} + '@vitest/browser@4.1.11': + resolution: {integrity: sha512-bwMovvAeuTFOK5kIFevw4VEf+1gVEICv4SYK4k3knJOxl6b1zEWud8mYKD73e1B0odAn174h1MofURy2TPWf3w==} peerDependencies: - vitest: 4.1.10 + vitest: 4.1.11 - '@vitest/coverage-v8@4.1.10': - resolution: {integrity: sha512-IM49HmthevbgAO4anp1hwtoT9wYe59w0LR00gr+eagHE+ZJ5lK4sLPeO0ubgoJcwLk6dehU3R24N+FbEEKDc8g==} + '@vitest/coverage-v8@4.1.11': + resolution: {integrity: sha512-8MVGEFnJIcdGjcbfKmeq8z0pZHH0JlVtoVZH9Q/qwUp6wyFnEJUBMrw9DCaj+ra3vShGmhavjalMIhPNxZAUcw==} peerDependencies: - '@vitest/browser': 4.1.10 - vitest: 4.1.10 + '@vitest/browser': 4.1.11 + vitest: 4.1.11 peerDependenciesMeta: '@vitest/browser': optional: true @@ -3305,11 +3291,11 @@ packages: '@vitest/expect@3.2.4': resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==} - '@vitest/expect@4.1.10': - resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==} + '@vitest/expect@4.1.11': + resolution: {integrity: sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==} - '@vitest/mocker@4.1.10': - resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==} + '@vitest/mocker@4.1.11': + resolution: {integrity: sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==} peerDependencies: msw: ^2.4.9 vite: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -3322,31 +3308,31 @@ packages: '@vitest/pretty-format@3.2.4': resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==} - '@vitest/pretty-format@4.1.10': - resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==} + '@vitest/pretty-format@4.1.11': + resolution: {integrity: sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==} - '@vitest/runner@4.1.10': - resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==} + '@vitest/runner@4.1.11': + resolution: {integrity: sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==} - '@vitest/snapshot@4.1.10': - resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==} + '@vitest/snapshot@4.1.11': + resolution: {integrity: sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==} '@vitest/spy@3.2.4': resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==} - '@vitest/spy@4.1.10': - resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==} + '@vitest/spy@4.1.11': + resolution: {integrity: sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==} - '@vitest/ui@4.1.10': - resolution: {integrity: sha512-EOUqfXHTXtpSHsyLHH40ts3Ue+hRhSGwzwzMlK0dTEOLSDYyOXLyr5JDGmHQWhN2DYI30gw6dVx3cdgM9FZl+Q==} + '@vitest/ui@4.1.11': + resolution: {integrity: sha512-r/rwyKoev21mWdRGSEkZOqkQ2BYy68mwjihg9M90nNRbf4NGrgzZ4cj6JNCEwlOGJkbKeMgsjlykvwKUbRr7gw==} peerDependencies: - vitest: 4.1.10 + vitest: 4.1.11 '@vitest/utils@3.2.4': resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==} - '@vitest/utils@4.1.10': - resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==} + '@vitest/utils@4.1.11': + resolution: {integrity: sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==} '@webcontainer/env@1.1.1': resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==} @@ -3384,8 +3370,8 @@ packages: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} - ansi-regex@6.2.2: - resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==} + ansi-regex@6.3.0: + resolution: {integrity: sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==} engines: {node: '>=12'} ansi-styles@4.3.0: @@ -3428,8 +3414,8 @@ packages: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} - ast-types@0.16.1: - resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} + ast-types@0.16.3: + resolution: {integrity: sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==} engines: {node: '>=4'} ast-v8-to-istanbul@1.0.5: @@ -3646,9 +3632,9 @@ packages: colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} - commander@14.0.3: - resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==} - engines: {node: '>=20'} + commander@15.0.0: + resolution: {integrity: sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==} + engines: {node: '>=22.12.0'} commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} @@ -3670,8 +3656,8 @@ packages: constants-browserify@1.0.0: resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==} - content-type@3.0.0: - resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==} + content-type@3.1.1: + resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==} engines: {node: '>=22'} convert-source-map@2.0.0: @@ -3793,8 +3779,8 @@ packages: resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==} engines: {node: '>=18'} - default-browser@5.5.0: - resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==} + default-browser@5.5.1: + resolution: {integrity: sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==} engines: {node: '>=18'} define-data-property@1.1.4: @@ -3923,15 +3909,15 @@ packages: resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} engines: {node: '>= 0.4'} - es-module-lexer@2.3.1: - resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==} + es-module-lexer@2.3.2: + resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==} es-object-atoms@1.1.1: resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==} engines: {node: '>= 0.4'} - esbuild@0.28.1: - resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==} + esbuild@0.28.2: + resolution: {integrity: sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==} engines: {node: '>=18'} hasBin: true @@ -3943,11 +3929,10 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} - eslint-plugin-storybook@10.5.5: - resolution: {integrity: sha512-xGCrddoZ8pMmwc7M5mp+habWbvqBjRuyGVTJ6RpavpoAP6NBUfGSRXHuBs7cHRDpDSuErYeDiEo4XHTonRp68g==} + eslint-plugin-storybook@10.6.0: + resolution: {integrity: sha512-HK3yD5Nslv97buJ5JfT1xFkTOoyJgGIENmBoZZI3F8t2UpBzb/dHpKyCh5bQ8AvJWnhoM/WAtDNqyd9nq6xgcg==} peerDependencies: eslint: '>=8' - storybook: ^10.5.5 eslint-scope@7.2.2: resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==} @@ -4005,9 +3990,9 @@ packages: evp_bytestokey@1.0.3: resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==} - execa@9.6.1: - resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==} - engines: {node: ^18.19.0 || >=20.5.0} + execa@10.0.1: + resolution: {integrity: sha512-ge98qjkRK4IB7tL7Ju/6qmm5LHoH1eEMt5FNZrz3f4UIYhF28lggX20z3FaX1sgc67msLEn0N0BscOs29iuwyw==} + engines: {node: '>=22'} expect-type@1.4.0: resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==} @@ -4270,8 +4255,8 @@ packages: i18next-browser-languagedetector@8.2.1: resolution: {integrity: sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==} - i18next-cli@1.67.3: - resolution: {integrity: sha512-kW5Hq0kzOGoZQCxOLqtrcj4NqIGmQJkBr5c78XQz3WqBgZuJ1PzvLEEjoXdyDkX1IwPO19OTEv3sOeCCWU+Igg==} + i18next-cli@1.72.4: + resolution: {integrity: sha512-YnyjYSasqZbZCLYQOvk9pvSYZy1ANjq7yG4cJ5Rd2WF99sALUKCCIzvfPXu9OfBgSy4CosSnjg8GZI1c0CrrNA==} engines: {node: '>=22'} hasBin: true @@ -4279,8 +4264,8 @@ packages: resolution: {integrity: sha512-n5UexwEVt0OoIAhG2MWpSnAVJW1U8mQrQTmXyxc5DMAx+NLhcLZhSMJo/FnUsA5JQ3obTYqTgB7YIuZKWpDgow==} hasBin: true - i18next@26.3.6: - resolution: {integrity: sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==} + i18next@26.4.1: + resolution: {integrity: sha512-9YbX5E6gd1H+yaOSX3izCsPj5iWXyH7X4oC+iuHHJJw8AeHglzOK5SJf+1CHxaYKYigcea+8jvzSxqYx46YvyA==} peerDependencies: typescript: ^5 || ^6 || ^7 peerDependenciesMeta: @@ -4320,8 +4305,8 @@ packages: inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - inquirer@14.0.2: - resolution: {integrity: sha512-VsSx1JneSNp3ld1veMTLe+UDcUD8Tw2/jjOthhkX3/IX2q+xHhVELifeb/hsb1fBw31pabEPNUf/xUOyb+KZjA==} + inquirer@14.2.1: + resolution: {integrity: sha512-jLO8986l0/jW+K2Y5BHAhrD6ztnm8MHQgnTI5BwKV6can/LN6xYBcLbtUSvDt1jXNTASwCZszZk0ZBUT5YmH6Q==} engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'} peerDependencies: '@types/node': '>=18' @@ -4465,8 +4450,8 @@ packages: resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==} hasBin: true - jose@6.2.10: - resolution: {integrity: sha512-iiW7J9qRFlGxvCOIBDBDxFePQSn7ZMAnrYGhrrOo6siO/MIqwfyilLR27pkfDgUk+raLuzADS8A3S/KLBisc0g==} + jose@6.2.12: + resolution: {integrity: sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==} jose@6.2.9: resolution: {integrity: sha512-XrchZOFZUl/T3vTwRe8XK+cJrGtMF4th1ARnDfwbBXFKThGhlsxEE4Zu03AD/bjJSt/9jT/mxrOCkJWOg77aPA==} @@ -4477,10 +4462,6 @@ packages: js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - js-yaml@4.3.0: - resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==} - hasBin: true - js-yaml@4.3.1: resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==} hasBin: true @@ -4614,8 +4595,8 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - livekit-client@2.22.0: - resolution: {integrity: sha512-GLtYQfRh/RsvXaOX1x609bFZ17yyKmKWDqu9JmkMKn9vIFLi2GsapRv9gT8OJO/1R2dsitrkbGmloyUfxWQsaA==} + livekit-client@2.22.3: + resolution: {integrity: sha512-jw9zBKXY5Gtr5MZ7vEON3QhMNccuDvYHck1PFSyG1aaateQPqgKZFBMgZkFZaXHIf9RV4MDW5xpTK2b/+qbwOg==} peerDependencies: '@types/dom-mediacapture-record': ^1 @@ -4664,6 +4645,10 @@ packages: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true + machina@7.0.1: + resolution: {integrity: sha512-0Xkgs8NeBvO2hW6bjJT8ewLWrMfh1haMPstaghpASWjXkLjRhtDiaJG1Kb7mslaOHxZYxpH7PIjpmirRVYbMMA==} + engines: {node: '>=22.22'} + magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} @@ -4671,6 +4656,9 @@ packages: resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==} engines: {node: '>=12'} + magic-string@1.2.3: + resolution: {integrity: sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==} + magicast@0.5.4: resolution: {integrity: sha512-llBEhWm1SacoRwgHUoQJYtwp4PBLF4faQi5TCpIGyGs9n4y5+juI0tDgyKIfpqxckRHaHzouUEph3THklWh03w==} @@ -4685,13 +4673,13 @@ packages: matrix-events-sdk@0.0.1: resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==} - matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a: - resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a} - version: 42.2.0 + matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999: + resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999} + version: 42.3.0 engines: {node: '>=22.0.0'} - matrix-widget-api@1.18.0: - resolution: {integrity: sha512-4T2f2koWmx05p1BLcT/9YGGGPSXpPT+PA4Oap/5fjhXsWPxMGJiGL97YpANMYLKsnE1sScYFeuyxIgdc1Qo+Ew==} + matrix-widget-api@1.19.0: + resolution: {integrity: sha512-Qe7L6G1mQJphBC47/Bzp5ljPIK1UARgLiuGgS+/KmEs/eaNHkQ3+ArD0/0kvMV+d6kCGAZ9OKRqsnuPjizI+tw==} md5.js@1.3.5: resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==} @@ -4708,14 +4696,6 @@ packages: resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==} hasBin: true - mime-db@1.52.0: - resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} - engines: {node: '>= 0.6'} - - mime-types@2.1.35: - resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} - engines: {node: '>= 0.6'} - mimic-function@5.0.1: resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==} engines: {node: '>=18'} @@ -4752,8 +4732,8 @@ packages: resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==} engines: {node: ^20.17.0 || >=22.9.0} - nanoid@3.3.17: - resolution: {integrity: sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==} + nanoid@3.3.18: + resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true @@ -4818,13 +4798,6 @@ packages: resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==} engines: {node: '>= 0.4'} - observable-hooks@4.2.4: - resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - rxjs: '>=6.0.0' - obug@2.1.4: resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==} engines: {node: '>=12.20.0'} @@ -4858,11 +4831,11 @@ packages: oxc-resolver@11.19.1: resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==} - oxc-resolver@11.24.2: - resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==} + oxc-resolver@11.21.2: + resolution: {integrity: sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==} - oxfmt@0.61.0: - resolution: {integrity: sha512-DxdHBEMYpcEnHoUHjjOigUqV2TYKsvxLwUPXnVYBjgFdqrcQ/91OtwubtZ2PUodCs3sStI8R5Qw3fKNGK4e8wQ==} + oxfmt@0.66.0: + resolution: {integrity: sha512-FfvqR8RFtV6JJpRrpkfqyVCQ7HDvZ/VriWFx7veftCgL1B5ZO9qNr+1rvPieycMQnNfVG0PWyJQiy7p0hq1I5w==} engines: {node: ^20.19.0 || >=22.12.0} hasBin: true peerDependencies: @@ -4878,8 +4851,8 @@ packages: resolution: {integrity: sha512-7DBpqyLZCfyoXiivyfzt9Xmju/K1RcN+Y1W7buEwrgRCWWF11v9alypPqWGZBmh2erDkKL/kVyhKUH2Px+t13A==} hasBin: true - oxlint@1.76.0: - resolution: {integrity: sha512-6QoFioEU4fNdiUx/2Eo6TRd6NG7H7njnRCz8rhB66cZmMHDTqcm1Rjvl8Wry+ZTQMBAmyb4Mlf62Mk5X+eHSOw==} + oxlint@1.81.0: + resolution: {integrity: sha512-HyrJYqeoOCL0iqaLEzGewGT48ZX99P3hxYh8udAF9RGGIghSamkXE4ClUyBpEDNqasamThgmlPbuMOe7SAZmHg==} engines: {node: ^20.19.0 || >=22.12.0} hasBin: true peerDependencies: @@ -4907,8 +4880,8 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} - p-retry@8.0.0: - resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==} + p-retry@8.0.1: + resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==} engines: {node: '>=22'} p-try@2.2.0: @@ -5004,17 +4977,21 @@ packages: resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==} engines: {node: '>=12'} + picomatch@4.0.7: + resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==} + engines: {node: '>=12'} + pkg-dir@5.0.0: resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==} engines: {node: '>=10'} - playwright-core@1.62.0: - resolution: {integrity: sha512-nsNRyq0r2zsG8AcRHWknc9QRA5XCueC7gWMrs+Gx2tlZn9hcl8zudfh00lhJPY1DE7NmZ6bDsT9g2yey8mXljA==} + playwright-core@1.62.1: + resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==} engines: {node: '>=20'} hasBin: true - playwright@1.62.0: - resolution: {integrity: sha512-Z14dG305dgaLu6foB1TXQagFiW8JfSUIUaUuPaKQ6NtBPKF1P/qXcqfh6c6K/icPqdy37JmjbiBXf6JNg6Sylw==} + playwright@1.62.1: + resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==} engines: {node: '>=20'} hasBin: true @@ -5183,15 +5160,15 @@ packages: peerDependencies: postcss: ^8.4 - postcss-selector-parser@7.1.1: - resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} + postcss-selector-parser@7.1.3: + resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==} engines: {node: '>=4'} postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - postcss@8.5.25: - resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==} + postcss@8.5.26: + resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==} engines: {node: ^10 || ^12 || >=14} posthog-js@1.408.2: @@ -5218,8 +5195,8 @@ packages: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - pretty-ms@9.3.0: - resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==} + pretty-ms@9.3.1: + resolution: {integrity: sha512-HzMy3Geq23nVALD/M2LliU+F+M+gVNsvkQWWqeBZ8HDiCgzo6YPJ/Omrmtq24EFrIsk0a3EkQGEd7bDOo+IhGA==} engines: {node: '>=18'} process-nextick-args@2.0.1: @@ -5301,8 +5278,8 @@ packages: typescript: optional: true - react-i18next@17.0.11: - resolution: {integrity: sha512-cDtkXgxjuFTWUH6V+aQn1Ve5vDiUztCNPWW5GtSHDccsgRXO1nE6QFWCEmc1KAutrb3OUv87wFShJL5RhUwPXg==} + react-i18next@17.0.13: + resolution: {integrity: sha512-Cc1PscmblIHA1kljTqDwrcVMI21ydgmUzw0UAeQBe7pAOgfuRLfzXze4EUBQoeDiICzFIXXhHFoZxuetNg5D0Q==} peerDependencies: i18next: '>= 26.2.0' react: '>= 16.8.0' @@ -5343,15 +5320,15 @@ packages: '@types/react': optional: true - react-router-dom@7.18.2: - resolution: {integrity: sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==} + react-router-dom@7.18.3: + resolution: {integrity: sha512-ytVbyBBM7vMfRCam25r0WMhSVSom909A8p+8m0/f1w853dz/xfFu6etAT2SEbVoSnI+ZoPRDqIsQXVT89gp7kg==} engines: {node: '>=20.0.0'} peerDependencies: react: '>=18' react-dom: '>=18' - react-router@7.18.2: - resolution: {integrity: sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==} + react-router@7.18.3: + resolution: {integrity: sha512-gyXgtdr5uACJ5b1Q4udzjVV+tb/rlHIMJKuJ0e89R4Kzgz47z/rgP0dIKxktqIEUhDHluGTPJJH/wRha7CyqsA==} engines: {node: '>=20.0.0'} peerDependencies: react: '>=18' @@ -5394,12 +5371,12 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} - readdirp@5.0.0: - resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==} + readdirp@5.1.1: + resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==} engines: {node: '>= 20.19.0'} - recast@0.23.19: - resolution: {integrity: sha512-T98lym7kH+pnZmRaD8yDRdaNqyUbwnbEBx0MuchrzMFOEMray4AO3ZJoTUZ5r78Ao78X/OhzW0DL8GB85w/I2w==} + recast@0.23.21: + resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==} engines: {node: '>= 4'} redent@3.0.0: @@ -5447,8 +5424,8 @@ packages: resolution: {integrity: sha512-5Di9UC0+8h1L6ZD2d7awM7E/T4uA1fJRlx6zk/NvdCCVEoAnFqvHmCuNeIKoCeIixBX/q8uM+6ycDvF8woqosA==} engines: {node: '>= 0.8'} - rolldown@1.1.5: - resolution: {integrity: sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==} + rolldown@1.2.7: + resolution: {integrity: sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==} engines: {node: ^20.19.0 || >=22.12.0} hasBin: true @@ -5487,8 +5464,8 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - sass@1.102.0: - resolution: {integrity: sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==} + sass@1.103.1: + resolution: {integrity: sha512-9icZURbP51S6S0QGoyaeqk9uB06GNWxsFYWfH5RgpFgqK5FA8tJcM3AdVxrZEVJ7dz+L87nG95gBKf4VuaMHGw==} engines: {node: '>=20.19.0'} hasBin: true @@ -5605,8 +5582,8 @@ packages: resolution: {integrity: sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==} engines: {node: '>=18'} - storybook@10.5.5: - resolution: {integrity: sha512-UscBIBJDloUeqntukHOhP1a5W/vouePDJbzPSxj466WK801FZtzQiMffMtkjzJiWSuj20wfaYlB2QQKh9aOYAg==} + storybook@10.6.0: + resolution: {integrity: sha512-H48X6AURAFTpfN2zEux6vNesee5Oq8Gxj1IanYmblPZ218sfKSeyyerF1NC7GD7BrruoC8L4/cU0zII4y+d6zw==} hasBin: true peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -5711,8 +5688,8 @@ packages: tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} - tinyexec@1.3.0: - resolution: {integrity: sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==} + tinyexec@1.3.1: + resolution: {integrity: sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==} engines: {node: '>=18'} tinyglobby@0.2.17: @@ -5731,8 +5708,8 @@ packages: resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==} engines: {node: '>=14.0.0'} - tinyspy@4.0.4: - resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==} + tinyspy@4.0.6: + resolution: {integrity: sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==} engines: {node: '>=14.0.0'} tldts-core@6.1.86: @@ -5902,8 +5879,8 @@ packages: util@0.12.5: resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} - uuid@14.0.1: - resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==} + uuid@14.0.2: + resolution: {integrity: sha512-xZe/16rV4aa+HGSOCiY2YeLT1OybRLrrkL/Rqaq7p7GMVXjFh+6wN4oMYgjFmnSnhY8t6Xpdl2l9qmnHYuMHwQ==} hasBin: true vaul@1.1.2: @@ -5912,9 +5889,6 @@ packages: react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc - vite-plugin-generate-file@0.3.1: - resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==} - vite-plugin-html@3.2.2: resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==} peerDependencies: @@ -5941,13 +5915,13 @@ packages: peerDependencies: vite: ^2 || ^3 || ^4 || ^5 || ^6 || ^7 || ^8 - vite@8.1.5: - resolution: {integrity: sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==} + vite@8.2.2: + resolution: {integrity: sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==} engines: {node: ^20.19.0 || >=22.12.0} hasBin: true peerDependencies: '@types/node': ^20.19.0 || >=22.12.0 - '@vitejs/devtools': ^0.3.0 + '@vitejs/devtools': ^0.4.0 || ^0.5.0 esbuild: ^0.28.0 jiti: '>=1.21.0' less: ^4.0.0 @@ -5989,20 +5963,20 @@ packages: peerDependencies: vitest: '>=1' - vitest@4.1.10: - resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==} + vitest@4.1.11: + resolution: {integrity: sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==} engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0} hasBin: true peerDependencies: '@edge-runtime/vm': '*' '@opentelemetry/api': ^1.9.0 '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0 - '@vitest/browser-playwright': 4.1.10 - '@vitest/browser-preview': 4.1.10 - '@vitest/browser-webdriverio': 4.1.10 - '@vitest/coverage-istanbul': 4.1.10 - '@vitest/coverage-v8': 4.1.10 - '@vitest/ui': 4.1.10 + '@vitest/browser-playwright': 4.1.11 + '@vitest/browser-preview': 4.1.11 + '@vitest/browser-webdriverio': 4.1.11 + '@vitest/coverage-istanbul': 4.1.11 + '@vitest/coverage-v8': 4.1.11 + '@vitest/ui': 4.1.11 happy-dom: '*' jsdom: '*' vite: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -6085,6 +6059,11 @@ packages: whatwg-url@5.0.0: resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + which-command@0.1.0: + resolution: {integrity: sha512-XZyoF5/5hZtXitIwzrU4NKK+Wtbb9aB9CezUEw2Q0wlYK8NUYQxC1rRXgNueYLtBAJwXIb+/tFVk4dozciNJMA==} + engines: {node: '>=22'} + hasBin: true + which-module@2.0.1: resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==} @@ -6133,8 +6112,8 @@ packages: utf-8-validate: optional: true - ws@8.21.1: - resolution: {integrity: sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==} + ws@8.21.3: + resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==} engines: {node: '>=10.0.0'} peerDependencies: bufferutil: ^4.0.1 @@ -6365,11 +6344,11 @@ snapshots: unplugin: 1.16.1 zod: 3.25.76 - '@codecov/vite-plugin@1.9.1(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@codecov/vite-plugin@1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: '@codecov/bundler-plugin-core': 1.9.1 unplugin: 1.16.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) '@croct/json5-parser@0.2.2': dependencies: @@ -6407,286 +6386,286 @@ snapshots: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-alpha-function@1.0.1(postcss@8.5.25)': + '@csstools/postcss-alpha-function@1.0.1(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.25)': + '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)': dependencies: - '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3) + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.25)': + '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-color-function@4.0.12(postcss@8.5.25)': + '@csstools/postcss-color-function@4.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-color-mix-function@3.0.12(postcss@8.5.25)': + '@csstools/postcss-color-mix-function@3.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2(postcss@8.5.25)': + '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-content-alt-text@2.0.8(postcss@8.5.25)': + '@csstools/postcss-content-alt-text@2.0.8(postcss@8.5.26)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-contrast-color-function@2.0.12(postcss@8.5.25)': + '@csstools/postcss-contrast-color-function@2.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.25)': + '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.25)': + '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.26)': dependencies: - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-gamut-mapping@2.0.11(postcss@8.5.25)': + '@csstools/postcss-gamut-mapping@2.0.11(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-gradients-interpolation-method@5.0.12(postcss@8.5.25)': + '@csstools/postcss-gradients-interpolation-method@5.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-hwb-function@4.0.12(postcss@8.5.25)': + '@csstools/postcss-hwb-function@4.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-ic-unit@4.0.4(postcss@8.5.25)': + '@csstools/postcss-ic-unit@4.0.4(postcss@8.5.26)': dependencies: - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-initial@2.0.1(postcss@8.5.25)': + '@csstools/postcss-initial@2.0.1(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.25)': + '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)': dependencies: - '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3) + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.25)': + '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.25)': + '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.25)': + '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.25)': + '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.25)': + '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.25)': + '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.26)': dependencies: '@csstools/css-tokenizer': 3.0.4 - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.25)': + '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.25)': + '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.26)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.25)': + '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.26)': dependencies: - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-normalize-display-values@4.0.1(postcss@8.5.25)': + '@csstools/postcss-normalize-display-values@4.0.1(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-oklab-function@4.0.12(postcss@8.5.25)': + '@csstools/postcss-oklab-function@4.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-position-area-property@1.0.0(postcss@8.5.25)': + '@csstools/postcss-position-area-property@1.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-progressive-custom-properties@4.2.1(postcss@8.5.25)': + '@csstools/postcss-progressive-custom-properties@4.2.1(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-property-rule-prelude-list@1.0.0(postcss@8.5.25)': + '@csstools/postcss-property-rule-prelude-list@1.0.0(postcss@8.5.26)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-random-function@2.0.1(postcss@8.5.25)': + '@csstools/postcss-random-function@2.0.1(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-relative-color-syntax@3.0.12(postcss@8.5.25)': + '@csstools/postcss-relative-color-syntax@3.0.12(postcss@8.5.26)': dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.25)': + '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)': dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.25)': + '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.25)': + '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-syntax-descriptor-syntax-production@1.0.1(postcss@8.5.25)': + '@csstools/postcss-syntax-descriptor-syntax-production@1.0.1(postcss@8.5.26)': dependencies: '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-system-ui-font-family@1.0.0(postcss@8.5.25)': + '@csstools/postcss-system-ui-font-family@1.0.0(postcss@8.5.26)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-text-decoration-shorthand@4.0.3(postcss@8.5.25)': + '@csstools/postcss-text-decoration-shorthand@4.0.3(postcss@8.5.26)': dependencies: '@csstools/color-helpers': 5.1.0 - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.25)': + '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.26)': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/postcss-unset-value@4.0.0(postcss@8.5.25)': + '@csstools/postcss-unset-value@4.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.1)': + '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.3)': dependencies: - postcss-selector-parser: 7.1.1 + postcss-selector-parser: 7.1.3 - '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)': + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.3)': dependencies: - postcss-selector-parser: 7.1.1 + postcss-selector-parser: 7.1.3 - '@csstools/utilities@2.0.0(postcss@8.5.25)': + '@csstools/utilities@2.0.0(postcss@8.5.26)': dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - '@emnapi/core@1.11.1': + '@emnapi/core@1.11.0': dependencies: '@emnapi/wasi-threads': 1.2.2 tslib: 2.8.1 @@ -6704,7 +6683,7 @@ snapshots: tslib: 2.8.1 optional: true - '@emnapi/runtime@1.11.1': + '@emnapi/runtime@1.11.0': dependencies: tslib: 2.8.1 optional: true @@ -6729,82 +6708,82 @@ snapshots: tslib: 2.8.1 optional: true - '@esbuild/aix-ppc64@0.28.1': + '@esbuild/aix-ppc64@0.28.2': optional: true - '@esbuild/android-arm64@0.28.1': + '@esbuild/android-arm64@0.28.2': optional: true - '@esbuild/android-arm@0.28.1': + '@esbuild/android-arm@0.28.2': optional: true - '@esbuild/android-x64@0.28.1': + '@esbuild/android-x64@0.28.2': optional: true - '@esbuild/darwin-arm64@0.28.1': + '@esbuild/darwin-arm64@0.28.2': optional: true - '@esbuild/darwin-x64@0.28.1': + '@esbuild/darwin-x64@0.28.2': optional: true - '@esbuild/freebsd-arm64@0.28.1': + '@esbuild/freebsd-arm64@0.28.2': optional: true - '@esbuild/freebsd-x64@0.28.1': + '@esbuild/freebsd-x64@0.28.2': optional: true - '@esbuild/linux-arm64@0.28.1': + '@esbuild/linux-arm64@0.28.2': optional: true - '@esbuild/linux-arm@0.28.1': + '@esbuild/linux-arm@0.28.2': optional: true - '@esbuild/linux-ia32@0.28.1': + '@esbuild/linux-ia32@0.28.2': optional: true - '@esbuild/linux-loong64@0.28.1': + '@esbuild/linux-loong64@0.28.2': optional: true - '@esbuild/linux-mips64el@0.28.1': + '@esbuild/linux-mips64el@0.28.2': optional: true - '@esbuild/linux-ppc64@0.28.1': + '@esbuild/linux-ppc64@0.28.2': optional: true - '@esbuild/linux-riscv64@0.28.1': + '@esbuild/linux-riscv64@0.28.2': optional: true - '@esbuild/linux-s390x@0.28.1': + '@esbuild/linux-s390x@0.28.2': optional: true - '@esbuild/linux-x64@0.28.1': + '@esbuild/linux-x64@0.28.2': optional: true - '@esbuild/netbsd-arm64@0.28.1': + '@esbuild/netbsd-arm64@0.28.2': optional: true - '@esbuild/netbsd-x64@0.28.1': + '@esbuild/netbsd-x64@0.28.2': optional: true - '@esbuild/openbsd-arm64@0.28.1': + '@esbuild/openbsd-arm64@0.28.2': optional: true - '@esbuild/openbsd-x64@0.28.1': + '@esbuild/openbsd-x64@0.28.2': optional: true - '@esbuild/openharmony-arm64@0.28.1': + '@esbuild/openharmony-arm64@0.28.2': optional: true - '@esbuild/sunos-x64@0.28.1': + '@esbuild/sunos-x64@0.28.2': optional: true - '@esbuild/win32-arm64@0.28.1': + '@esbuild/win32-arm64@0.28.2': optional: true - '@esbuild/win32-ia32@0.28.1': + '@esbuild/win32-ia32@0.28.2': optional: true - '@esbuild/win32-x64@0.28.1': + '@esbuild/win32-x64@0.28.2': optional: true '@eslint-community/eslint-utils@4.10.1(eslint@8.57.1(supports-color@7.2.0))': @@ -6910,29 +6889,29 @@ snapshots: '@humanwhocodes/object-schema@2.0.3': {} - '@inquirer/ansi@2.0.7': {} + '@inquirer/ansi@2.0.8': {} - '@inquirer/checkbox@5.2.1(@types/node@24.13.3)': + '@inquirer/checkbox@5.2.4(@types/node@24.13.3)': dependencies: - '@inquirer/ansi': 2.0.7 - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/figures': 2.0.7 - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/ansi': 2.0.8 + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/figures': 2.0.9 + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/confirm@6.1.1(@types/node@24.13.3)': + '@inquirer/confirm@6.3.1(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/core@11.2.1(@types/node@24.13.3)': + '@inquirer/core@12.0.2(@types/node@24.13.3)': dependencies: - '@inquirer/ansi': 2.0.7 - '@inquirer/figures': 2.0.7 - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/ansi': 2.0.8 + '@inquirer/figures': 2.0.9 + '@inquirer/type': 4.1.1(@types/node@24.13.3) cli-width: 4.1.0 fast-wrap-ansi: 0.2.2 mute-stream: 3.0.0 @@ -6940,92 +6919,92 @@ snapshots: optionalDependencies: '@types/node': 24.13.3 - '@inquirer/editor@5.2.2(@types/node@24.13.3)': + '@inquirer/editor@5.3.2(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/external-editor': 3.0.3(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/external-editor': 3.0.5(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/expand@5.1.1(@types/node@24.13.3)': + '@inquirer/expand@5.1.4(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/external-editor@3.0.3(@types/node@24.13.3)': + '@inquirer/external-editor@3.0.5(@types/node@24.13.3)': dependencies: chardet: 2.2.0 iconv-lite: 0.7.3 optionalDependencies: '@types/node': 24.13.3 - '@inquirer/figures@2.0.7': {} + '@inquirer/figures@2.0.9': {} - '@inquirer/input@5.1.2(@types/node@24.13.3)': + '@inquirer/input@5.1.5(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/number@4.1.1(@types/node@24.13.3)': + '@inquirer/number@4.2.2(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/password@5.1.1(@types/node@24.13.3)': + '@inquirer/password@5.2.1(@types/node@24.13.3)': dependencies: - '@inquirer/ansi': 2.0.7 - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/ansi': 2.0.8 + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/prompts@8.5.2(@types/node@24.13.3)': + '@inquirer/prompts@8.7.1(@types/node@24.13.3)': dependencies: - '@inquirer/checkbox': 5.2.1(@types/node@24.13.3) - '@inquirer/confirm': 6.1.1(@types/node@24.13.3) - '@inquirer/editor': 5.2.2(@types/node@24.13.3) - '@inquirer/expand': 5.1.1(@types/node@24.13.3) - '@inquirer/input': 5.1.2(@types/node@24.13.3) - '@inquirer/number': 4.1.1(@types/node@24.13.3) - '@inquirer/password': 5.1.1(@types/node@24.13.3) - '@inquirer/rawlist': 5.3.1(@types/node@24.13.3) - '@inquirer/search': 4.2.1(@types/node@24.13.3) - '@inquirer/select': 5.2.1(@types/node@24.13.3) + '@inquirer/checkbox': 5.2.4(@types/node@24.13.3) + '@inquirer/confirm': 6.3.1(@types/node@24.13.3) + '@inquirer/editor': 5.3.2(@types/node@24.13.3) + '@inquirer/expand': 5.1.4(@types/node@24.13.3) + '@inquirer/input': 5.1.5(@types/node@24.13.3) + '@inquirer/number': 4.2.2(@types/node@24.13.3) + '@inquirer/password': 5.2.1(@types/node@24.13.3) + '@inquirer/rawlist': 5.3.4(@types/node@24.13.3) + '@inquirer/search': 4.3.2(@types/node@24.13.3) + '@inquirer/select': 5.2.4(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/rawlist@5.3.1(@types/node@24.13.3)': + '@inquirer/rawlist@5.3.4(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/search@4.2.1(@types/node@24.13.3)': + '@inquirer/search@4.3.2(@types/node@24.13.3)': dependencies: - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/figures': 2.0.7 - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/figures': 2.0.9 + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/select@5.2.1(@types/node@24.13.3)': + '@inquirer/select@5.2.4(@types/node@24.13.3)': dependencies: - '@inquirer/ansi': 2.0.7 - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/figures': 2.0.7 - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/ansi': 2.0.8 + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/figures': 2.0.9 + '@inquirer/type': 4.1.1(@types/node@24.13.3) optionalDependencies: '@types/node': 24.13.3 - '@inquirer/type@4.0.7(@types/node@24.13.3)': + '@inquirer/type@4.1.1(@types/node@24.13.3)': optionalDependencies: '@types/node': 24.13.3 @@ -7038,17 +7017,17 @@ snapshots: wrap-ansi: 8.1.0 wrap-ansi-cjs: wrap-ansi@7.0.0 - '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: glob: 10.5.0 react-docgen-typescript: 2.4.0(typescript@5.9.3) - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) optionalDependencies: typescript: 5.9.3 '@jridgewell/gen-mapping@0.3.13': dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/sourcemap-codec': 1.6.0 '@jridgewell/trace-mapping': 0.3.31 '@jridgewell/remapping@2.3.5': @@ -7065,26 +7044,28 @@ snapshots: '@jridgewell/sourcemap-codec@1.5.5': {} + '@jridgewell/sourcemap-codec@1.6.0': {} + '@jridgewell/trace-mapping@0.3.31': dependencies: '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/sourcemap-codec': 1.6.0 - '@livekit/components-core@0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)': + '@livekit/components-core@0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)': dependencies: '@floating-ui/dom': 1.7.6 - livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22) + livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22) loglevel: 1.9.1 rxjs: 7.8.2 tslib: 2.8.1 - '@livekit/components-react@2.9.24(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)': + '@livekit/components-react@2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)': dependencies: - '@livekit/components-core': 0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1) + '@livekit/components-core': 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1) clsx: 2.1.1 events: 3.3.0 jose: 6.2.9 - livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22) + livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) tslib: 2.8.1 @@ -7096,18 +7077,18 @@ snapshots: dependencies: '@bufbuild/protobuf': 1.10.1 - '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))': + '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))': dependencies: '@mediapipe/tasks-vision': 0.10.35 '@types/dom-mediacapture-transform': 0.1.11 - livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22) + livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22) - '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {} + '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {} - '@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.8)': + '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)': dependencies: '@types/mdx': 2.0.14 - '@types/react': 19.2.17 + '@types/react': 19.2.18 react: 19.2.8 '@mediapipe/tasks-vision@0.10.35': {} @@ -7119,21 +7100,14 @@ snapshots: '@tybys/wasm-util': 0.10.2 optional: true - '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)': + '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)': dependencies: - '@emnapi/core': 1.11.1 - '@emnapi/runtime': 1.11.1 + '@emnapi/core': 1.11.0 + '@emnapi/runtime': 1.11.0 '@tybys/wasm-util': 0.10.3 optional: true - '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)': - dependencies: - '@emnapi/core': 1.11.2 - '@emnapi/runtime': 1.11.2 - '@tybys/wasm-util': 0.10.3 - optional: true - - '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)': + '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)': dependencies: '@emnapi/core': 1.9.2 '@emnapi/runtime': 1.9.2 @@ -7265,7 +7239,7 @@ snapshots: dependencies: '@emnapi/core': 1.9.2 '@emnapi/runtime': 1.9.2 - '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2) + '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2) optional: true '@oxc-parser/binding-win32-arm64-msvc@0.127.0': @@ -7279,102 +7253,102 @@ snapshots: '@oxc-project/types@0.127.0': {} - '@oxc-project/types@0.139.0': {} + '@oxc-project/types@0.148.0': {} '@oxc-resolver/binding-android-arm-eabi@11.19.1': optional: true - '@oxc-resolver/binding-android-arm-eabi@11.24.2': + '@oxc-resolver/binding-android-arm-eabi@11.21.2': optional: true '@oxc-resolver/binding-android-arm64@11.19.1': optional: true - '@oxc-resolver/binding-android-arm64@11.24.2': + '@oxc-resolver/binding-android-arm64@11.21.2': optional: true '@oxc-resolver/binding-darwin-arm64@11.19.1': optional: true - '@oxc-resolver/binding-darwin-arm64@11.24.2': + '@oxc-resolver/binding-darwin-arm64@11.21.2': optional: true '@oxc-resolver/binding-darwin-x64@11.19.1': optional: true - '@oxc-resolver/binding-darwin-x64@11.24.2': + '@oxc-resolver/binding-darwin-x64@11.21.2': optional: true '@oxc-resolver/binding-freebsd-x64@11.19.1': optional: true - '@oxc-resolver/binding-freebsd-x64@11.24.2': + '@oxc-resolver/binding-freebsd-x64@11.21.2': optional: true '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1': optional: true - '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2': + '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2': optional: true '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1': optional: true - '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2': + '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2': optional: true '@oxc-resolver/binding-linux-arm64-gnu@11.19.1': optional: true - '@oxc-resolver/binding-linux-arm64-gnu@11.24.2': + '@oxc-resolver/binding-linux-arm64-gnu@11.21.2': optional: true '@oxc-resolver/binding-linux-arm64-musl@11.19.1': optional: true - '@oxc-resolver/binding-linux-arm64-musl@11.24.2': + '@oxc-resolver/binding-linux-arm64-musl@11.21.2': optional: true '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1': optional: true - '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2': + '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2': optional: true '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1': optional: true - '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2': + '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2': optional: true '@oxc-resolver/binding-linux-riscv64-musl@11.19.1': optional: true - '@oxc-resolver/binding-linux-riscv64-musl@11.24.2': + '@oxc-resolver/binding-linux-riscv64-musl@11.21.2': optional: true '@oxc-resolver/binding-linux-s390x-gnu@11.19.1': optional: true - '@oxc-resolver/binding-linux-s390x-gnu@11.24.2': + '@oxc-resolver/binding-linux-s390x-gnu@11.21.2': optional: true '@oxc-resolver/binding-linux-x64-gnu@11.19.1': optional: true - '@oxc-resolver/binding-linux-x64-gnu@11.24.2': + '@oxc-resolver/binding-linux-x64-gnu@11.21.2': optional: true '@oxc-resolver/binding-linux-x64-musl@11.19.1': optional: true - '@oxc-resolver/binding-linux-x64-musl@11.24.2': + '@oxc-resolver/binding-linux-x64-musl@11.21.2': optional: true '@oxc-resolver/binding-openharmony-arm64@11.19.1': optional: true - '@oxc-resolver/binding-openharmony-arm64@11.24.2': + '@oxc-resolver/binding-openharmony-arm64@11.21.2': optional: true '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)': @@ -7385,17 +7359,17 @@ snapshots: - '@emnapi/runtime' optional: true - '@oxc-resolver/binding-wasm32-wasi@11.24.2': + '@oxc-resolver/binding-wasm32-wasi@11.21.2': dependencies: - '@emnapi/core': 1.11.2 - '@emnapi/runtime': 1.11.2 - '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2) + '@emnapi/core': 1.11.0 + '@emnapi/runtime': 1.11.0 + '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0) optional: true '@oxc-resolver/binding-win32-arm64-msvc@11.19.1': optional: true - '@oxc-resolver/binding-win32-arm64-msvc@11.24.2': + '@oxc-resolver/binding-win32-arm64-msvc@11.21.2': optional: true '@oxc-resolver/binding-win32-ia32-msvc@11.19.1': @@ -7404,64 +7378,64 @@ snapshots: '@oxc-resolver/binding-win32-x64-msvc@11.19.1': optional: true - '@oxc-resolver/binding-win32-x64-msvc@11.24.2': + '@oxc-resolver/binding-win32-x64-msvc@11.21.2': optional: true - '@oxfmt/binding-android-arm-eabi@0.61.0': + '@oxfmt/binding-android-arm-eabi@0.66.0': optional: true - '@oxfmt/binding-android-arm64@0.61.0': + '@oxfmt/binding-android-arm64@0.66.0': optional: true - '@oxfmt/binding-darwin-arm64@0.61.0': + '@oxfmt/binding-darwin-arm64@0.66.0': optional: true - '@oxfmt/binding-darwin-x64@0.61.0': + '@oxfmt/binding-darwin-x64@0.66.0': optional: true - '@oxfmt/binding-freebsd-x64@0.61.0': + '@oxfmt/binding-freebsd-x64@0.66.0': optional: true - '@oxfmt/binding-linux-arm-gnueabihf@0.61.0': + '@oxfmt/binding-linux-arm-gnueabihf@0.66.0': optional: true - '@oxfmt/binding-linux-arm-musleabihf@0.61.0': + '@oxfmt/binding-linux-arm-musleabihf@0.66.0': optional: true - '@oxfmt/binding-linux-arm64-gnu@0.61.0': + '@oxfmt/binding-linux-arm64-gnu@0.66.0': optional: true - '@oxfmt/binding-linux-arm64-musl@0.61.0': + '@oxfmt/binding-linux-arm64-musl@0.66.0': optional: true - '@oxfmt/binding-linux-ppc64-gnu@0.61.0': + '@oxfmt/binding-linux-ppc64-gnu@0.66.0': optional: true - '@oxfmt/binding-linux-riscv64-gnu@0.61.0': + '@oxfmt/binding-linux-riscv64-gnu@0.66.0': optional: true - '@oxfmt/binding-linux-riscv64-musl@0.61.0': + '@oxfmt/binding-linux-riscv64-musl@0.66.0': optional: true - '@oxfmt/binding-linux-s390x-gnu@0.61.0': + '@oxfmt/binding-linux-s390x-gnu@0.66.0': optional: true - '@oxfmt/binding-linux-x64-gnu@0.61.0': + '@oxfmt/binding-linux-x64-gnu@0.66.0': optional: true - '@oxfmt/binding-linux-x64-musl@0.61.0': + '@oxfmt/binding-linux-x64-musl@0.66.0': optional: true - '@oxfmt/binding-openharmony-arm64@0.61.0': + '@oxfmt/binding-openharmony-arm64@0.66.0': optional: true - '@oxfmt/binding-win32-arm64-msvc@0.61.0': + '@oxfmt/binding-win32-arm64-msvc@0.66.0': optional: true - '@oxfmt/binding-win32-ia32-msvc@0.61.0': + '@oxfmt/binding-win32-ia32-msvc@0.66.0': optional: true - '@oxfmt/binding-win32-x64-msvc@0.61.0': + '@oxfmt/binding-win32-x64-msvc@0.66.0': optional: true '@oxlint-tsgolint/darwin-arm64@0.25.0': @@ -7482,61 +7456,61 @@ snapshots: '@oxlint-tsgolint/win32-x64@0.25.0': optional: true - '@oxlint/binding-android-arm-eabi@1.76.0': + '@oxlint/binding-android-arm-eabi@1.81.0': optional: true - '@oxlint/binding-android-arm64@1.76.0': + '@oxlint/binding-android-arm64@1.81.0': optional: true - '@oxlint/binding-darwin-arm64@1.76.0': + '@oxlint/binding-darwin-arm64@1.81.0': optional: true - '@oxlint/binding-darwin-x64@1.76.0': + '@oxlint/binding-darwin-x64@1.81.0': optional: true - '@oxlint/binding-freebsd-x64@1.76.0': + '@oxlint/binding-freebsd-x64@1.81.0': optional: true - '@oxlint/binding-linux-arm-gnueabihf@1.76.0': + '@oxlint/binding-linux-arm-gnueabihf@1.81.0': optional: true - '@oxlint/binding-linux-arm-musleabihf@1.76.0': + '@oxlint/binding-linux-arm-musleabihf@1.81.0': optional: true - '@oxlint/binding-linux-arm64-gnu@1.76.0': + '@oxlint/binding-linux-arm64-gnu@1.81.0': optional: true - '@oxlint/binding-linux-arm64-musl@1.76.0': + '@oxlint/binding-linux-arm64-musl@1.81.0': optional: true - '@oxlint/binding-linux-ppc64-gnu@1.76.0': + '@oxlint/binding-linux-ppc64-gnu@1.81.0': optional: true - '@oxlint/binding-linux-riscv64-gnu@1.76.0': + '@oxlint/binding-linux-riscv64-gnu@1.81.0': optional: true - '@oxlint/binding-linux-riscv64-musl@1.76.0': + '@oxlint/binding-linux-riscv64-musl@1.81.0': optional: true - '@oxlint/binding-linux-s390x-gnu@1.76.0': + '@oxlint/binding-linux-s390x-gnu@1.81.0': optional: true - '@oxlint/binding-linux-x64-gnu@1.76.0': + '@oxlint/binding-linux-x64-gnu@1.81.0': optional: true - '@oxlint/binding-linux-x64-musl@1.76.0': + '@oxlint/binding-linux-x64-musl@1.81.0': optional: true - '@oxlint/binding-openharmony-arm64@1.76.0': + '@oxlint/binding-openharmony-arm64@1.81.0': optional: true - '@oxlint/binding-win32-arm64-msvc@1.76.0': + '@oxlint/binding-win32-arm64-msvc@1.81.0': optional: true - '@oxlint/binding-win32-ia32-msvc@1.76.0': + '@oxlint/binding-win32-ia32-msvc@1.81.0': optional: true - '@oxlint/binding-win32-x64-msvc@1.76.0': + '@oxlint/binding-win32-x64-msvc@1.81.0': optional: true '@parcel/watcher-android-arm64@2.6.0': @@ -7580,7 +7554,7 @@ snapshots: detect-libc: 2.1.2 is-glob: 4.0.3 node-addon-api: 7.1.1 - picomatch: 4.0.5 + picomatch: 4.0.7 optionalDependencies: '@parcel/watcher-android-arm64': 2.6.0 '@parcel/watcher-darwin-arm64': 2.6.0 @@ -7599,9 +7573,9 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@playwright/test@1.62.0': + '@playwright/test@1.62.1': dependencies: - playwright: 1.62.0 + playwright: 1.62.1 '@polka/url@1.0.0-next.29': {} @@ -7620,354 +7594,354 @@ snapshots: '@radix-ui/primitive@1.1.7': {} - '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-context@1.2.2(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) aria-hidden: 1.2.6 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8) + react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-direction@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-id@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8) aria-hidden: 1.2.6 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8) + react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8) '@radix-ui/rect': 1.1.3 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@radix-ui/number': 1.1.3 '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@radix-ui/react-slot@1.3.3(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)': dependencies: - '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.8)': dependencies: '@radix-ui/primitive': 1.1.7 - '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.17)(react@19.2.8) - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.8)': dependencies: - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: '@radix-ui/rect': 1.1.3 react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-use-size@1.1.4(@types/react@19.2.17)(react@19.2.8)': + '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)': dependencies: - '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8) react: 19.2.8 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) '@radix-ui/rect@1.1.3': {} @@ -8004,63 +7978,59 @@ snapshots: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - '@rolldown/binding-android-arm64@1.1.5': + '@rolldown/binding-android-arm-eabi@1.2.7': optional: true - '@rolldown/binding-darwin-arm64@1.1.5': + '@rolldown/binding-android-arm64@1.2.7': optional: true - '@rolldown/binding-darwin-x64@1.1.5': + '@rolldown/binding-darwin-arm64@1.2.7': optional: true - '@rolldown/binding-freebsd-x64@1.1.5': + '@rolldown/binding-darwin-x64@1.2.7': optional: true - '@rolldown/binding-linux-arm-gnueabihf@1.1.5': + '@rolldown/binding-freebsd-x64@1.2.7': optional: true - '@rolldown/binding-linux-arm64-gnu@1.1.5': + '@rolldown/binding-linux-arm-gnueabihf@1.2.7': optional: true - '@rolldown/binding-linux-arm64-musl@1.1.5': + '@rolldown/binding-linux-arm64-gnu@1.2.7': optional: true - '@rolldown/binding-linux-ppc64-gnu@1.1.5': + '@rolldown/binding-linux-arm64-musl@1.2.7': optional: true - '@rolldown/binding-linux-s390x-gnu@1.1.5': + '@rolldown/binding-linux-ppc64-gnu@1.2.7': optional: true - '@rolldown/binding-linux-x64-gnu@1.1.5': + '@rolldown/binding-linux-s390x-gnu@1.2.7': optional: true - '@rolldown/binding-linux-x64-musl@1.1.5': + '@rolldown/binding-linux-x64-gnu@1.2.7': optional: true - '@rolldown/binding-openharmony-arm64@1.1.5': + '@rolldown/binding-linux-x64-musl@1.2.7': optional: true - '@rolldown/binding-wasm32-wasi@1.1.5': - dependencies: - '@emnapi/core': 1.11.1 - '@emnapi/runtime': 1.11.1 - '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1) + '@rolldown/binding-openharmony-arm64@1.2.7': optional: true - '@rolldown/binding-win32-arm64-msvc@1.1.5': + '@rolldown/binding-win32-arm64-msvc@1.2.7': optional: true - '@rolldown/binding-win32-x64-msvc@1.1.5': + '@rolldown/binding-win32-x64-msvc@1.2.7': optional: true - '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: '@babel/core': 7.29.7(supports-color@7.2.0) picomatch: 4.0.4 - rolldown: 1.1.5 + rolldown: 1.2.7 optionalDependencies: '@babel/runtime': 8.0.0 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) '@rolldown/pluginutils@1.0.1': {} @@ -8089,7 +8059,7 @@ snapshots: dependencies: '@types/estree': 1.0.9 estree-walker: 2.0.2 - picomatch: 4.0.5 + picomatch: 4.0.7 optionalDependencies: rollup: 4.60.1 @@ -8277,57 +8247,39 @@ snapshots: '@standard-schema/spec@1.1.0': {} - '@storybook/addon-docs@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@storybook/addon-docs@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))': dependencies: - '@mdx-js/react': 3.1.1(@types/react@19.2.17)(react@19.2.8) - '@storybook/csf-plugin': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + '@mdx-js/react': 3.1.1(@types/react@19.2.18)(react@19.2.8) '@storybook/icons': 2.1.0(react@19.2.8) - '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)) + '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) ts-dedent: 2.3.0 + unplugin: 2.3.11 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 transitivePeerDependencies: - '@types/react-dom' - - esbuild - - rollup - - vite - - webpack - '@storybook/addon-vitest@10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.10)': + '@storybook/addon-vitest@10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.11)': dependencies: '@storybook/global': 5.0.0 '@storybook/icons': 2.1.0(react@19.2.8) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) optionalDependencies: - '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) - '@vitest/browser-playwright': 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) - '@vitest/runner': 4.1.10 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) + '@vitest/browser-playwright': 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) + '@vitest/runner': 4.1.11 + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) transitivePeerDependencies: - react - '@storybook/builder-vite@10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@storybook/builder-vite@10.6.0(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: - '@storybook/csf-plugin': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) ts-dedent: 2.3.0 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) - transitivePeerDependencies: - - esbuild - - rollup - - webpack - - '@storybook/csf-plugin@10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': - dependencies: - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) - unplugin: 2.3.11 - optionalDependencies: - esbuild: 0.28.1 - rollup: 4.60.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) '@storybook/global@5.0.0': {} @@ -8335,52 +8287,50 @@ snapshots: dependencies: react: 19.2.8 - '@storybook/react-dom-shim@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))': + '@storybook/react-dom-shim@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))': dependencies: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@storybook/react-vite@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@storybook/react-vite@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@rollup/pluginutils': 5.4.0(rollup@4.60.1) - '@storybook/builder-vite': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - '@storybook/react': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3) + '@storybook/builder-vite': 10.6.0(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) + '@storybook/react': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3) empathic: 2.0.1 - magic-string: 0.30.21 + magic-string: 1.2.3 react: 19.2.8 react-docgen: 8.0.3(supports-color@7.2.0) react-dom: 19.2.8(react@19.2.8) resolve: 1.22.12 - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) tsconfig-paths: 4.2.0 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) optionalDependencies: typescript: 5.9.3 transitivePeerDependencies: - '@types/react' - '@types/react-dom' - - esbuild - rollup - supports-color - - webpack - '@storybook/react@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)': + '@storybook/react@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)': dependencies: '@storybook/global': 5.0.0 - '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)) + '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)) react: 19.2.8 react-docgen: 8.0.3(supports-color@7.2.0) react-docgen-typescript: 2.4.0(typescript@5.9.3) react-dom: 19.2.8(react@19.2.8) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) + storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -8455,59 +8405,59 @@ snapshots: transitivePeerDependencies: - supports-color - '@swc/core-darwin-arm64@1.15.47': + '@swc/core-darwin-arm64@1.16.2': optional: true - '@swc/core-darwin-x64@1.15.47': + '@swc/core-darwin-x64@1.16.2': optional: true - '@swc/core-linux-arm-gnueabihf@1.15.47': + '@swc/core-linux-arm-gnueabihf@1.16.2': optional: true - '@swc/core-linux-arm64-gnu@1.15.47': + '@swc/core-linux-arm64-gnu@1.16.2': optional: true - '@swc/core-linux-arm64-musl@1.15.47': + '@swc/core-linux-arm64-musl@1.16.2': optional: true - '@swc/core-linux-ppc64-gnu@1.15.47': + '@swc/core-linux-ppc64-gnu@1.16.2': optional: true - '@swc/core-linux-s390x-gnu@1.15.47': + '@swc/core-linux-s390x-gnu@1.16.2': optional: true - '@swc/core-linux-x64-gnu@1.15.47': + '@swc/core-linux-x64-gnu@1.16.2': optional: true - '@swc/core-linux-x64-musl@1.15.47': + '@swc/core-linux-x64-musl@1.16.2': optional: true - '@swc/core-win32-arm64-msvc@1.15.47': + '@swc/core-win32-arm64-msvc@1.16.2': optional: true - '@swc/core-win32-ia32-msvc@1.15.47': + '@swc/core-win32-ia32-msvc@1.16.2': optional: true - '@swc/core-win32-x64-msvc@1.15.47': + '@swc/core-win32-x64-msvc@1.16.2': optional: true - '@swc/core@1.15.47': + '@swc/core@1.16.2': dependencies: '@swc/counter': 0.1.3 '@swc/types': 0.1.28 optionalDependencies: - '@swc/core-darwin-arm64': 1.15.47 - '@swc/core-darwin-x64': 1.15.47 - '@swc/core-linux-arm-gnueabihf': 1.15.47 - '@swc/core-linux-arm64-gnu': 1.15.47 - '@swc/core-linux-arm64-musl': 1.15.47 - '@swc/core-linux-ppc64-gnu': 1.15.47 - '@swc/core-linux-s390x-gnu': 1.15.47 - '@swc/core-linux-x64-gnu': 1.15.47 - '@swc/core-linux-x64-musl': 1.15.47 - '@swc/core-win32-arm64-msvc': 1.15.47 - '@swc/core-win32-ia32-msvc': 1.15.47 - '@swc/core-win32-x64-msvc': 1.15.47 + '@swc/core-darwin-arm64': 1.16.2 + '@swc/core-darwin-x64': 1.16.2 + '@swc/core-linux-arm-gnueabihf': 1.16.2 + '@swc/core-linux-arm64-gnu': 1.16.2 + '@swc/core-linux-arm64-musl': 1.16.2 + '@swc/core-linux-ppc64-gnu': 1.16.2 + '@swc/core-linux-s390x-gnu': 1.16.2 + '@swc/core-linux-x64-gnu': 1.16.2 + '@swc/core-linux-x64-musl': 1.16.2 + '@swc/core-win32-arm64-msvc': 1.16.2 + '@swc/core-win32-ia32-msvc': 1.16.2 + '@swc/core-win32-x64-msvc': 1.16.2 '@swc/counter@0.1.3': {} @@ -8535,17 +8485,17 @@ snapshots: picocolors: 1.1.1 redent: 3.0.0 - '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@testing-library/react@16.3.3(@testing-library/dom@10.4.1)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@babel/runtime': 7.29.2 + '@babel/runtime': 7.29.7 '@testing-library/dom': 10.4.1 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 - '@types/react-dom': 19.2.3(@types/react@19.2.17) + '@types/react': 19.2.18 + '@types/react-dom': 19.2.5(@types/react@19.2.18) - '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)': + '@testing-library/user-event@14.6.7(@testing-library/dom@10.4.1)': dependencies: '@testing-library/dom': 10.4.1 @@ -8640,11 +8590,11 @@ snapshots: dependencies: '@types/node': 24.13.3 - '@types/react-dom@19.2.3(@types/react@19.2.17)': + '@types/react-dom@19.2.5(@types/react@19.2.18)': dependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - '@types/react@19.2.17': + '@types/react@19.2.18': dependencies: csstype: 3.2.3 @@ -8657,32 +8607,32 @@ snapshots: '@types/trusted-types@2.0.7': optional: true - '@typescript-eslint/project-service@8.65.0(supports-color@7.2.0)(typescript@5.9.3)': + '@typescript-eslint/project-service@8.69.0(supports-color@7.2.0)(typescript@5.9.3)': dependencies: - '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3) - '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/tsconfig-utils': 8.69.0(typescript@5.9.3) + '@typescript-eslint/types': 8.69.0 debug: 4.4.3(supports-color@7.2.0) typescript: 5.9.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/scope-manager@8.65.0': + '@typescript-eslint/scope-manager@8.69.0': dependencies: - '@typescript-eslint/types': 8.65.0 - '@typescript-eslint/visitor-keys': 8.65.0 + '@typescript-eslint/types': 8.69.0 + '@typescript-eslint/visitor-keys': 8.69.0 - '@typescript-eslint/tsconfig-utils@8.65.0(typescript@5.9.3)': + '@typescript-eslint/tsconfig-utils@8.69.0(typescript@5.9.3)': dependencies: typescript: 5.9.3 - '@typescript-eslint/types@8.65.0': {} + '@typescript-eslint/types@8.69.0': {} - '@typescript-eslint/typescript-estree@8.65.0(supports-color@7.2.0)(typescript@5.9.3)': + '@typescript-eslint/typescript-estree@8.69.0(supports-color@7.2.0)(typescript@5.9.3)': dependencies: - '@typescript-eslint/project-service': 8.65.0(supports-color@7.2.0)(typescript@5.9.3) - '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3) - '@typescript-eslint/types': 8.65.0 - '@typescript-eslint/visitor-keys': 8.65.0 + '@typescript-eslint/project-service': 8.69.0(supports-color@7.2.0)(typescript@5.9.3) + '@typescript-eslint/tsconfig-utils': 8.69.0(typescript@5.9.3) + '@typescript-eslint/types': 8.69.0 + '@typescript-eslint/visitor-keys': 8.69.0 debug: 4.4.3(supports-color@7.2.0) minimatch: 10.2.6 semver: 7.8.5 @@ -8692,20 +8642,20 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)': + '@typescript-eslint/utils@8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)': dependencies: '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.1(supports-color@7.2.0)) - '@typescript-eslint/scope-manager': 8.65.0 - '@typescript-eslint/types': 8.65.0 - '@typescript-eslint/typescript-estree': 8.65.0(supports-color@7.2.0)(typescript@5.9.3) + '@typescript-eslint/scope-manager': 8.69.0 + '@typescript-eslint/types': 8.69.0 + '@typescript-eslint/typescript-estree': 8.69.0(supports-color@7.2.0)(typescript@5.9.3) eslint: 8.57.1(supports-color@7.2.0) typescript: 5.9.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/visitor-keys@8.65.0': + '@typescript-eslint/visitor-keys@8.69.0': dependencies: - '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/types': 8.69.0 eslint-visitor-keys: 5.0.1 '@ungap/structured-clone@1.3.3': {} @@ -8717,75 +8667,75 @@ snapshots: '@use-gesture/core': 10.3.1 react: 19.2.8 - '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8)': + '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)': optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 react: 19.2.8 - '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@fontsource/inconsolata': 5.3.0 '@fontsource/inter': 5.3.0 - '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8) - '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.17)(react@19.2.8) + '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) + '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8) classnames: 2.5.1 react: 19.2.8 - vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 transitivePeerDependencies: - '@types/react-dom' - react-dom - '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@vitejs/plugin-react@6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: '@rolldown/pluginutils': 1.0.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) optionalDependencies: - '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) babel-plugin-react-compiler: 1.0.0 - '@vitest/browser-playwright@4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)': + '@vitest/browser-playwright@4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)': dependencies: - '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) - '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - playwright: 1.62.0 + '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) + '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) + playwright: 1.62.1 tinyrainbow: 3.1.1 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) transitivePeerDependencies: - bufferutil - msw - utf-8-validate - vite - '@vitest/browser@4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)': + '@vitest/browser@4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)': dependencies: '@blazediff/core': 1.9.1 - '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - '@vitest/utils': 4.1.10 + '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) + '@vitest/utils': 4.1.11 magic-string: 0.30.21 pngjs: 7.0.0 sirv: 3.0.2 tinyrainbow: 3.1.1 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - ws: 8.21.1 + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) + ws: 8.21.3 transitivePeerDependencies: - bufferutil - msw - utf-8-validate - vite - '@vitest/coverage-v8@4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)': + '@vitest/coverage-v8@4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)': dependencies: '@bcoe/v8-coverage': 1.0.2 - '@vitest/utils': 4.1.10 + '@vitest/utils': 4.1.11 ast-v8-to-istanbul: 1.0.5 istanbul-lib-coverage: 3.2.2 istanbul-lib-report: 3.0.1 @@ -8794,9 +8744,9 @@ snapshots: obug: 2.1.4 std-env: 4.2.0 tinyrainbow: 3.1.1 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) optionalDependencies: - '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) + '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) '@vitest/expect@3.2.4': dependencies: @@ -8806,59 +8756,59 @@ snapshots: chai: 5.3.3 tinyrainbow: 2.0.0 - '@vitest/expect@4.1.10': + '@vitest/expect@4.1.11': dependencies: '@standard-schema/spec': 1.1.0 '@types/chai': 5.2.3 - '@vitest/spy': 4.1.10 - '@vitest/utils': 4.1.10 + '@vitest/spy': 4.1.11 + '@vitest/utils': 4.1.11 chai: 6.2.2 tinyrainbow: 3.1.1 - '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@vitest/mocker@4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))': dependencies: - '@vitest/spy': 4.1.10 + '@vitest/spy': 4.1.11 estree-walker: 3.0.3 magic-string: 0.30.21 optionalDependencies: - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) '@vitest/pretty-format@3.2.4': dependencies: tinyrainbow: 2.0.0 - '@vitest/pretty-format@4.1.10': + '@vitest/pretty-format@4.1.11': dependencies: tinyrainbow: 3.1.1 - '@vitest/runner@4.1.10': + '@vitest/runner@4.1.11': dependencies: - '@vitest/utils': 4.1.10 + '@vitest/utils': 4.1.11 pathe: 2.0.3 - '@vitest/snapshot@4.1.10': + '@vitest/snapshot@4.1.11': dependencies: - '@vitest/pretty-format': 4.1.10 - '@vitest/utils': 4.1.10 + '@vitest/pretty-format': 4.1.11 + '@vitest/utils': 4.1.11 magic-string: 0.30.21 pathe: 2.0.3 '@vitest/spy@3.2.4': dependencies: - tinyspy: 4.0.4 + tinyspy: 4.0.6 - '@vitest/spy@4.1.10': {} + '@vitest/spy@4.1.11': {} - '@vitest/ui@4.1.10(vitest@4.1.10)': + '@vitest/ui@4.1.11(vitest@4.1.11)': dependencies: - '@vitest/utils': 4.1.10 + '@vitest/utils': 4.1.11 fflate: 0.8.2 flatted: 3.4.4 pathe: 2.0.3 sirv: 3.0.2 tinyglobby: 0.2.17 tinyrainbow: 3.1.1 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) '@vitest/utils@3.2.4': dependencies: @@ -8866,9 +8816,9 @@ snapshots: loupe: 3.2.1 tinyrainbow: 2.0.0 - '@vitest/utils@4.1.10': + '@vitest/utils@4.1.11': dependencies: - '@vitest/pretty-format': 4.1.10 + '@vitest/pretty-format': 4.1.11 convert-source-map: 2.0.0 tinyrainbow: 3.1.1 @@ -8901,7 +8851,7 @@ snapshots: ansi-regex@5.0.1: {} - ansi-regex@6.2.2: {} + ansi-regex@6.3.0: {} ansi-styles@4.3.0: dependencies: @@ -8944,7 +8894,7 @@ snapshots: assertion-error@2.0.1: {} - ast-types@0.16.1: + ast-types@0.16.3: dependencies: tslib: 2.8.1 @@ -8956,13 +8906,13 @@ snapshots: async@3.2.6: {} - autoprefixer@10.5.0(postcss@8.5.25): + autoprefixer@10.5.0(postcss@8.5.26): dependencies: browserslist: 4.28.2 caniuse-lite: 1.0.30001788 fraction.js: 5.3.4 picocolors: 1.1.1 - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 available-typed-arrays@1.0.7: @@ -9143,7 +9093,7 @@ snapshots: chokidar@5.0.0: dependencies: - readdirp: 5.0.0 + readdirp: 5.1.1 cipher-base@1.0.7: dependencies: @@ -9181,7 +9131,7 @@ snapshots: colorette@2.0.20: {} - commander@14.0.3: {} + commander@15.0.0: {} commander@2.20.3: {} @@ -9195,7 +9145,7 @@ snapshots: constants-browserify@1.0.0: {} - content-type@3.0.0: {} + content-type@3.1.1: {} convert-source-map@2.0.0: {} @@ -9263,21 +9213,21 @@ snapshots: randombytes: 2.1.0 randomfill: 1.0.4 - css-blank-pseudo@7.0.1(postcss@8.5.25): + css-blank-pseudo@7.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - css-has-pseudo@7.0.3(postcss@8.5.25): + css-has-pseudo@7.0.3(postcss@8.5.26): dependencies: - '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3) + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 postcss-value-parser: 4.2.0 - css-prefers-color-scheme@10.0.0(postcss@8.5.25): + css-prefers-color-scheme@10.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 css-select@4.3.0: dependencies: @@ -9323,7 +9273,7 @@ snapshots: default-browser-id@5.0.1: {} - default-browser@5.5.0: + default-browser@5.5.1: dependencies: bundle-name: 4.1.0 default-browser-id: 5.0.1 @@ -9448,51 +9398,50 @@ snapshots: es-errors@1.3.0: {} - es-module-lexer@2.3.1: {} + es-module-lexer@2.3.2: {} es-object-atoms@1.1.1: dependencies: es-errors: 1.3.0 - esbuild@0.28.1: + esbuild@0.28.2: optionalDependencies: - '@esbuild/aix-ppc64': 0.28.1 - '@esbuild/android-arm': 0.28.1 - '@esbuild/android-arm64': 0.28.1 - '@esbuild/android-x64': 0.28.1 - '@esbuild/darwin-arm64': 0.28.1 - '@esbuild/darwin-x64': 0.28.1 - '@esbuild/freebsd-arm64': 0.28.1 - '@esbuild/freebsd-x64': 0.28.1 - '@esbuild/linux-arm': 0.28.1 - '@esbuild/linux-arm64': 0.28.1 - '@esbuild/linux-ia32': 0.28.1 - '@esbuild/linux-loong64': 0.28.1 - '@esbuild/linux-mips64el': 0.28.1 - '@esbuild/linux-ppc64': 0.28.1 - '@esbuild/linux-riscv64': 0.28.1 - '@esbuild/linux-s390x': 0.28.1 - '@esbuild/linux-x64': 0.28.1 - '@esbuild/netbsd-arm64': 0.28.1 - '@esbuild/netbsd-x64': 0.28.1 - '@esbuild/openbsd-arm64': 0.28.1 - '@esbuild/openbsd-x64': 0.28.1 - '@esbuild/openharmony-arm64': 0.28.1 - '@esbuild/sunos-x64': 0.28.1 - '@esbuild/win32-arm64': 0.28.1 - '@esbuild/win32-ia32': 0.28.1 - '@esbuild/win32-x64': 0.28.1 + '@esbuild/aix-ppc64': 0.28.2 + '@esbuild/android-arm': 0.28.2 + '@esbuild/android-arm64': 0.28.2 + '@esbuild/android-x64': 0.28.2 + '@esbuild/darwin-arm64': 0.28.2 + '@esbuild/darwin-x64': 0.28.2 + '@esbuild/freebsd-arm64': 0.28.2 + '@esbuild/freebsd-x64': 0.28.2 + '@esbuild/linux-arm': 0.28.2 + '@esbuild/linux-arm64': 0.28.2 + '@esbuild/linux-ia32': 0.28.2 + '@esbuild/linux-loong64': 0.28.2 + '@esbuild/linux-mips64el': 0.28.2 + '@esbuild/linux-ppc64': 0.28.2 + '@esbuild/linux-riscv64': 0.28.2 + '@esbuild/linux-s390x': 0.28.2 + '@esbuild/linux-x64': 0.28.2 + '@esbuild/netbsd-arm64': 0.28.2 + '@esbuild/netbsd-x64': 0.28.2 + '@esbuild/openbsd-arm64': 0.28.2 + '@esbuild/openbsd-x64': 0.28.2 + '@esbuild/openharmony-arm64': 0.28.2 + '@esbuild/sunos-x64': 0.28.2 + '@esbuild/win32-arm64': 0.28.2 + '@esbuild/win32-ia32': 0.28.2 + '@esbuild/win32-x64': 0.28.2 escalade@3.2.0: {} escape-string-regexp@4.0.0: {} - eslint-plugin-storybook@10.5.5(eslint@8.57.1(supports-color@7.2.0))(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3): + eslint-plugin-storybook@10.6.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3): dependencies: - '@typescript-eslint/types': 8.65.0 - '@typescript-eslint/utils': 8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3) + '@typescript-eslint/types': 8.69.0 + '@typescript-eslint/utils': 8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3) eslint: 8.57.1(supports-color@7.2.0) - storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8) transitivePeerDependencies: - supports-color - typescript @@ -9582,19 +9531,19 @@ snapshots: md5.js: 1.3.5 safe-buffer: 5.2.1 - execa@9.6.1: + execa@10.0.1: dependencies: '@sindresorhus/merge-streams': 4.0.0 - cross-spawn: 7.0.6 figures: 6.1.0 get-stream: 9.0.1 human-signals: 8.0.1 is-plain-obj: 4.1.0 is-stream: 4.0.1 npm-run-path: 6.0.0 - pretty-ms: 9.3.0 + pretty-ms: 9.3.1 signal-exit: 4.1.0 strip-final-newline: 4.0.0 + which-command: 0.1.0 yoctocolors: 2.2.0 expect-type@1.4.0: {} @@ -9870,24 +9819,24 @@ snapshots: dependencies: '@babel/runtime': 7.29.2 - i18next-cli@1.67.3(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3): + i18next-cli@1.72.4(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3): dependencies: '@croct/json5-parser': 0.2.2 - '@swc/core': 1.15.47 + '@swc/core': 1.16.2 chokidar: 5.0.0 - commander: 14.0.3 - execa: 9.6.1 + commander: 15.0.0 + execa: 10.0.1 glob: 10.5.0 - i18next: 26.3.6(typescript@5.9.3) + i18next: 26.4.1(typescript@5.9.3) i18next-resources-for-ts: 2.1.0 - inquirer: 14.0.2(@types/node@24.13.3) + inquirer: 14.2.1(@types/node@24.13.3) jiti: 2.7.0 jsonc-parser: 3.3.1 - magic-string: 0.30.21 + magic-string: 1.2.3 minimatch: 10.2.6 ora: 9.4.1 react: 19.2.8 - react-i18next: 17.0.11(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3) + react-i18next: 17.0.13(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3) yaml: 2.9.0 transitivePeerDependencies: - '@swc/helpers' @@ -9899,13 +9848,13 @@ snapshots: i18next-resources-for-ts@2.1.0: dependencies: '@babel/runtime': 7.29.7 - '@swc/core': 1.15.47 + '@swc/core': 1.16.2 chokidar: 5.0.0 yaml: 2.9.0 transitivePeerDependencies: - '@swc/helpers' - i18next@26.3.6(typescript@5.9.3): + i18next@26.4.1(typescript@5.9.3): optionalDependencies: typescript: 5.9.3 @@ -9934,12 +9883,12 @@ snapshots: inherits@2.0.4: {} - inquirer@14.0.2(@types/node@24.13.3): + inquirer@14.2.1(@types/node@24.13.3): dependencies: - '@inquirer/ansi': 2.0.7 - '@inquirer/core': 11.2.1(@types/node@24.13.3) - '@inquirer/prompts': 8.5.2(@types/node@24.13.3) - '@inquirer/type': 4.0.7(@types/node@24.13.3) + '@inquirer/ansi': 2.0.8 + '@inquirer/core': 12.0.2(@types/node@24.13.3) + '@inquirer/prompts': 8.7.1(@types/node@24.13.3) + '@inquirer/type': 4.1.1(@types/node@24.13.3) mute-stream: 3.0.0 run-async: 4.0.6 optionalDependencies: @@ -10059,7 +10008,7 @@ snapshots: jiti@2.7.0: {} - jose@6.2.10: {} + jose@6.2.12: {} jose@6.2.9: {} @@ -10067,10 +10016,6 @@ snapshots: js-tokens@4.0.0: {} - js-yaml@4.3.0: - dependencies: - argparse: 2.0.1 - js-yaml@4.3.1: dependencies: argparse: 2.0.1 @@ -10203,14 +10148,15 @@ snapshots: lines-and-columns@1.2.4: {} - livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22): + livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22): dependencies: '@livekit/mutex': 1.1.1 '@livekit/protocol': 1.50.4 '@types/dom-mediacapture-record': 1.0.22 events: 3.3.0 - jose: 6.2.10 + jose: 6.2.12 loglevel: 1.9.2 + machina: 7.0.1 sdp-transform: 2.15.0 tslib: 2.8.1 typed-emitter: 2.1.0 @@ -10253,14 +10199,20 @@ snapshots: lz-string@1.5.0: {} + machina@7.0.1: {} + magic-string@0.30.21: dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/sourcemap-codec': 1.6.0 magic-string@0.30.8: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + magic-string@1.2.3: + dependencies: + '@jridgewell/sourcemap-codec': 1.6.0 + magicast@0.5.4: dependencies: '@babel/parser': 7.29.8 @@ -10275,21 +10227,21 @@ snapshots: matrix-events-sdk@0.0.1: {} - matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a: + matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999: dependencies: '@babel/runtime': 8.0.0 - '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0 + '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0 another-json: 0.2.0 bs58: 6.0.0 - content-type: 3.0.0 + content-type: 3.1.1 loglevel: 1.9.2 matrix-events-sdk: 0.0.1 - matrix-widget-api: 1.18.0 - p-retry: 8.0.0 + matrix-widget-api: 1.19.0 + p-retry: 8.0.1 sdp-transform: 3.0.0 unhomoglyph: 1.0.6 - matrix-widget-api@1.18.0: + matrix-widget-api@1.19.0: dependencies: '@types/events': 3.0.3 events: 3.3.0 @@ -10312,12 +10264,6 @@ snapshots: bn.js: 4.12.3 brorand: 1.1.0 - mime-db@1.52.0: {} - - mime-types@2.1.35: - dependencies: - mime-db: 1.52.0 - mimic-function@5.0.1: {} min-indent@1.0.1: {} @@ -10340,7 +10286,7 @@ snapshots: mute-stream@3.0.0: {} - nanoid@3.3.17: {} + nanoid@3.3.18: {} natural-compare@1.4.0: {} @@ -10426,12 +10372,6 @@ snapshots: has-symbols: 1.1.0 object-keys: 1.1.1 - observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2): - dependencies: - react: 19.2.8 - react-dom: 19.2.8(react@19.2.8) - rxjs: 7.8.2 - obug@2.1.4: {} once@1.4.0: @@ -10444,7 +10384,7 @@ snapshots: open@10.2.0: dependencies: - default-browser: 5.5.0 + default-browser: 5.5.1 define-lazy-prop: 3.0.0 is-inside-container: 1.0.0 wsl-utils: 0.1.0 @@ -10522,51 +10462,51 @@ snapshots: - '@emnapi/core' - '@emnapi/runtime' - oxc-resolver@11.24.2: + oxc-resolver@11.21.2: optionalDependencies: - '@oxc-resolver/binding-android-arm-eabi': 11.24.2 - '@oxc-resolver/binding-android-arm64': 11.24.2 - '@oxc-resolver/binding-darwin-arm64': 11.24.2 - '@oxc-resolver/binding-darwin-x64': 11.24.2 - '@oxc-resolver/binding-freebsd-x64': 11.24.2 - '@oxc-resolver/binding-linux-arm-gnueabihf': 11.24.2 - '@oxc-resolver/binding-linux-arm-musleabihf': 11.24.2 - '@oxc-resolver/binding-linux-arm64-gnu': 11.24.2 - '@oxc-resolver/binding-linux-arm64-musl': 11.24.2 - '@oxc-resolver/binding-linux-ppc64-gnu': 11.24.2 - '@oxc-resolver/binding-linux-riscv64-gnu': 11.24.2 - '@oxc-resolver/binding-linux-riscv64-musl': 11.24.2 - '@oxc-resolver/binding-linux-s390x-gnu': 11.24.2 - '@oxc-resolver/binding-linux-x64-gnu': 11.24.2 - '@oxc-resolver/binding-linux-x64-musl': 11.24.2 - '@oxc-resolver/binding-openharmony-arm64': 11.24.2 - '@oxc-resolver/binding-wasm32-wasi': 11.24.2 - '@oxc-resolver/binding-win32-arm64-msvc': 11.24.2 - '@oxc-resolver/binding-win32-x64-msvc': 11.24.2 + '@oxc-resolver/binding-android-arm-eabi': 11.21.2 + '@oxc-resolver/binding-android-arm64': 11.21.2 + '@oxc-resolver/binding-darwin-arm64': 11.21.2 + '@oxc-resolver/binding-darwin-x64': 11.21.2 + '@oxc-resolver/binding-freebsd-x64': 11.21.2 + '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.2 + '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.2 + '@oxc-resolver/binding-linux-arm64-gnu': 11.21.2 + '@oxc-resolver/binding-linux-arm64-musl': 11.21.2 + '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.2 + '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.2 + '@oxc-resolver/binding-linux-riscv64-musl': 11.21.2 + '@oxc-resolver/binding-linux-s390x-gnu': 11.21.2 + '@oxc-resolver/binding-linux-x64-gnu': 11.21.2 + '@oxc-resolver/binding-linux-x64-musl': 11.21.2 + '@oxc-resolver/binding-openharmony-arm64': 11.21.2 + '@oxc-resolver/binding-wasm32-wasi': 11.21.2 + '@oxc-resolver/binding-win32-arm64-msvc': 11.21.2 + '@oxc-resolver/binding-win32-x64-msvc': 11.21.2 - oxfmt@0.61.0: + oxfmt@0.66.0: dependencies: tinypool: 2.1.0 optionalDependencies: - '@oxfmt/binding-android-arm-eabi': 0.61.0 - '@oxfmt/binding-android-arm64': 0.61.0 - '@oxfmt/binding-darwin-arm64': 0.61.0 - '@oxfmt/binding-darwin-x64': 0.61.0 - '@oxfmt/binding-freebsd-x64': 0.61.0 - '@oxfmt/binding-linux-arm-gnueabihf': 0.61.0 - '@oxfmt/binding-linux-arm-musleabihf': 0.61.0 - '@oxfmt/binding-linux-arm64-gnu': 0.61.0 - '@oxfmt/binding-linux-arm64-musl': 0.61.0 - '@oxfmt/binding-linux-ppc64-gnu': 0.61.0 - '@oxfmt/binding-linux-riscv64-gnu': 0.61.0 - '@oxfmt/binding-linux-riscv64-musl': 0.61.0 - '@oxfmt/binding-linux-s390x-gnu': 0.61.0 - '@oxfmt/binding-linux-x64-gnu': 0.61.0 - '@oxfmt/binding-linux-x64-musl': 0.61.0 - '@oxfmt/binding-openharmony-arm64': 0.61.0 - '@oxfmt/binding-win32-arm64-msvc': 0.61.0 - '@oxfmt/binding-win32-ia32-msvc': 0.61.0 - '@oxfmt/binding-win32-x64-msvc': 0.61.0 + '@oxfmt/binding-android-arm-eabi': 0.66.0 + '@oxfmt/binding-android-arm64': 0.66.0 + '@oxfmt/binding-darwin-arm64': 0.66.0 + '@oxfmt/binding-darwin-x64': 0.66.0 + '@oxfmt/binding-freebsd-x64': 0.66.0 + '@oxfmt/binding-linux-arm-gnueabihf': 0.66.0 + '@oxfmt/binding-linux-arm-musleabihf': 0.66.0 + '@oxfmt/binding-linux-arm64-gnu': 0.66.0 + '@oxfmt/binding-linux-arm64-musl': 0.66.0 + '@oxfmt/binding-linux-ppc64-gnu': 0.66.0 + '@oxfmt/binding-linux-riscv64-gnu': 0.66.0 + '@oxfmt/binding-linux-riscv64-musl': 0.66.0 + '@oxfmt/binding-linux-s390x-gnu': 0.66.0 + '@oxfmt/binding-linux-x64-gnu': 0.66.0 + '@oxfmt/binding-linux-x64-musl': 0.66.0 + '@oxfmt/binding-openharmony-arm64': 0.66.0 + '@oxfmt/binding-win32-arm64-msvc': 0.66.0 + '@oxfmt/binding-win32-ia32-msvc': 0.66.0 + '@oxfmt/binding-win32-x64-msvc': 0.66.0 oxlint-tsgolint@0.25.0: optionalDependencies: @@ -10577,27 +10517,27 @@ snapshots: '@oxlint-tsgolint/win32-arm64': 0.25.0 '@oxlint-tsgolint/win32-x64': 0.25.0 - oxlint@1.76.0(oxlint-tsgolint@0.25.0): + oxlint@1.81.0(oxlint-tsgolint@0.25.0): optionalDependencies: - '@oxlint/binding-android-arm-eabi': 1.76.0 - '@oxlint/binding-android-arm64': 1.76.0 - '@oxlint/binding-darwin-arm64': 1.76.0 - '@oxlint/binding-darwin-x64': 1.76.0 - '@oxlint/binding-freebsd-x64': 1.76.0 - '@oxlint/binding-linux-arm-gnueabihf': 1.76.0 - '@oxlint/binding-linux-arm-musleabihf': 1.76.0 - '@oxlint/binding-linux-arm64-gnu': 1.76.0 - '@oxlint/binding-linux-arm64-musl': 1.76.0 - '@oxlint/binding-linux-ppc64-gnu': 1.76.0 - '@oxlint/binding-linux-riscv64-gnu': 1.76.0 - '@oxlint/binding-linux-riscv64-musl': 1.76.0 - '@oxlint/binding-linux-s390x-gnu': 1.76.0 - '@oxlint/binding-linux-x64-gnu': 1.76.0 - '@oxlint/binding-linux-x64-musl': 1.76.0 - '@oxlint/binding-openharmony-arm64': 1.76.0 - '@oxlint/binding-win32-arm64-msvc': 1.76.0 - '@oxlint/binding-win32-ia32-msvc': 1.76.0 - '@oxlint/binding-win32-x64-msvc': 1.76.0 + '@oxlint/binding-android-arm-eabi': 1.81.0 + '@oxlint/binding-android-arm64': 1.81.0 + '@oxlint/binding-darwin-arm64': 1.81.0 + '@oxlint/binding-darwin-x64': 1.81.0 + '@oxlint/binding-freebsd-x64': 1.81.0 + '@oxlint/binding-linux-arm-gnueabihf': 1.81.0 + '@oxlint/binding-linux-arm-musleabihf': 1.81.0 + '@oxlint/binding-linux-arm64-gnu': 1.81.0 + '@oxlint/binding-linux-arm64-musl': 1.81.0 + '@oxlint/binding-linux-ppc64-gnu': 1.81.0 + '@oxlint/binding-linux-riscv64-gnu': 1.81.0 + '@oxlint/binding-linux-riscv64-musl': 1.81.0 + '@oxlint/binding-linux-s390x-gnu': 1.81.0 + '@oxlint/binding-linux-x64-gnu': 1.81.0 + '@oxlint/binding-linux-x64-musl': 1.81.0 + '@oxlint/binding-openharmony-arm64': 1.81.0 + '@oxlint/binding-win32-arm64-msvc': 1.81.0 + '@oxlint/binding-win32-ia32-msvc': 1.81.0 + '@oxlint/binding-win32-x64-msvc': 1.81.0 oxlint-tsgolint: 0.25.0 p-limit@2.3.0: @@ -10616,7 +10556,7 @@ snapshots: dependencies: p-limit: 3.1.0 - p-retry@8.0.0: + p-retry@8.0.1: dependencies: is-network-error: 1.3.2 @@ -10703,15 +10643,17 @@ snapshots: picomatch@4.0.5: {} + picomatch@4.0.7: {} + pkg-dir@5.0.0: dependencies: find-up: 5.0.0 - playwright-core@1.62.0: {} + playwright-core@1.62.1: {} - playwright@1.62.0: + playwright@1.62.1: dependencies: - playwright-core: 1.62.0 + playwright-core: 1.62.1 optionalDependencies: fsevents: 2.3.2 @@ -10721,236 +10663,236 @@ snapshots: possible-typed-array-names@1.1.0: {} - postcss-attribute-case-insensitive@7.0.1(postcss@8.5.25): + postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-clamp@4.1.0(postcss@8.5.25): + postcss-clamp@4.1.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-color-functional-notation@7.0.12(postcss@8.5.25): + postcss-color-functional-notation@7.0.12(postcss@8.5.26): dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - postcss-color-hex-alpha@10.0.0(postcss@8.5.25): + postcss-color-hex-alpha@10.0.0(postcss@8.5.26): dependencies: - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-color-rebeccapurple@10.0.0(postcss@8.5.25): + postcss-color-rebeccapurple@10.0.0(postcss@8.5.26): dependencies: - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-custom-media@11.0.6(postcss@8.5.25): + postcss-custom-media@11.0.6(postcss@8.5.26): dependencies: '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) - postcss: 8.5.25 + postcss: 8.5.26 - postcss-custom-properties@14.0.6(postcss@8.5.25): + postcss-custom-properties@14.0.6(postcss@8.5.26): dependencies: '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-custom-selectors@8.0.5(postcss@8.5.25): + postcss-custom-selectors@8.0.5(postcss@8.5.26): dependencies: '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-dir-pseudo-class@9.0.1(postcss@8.5.25): + postcss-dir-pseudo-class@9.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-double-position-gradients@6.0.4(postcss@8.5.25): + postcss-double-position-gradients@6.0.4(postcss@8.5.26): dependencies: - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-focus-visible@10.0.1(postcss@8.5.25): + postcss-focus-visible@10.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-focus-within@9.0.1(postcss@8.5.25): + postcss-focus-within@9.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-font-variant@5.0.0(postcss@8.5.25): + postcss-font-variant@5.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - postcss-gap-properties@6.0.0(postcss@8.5.25): + postcss-gap-properties@6.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - postcss-image-set-function@7.0.0(postcss@8.5.25): + postcss-image-set-function@7.0.0(postcss@8.5.26): dependencies: - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-lab-function@7.0.12(postcss@8.5.25): + postcss-lab-function@7.0.12(postcss@8.5.26): dependencies: '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/utilities': 2.0.0(postcss@8.5.25) - postcss: 8.5.25 + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/utilities': 2.0.0(postcss@8.5.26) + postcss: 8.5.26 - postcss-logical@8.1.0(postcss@8.5.25): + postcss-logical@8.1.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-nesting@13.0.2(postcss@8.5.25): + postcss-nesting@13.0.2(postcss@8.5.26): dependencies: - '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.1) - '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.3) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3) + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-opacity-percentage@3.0.0(postcss@8.5.25): + postcss-opacity-percentage@3.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - postcss-overflow-shorthand@6.0.0(postcss@8.5.25): + postcss-overflow-shorthand@6.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-page-break@3.0.4(postcss@8.5.25): + postcss-page-break@3.0.4(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - postcss-place@10.0.0(postcss@8.5.25): + postcss-place@10.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 postcss-value-parser: 4.2.0 - postcss-preset-env@10.6.1(postcss@8.5.25): + postcss-preset-env@10.6.1(postcss@8.5.26): dependencies: - '@csstools/postcss-alpha-function': 1.0.1(postcss@8.5.25) - '@csstools/postcss-cascade-layers': 5.0.2(postcss@8.5.25) - '@csstools/postcss-color-function': 4.0.12(postcss@8.5.25) - '@csstools/postcss-color-function-display-p3-linear': 1.0.1(postcss@8.5.25) - '@csstools/postcss-color-mix-function': 3.0.12(postcss@8.5.25) - '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.2(postcss@8.5.25) - '@csstools/postcss-content-alt-text': 2.0.8(postcss@8.5.25) - '@csstools/postcss-contrast-color-function': 2.0.12(postcss@8.5.25) - '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.25) - '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.25) - '@csstools/postcss-gamut-mapping': 2.0.11(postcss@8.5.25) - '@csstools/postcss-gradients-interpolation-method': 5.0.12(postcss@8.5.25) - '@csstools/postcss-hwb-function': 4.0.12(postcss@8.5.25) - '@csstools/postcss-ic-unit': 4.0.4(postcss@8.5.25) - '@csstools/postcss-initial': 2.0.1(postcss@8.5.25) - '@csstools/postcss-is-pseudo-class': 5.0.3(postcss@8.5.25) - '@csstools/postcss-light-dark-function': 2.0.11(postcss@8.5.25) - '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.25) - '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.25) - '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.25) - '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.25) - '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.25) - '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.25) - '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.25) - '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.25) - '@csstools/postcss-normalize-display-values': 4.0.1(postcss@8.5.25) - '@csstools/postcss-oklab-function': 4.0.12(postcss@8.5.25) - '@csstools/postcss-position-area-property': 1.0.0(postcss@8.5.25) - '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25) - '@csstools/postcss-property-rule-prelude-list': 1.0.0(postcss@8.5.25) - '@csstools/postcss-random-function': 2.0.1(postcss@8.5.25) - '@csstools/postcss-relative-color-syntax': 3.0.12(postcss@8.5.25) - '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.25) - '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.25) - '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.25) - '@csstools/postcss-syntax-descriptor-syntax-production': 1.0.1(postcss@8.5.25) - '@csstools/postcss-system-ui-font-family': 1.0.0(postcss@8.5.25) - '@csstools/postcss-text-decoration-shorthand': 4.0.3(postcss@8.5.25) - '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.25) - '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.25) - autoprefixer: 10.5.0(postcss@8.5.25) + '@csstools/postcss-alpha-function': 1.0.1(postcss@8.5.26) + '@csstools/postcss-cascade-layers': 5.0.2(postcss@8.5.26) + '@csstools/postcss-color-function': 4.0.12(postcss@8.5.26) + '@csstools/postcss-color-function-display-p3-linear': 1.0.1(postcss@8.5.26) + '@csstools/postcss-color-mix-function': 3.0.12(postcss@8.5.26) + '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.2(postcss@8.5.26) + '@csstools/postcss-content-alt-text': 2.0.8(postcss@8.5.26) + '@csstools/postcss-contrast-color-function': 2.0.12(postcss@8.5.26) + '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.26) + '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.26) + '@csstools/postcss-gamut-mapping': 2.0.11(postcss@8.5.26) + '@csstools/postcss-gradients-interpolation-method': 5.0.12(postcss@8.5.26) + '@csstools/postcss-hwb-function': 4.0.12(postcss@8.5.26) + '@csstools/postcss-ic-unit': 4.0.4(postcss@8.5.26) + '@csstools/postcss-initial': 2.0.1(postcss@8.5.26) + '@csstools/postcss-is-pseudo-class': 5.0.3(postcss@8.5.26) + '@csstools/postcss-light-dark-function': 2.0.11(postcss@8.5.26) + '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.26) + '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.26) + '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.26) + '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.26) + '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.26) + '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.26) + '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.26) + '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.26) + '@csstools/postcss-normalize-display-values': 4.0.1(postcss@8.5.26) + '@csstools/postcss-oklab-function': 4.0.12(postcss@8.5.26) + '@csstools/postcss-position-area-property': 1.0.0(postcss@8.5.26) + '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26) + '@csstools/postcss-property-rule-prelude-list': 1.0.0(postcss@8.5.26) + '@csstools/postcss-random-function': 2.0.1(postcss@8.5.26) + '@csstools/postcss-relative-color-syntax': 3.0.12(postcss@8.5.26) + '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.26) + '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.26) + '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.26) + '@csstools/postcss-syntax-descriptor-syntax-production': 1.0.1(postcss@8.5.26) + '@csstools/postcss-system-ui-font-family': 1.0.0(postcss@8.5.26) + '@csstools/postcss-text-decoration-shorthand': 4.0.3(postcss@8.5.26) + '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.26) + '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.26) + autoprefixer: 10.5.0(postcss@8.5.26) browserslist: 4.28.2 - css-blank-pseudo: 7.0.1(postcss@8.5.25) - css-has-pseudo: 7.0.3(postcss@8.5.25) - css-prefers-color-scheme: 10.0.0(postcss@8.5.25) + css-blank-pseudo: 7.0.1(postcss@8.5.26) + css-has-pseudo: 7.0.3(postcss@8.5.26) + css-prefers-color-scheme: 10.0.0(postcss@8.5.26) cssdb: 8.8.0 - postcss: 8.5.25 - postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.25) - postcss-clamp: 4.1.0(postcss@8.5.25) - postcss-color-functional-notation: 7.0.12(postcss@8.5.25) - postcss-color-hex-alpha: 10.0.0(postcss@8.5.25) - postcss-color-rebeccapurple: 10.0.0(postcss@8.5.25) - postcss-custom-media: 11.0.6(postcss@8.5.25) - postcss-custom-properties: 14.0.6(postcss@8.5.25) - postcss-custom-selectors: 8.0.5(postcss@8.5.25) - postcss-dir-pseudo-class: 9.0.1(postcss@8.5.25) - postcss-double-position-gradients: 6.0.4(postcss@8.5.25) - postcss-focus-visible: 10.0.1(postcss@8.5.25) - postcss-focus-within: 9.0.1(postcss@8.5.25) - postcss-font-variant: 5.0.0(postcss@8.5.25) - postcss-gap-properties: 6.0.0(postcss@8.5.25) - postcss-image-set-function: 7.0.0(postcss@8.5.25) - postcss-lab-function: 7.0.12(postcss@8.5.25) - postcss-logical: 8.1.0(postcss@8.5.25) - postcss-nesting: 13.0.2(postcss@8.5.25) - postcss-opacity-percentage: 3.0.0(postcss@8.5.25) - postcss-overflow-shorthand: 6.0.0(postcss@8.5.25) - postcss-page-break: 3.0.4(postcss@8.5.25) - postcss-place: 10.0.0(postcss@8.5.25) - postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.25) - postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.25) - postcss-selector-not: 8.0.1(postcss@8.5.25) + postcss: 8.5.26 + postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.26) + postcss-clamp: 4.1.0(postcss@8.5.26) + postcss-color-functional-notation: 7.0.12(postcss@8.5.26) + postcss-color-hex-alpha: 10.0.0(postcss@8.5.26) + postcss-color-rebeccapurple: 10.0.0(postcss@8.5.26) + postcss-custom-media: 11.0.6(postcss@8.5.26) + postcss-custom-properties: 14.0.6(postcss@8.5.26) + postcss-custom-selectors: 8.0.5(postcss@8.5.26) + postcss-dir-pseudo-class: 9.0.1(postcss@8.5.26) + postcss-double-position-gradients: 6.0.4(postcss@8.5.26) + postcss-focus-visible: 10.0.1(postcss@8.5.26) + postcss-focus-within: 9.0.1(postcss@8.5.26) + postcss-font-variant: 5.0.0(postcss@8.5.26) + postcss-gap-properties: 6.0.0(postcss@8.5.26) + postcss-image-set-function: 7.0.0(postcss@8.5.26) + postcss-lab-function: 7.0.12(postcss@8.5.26) + postcss-logical: 8.1.0(postcss@8.5.26) + postcss-nesting: 13.0.2(postcss@8.5.26) + postcss-opacity-percentage: 3.0.0(postcss@8.5.26) + postcss-overflow-shorthand: 6.0.0(postcss@8.5.26) + postcss-page-break: 3.0.4(postcss@8.5.26) + postcss-place: 10.0.0(postcss@8.5.26) + postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.26) + postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.26) + postcss-selector-not: 8.0.1(postcss@8.5.26) - postcss-pseudo-class-any-link@10.0.1(postcss@8.5.25): + postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-replace-overflow-wrap@4.0.0(postcss@8.5.25): + postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26): dependencies: - postcss: 8.5.25 + postcss: 8.5.26 - postcss-selector-not@8.0.1(postcss@8.5.25): + postcss-selector-not@8.0.1(postcss@8.5.26): dependencies: - postcss: 8.5.25 - postcss-selector-parser: 7.1.1 + postcss: 8.5.26 + postcss-selector-parser: 7.1.3 - postcss-selector-parser@7.1.1: + postcss-selector-parser@7.1.3: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 postcss-value-parser@4.2.0: {} - postcss@8.5.25: + postcss@8.5.26: dependencies: - nanoid: 3.3.17 + nanoid: 3.3.18 picocolors: 1.1.1 source-map-js: 1.2.1 @@ -10981,7 +10923,7 @@ snapshots: ansi-styles: 5.2.0 react-is: 17.0.2 - pretty-ms@9.3.0: + pretty-ms@9.3.1: dependencies: parse-ms: 4.0.0 @@ -11056,22 +10998,22 @@ snapshots: react: 19.2.8 scheduler: 0.27.0 - react-i18next@16.6.6(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3): + react-i18next@16.6.6(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3): dependencies: '@babel/runtime': 7.29.2 html-parse-stringify: 3.0.1 - i18next: 26.3.6(typescript@5.9.3) + i18next: 26.4.1(typescript@5.9.3) react: 19.2.8 use-sync-external-store: 1.6.0(react@19.2.8) optionalDependencies: react-dom: 19.2.8(react@19.2.8) typescript: 5.9.3 - react-i18next@17.0.11(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3): + react-i18next@17.0.13(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3): dependencies: '@babel/runtime': 7.29.7 html-parse-stringify: 4.0.1 - i18next: 26.3.6(typescript@5.9.3) + i18next: 26.4.1(typescript@5.9.3) react: 19.2.8 use-sync-external-store: 1.6.0(react@19.2.8) optionalDependencies: @@ -11082,32 +11024,32 @@ snapshots: react-is@17.0.2: {} - react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.8): + react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8): dependencies: react: 19.2.8 - react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8) + react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8) tslib: 2.8.1 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.8): + react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.8): dependencies: react: 19.2.8 - react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.8) - react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8) + react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8) + react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8) tslib: 2.8.1 - use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.8) - use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.8) + use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8) + use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8) optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - react-router-dom@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + react-router-dom@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - react-router: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + react-router: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + react-router@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: cookie: 1.1.1 react: 19.2.8 @@ -11115,13 +11057,13 @@ snapshots: optionalDependencies: react-dom: 19.2.8(react@19.2.8) - react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.8): + react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8): dependencies: get-nonce: 1.0.1 react: 19.2.8 tslib: 2.8.1 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 react-use-measure@2.1.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: @@ -11151,11 +11093,11 @@ snapshots: dependencies: picomatch: 2.3.2 - readdirp@5.0.0: {} + readdirp@5.1.1: {} - recast@0.23.19: + recast@0.23.21: dependencies: - ast-types: 0.16.1 + ast-types: 0.16.3 esprima: 4.0.1 source-map: 0.6.1 tiny-invariant: 1.3.3 @@ -11199,26 +11141,26 @@ snapshots: hash-base: 3.1.2 inherits: 2.0.4 - rolldown@1.1.5: + rolldown@1.2.7: dependencies: - '@oxc-project/types': 0.139.0 + '@oxc-project/types': 0.148.0 '@rolldown/pluginutils': 1.0.1 optionalDependencies: - '@rolldown/binding-android-arm64': 1.1.5 - '@rolldown/binding-darwin-arm64': 1.1.5 - '@rolldown/binding-darwin-x64': 1.1.5 - '@rolldown/binding-freebsd-x64': 1.1.5 - '@rolldown/binding-linux-arm-gnueabihf': 1.1.5 - '@rolldown/binding-linux-arm64-gnu': 1.1.5 - '@rolldown/binding-linux-arm64-musl': 1.1.5 - '@rolldown/binding-linux-ppc64-gnu': 1.1.5 - '@rolldown/binding-linux-s390x-gnu': 1.1.5 - '@rolldown/binding-linux-x64-gnu': 1.1.5 - '@rolldown/binding-linux-x64-musl': 1.1.5 - '@rolldown/binding-openharmony-arm64': 1.1.5 - '@rolldown/binding-wasm32-wasi': 1.1.5 - '@rolldown/binding-win32-arm64-msvc': 1.1.5 - '@rolldown/binding-win32-x64-msvc': 1.1.5 + '@rolldown/binding-android-arm-eabi': 1.2.7 + '@rolldown/binding-android-arm64': 1.2.7 + '@rolldown/binding-darwin-arm64': 1.2.7 + '@rolldown/binding-darwin-x64': 1.2.7 + '@rolldown/binding-freebsd-x64': 1.2.7 + '@rolldown/binding-linux-arm-gnueabihf': 1.2.7 + '@rolldown/binding-linux-arm64-gnu': 1.2.7 + '@rolldown/binding-linux-arm64-musl': 1.2.7 + '@rolldown/binding-linux-ppc64-gnu': 1.2.7 + '@rolldown/binding-linux-s390x-gnu': 1.2.7 + '@rolldown/binding-linux-x64-gnu': 1.2.7 + '@rolldown/binding-linux-x64-musl': 1.2.7 + '@rolldown/binding-openharmony-arm64': 1.2.7 + '@rolldown/binding-win32-arm64-msvc': 1.2.7 + '@rolldown/binding-win32-x64-msvc': 1.2.7 rollup@4.60.1: dependencies: @@ -11278,7 +11220,7 @@ snapshots: safer-buffer@2.1.2: {} - sass@1.102.0: + sass@1.103.1: dependencies: chokidar: 5.0.0 immutable: 5.1.9 @@ -11391,27 +11333,27 @@ snapshots: stdin-discarder@0.3.2: {} - storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8): + storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8): dependencies: '@storybook/global': 5.0.0 '@storybook/icons': 2.1.0(react@19.2.8) '@testing-library/dom': 10.4.1 '@testing-library/jest-dom': 6.9.1 - '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1) + '@testing-library/user-event': 14.6.7(@testing-library/dom@10.4.1) '@vitest/expect': 3.2.4 '@vitest/spy': 3.2.4 '@webcontainer/env': 1.1.1 - esbuild: 0.28.1 + esbuild: 0.28.2 jsonc-parser: 3.3.1 open: 10.2.0 oxc-parser: 0.127.0 - oxc-resolver: 11.24.2 - recast: 0.23.19 + oxc-resolver: 11.21.2 + recast: 0.23.21 semver: 7.8.5 use-sync-external-store: 1.6.0(react@19.2.8) - ws: 8.21.1 + ws: 8.21.3 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 prettier: 3.8.3 transitivePeerDependencies: - bufferutil @@ -11461,7 +11403,7 @@ snapshots: strip-ansi@7.2.0: dependencies: - ansi-regex: 6.2.2 + ansi-regex: 6.3.0 strip-bom@3.0.0: {} @@ -11506,7 +11448,7 @@ snapshots: tinybench@2.9.0: {} - tinyexec@1.3.0: {} + tinyexec@1.3.1: {} tinyglobby@0.2.17: dependencies: @@ -11519,7 +11461,7 @@ snapshots: tinyrainbow@3.1.1: {} - tinyspy@4.0.4: {} + tinyspy@4.0.6: {} tldts-core@6.1.86: {} @@ -11619,7 +11561,7 @@ snapshots: dependencies: '@jridgewell/remapping': 2.3.5 acorn: 8.18.0 - picomatch: 4.0.5 + picomatch: 4.0.7 webpack-virtual-modules: 0.6.2 update-browserslist-db@1.2.3(browserslist@4.28.2): @@ -11637,20 +11579,20 @@ snapshots: punycode: 1.4.1 qs: 6.15.3 - use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.8): + use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.8): dependencies: react: 19.2.8 tslib: 2.8.1 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 - use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.8): + use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.8): dependencies: detect-node-es: 1.1.0 react: 19.2.8 tslib: 2.8.1 optionalDependencies: - '@types/react': 19.2.17 + '@types/react': 19.2.18 use-sync-external-store@1.6.0(react@19.2.8): dependencies: @@ -11671,25 +11613,18 @@ snapshots: is-typed-array: 1.1.15 which-typed-array: 1.1.20 - uuid@14.0.1: {} + uuid@14.0.2: {} - vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + vaul@1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: - '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) transitivePeerDependencies: - '@types/react' - '@types/react-dom' - vite-plugin-generate-file@0.3.1: - dependencies: - ejs: 3.1.10 - js-yaml: 4.3.0 - mime-types: 2.1.35 - picocolors: 1.1.1 - - vite-plugin-html@3.2.2(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: '@rollup/pluginutils': 4.2.1 colorette: 2.0.20 @@ -11703,91 +11638,91 @@ snapshots: html-minifier-terser: 6.1.0 node-html-parser: 5.4.2 pathe: 0.2.0 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) - vite-plugin-node-polyfills@0.28.0(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vite-plugin-node-polyfills@0.28.0(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: '@rollup/plugin-inject': 5.0.5(rollup@4.60.1) node-stdlib-browser: 1.3.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) transitivePeerDependencies: - rollup - vite-plugin-node-stdlib-browser@0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vite-plugin-node-stdlib-browser@0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: '@rollup/plugin-inject': 5.0.5(rollup@4.60.1) node-stdlib-browser: 1.3.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) transitivePeerDependencies: - rollup - vite-plugin-svgr@4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vite-plugin-svgr@4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: '@rollup/pluginutils': 5.3.0(rollup@4.60.1) '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@5.9.3) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(supports-color@7.2.0) - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) transitivePeerDependencies: - rollup - supports-color - typescript - vite-plugin-wasm@3.6.0(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vite-plugin-wasm@3.6.0(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) - vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0): + vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0): dependencies: lightningcss: 1.33.0 - picomatch: 4.0.5 - postcss: 8.5.25 - rolldown: 1.1.5 + picomatch: 4.0.7 + postcss: 8.5.26 + rolldown: 1.2.7 tinyglobby: 0.2.17 optionalDependencies: '@types/node': 24.13.3 - esbuild: 0.28.1 + esbuild: 0.28.2 fsevents: 2.3.3 jiti: 2.7.0 - sass: 1.102.0 + sass: 1.103.1 terser: 5.46.1 yaml: 2.9.0 - vitest-axe@1.0.0-pre.5(vitest@4.1.10): + vitest-axe@1.0.0-pre.5(vitest@4.1.11): dependencies: '@vitest/pretty-format': 3.2.4 axe-core: 4.11.3 chalk: 5.6.2 lodash-es: 4.18.1 - vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) - vitest@4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)): + vitest@4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)): dependencies: - '@vitest/expect': 4.1.10 - '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) - '@vitest/pretty-format': 4.1.10 - '@vitest/runner': 4.1.10 - '@vitest/snapshot': 4.1.10 - '@vitest/spy': 4.1.10 - '@vitest/utils': 4.1.10 - es-module-lexer: 2.3.1 + '@vitest/expect': 4.1.11 + '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) + '@vitest/pretty-format': 4.1.11 + '@vitest/runner': 4.1.11 + '@vitest/snapshot': 4.1.11 + '@vitest/spy': 4.1.11 + '@vitest/utils': 4.1.11 + es-module-lexer: 2.3.2 expect-type: 1.4.0 magic-string: 0.30.21 obug: 2.1.4 pathe: 2.0.3 - picomatch: 4.0.5 + picomatch: 4.0.7 std-env: 4.2.0 tinybench: 2.9.0 - tinyexec: 1.3.0 + tinyexec: 1.3.1 tinyglobby: 0.2.17 tinyrainbow: 3.1.1 - vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0) why-is-node-running: 2.3.0 optionalDependencies: '@opentelemetry/api': 1.9.1 '@types/node': 24.13.3 - '@vitest/browser-playwright': 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) - '@vitest/coverage-v8': 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10) - '@vitest/ui': 4.1.10(vitest@4.1.10) + '@vitest/browser-playwright': 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11) + '@vitest/coverage-v8': 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11) + '@vitest/ui': 4.1.11(vitest@4.1.11) jsdom: 26.1.0(supports-color@7.2.0) transitivePeerDependencies: - msw @@ -11834,6 +11769,8 @@ snapshots: tr46: 0.0.3 webidl-conversions: 3.0.1 + which-command@0.1.0: {} + which-module@2.0.1: {} which-typed-array@1.1.20: @@ -11879,7 +11816,7 @@ snapshots: ws@8.21.0: {} - ws@8.21.1: {} + ws@8.21.3: {} wsl-utils@0.1.0: dependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index c32736ca..9e4f0fd6 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,3 +1,7 @@ +supportedArchitectures: + os: [current, linux] + cpu: [current, arm64] + libc: [current, glibc] minimumReleaseAgeExclude: - "@vector-im/compound-design-tokens" - "@vector-im/compound-web" diff --git a/scripts/check-component-externals.mjs b/scripts/check-component-externals.mjs new file mode 100644 index 00000000..42d9235d --- /dev/null +++ b/scripts/check-component-externals.mjs @@ -0,0 +1,148 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * Checks that the component build leaves the packages a host must supply to + * the host. + * + * A host application already has React, the Matrix SDK, LiveKit and Compound, + * and a second copy of any of them is worse than dead weight: React would hold + * two sets of hooks, the Matrix client would run two sync loops, and a second + * Compound would style the tooltips it floats into the host's body with class + * names the host's stylesheet does not know. So the + * component build lists them as external — but that list has to name every + * subpath, since the bundler silently ignores the pattern and callback forms + * of the option, and an import it does not cover is bundled with no warning at + * all. That is the failure this guards against. + * + * It reads the list from the build config itself, so there is one copy of it, + * and compares it against every import of those packages in the source. + * + * The comparison is deliberately over-approximate: it looks at all of `src` + * rather than only the modules the component actually pulls in, so it will + * sometimes ask for a subpath that only the standalone app imports. Listing + * one the component never imports costs nothing — the bundler ignores it — + * whereas missing one costs a duplicate package. + */ + +import { readdir, readFile } from "node:fs/promises"; +import { join } from "node:path"; +import { loadConfigFromFile } from "vite"; + +const CONFIG = "vite-component.config.ts"; +const SOURCES = ["src", "component"]; +// The development harness is a host, not part of the component: it is the +// one that imports what a host supplies (Compound's stylesheets, say). +const EXCLUDED = ["component/dev"]; + +/** The packages whose duplication would break a host, rather than merely enlarge it. */ +const MUST_BE_EXTERNAL = [ + "react", + "react-dom", + "matrix-js-sdk", + "livekit-client", + "@vector-im/compound-web", + "@vector-im/compound-design-tokens", +]; + +const isTestFile = (name) => + name.includes(".test.") || name.includes(".stories."); + +/** Every source file under the given directories, recursively. */ +async function* sourceFiles(dir) { + for (const entry of await readdir(dir, { withFileTypes: true })) { + const path = join(dir, entry.name); + if (EXCLUDED.includes(path)) continue; + if (entry.isDirectory()) yield* sourceFiles(path); + else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name)) + yield path; + } +} + +/** + * The module specifiers a source file imports. Covers `from "…"` (which is + * both static imports and re-exports), bare `import "…"` for side effects, and + * dynamic `import("…")`. + */ +function imports(source) { + const specifiers = []; + for (const pattern of [ + /\bfrom\s*["']([^"']+)["']/g, + /\bimport\s*\(\s*["']([^"']+)["']\s*\)/g, + /^\s*import\s+["']([^"']+)["']/gm, + ]) + for (const [, specifier] of source.matchAll(pattern)) + specifiers.push(specifier); + return specifiers; +} + +/** + * Whether a specifier is an import of one of the packages we care about. + * + * Imports carrying a resource query — `?worker`, `?inline` and friends — are + * not, whatever package they name. Those ask the bundler for a script to run + * in a context of its own, which has to be self-contained and shares no state + * with the host's copy of anything. Worker sub-builds do not inherit this + * option anyway. + */ +const mustBeExternal = (specifier) => + !specifier.includes("?") && + MUST_BE_EXTERNAL.some( + (pkg) => specifier === pkg || specifier.startsWith(`${pkg}/`), + ); + +const loaded = await loadConfigFromFile( + { command: "build", mode: "production" }, + CONFIG, +); +if (loaded === null) { + console.error(`Could not load ${CONFIG}`); + process.exit(1); +} +const declared = new Set(loaded.config.build?.rollupOptions?.external ?? []); +if (declared.size === 0) { + console.error( + `${CONFIG} declares nothing external. Either the option moved, or the ` + + `list is empty; either way this check is not looking at what it thinks.`, + ); + process.exit(1); +} + +// Where each missing specifier is imported, so the message can point at it +const missing = new Map(); +const seen = new Set(); +for (const dir of SOURCES) + for await (const file of sourceFiles(dir)) { + const source = await readFile(file, "utf8"); + for (const specifier of imports(source)) { + if (!mustBeExternal(specifier)) continue; + seen.add(specifier); + if (declared.has(specifier)) continue; + const files = missing.get(specifier) ?? []; + files.push(file); + missing.set(specifier, files); + } + } + +if (missing.size > 0) { + console.error( + `${CONFIG} does not declare these imports external, so the component ` + + `build would bundle its own copy of them:\n`, + ); + for (const [specifier, files] of [...missing].sort()) + console.error(` ${specifier}\n imported by ${files.join(", ")}`); + console.error(`\nAdd each one to the \`external\` list in ${CONFIG}.`); + process.exit(1); +} + +// Deliberately no complaint about declarations nothing imports. Some of them +// cannot be seen from the source at all — `react/jsx-runtime` is injected by +// the JSX transform — and an extra declaration is inert, so there is nothing +// to warn about. +console.log( + `${declared.size} external declarations cover all ${seen.size} imports of ${MUST_BE_EXTERNAL.join(", ")}.`, +); diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh new file mode 100755 index 00000000..705b3b80 --- /dev/null +++ b/scripts/fetchdep.sh @@ -0,0 +1,73 @@ +#!/usr/bin/env bash + +# Clones the branch of a dependency's repository that has the same name as +# the pull request branch under test, so a change spanning both repositories +# can be tested before either side is merged. Inspired by scripts/fetchdep.sh +# element-web. +# +# Usage: scripts/fetchdep.sh [ref] +# +# The clone lands in ./. When the pull request comes from a fork and +# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried +# before 's. Exits 0 when a branch was cloned and 1 when there is none, +# so the caller can keep the locked version in that case. Without a ref, +# nothing is closed outside a pull request. + +set -eu + +org=$1 +repo=$2 +ref=${3:-} + +rm -rf "$repo" + +# If a ref was passed, try to clone it or die. +if [ -n "$ref" ]; then + echo "fetchdep.sh: Using $org/$repo at $ref" + git clone --depth 1 "https://github.com/$org/$repo.git" "$repo" + git -C "$repo" fetch --depth 1 origin "$ref" + git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD + git -C "$repo" log -1 + exit 0 +fi + +# Otherwise ensure that we're on a pull request. +head_ref=${GITHUB_HEAD_REF:-} +if [ -z "$head_ref" ]; then + echo "fetchdep.sh: Not a pull request, nothing to match" + exit 1 +fi + +# Bots name their branches the same way in every repository, so a match on +# one of theirs would be a coincidence rather than a paired change. +case "$head_ref" in + renovate/* | dependabot/*) + echo "fetchdep.sh: Not matching bot branch $head_ref" + exit 1 + ;; +esac + +# Clones a branch if it exists and ends the script on success. +clone() { + local try_org=$1 + local branch=$2 + echo "fetchdep.sh: Trying to use $try_org/$repo#$branch" + # Disable auth prompts: https://serverfault.com/a/665959 + if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then + git -C "$repo" log -1 + # Surface the match on the workflow run summary. + echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)" + exit 0 + fi +} + +# Try cloning from the fork, then from the org. +head_owner=${PR_HEAD_REPO_OWNER:-} +if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then + clone "$head_owner" "$head_ref" +fi +clone "$org" "$head_ref" + +# Nothing worked. Die. +echo "fetchdep.sh: No branch named $head_ref in $org/$repo" +exit 1 diff --git a/scripts/layered.sh b/scripts/layered.sh new file mode 100755 index 00000000..54f38fa1 --- /dev/null +++ b/scripts/layered.sh @@ -0,0 +1,62 @@ +#!/usr/bin/env bash + +# Installs dependencies, then swaps matrix-js-sdk for a branch of the same +# name as the pull request branch under test if one exists. This is what +# lets CI test an Element Call branch together with a matrix-js-sdk branch +# before either is merged. Inspired by scripts/layered.sh in element-web. +# +# Usage: scripts/layered.sh [pnpm install flags] +# +# The layering is only performed when package.json uses the develop branch of +# matrix-js-sdk and the run is for a pull request whose branch has a matrix-js-sdk +# counterpart. Otherwise the dependency is left as pnpm-lock.yaml pins it. +# +# The matrix-js-sdk checkout is nested inside this directory because some CI +# systems do not allow moving above the primary checkout. It is git-ignored. +# +# Set JS_SDK_GITHUB_BASE_REF to a ref to use that exact ref of matrix-js-sdk +# instead of looking for a matching branch. +# +# This script is only meant to be used in CI. For local development use +# see docs/linking.md. + +set -ex + +# Paths below are relative to the repository root. +cd "$(dirname "$0")/.." + +pnpm install --frozen-lockfile "$@" + +js_sdk_dep=$(jq -r '.devDependencies["matrix-js-sdk"]' < package.json) + +# Only layer when package.json follows the branch head rather than pinning a +# release, so a release build keeps its pinned version. +if [ "$js_sdk_dep" != "github:matrix-org/matrix-js-sdk#develop" ]; then + echo "layered.sh: Skipping matrix-js-sdk fetch and install as package.json pins $js_sdk_dep" + exit 0 +fi + +if ! scripts/fetchdep.sh matrix-org matrix-js-sdk "${JS_SDK_GITHUB_BASE_REF:-}"; then + echo "layered.sh: No matching matrix-js-sdk branch, keeping the locked version" + exit 0 +fi + +# matrix-js-sdk pins its pnpm version in `devEngines` only. Under corepack, +# pnpm does not switch versions on its own and corepack, finding no +# `packageManager` field there, would walk up to this project's and use +# ours. Pinning it in the clone makes every pnpm invocation inside that +# directory, including the `prepare` script run by pack, use the right one. +js_sdk_pnpm="pnpm@$(jq -r '.devEngines.packageManager.version' < matrix-js-sdk/package.json)" +jq --arg pm "$js_sdk_pnpm" '.packageManager = $pm' matrix-js-sdk/package.json > matrix-js-sdk/package.json.tmp +mv matrix-js-sdk/package.json.tmp matrix-js-sdk/package.json +export COREPACK_ENABLE_DOWNLOAD_PROMPT=0 + +# Install matrix-js-sdk's build dependencies. `prepare` runs on pack below, +# so it is skipped here. +(cd matrix-js-sdk && pnpm install --frozen-lockfile --ignore-scripts) + +# Rather than `pnpm link`, build matrix-js-sdk into a tarball and install +# that. This better reflects a clean install: dependencies may be hoisted +# and shared, and there is no tsconfig.json to pick up sources from. +(cd matrix-js-sdk && pnpm pack --out matrix-js-sdk.tgz) +pnpm install "$(pwd)/matrix-js-sdk/matrix-js-sdk.tgz" "$@" diff --git a/sdk/main.ts b/sdk/main.ts index a001af65..6cd37032 100644 --- a/sdk/main.ts +++ b/sdk/main.ts @@ -46,7 +46,10 @@ import { // Can this be done in the tsconfig.json import { type TextStreamInfo } from "../node_modules/livekit-client/dist/src/room/types"; import { type Behavior, constant } from "../src/state/Behavior"; -import { createCallViewModel$ } from "../src/state/CallViewModel/CallViewModel"; +import { + callViewModelOptionsFromParams, + createCallViewModel$, +} from "../src/state/CallViewModel/CallViewModel"; import { ObservableScope } from "../src/state/ObservableScope"; import { getUrlParams } from "../src/UrlParams"; import { MuteStates } from "../src/state/MuteStates"; @@ -54,12 +57,10 @@ import { MediaDevices } from "../src/state/MediaDevices"; import { E2eeType } from "../src/e2ee/e2eeType"; import { currentAndPrev, TEXT_LK_TOPIC, tryMakeSticky } from "./helper"; import { logger as rootLogger } from "matrix-js-sdk/lib/logger"; -import { - ElementWidgetActions, - widget as _widget, - initializeWidget, -} from "../src/widget"; +import { initializeWidget } from "../src/widget"; import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection"; +import { createWidgetHostBridge } from "../src/HostBridge"; +import { observeElementSize$ } from "../src/utils/elementSize"; interface MatrixRTCSdk { /** @@ -109,14 +110,15 @@ export async function createMatrixRTCSdk( const scope = new ObservableScope(); // widget client - initializeWidget(application, true); - const widget = _widget; + const widget = initializeWidget(application, true); if (!widget) throw Error("No widget. This webapp can only start as a widget"); const client = await widget.client; + const hostBridge = createWidgetHostBridge(widget); logger.info("client created"); // url params - const { roomId } = getUrlParams(); + const urlParams = getUrlParams(); + const { roomId, controlledAudioDevices, callIntent } = urlParams; if (roomId === null) throw Error("could not get roomId from url params"); const room = client.getRoom(roomId); if (room === null) throw Error("could not get room from client"); @@ -128,11 +130,16 @@ export async function createMatrixRTCSdk( const rtcSession = rtcSessionManager.getRoomSession(room); // media devices - const mediaDevices = new MediaDevices(scope); - const muteStates = new MuteStates(scope, mediaDevices, { - audioEnabled: false, - videoEnabled: false, + const mediaDevices = new MediaDevices(scope, { + controlledAudioDevices, + callIntent, }); + const muteStates = new MuteStates( + scope, + mediaDevices, + { audioEnabled: false, videoEnabled: false }, + hostBridge, + ); // call view model const callViewModel = createCallViewModel$( @@ -141,7 +148,13 @@ export async function createMatrixRTCSdk( room, mediaDevices, muteStates, - { encryptionSystem: { kind: E2eeType.PER_PARTICIPANT } }, + { + ...callViewModelOptionsFromParams(urlParams), + encryptionSystem: { kind: E2eeType.PER_PARTICIPANT }, + hostBridge, + // The SDK owns its page, so the body is the space it has + windowSize$: scope.behavior(observeElementSize$(document.body)), + }, of({}), of({}), constant({ supported: false, processor: undefined }), @@ -282,18 +295,17 @@ export async function createMatrixRTCSdk( }); await leaveResolver.promise; logger.info("send Unstick"); - await widget.api + await hostBridge .setAlwaysOnScreen(false) - .catch((e) => - logger.error( - "Failed to set call widget `alwaysOnScreen` to false", - e, - ), + .catch((e: unknown) => + logger.error("Failed to set `alwaysOnScreen` to false", e), ); logger.info("send Close"); - await widget.api.transport - .send(ElementWidgetActions.Close, {}) - .catch((e) => logger.error("Failed to send close action", e)); + await hostBridge + .close?.() + .catch((e: unknown) => + logger.error("Failed to ask the host to close", e), + ); }; // schedule close first and then leave (scope.end) diff --git a/src/App.tsx b/src/App.tsx index 8f6ef21a..c07553af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,14 +9,22 @@ import { type FC, type JSX, Suspense, + useCallback, useEffect, - useMemo, useState, } from "react"; -import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom"; +import { + BrowserRouter, + Route, + useLocation, + useNavigate, + Routes, +} from "react-router-dom"; import * as Sentry from "@sentry/react"; import { TooltipProvider } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/lib/logger"; +import { type MatrixClient } from "matrix-js-sdk"; +import { I18nextProvider } from "react-i18next"; import { HomePage } from "./home/HomePage"; import { LoginPage } from "./auth/LoginPage"; @@ -25,13 +33,27 @@ import { RoomPage } from "./room/RoomPage"; import { ClientProvider } from "./ClientContext"; import { ErrorPage, LoadingPage } from "./FullScreenView"; import { Initializer } from "./initializer"; -import { widget } from "./widget"; +import { type WidgetHelpers } from "./widget"; import { useTheme } from "./useTheme"; import { ProcessorProvider } from "./livekit/TrackProcessorContext"; import { type AppViewModel } from "./state/AppViewModel"; import { MediaDevicesContext } from "./MediaDevicesContext"; -import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams"; +import { + HeaderStyle, + UrlParamsProvider, + useUrlParams, + useUrlParamsFromLocation, +} from "./UrlParams"; import { AppBar } from "./AppBar"; +import { i18n } from "./utils/i18n"; +import { useRootElement } from "./RootElementContext"; +import { + createWidgetHostBridge, + HostBridgeProvider, + nullHostBridge, +} from "./HostBridge"; +import { useInitial } from "./useInitial"; +import { LeaveToHomeProvider } from "./LeaveToHomeContext"; const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route); @@ -39,15 +61,38 @@ interface SimpleProviderProps { children: JSX.Element; } +/** + * Supplies the URL-derived params to the rest of the app. Only the standalone + * and widget builds own the URL, so this lives here in the app shell rather + * than alongside the context itself. + */ +const LocationUrlParamsProvider: FC = ({ children }) => { + const urlParams = useUrlParamsFromLocation(); + return {children}; +}; + +/** + * Supplies the way home. Only the app has one — its home page, with the list + * of recent calls — so this, too, lives in the app shell. + */ +const HomeProvider: FC = ({ children }) => { + const navigate = useNavigate(); + const leaveToHome = useCallback(() => { + navigate("/")?.catch((e) => logger.error("Failed to navigate home", e)); + }, [navigate]); + return ( + {children} + ); +}; + const BackgroundProvider: FC = ({ children }) => { const { pathname } = useLocation(); const { background } = useUrlParams(); + const rootElement = useRootElement(); useEffect(() => { - document - .getElementsByTagName("body")[0] - .setAttribute("data-background", background); - }, [pathname, background]); + rootElement.setAttribute("data-background", background); + }, [pathname, background, rootElement]); return children; }; @@ -57,61 +102,89 @@ const ThemeProvider: FC = ({ children }) => { return children; }; +/** Wraps the app in an {@link AppBar}, if the params ask for one. */ +const MaybeAppBar: FC = ({ children }) => { + const { header } = useUrlParams(); + return header === HeaderStyle.AppBar ? {children} : children; +}; + interface Props { vm: AppViewModel; + /** A point of access to the widget API, if running as a widget. */ + widget: WidgetHelpers | null; } -export const App: FC = ({ vm }) => { +export const App: FC = ({ vm, widget }) => { + // The standalone build has no host; the widget build's host is the client it + // is a widget of. + const hostBridge = useInitial(() => + widget === null ? nullHostBridge : createWidgetHostBridge(widget), + ); const [loaded, setLoaded] = useState(false); useEffect(() => { Initializer.init() ?.then(async () => { if (loaded) return; setLoaded(true); - await widget?.api.sendContentLoaded(); + await hostBridge.contentLoaded(); }) .catch(logger.error); }); - // Since we are outside the router component, we cannot use useUrlParams here - const { header } = useMemo(getUrlParams, []); - - const content = loaded ? ( - - - - } - > - - } /> - } /> - } /> - } /> - - - - - - ) : ( - + // As a widget, the client comes from the host over the widget API. Standalone, + // Element Call finds one itself, so there is nothing to wait for here. + const [widgetClient, setWidgetClient] = useState( + undefined, ); + useEffect(() => { + if (widget === null) return; + widget.client + .then(setWidgetClient) + .catch((e) => logger.error("Failed to obtain the host's client", e)); + }, [widget]); + const clientReady = widget === null || widgetClient !== undefined; + + const content = + loaded && clientReady ? ( + + + + } + > + + } /> + } /> + } /> + } /> + + + + + + ) : ( + + ); return ( - - - - - - {header === HeaderStyle.AppBar ? ( - {content} - ) : ( - content - )} - - - - - + + + + + + + + + + {content} + + + + + + + + + ); }; diff --git a/src/AppBar.module.css b/src/AppBar.module.css index cc63854e..1b234a22 100644 --- a/src/AppBar.module.css +++ b/src/AppBar.module.css @@ -68,7 +68,7 @@ } /* Hide everything but the subtitle in small windows */ -@media (max-height: 450px) { +@container element-call (max-height: 450px) { .bar { display: none; } @@ -131,7 +131,7 @@ } } -body[data-platform="ios"] { +[data-element-call-root][data-platform="ios"] { .bar > header { grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x); grid-template-areas: "primaryButton title secondaryButton"; @@ -166,7 +166,7 @@ body[data-platform="ios"] { } /* Hide everything but the subtitle in small windows */ - @media (max-height: 450px) { + @container element-call (max-height: 450px) { .bar:has(.subtitle) > header { grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto); grid-template-areas: "." "subtitle"; diff --git a/src/Avatar.test.tsx b/src/Avatar.test.tsx index 1e32de0e..c5d5e25a 100644 --- a/src/Avatar.test.tsx +++ b/src/Avatar.test.tsx @@ -9,18 +9,22 @@ import { afterEach, expect, test, vi } from "vitest"; import { render, screen } from "@testing-library/react"; import { type MatrixClient } from "matrix-js-sdk"; import { type FC, type PropsWithChildren } from "react"; -import { type WidgetApi } from "matrix-widget-api"; import { ClientContextProvider } from "./ClientContext"; -import { Avatar, getAvatarFromWidgetAPI } from "./Avatar"; +import { Avatar } from "./Avatar"; import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test"; -import { widget } from "./widget"; +import { + type HostBridge, + HostBridgeProvider, + nullHostBridge, +} from "./HostBridge"; const TestComponent: FC< PropsWithChildren<{ client: MatrixClient; + hostBridge?: HostBridge; }> -> = ({ client, children }) => { +> = ({ client, hostBridge = nullHostBridge, children }) => { return ( - {children} + {children} ); }; -vi.mock("./widget", () => ({ - widget: { - api: null, // Ideally we'd only mock this in the as a widget test so the whole module is otherwise null, but just nulling `api` by default works well enough - }, -})); - afterEach(() => { vi.unstubAllGlobals(); }); @@ -135,7 +133,7 @@ test("should attempt to fetch authenticated media from the server", async () => }); }); -test("should attempt to use widget API if running as a widget", async () => { +test("should download media through the host when it offers to", async () => { const expectedMXCUrl = "mxc://example.org/alice-avatar"; const expectedObjectURL = "my-object-url"; const theBlob = new Blob([]); @@ -151,8 +149,8 @@ test("should attempt to use widget API if running as a widget", async () => { getAccessToken: () => undefined, } as unknown as MatrixClient); - widget!.api = { downloadFile: vi.fn() } as unknown as WidgetApi; - vi.spyOn(widget!.api, "downloadFile").mockResolvedValue({ file: theBlob }); + const downloadMedia = vi.fn().mockResolvedValue(theBlob); + const hostBridge: HostBridge = { ...nullHostBridge, downloadMedia }; const member = mockMatrixRoomMember( mockRtcMembership("@alice:example.org", "AAAA"), { @@ -161,7 +159,7 @@ test("should attempt to use widget API if running as a widget", async () => { ); const displayName = "Alice"; render( - + { document.querySelector(`img[src='${expectedObjectURL}']`), ); - expect(widget!.api.downloadFile).toBeCalledWith(expectedMXCUrl); -}); - -test("Supports download files as base64", async () => { - const expectedMXCUrl = "mxc://example.org/alice-avatar"; - const expectedBase64 = - "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAADIElEQVR4nAAQA+/8ApxhEfFNuwna" + - "+DO1pFMx5YDg6gb8p1WFkbFSox9H6r5c8jp1gxlHXrDfA/oQFi4A0gTXH9YBNgwRm12xO68QP6lv" + - "ZLKH9qW1VM6kz6zA3T1Ui8J+Xbnh2BZ7oXDe/2gajzoA6j1JGotpz99xO+T2NR634Nhx3zhuera/" + - "UdrpMLdEpwWXLnSqZRasGsrl93FjdTwRBMaqsx6vJksnPOmV9ttbXFIOb0XDGPbVythSC2n7P/bS" + - "Zv0U0QqbBLk/5Wu1werYzAHiz11Bj8bEylQ92Pxvo+PwF6/KbGnIHTvGZkFzDkMnqz3g7Pw3NOSP" + - "oV+qfyJuSI0AeZmrPejFQ8kzBSDWO8D7lr4+6ePRBRmZtKCf+fNjSCOyb5jqwhBnD2cycbJtQQbR" + - "A4qdPG2ONfTPeQgi96+zT7grBI0JwvgFBceJdLJd4BX1VQIyY+j7OYueNWqEpf8iYgMj78I95eRt" + - "nfPLwlxhVns84iL4Yvw8jDrB9vQi8ktpsdJOMiDwKrBGD3q56COD2oIA96CCBgiro4tkvkumZSAc" + - "ZKXRLsziUFGytWJLaPjwnzXv2hicPy6k9AXsF3QkysOZAkB3m9XPpixhq9b0OKqV/zZx3L79o6wZ" + - "Dr40J7sj7f+ARd545CP01r5omHt94tbnjgA46HsM2OhP+qQ882LN+Bhscq2WSHGSHT4J9MQcsWZP" + - "2+N2LdPy61MN4/1++BJHmDcDLQBUEwLvjZp1fRfzxV7yirwIiOA7Vr8z+1yvS/pSkfUzkjswybOd" + - "M5i0I8Q69MTXAKxqtR0/tyGkfCmHfupGASp/SAT9J8f3aQV+gDbpva592v4w8Cv5EMm7CzZPwThF" + - "kgTChNPts7F03ccxpblfIz0EiAON1DKk71rX07BvDlLHY1ItPuqZ7hjy19jrAgl+QqEE1btHVA5R" + - "uAnRXpEWc6rjARlJY5G1wbMk12rrqpr8rhR3YpFgLgOx4BtQ0D/hGe7KANSGBMQojmObId0asCmd" + - "XzmnQI9P8QnwsO9vtqZlgIoU4g+f2/G8Q3/nVMX7dujniwEAAP//KmiQs7P8MeIAAAAASUVORK5C" + - "YII="; - const mockWidgetAPI = { - downloadFile: vi.fn().mockImplementation(async (contentUri) => { - if (contentUri !== expectedMXCUrl) { - return Promise.reject(new Error("Unexpected content URI")); - } - return { file: expectedBase64 }; - }), - } as unknown as WidgetApi; - - const blob = await getAvatarFromWidgetAPI(mockWidgetAPI, expectedMXCUrl); - - expect(blob).toBeInstanceOf(Blob); + expect(downloadMedia).toBeCalledWith(expectedMXCUrl); }); diff --git a/src/Avatar.tsx b/src/Avatar.tsx index 99940540..185ae97b 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -14,10 +14,9 @@ import { } from "react"; import { Avatar as CompoundAvatar } from "@vector-im/compound-web"; import { type MatrixClient } from "matrix-js-sdk"; -import { type WidgetApi } from "matrix-widget-api"; import { useClientState } from "./ClientContext"; -import { widget } from "./widget"; +import { useHostBridge } from "./HostBridge"; export enum Size { XS = "xs", @@ -76,6 +75,7 @@ export const Avatar: FC = ({ ...props }) => { const clientState = useClientState(); + const hostBridge = useHostBridge(); const sizePx = useMemo( () => @@ -87,7 +87,8 @@ export const Avatar: FC = ({ const [avatarUrl, setAvatarUrl] = useState(undefined); - // In theory, a change in `clientState` or `sizePx` could run extra getAvatarFromWidgetAPI calls, but in practice they should be stable long before this code runs. + // In theory, a change in `clientState` or `sizePx` could run extra media + // downloads, but in practice they should be stable long before this code runs. useEffect(() => { if (!src) { setAvatarUrl(undefined); @@ -96,8 +97,8 @@ export const Avatar: FC = ({ let blob: Promise; - if (widget?.api) { - blob = getAvatarFromWidgetAPI(widget.api, src); + if (hostBridge.downloadMedia) { + blob = hostBridge.downloadMedia(src); } else if ( clientState?.state === "valid" && clientState.authenticated?.client && @@ -132,7 +133,7 @@ export const Avatar: FC = ({ URL.revokeObjectURL(objectUrl); } }; - }, [clientState, src, sizePx]); + }, [clientState, hostBridge, src, sizePx]); return ( { - const response = await api.downloadFile(src); - const file = response.file; - - // element-web sends a Blob, and the MSC4039 is considering changing the spec to strictly Blob, so only handling that - if (file instanceof Blob) { - return file; - } else if (typeof file === "string") { - // it is a base64 string - const bytes = Uint8Array.from(atob(file), (c) => c.charCodeAt(0)); - return new Blob([bytes]); - } - throw new Error( - "Downloaded file format is not supported: " + typeof file + "", - ); -} diff --git a/src/ClientContext.test.tsx b/src/ClientContext.test.tsx new file mode 100644 index 00000000..65ff03d0 --- /dev/null +++ b/src/ClientContext.test.tsx @@ -0,0 +1,115 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, test, vi } from "vitest"; +import { render, waitFor } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import { type MatrixClient } from "matrix-js-sdk"; +import { type FC } from "react"; + +import { ClientProvider, useClientState } from "./ClientContext"; + +const mockClient = (userId = "@alice:example.org"): MatrixClient => + ({ + on: vi.fn(), + removeListener: vi.fn(), + getUserId: () => userId, + getDeviceId: () => "AAAA", + stopClient: vi.fn(), + }) as Partial as MatrixClient; + +/** Reports what the context says, so a test can assert on it. */ +const ShowClientState: FC = () => { + const state = useClientState(); + if (state === undefined) return loading; + if (state.state === "error") return error; + return ( + {state.authenticated?.client.getUserId() ?? "unauthenticated"} + ); +}; + +test("uses a client supplied by the host without waiting", () => { + const client = mockClient(); + + const { container } = render( + + + + + , + ); + + // Available on the very first render: a supplied client needs no session + // restoring, so there is no loading state to pass through. + expect(container.textContent).toBe("@alice:example.org"); +}); + +test("does not claim exclusive use of storage when given a client", () => { + // The channel is created when the module loads, so spy on the prototype + // rather than trying to replace the global. + const postMessage = vi.spyOn(BroadcastChannel.prototype, "postMessage"); + + render( + + + + + , + ); + + // The broadcast shuts down other instances to protect Element Call's own + // stores. A host's client brings its own, so there is nothing to protect. + expect(postMessage).not.toHaveBeenCalled(); + + postMessage.mockRestore(); +}); + +test("follows the client when the host swaps it", () => { + const first = mockClient(); + const second = mockClient("@bob:example.org"); + + const { container, rerender } = render( + + + + + , + ); + expect(container.textContent).toBe("@alice:example.org"); + + // A host that re-authenticates hands us a new client on a mounted component + rerender( + + + + + , + ); + + expect(container.textContent).toBe("@bob:example.org"); +}); + +test("finds a client of its own when the host supplies none", async () => { + const client = mockClient(); + vi.doMock("./utils/spa", () => ({ + initSPA: vi.fn().mockResolvedValue({ client, passwordlessUser: true }), + })); + + const { container } = render( + + + + + , + ); + + // Nothing to show until a session has been restored or created + expect(container.textContent).toBe("loading"); + await waitFor(() => expect(container.textContent).toBe("@alice:example.org")); + + vi.doUnmock("./utils/spa"); +}); diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx index f2ff3dd4..52658199 100644 --- a/src/ClientContext.tsx +++ b/src/ClientContext.tsx @@ -16,14 +16,13 @@ import { useMemo, type JSX, } from "react"; -import { useNavigate } from "react-router-dom"; import { logger } from "matrix-js-sdk/lib/logger"; import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync"; import { ClientEvent, type MatrixClient } from "matrix-js-sdk"; -import type { WidgetApi } from "matrix-widget-api"; import { ErrorPage } from "./FullScreenView"; -import { widget } from "./widget"; +import { useHostBridge } from "./HostBridge"; +import { useLeaveToHome } from "./LeaveToHomeContext"; import { PosthogAnalytics, RegistrationType, @@ -134,18 +133,48 @@ const loadChannel = interface Props { children: JSX.Element; + /** + * The client Element Call should use. + * + * An application hosting Element Call as a component already has a client, + * and owns the user's session; supplying it here means Element Call neither + * authenticates anyone nor manages their session. Left out, Element Call finds a client + * itself — from the widget API, or by restoring or creating a session of its + * own. + */ + client?: MatrixClient; } -export const ClientProvider: FC = ({ children }) => { - const navigate = useNavigate(); +export const ClientProvider: FC = ({ children, client }) => { + const leaveToHome = useLeaveToHome(); + const hostBridge = useHostBridge(); // null = signed out, undefined = loading const [initClientState, setInitClientState] = useState< InitResult | null | undefined - >(undefined); + >( + client === undefined + ? undefined + : // A supplied client belongs to the host, so there is no session of ours + // to restore and nothing to wait for. + { client, passwordlessUser: false }, + ); const initializing = useRef(false); useEffect(() => { + if (client !== undefined) { + // Nothing to load, but a host may hand us a different client later — on + // re-authenticating, say — so follow whichever one it has given us. + setInitClientState((current) => + current?.client === client + ? current + : { client, passwordlessUser: false }, + ); + // Analytics still need to follow the user's choices. + if (PosthogAnalytics.instance.isEnabled()) + PosthogAnalytics.instance.startListeningToSettingsChanges(); + return; + } // In case the component is mounted, unmounted, and remounted quickly (as // React does in strict mode), we need to make sure not to doubly initialize // the client. @@ -160,7 +189,7 @@ export const ClientProvider: FC = ({ children }) => { }) .catch((err) => logger.error(err)) .finally(() => (initializing.current = false)); - }, []); + }, [client]); const changePassword = useCallback( async (password: string) => { @@ -201,7 +230,6 @@ export const ClientProvider: FC = ({ children }) => { saveSession(session); setInitClientState({ - widgetApi: null, client, passwordlessUser: session.passwordlessUser, }); @@ -221,18 +249,20 @@ export const ClientProvider: FC = ({ children }) => { await client.clearStores(); clearSession(); setInitClientState(null); - await navigate("/"); + leaveToHome?.(); PosthogAnalytics.instance.logout(); PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest); - }, [navigate, initClientState?.client]); + }, [leaveToHome, initClientState?.client]); // To protect against multiple sessions writing to the same storage // simultaneously, we send a broadcast message that shuts down all other - // running instances of the app. This isn't necessary if the app is running in - // a widget though, since then it'll be mostly stateless. + // running instances of the app. Element Call only has storage of its own to + // protect when it created the session itself; given a client — by a host, or + // over the widget API — it is mostly stateless. + const ownsSession = client === undefined; useEffect(() => { - if (!widget) loadChannel?.postMessage({}); - }, []); + if (ownsSession) loadChannel?.postMessage({}); + }, [ownsSession]); const [alreadyOpenedErr, setAlreadyOpenedErr] = useState( undefined, @@ -307,64 +337,36 @@ export const ClientProvider: FC = ({ children }) => { initClientState.client.on(ClientEvent.Sync, onSync); } - if (initClientState.widgetApi) { - const reactSend = initClientState.widgetApi.hasCapability( - "org.matrix.msc2762.send.event:m.reaction", - ); - const redactSend = initClientState.widgetApi.hasCapability( - "org.matrix.msc2762.send.event:m.room.redaction", - ); - const reactRcv = initClientState.widgetApi.hasCapability( - "org.matrix.msc2762.receive.event:m.reaction", - ); - const redactRcv = initClientState.widgetApi.hasCapability( - "org.matrix.msc2762.receive.event:m.room.redaction", - ); - - if (!reactSend || !reactRcv || !redactSend || !redactRcv) { - logger.warn("Widget does not support reactions"); - setSupportsReactions(false); - } else { - setSupportsReactions(true); - } - } else { - setSupportsReactions(true); - } + if (!hostBridge.supportsReactions) + logger.warn("The host does not permit reactions"); + setSupportsReactions(hostBridge.supportsReactions); return (): void => { if (initClientState.client) { initClientState.client.removeListener(ClientEvent.Sync, onSync); } }; - }, [initClientState, onSync]); + }, [initClientState, onSync, hostBridge]); if (alreadyOpenedErr) { - return ; + return ; } return {children}; }; export type InitResult = { - widgetApi: WidgetApi | null; client: MatrixClient; passwordlessUser: boolean; }; +/** + * Restores or creates a session of Element Call's own. Only reached when no + * client was supplied for it to use. + */ async function loadClient(): Promise { - if (widget) { - // We're inside a widget, so let's engage *matryoshka mode* - logger.log("Using a matryoshka client"); - const client = await widget.client; - return { - widgetApi: widget.api, - client, - passwordlessUser: false, - }; - } else { - const { initSPA } = await import("./utils/spa"); - return initSPA(loadSession, clearSession); - } + const { initSPA } = await import("./utils/spa"); + return initSPA(loadSession, clearSession); } export interface Session { diff --git a/src/ErrorView.tsx b/src/ErrorView.tsx index 1309ae04..00ffba37 100644 --- a/src/ErrorView.tsx +++ b/src/ErrorView.tsx @@ -20,8 +20,8 @@ import { logger } from "matrix-js-sdk/lib/logger"; import { RageshakeButton } from "./settings/RageshakeButton"; import styles from "./ErrorView.module.css"; import { useUrlParams } from "./UrlParams"; -import { LinkButton } from "./button"; -import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts"; +import { useLeaveToHome } from "./LeaveToHomeContext"; +import { useHostBridge } from "./HostBridge.ts"; interface Props { Icon: ComponentType>; @@ -38,7 +38,6 @@ interface Props { */ fatal?: boolean; children: ReactNode; - widget: WidgetHelpers | null; } export const ErrorView: FC = ({ @@ -47,53 +46,47 @@ export const ErrorView: FC = ({ rageshake, fatal, children, - widget, }) => { const { t } = useTranslation(); const { confineToRoom } = useUrlParams(); + const hostBridge = useHostBridge(); + const leaveToHome = useLeaveToHome(); const onReload = useCallback(() => { window.location.href = "/"; }, []); - const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({ - widget, + const CloseButton: FC<{ close: () => Promise }> = ({ + close, }): ReactElement => { - // in widget mode we don't want to show the return home button but a close button - const closeWidget = (): void => { - widget.api.transport - .send(ElementWidgetActions.Close, {}) - .catch((e) => { - // What to do here? - logger.error("Failed to send close action", e); - }) - .finally(() => { - widget.api.transport.stop(); - }); + // When the host can dismiss us, offer that instead of a link home + const onClose = (): void => { + close().catch((e) => { + // What to do here? + logger.error("Failed to ask the host to close Element Call", e); + }); }; return ( - ); }; // Whether the error is considered fatal or pathname is `/` then reload the all app. - // If not then navigate to home page. - const ReturnToHomeButton = (): ReactElement => { - if (fatal || location.pathname === "/") { - return ( - - ); - } else { - return ( - - {t("return_home_button")} - - ); - } + // If not then navigate to home page. Neither applies when there is no home + // to go to. + const ReturnToHomeButton = (): ReactElement | null => { + if (leaveToHome === null) return null; + return ( + + ); }; return ( @@ -108,8 +101,8 @@ export const ErrorView: FC = ({ {rageshake && ( )} - {widget ? ( - + {hostBridge.close ? ( + ) : ( !confineToRoom && )} diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx index eb84010e..ea2a4a0d 100644 --- a/src/FullScreenView.tsx +++ b/src/FullScreenView.tsx @@ -17,7 +17,6 @@ import styles from "./FullScreenView.module.css"; import { useUrlParams } from "./UrlParams"; import { RichError } from "./RichError"; import { ErrorView } from "./ErrorView"; -import { type WidgetHelpers } from "./widget.ts"; interface FullScreenViewProps { className?: string; @@ -48,12 +47,11 @@ export const FullScreenView: FC = ({ interface ErrorPageProps { error: unknown; - widget: WidgetHelpers | null; } // Due to this component being used as the crash fallback for Sentry, which has // weird type requirements, we can't just give this a type of FC -export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => { +export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => { const { t } = useTranslation(); useEffect(() => { logger.error(error); @@ -66,7 +64,6 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => { error.richMessage ) : ( { @@ -112,17 +118,30 @@ interface HeaderLogoProps { className?: string; } +/** + * The logo, which is also the way home — when there is a home to go to. As a + * component there is not, and it is just the logo. + */ export const HeaderLogo: FC = ({ className }) => { const { t } = useTranslation(); + const leaveToHome = useLeaveToHome(); + const onClick = useCallback(() => leaveToHome?.(), [leaveToHome]); + if (leaveToHome === null) + return ( +
+ +
+ ); return ( - - + ); }; @@ -142,7 +161,7 @@ export const RoomHeaderInfo: FC = ({ participantCount, }) => { const { t } = useTranslation(); - const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg"; + const size = useRootSizeMatches(({ width }) => width <= 550) ? "sm" : "lg"; return (
diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts new file mode 100644 index 00000000..fb3779f4 --- /dev/null +++ b/src/HostBridge.test.ts @@ -0,0 +1,306 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, test, vi } from "vitest"; +import { type WidgetApi, WidgetApiToWidgetAction } from "matrix-widget-api"; +import EventEmitter from "events"; + +import { type Observable } from "rxjs"; + +import { + createWidgetHostBridge, + type HostBridge, + nullHostBridge, +} from "./HostBridge"; +import { ElementWidgetActions, type WidgetHelpers } from "./widget"; + +function mockWidget(api: Partial): WidgetHelpers { + return { + api: api as WidgetApi, + lazyActions: new EventEmitter(), + client: Promise.resolve(), + } as unknown as WidgetHelpers; +} + +/** A widget whose transport records what Element Call sends it. */ +function mockTransport(): { + send: ReturnType; + reply: ReturnType; + stop: ReturnType; +} { + return { + send: vi.fn().mockResolvedValue(undefined), + reply: vi.fn(), + stop: vi.fn(), + }; +} + +describe("createWidgetHostBridge", () => { + describe("telling the host what Element Call is doing", () => { + test("asks to be kept on screen, and to stop being", async () => { + const setAlwaysOnScreen = vi.fn().mockResolvedValue(true); + const bridge = createWidgetHostBridge(mockWidget({ setAlwaysOnScreen })); + + await bridge.setAlwaysOnScreen(true); + await bridge.setAlwaysOnScreen(false); + + expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(1, true); + expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(2, false); + }); + + test("reports that it has loaded", async () => { + const sendContentLoaded = vi.fn().mockResolvedValue(undefined); + const bridge = createWidgetHostBridge(mockWidget({ sendContentLoaded })); + + await bridge.contentLoaded(); + + expect(sendContentLoaded).toHaveBeenCalledOnce(); + }); + + test.each([ + ["notifyJoined", ElementWidgetActions.JoinCall, {}], + ["notifyHungUp", ElementWidgetActions.HangupCall, {}], + ] as const)("sends %s as %s", async (method, action, payload) => { + const transport = mockTransport(); + const bridge = createWidgetHostBridge(mockWidget({ transport } as never)); + + await bridge[method](); + + expect(transport.send).toHaveBeenCalledWith(action, payload); + }); + + test("sends the mute state the host needs to mirror", async () => { + const transport = mockTransport(); + const bridge = createWidgetHostBridge(mockWidget({ transport } as never)); + + await bridge.notifyDeviceMute({ + audio_enabled: true, + video_enabled: false, + }); + + expect(transport.send).toHaveBeenCalledWith( + ElementWidgetActions.DeviceMute, + { audio_enabled: true, video_enabled: false }, + ); + }); + }); + + describe("relaying what the host asks for", () => { + /** Emits a widget action the way widget.ts does, and returns the event. */ + function askHost( + widget: WidgetHelpers, + action: string, + data: unknown, + ): CustomEvent { + const ev = new CustomEvent(action, { detail: { action, data } }); + widget.lazyActions.emit(action, ev); + return ev; + } + + // Selectors rather than keys, so each stream keeps its own request type + const inboundStreams: [ + name: string, + select: (bridge: HostBridge) => Observable<{ data: unknown }>, + action: string, + ][] = [ + [ + "themeChange$", + (bridge) => bridge.themeChange$, + WidgetApiToWidgetAction.ThemeChange, + ], + ["join$", (bridge) => bridge.join$, ElementWidgetActions.JoinCall], + ["hangUp$", (bridge) => bridge.hangUp$, ElementWidgetActions.HangupCall], + [ + "deviceMute$", + (bridge) => bridge.deviceMute$, + ElementWidgetActions.DeviceMute, + ], + ]; + + test.each(inboundStreams)( + "surfaces %s with the host's data", + (_name, select, action) => { + const widget = mockWidget({ transport: mockTransport() } as never); + const bridge = createWidgetHostBridge(widget); + const seen: unknown[] = []; + select(bridge).subscribe((request) => seen.push(request.data)); + + askHost(widget, action, { some: "payload" }); + + expect(seen).toEqual([{ some: "payload" }]); + }, + ); + + test("replies to the host against the request it made", () => { + const transport = mockTransport(); + const widget = mockWidget({ transport } as never); + const bridge = createWidgetHostBridge(widget); + bridge.deviceMute$.subscribe((request) => + request.reply({ audio_enabled: false, video_enabled: true }), + ); + + const ev = askHost(widget, ElementWidgetActions.DeviceMute, { + audio_enabled: false, + }); + + expect(transport.reply).toHaveBeenCalledWith(ev.detail, { + audio_enabled: false, + video_enabled: true, + }); + }); + + test("still replies when there is nothing to say", () => { + const transport = mockTransport(); + const widget = mockWidget({ transport } as never); + const bridge = createWidgetHostBridge(widget); + bridge.hangUp$.subscribe((request) => request.reply()); + + const ev = askHost(widget, ElementWidgetActions.HangupCall, {}); + + // The widget API requires an answer, so an empty reply becomes {} + expect(transport.reply).toHaveBeenCalledWith(ev.detail, {}); + }); + + test("stops listening once unsubscribed", () => { + const widget = mockWidget({ transport: mockTransport() } as never); + const bridge = createWidgetHostBridge(widget); + const seen: unknown[] = []; + const subscription = bridge.hangUp$.subscribe((r) => seen.push(r.data)); + + subscription.unsubscribe(); + askHost(widget, ElementWidgetActions.HangupCall, {}); + + expect(seen).toEqual([]); + }); + }); + + describe("downloadMedia", () => { + const mxcUri = "mxc://example.org/alice-avatar"; + + test("passes a Blob through unchanged", async () => { + const file = new Blob([]); + const bridge = createWidgetHostBridge( + mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file }) }), + ); + + await expect(bridge.downloadMedia!(mxcUri)).resolves.toBe(file); + }); + + test("decodes a base64 string into a Blob", async () => { + const bridge = createWidgetHostBridge( + mockWidget({ + // "hello" in base64 + downloadFile: vi.fn().mockResolvedValue({ file: "aGVsbG8=" }), + }), + ); + + const blob = await bridge.downloadMedia!(mxcUri); + + expect(blob).toBeInstanceOf(Blob); + // The five decoded bytes, rather than the eight characters of base64 — + // which is what we'd get if the string were stored verbatim. + expect(blob.size).toBe(5); + }); + + test("rejects a file format it does not understand", async () => { + const bridge = createWidgetHostBridge( + mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file: 42 }) }), + ); + + await expect(bridge.downloadMedia!(mxcUri)).rejects.toThrow( + "Downloaded file format is not supported", + ); + }); + }); + + describe("close", () => { + test("asks the host to close, then stops the transport", async () => { + const transport = { + send: vi.fn().mockResolvedValue(undefined), + stop: vi.fn(), + }; + const bridge = createWidgetHostBridge(mockWidget({ transport } as never)); + + await bridge.close!(); + + expect(transport.send).toHaveBeenCalledWith( + ElementWidgetActions.Close, + {}, + ); + expect(transport.stop).toHaveBeenCalledOnce(); + }); + + test("stops the transport even when the host refuses to close", async () => { + const transport = { + send: vi.fn().mockRejectedValue(new Error("no")), + stop: vi.fn(), + }; + const bridge = createWidgetHostBridge(mockWidget({ transport } as never)); + + // Leaving the messaging live would leave the close affordance dead + await expect(bridge.close!()).rejects.toThrow("no"); + expect(transport.stop).toHaveBeenCalledOnce(); + }); + }); + + test("does not offer profile changes, since the host signed the user in", () => { + const bridge = createWidgetHostBridge(mockWidget({})); + expect(bridge.supportsProfileChanges).toBe(false); + }); + + test("allows joining unmuted on the intent, since the host asked for the call", () => { + const bridge = createWidgetHostBridge(mockWidget({})); + expect(bridge.allowJoinUnmutedViaIntent).toBe(true); + }); + + describe("supportsReactions", () => { + const capabilities = [ + "org.matrix.msc2762.send.event:m.reaction", + "org.matrix.msc2762.send.event:m.room.redaction", + "org.matrix.msc2762.receive.event:m.reaction", + "org.matrix.msc2762.receive.event:m.room.redaction", + ]; + + test("is true when the host grants every reaction capability", () => { + const bridge = createWidgetHostBridge( + mockWidget({ hasCapability: () => true }), + ); + + expect(bridge.supportsReactions).toBe(true); + }); + + test.each(capabilities)("is false without %s", (missing) => { + const bridge = createWidgetHostBridge( + mockWidget({ hasCapability: (c) => c !== missing }), + ); + + expect(bridge.supportsReactions).toBe(false); + }); + }); +}); + +describe("nullHostBridge", () => { + test("offers no way to close, so the interface falls back to navigation", () => { + expect(nullHostBridge.close).toBeUndefined(); + }); + + test("supports profile changes, since Element Call signed the user in itself", () => { + expect(nullHostBridge.supportsProfileChanges).toBe(true); + }); + + test("offers no media download, so Element Call uses its own client", () => { + expect(nullHostBridge.downloadMedia).toBeUndefined(); + }); + + test("supports reactions, since nothing is mediating its homeserver access", () => { + expect(nullHostBridge.supportsReactions).toBe(true); + }); + + test("does not allow joining unmuted on the intent, since nobody vouched for it", () => { + expect(nullHostBridge.allowJoinUnmutedViaIntent).toBe(false); + }); +}); diff --git a/src/HostBridge.ts b/src/HostBridge.ts new file mode 100644 index 00000000..2ba50257 --- /dev/null +++ b/src/HostBridge.ts @@ -0,0 +1,248 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { createContext, use } from "react"; +import { fromEvent, map, NEVER, type Observable } from "rxjs"; +import { + type IWidgetApiRequest, + type IWidgetApiRequestData, + WidgetApiToWidgetAction, +} from "matrix-widget-api"; + +import { + ElementWidgetActions, + type JoinCallData, + type WidgetHelpers, +} from "./widget"; + +// Note: these are type aliases rather than interfaces so that they satisfy the +// widget API's index-signature payload types. + +/** The mute state Element Call and its host exchange. */ +export type DeviceMuteState = { + audio_enabled: boolean; + video_enabled: boolean; +}; + +/** + * A mute state change requested by the host. An absent field means "leave this + * one as it is". + */ +export type DeviceMuteRequest = { + audio_enabled?: boolean; + video_enabled?: boolean; +}; + +/** + * Something the host has asked of Element Call, which it is expected to + * acknowledge. + */ +export interface HostRequest { + data: Data; + /** Acknowledges the request. Should be called exactly once. */ + reply(reply: Reply): void; +} + +/** + * Element Call's view of the application hosting it. + * + * Element Call can run as its own page, as a widget inside a Matrix client, or + * as a component inside one. Only the last two give it a host, and each of + * them reaches it by a different route — so everything Element Call needs from + * whatever is hosting it goes through this interface, rather than being + * expressed in terms of the widget API. + * + * This covers the interactions Element Call has with its host while running. + * The Matrix client it talks to is supplied separately, at startup. + */ +export interface HostBridge { + // What Element Call tells the host. + + /** + * Asks the host to keep Element Call on screen (or stop doing so), so that a + * call in progress is not torn down when the user navigates elsewhere. + */ + setAlwaysOnScreen(alwaysOnScreen: boolean): Promise; + /** Tells the host that Element Call has finished loading. */ + contentLoaded(): Promise; + /** Tells the host that the user has joined the call. */ + notifyJoined(): Promise; + /** Tells the host that the user has hung up. */ + notifyHungUp(): Promise; + /** Tells the host the user's current audio and video mute state. */ + notifyDeviceMute(state: DeviceMuteState): Promise; + /** + * Asks the host to close Element Call, and stops communicating with it. No + * further calls should be made on this bridge afterwards. + * + * Absent when the host has no way to dismiss Element Call — standalone, the + * user navigates away instead — so its presence is what tells the interface + * whether to offer a close affordance. + */ + close?(): Promise; + + // What the host asks of Element Call. + + /** The host has changed the theme Element Call should use. */ + themeChange$: Observable>; + /** The host wants a preloaded Element Call to join the call now. */ + join$: Observable>; + /** The host wants Element Call to leave the call. */ + hangUp$: Observable>>; + /** The host wants to change, or read back, the device mute state. */ + deviceMute$: Observable>; + + // What the host is, and is capable of. + + /** + * Whether Element Call may offer to change the user's profile — their + * display name and avatar. Only when the account is Element Call's own, + * which is to say standalone: a widget's host and an application hosting + * the component both signed the user in themselves, so the profile is theirs + * to manage and Element Call must not offer to edit it. + */ + readonly supportsProfileChanges: boolean; + /** Whether the host permits Element Call to send and receive reactions. */ + readonly supportsReactions: boolean; + /** + * Whether the user may be put into a call unmuted on the strength of the + * intent alone, when the lobby is skipped and so they get no chance to check + * their devices first. A host that asked for the call on the user's behalf + * has that much of their trust; standalone Element Call does not, and starts + * them muted instead. + */ + readonly allowJoinUnmutedViaIntent: boolean; + /** + * Fetches media on Element Call's behalf, for hosts that do not give it + * direct access to the homeserver. Absent when Element Call should fetch + * media itself using its own client. + */ + downloadMedia?(mxcUri: string): Promise; +} + +/** + * A bridge to nowhere, for when Element Call has no host — that is, when it is + * running as its own page and talks to the homeserver directly. + */ +export const nullHostBridge: HostBridge = { + setAlwaysOnScreen: async () => {}, + contentLoaded: async () => {}, + notifyJoined: async () => {}, + notifyHungUp: async () => {}, + notifyDeviceMute: async () => {}, + themeChange$: NEVER, + join$: NEVER, + hangUp$: NEVER, + deviceMute$: NEVER, + // Standalone, the account is Element Call's own: it signed the user in, so + // it may offer to change the profile. + supportsProfileChanges: true, + // Standalone Element Call reaches the homeserver itself, so nothing is + // withholding these from it. + supportsReactions: true, + // Standalone, nobody vouched for the intent: it came from a URL, which is + // not enough to switch the user's camera and microphone on unasked. + allowJoinUnmutedViaIntent: false, +}; + +/** Bridges to a host that Element Call is a widget of. */ +export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge { + const requests = ( + action: string, + ): Observable> => + ( + fromEvent(widget.lazyActions, action) as Observable< + CustomEvent + > + ).pipe( + map((ev) => ({ + data: ev.detail.data as Data, + // The widget API requires a reply for every request, and carries the + // payload as a plain object, so an empty reply becomes {}. + reply: (reply: Reply): void => + widget.api.transport.reply(ev.detail, reply ?? {}), + })), + ); + + const send = async ( + action: ElementWidgetActions, + data: IWidgetApiRequestData = {}, + ): Promise => { + await widget.api.transport.send(action, data); + }; + + return { + setAlwaysOnScreen: async (alwaysOnScreen) => { + await widget.api.setAlwaysOnScreen(alwaysOnScreen); + }, + contentLoaded: async () => widget.api.sendContentLoaded(), + notifyJoined: async () => send(ElementWidgetActions.JoinCall), + notifyHungUp: async () => send(ElementWidgetActions.HangupCall), + notifyDeviceMute: async (state) => + send(ElementWidgetActions.DeviceMute, state), + close: async () => { + try { + await send(ElementWidgetActions.Close); + } finally { + // Stop regardless of whether the host acknowledged the request. A host + // that rejects or never answers would otherwise leave the messaging + // live, and the close affordance doing nothing at all. + widget.api.transport.stop(); + } + }, + themeChange$: requests(WidgetApiToWidgetAction.ThemeChange), + join$: requests(ElementWidgetActions.JoinCall), + hangUp$: requests(ElementWidgetActions.HangupCall), + deviceMute$: requests(ElementWidgetActions.DeviceMute), + // The client we are a widget of signed the user in, so the profile is its + // to manage + supportsProfileChanges: false, + // The client we are a widget of asked for this call on the user's behalf, + // so its intent may be trusted to say whether they start unmuted + allowJoinUnmutedViaIntent: true, + // Element Call needs the host's permission to send reactions on its behalf. + // Read on access rather than up front: the widget API negotiates its + // capabilities asynchronously, and the bridge is built before that settles. + get supportsReactions(): boolean { + return ( + widget.api.hasCapability("org.matrix.msc2762.send.event:m.reaction") && + widget.api.hasCapability( + "org.matrix.msc2762.send.event:m.room.redaction", + ) && + widget.api.hasCapability( + "org.matrix.msc2762.receive.event:m.reaction", + ) && + widget.api.hasCapability( + "org.matrix.msc2762.receive.event:m.room.redaction", + ) + ); + }, + downloadMedia: async (mxcUri) => { + const { file } = await widget.api.downloadFile(mxcUri); + if (file instanceof Blob) return file; + if (typeof file === "string") + // it is a base64 string + return new Blob([Uint8Array.from(atob(file), (c) => c.charCodeAt(0))]); + throw new Error( + `Downloaded file format is not supported: ${typeof file}`, + ); + }, + }; +} + +const HostBridgeContext = createContext(null); + +export const HostBridgeProvider = HostBridgeContext.Provider; + +/** + * The application hosting Element Call. + * + * Defaults to {@link nullHostBridge}, so that tests and stories, which have no + * host, need no provider. + */ +export const useHostBridge = (): HostBridge => + use(HostBridgeContext) ?? nullHostBridge; diff --git a/src/LeaveToHomeContext.ts b/src/LeaveToHomeContext.ts new file mode 100644 index 00000000..4af56c21 --- /dev/null +++ b/src/LeaveToHomeContext.ts @@ -0,0 +1,29 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { createContext, use } from "react"; + +/** + * How the user leaves the call for wherever they came from: the standalone + * app's home page, with its list of recent calls. + * + * The call itself has no idea where that is, or whether there is such a place + * at all. Standalone there is, and the shell navigates to it; as a component + * there is not — the host decides what happens after a call — so nothing is + * supplied, and the call offers no way out of its own. This is what lets the + * call be rendered without a router. + */ +const LeaveToHomeContext = createContext<(() => void) | null>(null); + +export const LeaveToHomeProvider = LeaveToHomeContext.Provider; + +/** + * The way out of the call, or null when there is nowhere to go and the call + * should not offer one. + */ +export const useLeaveToHome = (): (() => void) | null => + use(LeaveToHomeContext); diff --git a/src/MediaDevicesContext.ts b/src/MediaDevicesContext.ts index 801219b0..50de5bc9 100644 --- a/src/MediaDevicesContext.ts +++ b/src/MediaDevicesContext.ts @@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details. */ import { createContext, use, useMemo } from "react"; -import { useObservableEagerState } from "observable-hooks"; import { type MediaDevices } from "./state/MediaDevices"; +import { useBehavior } from "./useBehavior"; export const MediaDevicesContext = createContext( undefined, @@ -35,7 +35,7 @@ export const useEarpieceAudioConfig = (): { volume: number; } => { const devices = useMediaDevices(); - const audioOutput = useObservableEagerState(devices.audioOutput.selected$); + const audioOutput = useBehavior(devices.audioOutput.selected$); const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false; return { // We use only the right speaker (pan = 1) for the earpiece. diff --git a/src/Modal.module.css b/src/Modal.module.css index ae8006a5..30327209 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -48,7 +48,7 @@ Please see LICENSE in the repository root for full details. --handle-inset-block-end: var(--cpd-space-4x); } -body[data-platform="ios"] .drawer { +[data-element-call-root][data-platform="ios"] .drawer { --border-radius: 10px; --handle-block-size: 5px; --handle-inline-size: 36px; diff --git a/src/Modal.tsx b/src/Modal.tsx index e6ffdf45..46316d37 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -24,6 +24,7 @@ import { Heading, Glass } from "@vector-im/compound-web"; import styles from "./Modal.module.css"; import overlayStyles from "./Overlay.module.css"; import { useMediaQuery } from "./useMediaQuery"; +import { useRootElement } from "./RootElementContext"; export interface Props { title: string; @@ -78,6 +79,7 @@ export const Modal: FC = ({ ...rest }) => { const { t } = useTranslation(); + const rootElement = useRootElement(); // Empirically, Chrome on Android can end up not matching (hover: none), but // still matching (pointer: coarse) :/ const touchscreen = useMediaQuery("(hover: none) or (pointer: coarse)"); @@ -100,7 +102,7 @@ export const Modal: FC = ({ onOpenChange={onOpenChange} dismissible={onDismiss !== undefined} > - + = ({ return ( - + diff --git a/src/QrCode.tsx b/src/QrCode.tsx index 09bd92ea..da569395 100644 --- a/src/QrCode.tsx +++ b/src/QrCode.tsx @@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details. import { type FC, useEffect, useState } from "react"; import { toDataURL } from "qrcode"; import classNames from "classnames"; -import { t } from "i18next"; +import { useTranslation } from "react-i18next"; import styles from "./QrCode.module.css"; @@ -18,6 +18,7 @@ interface Props { } export const QrCode: FC = ({ data, className }) => { + const { t } = useTranslation(); const [url, setUrl] = useState(null); useEffect(() => { diff --git a/src/RichError.tsx b/src/RichError.tsx index 699486e2..abacf0b3 100644 --- a/src/RichError.tsx +++ b/src/RichError.tsx @@ -10,7 +10,6 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import type { FC, ReactNode } from "react"; import { ErrorView } from "./ErrorView"; -import { widget } from "./widget.ts"; /** * An error consisting of a terse message to be logged to the console and a @@ -32,11 +31,7 @@ const OpenElsewhere: FC = () => { const { t } = useTranslation(); return ( - +

{t("error.open_elsewhere_description", { brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call", diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts new file mode 100644 index 00000000..3eda39f5 --- /dev/null +++ b/src/RootElementContext.ts @@ -0,0 +1,43 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { createContext, use } from "react"; + +/** + * The element that Element Call treats as the root of its own interface. + * + * Element Call decorates this element with the theme, layout and background + * attributes its stylesheets key off, and portals its modals into it. When + * Element Call owns the page this is simply the document body; as a component + * it is the container the host mounted it into, so that Element Call does not + * reach outside its own subtree. + * + * The stylesheets find this element by its `data-element-call-root` attribute, + * which {@link useTheme} sets along with the platform and theme, so they no + * longer depend on it being the body. + * + * What remains body-specific is the standalone page's own furniture: the + * `body` rule in `index.css` still sets the page background and margin, and + * `index.html` starts the body hidden with `no-theme` until the theme lands. + * Neither applies when a host mounts Element Call into a container of its own. + */ +const RootElementContext = createContext(null); + +/** + * Supplies the element Element Call should confine itself to. The standalone + * and widget builds need no provider, since for them that element is the body. + */ +export const RootElementProvider = RootElementContext.Provider; + +/** + * The element Element Call should decorate and portal into. + * + * Defaults to the document body, so that the standalone and widget builds work + * without a provider. + */ +export const useRootElement = (): HTMLElement => + use(RootElementContext) ?? document.body; diff --git a/src/Toast.tsx b/src/Toast.tsx index 83e220bc..0a2a2f1b 100644 --- a/src/Toast.tsx +++ b/src/Toast.tsx @@ -25,6 +25,7 @@ import { Text } from "@vector-im/compound-web"; import styles from "./Toast.module.css"; import overlayStyles from "./Overlay.module.css"; +import { useRootElement } from "./RootElementContext"; interface Props { /** @@ -64,6 +65,7 @@ export const Toast: FC = ({ Icon, modal = true, }) => { + const rootElement = useRootElement(); const onOpenChange = useCallback( (open: boolean) => { if (!open) onDismiss(); @@ -104,7 +106,11 @@ export const Toast: FC = ({ return ( - {modal ? {content} : content} + {modal ? ( + {content} + ) : ( + content + )} ); }; diff --git a/src/UrlConfiguration.ts b/src/UrlConfiguration.ts new file mode 100644 index 00000000..9b1678a7 --- /dev/null +++ b/src/UrlConfiguration.ts @@ -0,0 +1,248 @@ +/* +Copyright 2022-2024 New Vector Ltd. +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/** + * How Element Call can be told to behave, and what each intent means. + * + * Kept apart from {@link UrlParams} on purpose: everything here is constants, + * types and one function of them, so that a host of the component can import + * these — the enums it needs as values, the defaults an intent implies — without + * loading Element Call itself. UrlParams, which reads them from a URL, needs + * the router, the config and the rest of the app; this module must not. + * `component/api.ts` is built from it as an entry point of its own. + */ + +import { + type RTCCallIntent, + type RTCNotificationType, +} from "matrix-js-sdk/lib/matrixrtc"; + +import { platform } from "./Platform"; + +export enum UserIntent { + StartNewCall = "start_call", + JoinExistingCall = "join_existing", + StartNewCallVoice = "start_call_voice", + JoinExistingCallVoice = "join_existing_voice", + StartNewCallDM = "start_call_dm", + StartNewCallDMVoice = "start_call_dm_voice", + JoinExistingCallDM = "join_existing_dm", + JoinExistingCallDMVoice = "join_existing_dm_voice", + Unknown = "unknown", +} + +export enum HeaderStyle { + None = "none", + Standard = "standard", + AppBar = "app_bar", +} + +export enum BackgroundStyle { + Solid = "solid", + Gradient = "gradient", +} + +/** + * The configuration for the app, which can be set via URL parameters. + * Those property are different to the UrlProperties, since they are all optional + * and configure the behavior of the app. Their value is the same if EC is used in + * the same context but with different accounts/users. + * + * Their defaults can be controlled by the `intent` property. + */ +export interface UrlConfiguration { + /** + * Whether the app should keep the user confined to the current call/room. + */ + confineToRoom: boolean; + /** + * Whether the app should pause before joining the call until it sees an + * io.element.join widget action, allowing it to be preloaded. + */ + preload: boolean; + /** + * The style of headers to show. "standard" is the default arrangement, "none" + * hides the header entirely, and "app_bar" produces a header with a back + * button like you might see in mobile apps. The callback for the back button + * is window.controls.onBackButtonPressed. + */ + header: HeaderStyle; + /** + * Whether the controls should be shown. For screen recording no controls can be desired. + */ + showControls: boolean; + /** + * Whether to hide the screen-sharing button. + */ + hideScreensharing: boolean; + + /** + * Whether the app is allowed to use fallback STUN servers for ICE in case the + * user's homeserver doesn't provide any. + */ + allowIceFallback: boolean; + + /** + * Whether the app should use per participant keys for E2EE. + */ + perParticipantE2EE: boolean; + /** + * Whether the global JS controls for audio output devices should be enabled, + * allowing the list of output devices to be controlled by the app hosting + * Element Call. + */ + controlledAudioDevices: boolean; + /** + * Setting this flag skips the lobby and brings you in the call directly. + * In the widget this can be combined with preload to pass the device settings + * with the join widget action. + */ + skipLobby: boolean; + /** + * Setting this flag makes element call show the lobby after leaving a call. + * This is useful for video rooms. + */ + returnToLobby: boolean; + /** + * Whether and what type of notification EC should send, when the user joins the call. + */ + sendNotificationType?: RTCNotificationType; + /** + * Whether the app should automatically leave the call when there + * is no one left in the call. + * This is one part to make the call matrixRTC session behave like a telephone call. + */ + autoLeaveWhenOthersLeft: boolean; + + /** + * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up). + * This is a no-op if not combined with sendNotificationType. + * + * This entails: + * - show ui that it is awaiting an answer + * - play a sound that indicates that it is awaiting an answer + * - auto-dismiss the call widget once the notification lifetime expires on the receivers side. + */ + waitForCallPickup: boolean; + + /** + * Whether to enable echo cancellation for audio capture. + * Defaults to true. + */ + echoCancellation?: boolean; + /** + * Whether to enable noise suppression for audio capture. + * Defaults to true. + */ + noiseSuppression?: boolean; + /** + * Whether to enable auto gain control for audio capture. + * Defaults to true. Lotus turns this OFF for the in-source ML denoise tier so + * the browser's dynamic gain doesn't fight the ML model (pumping artifacts). + */ + autoGainControl?: boolean; + + callIntent?: RTCCallIntent; +} + +// If you need to add a new flag to this interface, prefer a name that describes +// a specific behavior (such as 'confineToRoom'), rather than one that describes +// the situations that call for this behavior ('isEmbedded'). This makes it +// clearer what each flag means, and helps us avoid coupling Element Call's +// behavior to the needs of specific consumers. + +/** + * The configuration implied by what the user meant to do — if they pressed a + * Start Call button this would be `start_call`, and if they pressed Join Call, + * `join_existing`. + * + * These are platform-specific defaults, so that a host can start a call by + * saying what the user asked for rather than by setting every parameter itself, + * and so that what each intent means is Element Call's decision, made in one + * place. A host that wants something else states it alongside the intent. + * + * {@link UserIntent.Unknown} means no intent was stated, and gives the + * standalone app's defaults: Element Call owns the whole page, so it offers the + * way out of the room that a hosted call must not. + */ +export function configurationForIntent(intent: UserIntent): UrlConfiguration { + // Only constants and `platform` here, so that this depends on nothing but + // the intent. + let preset: UrlConfiguration = { + confineToRoom: true, + preload: false, + header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar, + showControls: true, + hideScreensharing: false, + allowIceFallback: true, + perParticipantE2EE: true, + controlledAudioDevices: platform === "desktop" ? false : true, + skipLobby: true, + returnToLobby: false, + sendNotificationType: "notification", + autoLeaveWhenOthersLeft: false, + waitForCallPickup: false, + }; + switch (intent) { + case UserIntent.StartNewCall: + preset.skipLobby = false; + preset.callIntent = "video"; + break; + case UserIntent.JoinExistingCall: + // On desktop this will be overridden based on which button was used to join the call + preset.skipLobby = false; + preset.callIntent = "video"; + break; + case UserIntent.StartNewCallVoice: + preset.skipLobby = false; + preset.callIntent = "audio"; + break; + case UserIntent.JoinExistingCallVoice: + // On desktop this will be overridden based on which button was used to join the call + preset.skipLobby = false; + preset.callIntent = "audio"; + break; + case UserIntent.StartNewCallDMVoice: + preset.callIntent = "audio"; + // Fall through + case UserIntent.StartNewCallDM: + preset.skipLobby = true; + preset.sendNotificationType = "ring"; + preset.autoLeaveWhenOthersLeft = true; + preset.waitForCallPickup = true; + preset.callIntent = preset.callIntent ?? "video"; + break; + case UserIntent.JoinExistingCallDMVoice: + preset.callIntent = "audio"; + // Fall through + case UserIntent.JoinExistingCallDM: + // On desktop this will be overridden based on which button was used to join the call + preset.skipLobby = true; + preset.autoLeaveWhenOthersLeft = true; + preset.callIntent = preset.callIntent ?? "video"; + break; + // Non widget usecase defaults + default: + preset = { + confineToRoom: false, + preload: false, + header: HeaderStyle.Standard, + showControls: true, + hideScreensharing: false, + allowIceFallback: false, + perParticipantE2EE: false, + controlledAudioDevices: false, + skipLobby: false, + returnToLobby: false, + sendNotificationType: undefined, + autoLeaveWhenOthersLeft: false, + waitForCallPickup: false, + }; + } + return preset; +} diff --git a/src/UrlParams.test.ts b/src/UrlParams.test.ts index acbc4678..871b1519 100644 --- a/src/UrlParams.test.ts +++ b/src/UrlParams.test.ts @@ -11,10 +11,14 @@ import { logger } from "matrix-js-sdk/lib/logger"; import * as PlatformMod from "../src/Platform"; import { + BackgroundStyle, + configurationForIntent, getRoomIdentifierFromUrl, computeUrlParams, HeaderStyle, getUrlParams, + componentProperties, + UserIntent, } from "../src/UrlParams"; import { mockConfig } from "./utils/test"; @@ -348,6 +352,50 @@ describe("UrlParams", () => { callIntent: "audio", }); }); + + it("accepts start_call_dm_voice", () => { + expect( + computeUrlParams( + "?intent=start_call_dm_voice&widgetId=1234&parentUrl=parent.org", + ), + ).toMatchObject({ + ...startNewCallDefaults("desktop"), + // A DM rings the other side and waits for them, whichever platform + sendNotificationType: "ring", + autoLeaveWhenOthersLeft: true, + waitForCallPickup: true, + callIntent: "audio", + }); + }); + + it("accepts join_existing_dm", () => { + expect( + computeUrlParams( + "?intent=join_existing_dm&widgetId=1234&parentUrl=parent.org", + ), + ).toMatchObject({ + ...joinExistingCallDefaults("desktop"), + // Straight in: the other side is already waiting + skipLobby: true, + autoLeaveWhenOthersLeft: true, + waitForCallPickup: false, + callIntent: "video", + }); + }); + + it("accepts join_existing_dm_voice", () => { + expect( + computeUrlParams( + "?intent=join_existing_dm_voice&widgetId=1234&parentUrl=parent.org", + ), + ).toMatchObject({ + ...joinExistingCallDefaults("desktop"), + skipLobby: true, + autoLeaveWhenOthersLeft: true, + waitForCallPickup: false, + callIntent: "audio", + }); + }); }); describe("skipLobby", () => { @@ -452,4 +500,48 @@ describe("UrlParams", () => { ); }); }); + + // What Element Call runs with when a host embeds it as a component, which + // has no URL of its own for any of this to come from + describe("hosted defaults", () => { + it("assume nothing about a session or a page", () => { + expect(componentProperties).toMatchObject({ + // The host is not a widget host, and supplies the client itself, so + // none of the widget or session plumbing applies + isWidget: false, + widgetId: null, + parentUrl: null, + userId: null, + deviceId: null, + baseUrl: null, + homeserver: null, + // The gradient is drawn by a `position: fixed` pseudo-element, which + // would escape the container and cover the host's own interface + background: BackgroundStyle.Solid, + }); + }); + + it("keep a hosted call inside its room", () => { + const hosted = configurationForIntent(UserIntent.JoinExistingCall); + expect(hosted).toMatchObject({ + // A host owns navigation, so Element Call must not offer a way out of + // the room + confineToRoom: true, + perParticipantE2EE: true, + // The lobby first, so that the user picks their devices rather than + // being thrown into the call by the act of being rendered + skipLobby: false, + }); + // No Element Call branding inside someone else's application + expect(hosted.header).not.toBe(HeaderStyle.Standard); + }); + + it("fall back to the standalone app's when no intent is stated", () => { + expect(configurationForIntent(UserIntent.Unknown)).toMatchObject({ + confineToRoom: false, + header: HeaderStyle.Standard, + perParticipantE2EE: false, + }); + }); + }); }); diff --git a/src/UrlParams.ts b/src/UrlParams.ts index d47e1299..b9fde74f 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -6,50 +6,39 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { useMemo } from "react"; +import { createContext, use, useMemo } from "react"; import { useLocation } from "react-router-dom"; import { logger } from "matrix-js-sdk/lib/logger"; -import { - type RTCCallIntent, - type RTCNotificationType, -} from "matrix-js-sdk/lib/matrixrtc"; import { pickBy } from "lodash-es"; import { Config } from "./config/Config"; import { type EncryptionSystem } from "./e2ee/sharedKeyManagement"; import { E2eeType } from "./e2ee/e2eeType"; -import { platform } from "./Platform"; +import { + BackgroundStyle, + configurationForIntent, + HeaderStyle, + type UrlConfiguration, + UserIntent, +} from "./UrlConfiguration"; import { redact } from "./utils/redact"; +// Moved to their own module, so that a host can import them without the rest +// of this one; re-exported here as they always were +export { + BackgroundStyle, + configurationForIntent, + HeaderStyle, + type UrlConfiguration, + UserIntent, +} from "./UrlConfiguration"; + interface RoomIdentifier { roomAlias: string | null; roomId: string | null; viaServers: string[]; } -export enum UserIntent { - StartNewCall = "start_call", - JoinExistingCall = "join_existing", - StartNewCallVoice = "start_call_voice", - JoinExistingCallVoice = "join_existing_voice", - StartNewCallDM = "start_call_dm", - StartNewCallDMVoice = "start_call_dm_voice", - JoinExistingCallDM = "join_existing_dm", - JoinExistingCallDMVoice = "join_existing_dm_voice", - Unknown = "unknown", -} - -export enum HeaderStyle { - None = "none", - Standard = "standard", - AppBar = "app_bar", -} - -export enum BackgroundStyle { - Solid = "solid", - Gradient = "gradient", -} - /** * The UrlProperties are used to pass required data to the widget. * Those are different in different rooms, users, devices. They do not configure the behavior of the @@ -59,6 +48,17 @@ export interface UrlProperties { // Widget api related params widgetId: string | null; parentUrl: string | null; + /** + * Whether Element Call was started as a widget of a Matrix client, which is + * to say whether it was given a widget ID and a parent to talk to. + * + * Only meaningful to the standalone and widget builds, which own the URL — + * so use it for decisions that belong to the app shell, such as whether + * Element Call is responsible for authenticating the user. Anything the call + * interface itself needs to know about its host should come from the host + * bridge instead. + */ + isWidget: boolean; /** * Anything about what room we're pointed to should be from useRoomIdentifier which * parses the path and resolves alias with respect to the default server name, however @@ -155,115 +155,6 @@ export interface UrlProperties { */ background: BackgroundStyle; } - -/** - * The configuration for the app, which can be set via URL parameters. - * Those property are different to the UrlProperties, since they are all optional - * and configure the behavior of the app. Their value is the same if EC is used in - * the same context but with different accounts/users. - * - * Their defaults can be controlled by the `intent` property. - */ -export interface UrlConfiguration { - /** - * Whether the app should keep the user confined to the current call/room. - */ - confineToRoom: boolean; - /** - * Whether the app should pause before joining the call until it sees an - * io.element.join widget action, allowing it to be preloaded. - */ - preload: boolean; - /** - * The style of headers to show. "standard" is the default arrangement, "none" - * hides the header entirely, and "app_bar" produces a header with a back - * button like you might see in mobile apps. The callback for the back button - * is window.controls.onBackButtonPressed. - */ - header: HeaderStyle; - /** - * Whether the controls should be shown. For screen recording no controls can be desired. - */ - showControls: boolean; - /** - * Whether to hide the screen-sharing button. - */ - hideScreensharing: boolean; - - /** - * Whether the app is allowed to use fallback STUN servers for ICE in case the - * user's homeserver doesn't provide any. - */ - allowIceFallback: boolean; - - /** - * Whether the app should use per participant keys for E2EE. - */ - perParticipantE2EE: boolean; - /** - * Whether the global JS controls for audio output devices should be enabled, - * allowing the list of output devices to be controlled by the app hosting - * Element Call. - */ - controlledAudioDevices: boolean; - /** - * Setting this flag skips the lobby and brings you in the call directly. - * In the widget this can be combined with preload to pass the device settings - * with the join widget action. - */ - skipLobby: boolean; - /** - * Setting this flag makes element call show the lobby after leaving a call. - * This is useful for video rooms. - */ - returnToLobby: boolean; - /** - * Whether and what type of notification EC should send, when the user joins the call. - */ - sendNotificationType?: RTCNotificationType; - /** - * Whether the app should automatically leave the call when there - * is no one left in the call. - * This is one part to make the call matrixRTC session behave like a telephone call. - */ - autoLeaveWhenOthersLeft: boolean; - - /** - * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up). - * This is a no-op if not combined with sendNotificationType. - * - * This entails: - * - show ui that it is awaiting an answer - * - play a sound that indicates that it is awaiting an answer - * - auto-dismiss the call widget once the notification lifetime expires on the receivers side. - */ - waitForCallPickup: boolean; - - /** - * Whether to enable echo cancellation for audio capture. - * Defaults to true. - */ - echoCancellation?: boolean; - /** - * Whether to enable noise suppression for audio capture. - * Defaults to true. - */ - noiseSuppression?: boolean; - /** - * Whether to enable auto gain control for audio capture. - * Defaults to true. Lotus turns this OFF for the in-source ML denoise tier so - * the browser's dynamic gain doesn't fight the ML model (pumping artifacts). - */ - autoGainControl?: boolean; - - callIntent?: RTCCallIntent; -} - -// If you need to add a new flag to this interface, prefer a name that describes -// a specific behavior (such as 'confineToRoom'), rather than one that describes -// the situations that call for this behavior ('isEmbedded'). This makes it -// clearer what each flag means, and helps us avoid coupling Element Call's -// behavior to the needs of specific consumers. export interface UrlParams extends UrlProperties, UrlConfiguration {} class ParamParser { @@ -349,6 +240,45 @@ export const getUrlParams = ( return params; }; +/** + * The {@link UrlProperties} for Element Call running as a component inside a + * host application. + * + * It has no URL of its own to read these from, and it does not need most of + * them: the widget plumbing does not apply, the Matrix client and the analytics + * configuration come from the host by other routes, and what is left is either + * the host's to state through the component's props or Element Call's own + * default. + */ +export const componentProperties: UrlProperties = { + widgetId: null, + parentUrl: null, + isWidget: false, + roomId: null, + userId: null, + displayName: null, + deviceId: null, + baseUrl: null, + lang: null, + fonts: [], + fontScale: null, + posthogUserId: null, + posthogApiHost: null, + posthogApiKey: null, + e2eEnabled: true, + password: null, + viaServers: null, + homeserver: null, + rageshakeSubmitUrl: null, + sentryDsn: null, + sentryEnvironment: null, + theme: null, + // Solid rather than the gradient the standalone app defaults to: the gradient + // is drawn by a `position: fixed` pseudo-element, which would escape the + // container Element Call was given and cover the host's own interface. + background: BackgroundStyle.Solid, +}; + /** * Gets the app parameters for the current URL. * @param search The URL search string @@ -378,82 +308,12 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { const intent = !isWidget ? UserIntent.Unknown : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown); - // Here we only use constants and `platform` to determine the intent preset. - let intentPreset: UrlConfiguration = { - confineToRoom: true, - preload: false, - header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar, - showControls: true, - hideScreensharing: false, - allowIceFallback: true, - perParticipantE2EE: true, - controlledAudioDevices: platform === "desktop" ? false : true, - skipLobby: true, - returnToLobby: false, - sendNotificationType: "notification", - autoLeaveWhenOthersLeft: false, - waitForCallPickup: false, - }; - switch (intent) { - case UserIntent.StartNewCall: - intentPreset.skipLobby = false; - intentPreset.callIntent = "video"; - break; - case UserIntent.JoinExistingCall: - // On desktop this will be overridden based on which button was used to join the call - intentPreset.skipLobby = false; - intentPreset.callIntent = "video"; - break; - case UserIntent.StartNewCallVoice: - intentPreset.skipLobby = false; - intentPreset.callIntent = "audio"; - break; - case UserIntent.JoinExistingCallVoice: - // On desktop this will be overridden based on which button was used to join the call - intentPreset.skipLobby = false; - intentPreset.callIntent = "audio"; - break; - case UserIntent.StartNewCallDMVoice: - intentPreset.callIntent = "audio"; - // Fall through - case UserIntent.StartNewCallDM: - intentPreset.skipLobby = true; - intentPreset.sendNotificationType = "ring"; - intentPreset.autoLeaveWhenOthersLeft = true; - intentPreset.waitForCallPickup = true; - intentPreset.callIntent = intentPreset.callIntent ?? "video"; - break; - case UserIntent.JoinExistingCallDMVoice: - intentPreset.callIntent = "audio"; - // Fall through - case UserIntent.JoinExistingCallDM: - // On desktop this will be overridden based on which button was used to join the call - intentPreset.skipLobby = true; - intentPreset.autoLeaveWhenOthersLeft = true; - intentPreset.callIntent = intentPreset.callIntent ?? "video"; - break; - // Non widget usecase defaults - default: - intentPreset = { - confineToRoom: false, - preload: false, - header: HeaderStyle.Standard, - showControls: true, - hideScreensharing: false, - allowIceFallback: false, - perParticipantE2EE: false, - controlledAudioDevices: false, - skipLobby: false, - returnToLobby: false, - sendNotificationType: undefined, - autoLeaveWhenOthersLeft: false, - waitForCallPickup: false, - }; - } + const intentPreset = configurationForIntent(intent); const properties: UrlProperties = { widgetId, parentUrl, + isWidget, // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl: // what would we do if it were invalid? If the widget API says that's what // the room ID is, then that's what it is. @@ -514,7 +374,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { "intent:", intent, "\nproperties:", - redact(properties, "password"), + redact(properties, "password", "posthogUserId"), "configuration:", configuration, ); @@ -534,11 +394,37 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { }; }; +const UrlParamsContext = createContext(null); + /** - * Hook to simplify use of getUrlParams. - * @returns The app parameters for the current URL + * Supplies the parameters Element Call should run with. + * + * The standalone and widget builds derive these from the URL, but the + * component has no URL of its own to read them from, so its host provides them + * directly instead. + * + * TODO: `UrlParams` is no longer an accurate name now that these need not come + * from a URL. Renaming it touches every consumer, so it is left until the rest + * of the de-globalisation work has settled. */ -export const useUrlParams = (): UrlParams => { +export const UrlParamsProvider = UrlParamsContext.Provider; + +/** + * The parameters Element Call is running with. + * + * Falls back to parsing `window.location` when no provider is present, so that + * tests and stories keep working without one. + */ +export const useUrlParams = (): UrlParams => + use(UrlParamsContext) ?? getUrlParams(); + +/** + * Derives {@link UrlParams} from the current router location. + * + * Only meaningful when Element Call owns the URL; the component is given its + * params directly through {@link UrlParamsProvider}. + */ +export const useUrlParamsFromLocation = (): UrlParams => { const { search, hash } = useLocation(); return useMemo(() => getUrlParams(search, hash), [search, hash]); }; diff --git a/src/analytics/PosthogAnalytics.test.ts b/src/analytics/PosthogAnalytics.test.ts index 7c1128ad..cd821c17 100644 --- a/src/analytics/PosthogAnalytics.test.ts +++ b/src/analytics/PosthogAnalytics.test.ts @@ -15,6 +15,7 @@ import { afterAll, } from "vitest"; import posthog, { type CaptureResult } from "posthog-js"; +import { type MatrixClient } from "matrix-js-sdk"; import { Anonymity, @@ -22,75 +23,122 @@ import { PosthogAnalytics, } from "./PosthogAnalytics"; import { mockConfig } from "../utils/test"; +import { analyticsConfigFromEnvironment } from "../initializer"; +import { optInAnalytics } from "../settings/settings"; describe("PosthogAnalytics", () => { - describe("embedded package", () => { - beforeAll(() => { - vi.stubEnv("VITE_PACKAGE", "embedded"); - }); - + describe("enablement", () => { beforeEach(() => { - mockConfig({}); - window.location.hash = "#"; PosthogAnalytics.resetInstance(); }); - afterAll(() => { - vi.unstubAllEnvs(); - }); - - it("does not create instance without config value or URL params", () => { + it("stays off until it is configured", () => { expect(PosthogAnalytics.instance.isEnabled()).toBe(false); }); - it("ignores config value and does not create instance", () => { - mockConfig({ - posthog: { - api_host: "https://api.example.com.localhost", - api_key: "api_key", - }, + it("stays off when configured without credentials", () => { + PosthogAnalytics.configure({ matrixBackend: "jssdk" }); + expect(PosthogAnalytics.instance.isEnabled()).toBe(false); + }); + + it("stays off when given only a key", () => { + PosthogAnalytics.configure({ + matrixBackend: "jssdk", + apiKey: "api_key", }); expect(PosthogAnalytics.instance.isEnabled()).toBe(false); }); - it("uses URL params if both set", () => { - window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`; + it("turns on when given both a key and a host", () => { + PosthogAnalytics.configure({ + matrixBackend: "jssdk", + apiKey: "api_key", + apiHost: "https://api.example.com.localhost", + }); expect(PosthogAnalytics.instance.isEnabled()).toBe(true); }); }); - describe("full package", () => { - beforeAll(() => { - vi.stubEnv("VITE_PACKAGE", "full"); - }); - + // Which of the URL and config.json the credentials come from is a deliberate + // policy: an embedder is responsible for its own users' telemetry, so it must + // not pick up the deployment's, and vice versa. + describe("analyticsConfigFromEnvironment", () => { beforeEach(() => { mockConfig({}); window.location.hash = "#"; - PosthogAnalytics.resetInstance(); }); afterAll(() => { vi.unstubAllEnvs(); }); - it("does not create instance without config value", () => { - expect(PosthogAnalytics.instance.isEnabled()).toBe(false); - }); + const urlCredentials = `posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=url_key`; + const configCredentials = { + posthog: { + api_host: "https://config.example.com.localhost", + api_key: "config_key", + }, + }; - it("ignores URL params and does not create instance", () => { - window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`; - expect(PosthogAnalytics.instance.isEnabled()).toBe(false); - }); - - it("creates instance with config value", () => { - mockConfig({ - posthog: { - api_host: "https://api.example.com.localhost", - api_key: "api_key", - }, + describe("embedded package", () => { + beforeAll(() => { + vi.stubEnv("VITE_PACKAGE", "embedded"); }); - expect(PosthogAnalytics.instance.isEnabled()).toBe(true); + + it("has no credentials without URL params", () => { + expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined(); + }); + + it("takes the credentials from the URL", () => { + window.location.hash = `#?${urlCredentials}`; + expect(analyticsConfigFromEnvironment()).toMatchObject({ + apiKey: "url_key", + apiHost: "https://url.example.com.localhost", + }); + }); + + it("ignores the deployment's config", () => { + mockConfig(configCredentials); + expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined(); + }); + }); + + describe("full package", () => { + beforeAll(() => { + vi.stubEnv("VITE_PACKAGE", "full"); + }); + + it("has no credentials without config", () => { + expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined(); + }); + + it("takes the credentials from the config", () => { + mockConfig(configCredentials); + expect(analyticsConfigFromEnvironment()).toMatchObject({ + apiKey: "config_key", + apiHost: "https://config.example.com.localhost", + }); + }); + + it("ignores the URL params", () => { + window.location.hash = `#?${urlCredentials}`; + expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined(); + }); + }); + + // Who owns the user's analytics identity depends on how Element Call is + // running, not on which package it was built as. + it("reports the embedded backend when running as a widget", () => { + vi.stubEnv("VITE_PACKAGE", "full"); + window.location.hash = `#?widgetId=id&parentUrl=${encodeURIComponent("https://host.example.com.localhost")}&posthogUserId=given_id`; + expect(analyticsConfigFromEnvironment()).toMatchObject({ + matrixBackend: "embedded", + hostAnalyticsId: "given_id", + }); + }); + + it("reports the jssdk backend when running standalone", () => { + expect(analyticsConfigFromEnvironment().matrixBackend).toBe("jssdk"); }); }); @@ -204,22 +252,13 @@ describe("PosthogAnalytics", () => { // posthog-js bumps renaming/removing the hook. The filter logic itself is // covered by the applyPrivacyFilters block above. describe("posthog.init wiring", () => { - beforeAll(() => { - vi.stubEnv("VITE_PACKAGE", "full"); - }); - beforeEach(() => { - mockConfig({ - posthog: { - api_host: "https://api.example.com.localhost", - api_key: "api_key", - }, - }); PosthogAnalytics.resetInstance(); - }); - - afterAll(() => { - vi.unstubAllEnvs(); + PosthogAnalytics.configure({ + matrixBackend: "jssdk", + apiKey: "api_key", + apiHost: "https://api.example.com.localhost", + }); }); it("passes events through the privacy filter via before_send", () => { @@ -244,3 +283,86 @@ describe("PosthogAnalytics", () => { }); }); }); + +describe("identifying the user", () => { + const credentials = { + apiKey: "api_key", + apiHost: "https://api.example.com.localhost", + }; + + function mockClient(accountDataId: string | null): MatrixClient { + return { + isGuest: () => false, + getCrypto: () => undefined, + getAccountDataFromServer: vi + .fn() + .mockResolvedValue( + accountDataId === null ? null : { id: accountDataId }, + ), + setAccountData: vi.fn().mockResolvedValue({}), + } as Partial as MatrixClient; + } + + beforeEach(() => { + PosthogAnalytics.resetInstance(); + optInAnalytics.setValue(true); + }); + + it("reports under the ID its host assigned, and stores nothing", async () => { + const client = mockClient(null); + window.matrixclient = client; + PosthogAnalytics.configure({ + ...credentials, + matrixBackend: "embedded", + hostAnalyticsId: "assigned-by-host", + }); + const identify = vi.spyOn(posthog, "identify"); + + PosthogAnalytics.instance.startListeningToSettingsChanges(); + await vi.waitFor(() => + expect(identify).toHaveBeenCalledWith("assigned-by-host"), + ); + + // The host owns the user's account, so Element Call must not write to it + expect(client.setAccountData).not.toHaveBeenCalled(); + }); + + it("keeps its own ID in account data when it owns the session", async () => { + const client = mockClient(null); + window.matrixclient = client; + PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" }); + + PosthogAnalytics.instance.startListeningToSettingsChanges(); + + // No ID on the server yet, so one is minted and stored for other devices + await vi.waitFor(() => expect(client.setAccountData).toHaveBeenCalled()); + }); + + it("reuses the ID already in account data", async () => { + const client = mockClient("stored-earlier"); + window.matrixclient = client; + PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" }); + const identify = vi.spyOn(posthog, "identify"); + + PosthogAnalytics.instance.startListeningToSettingsChanges(); + await vi.waitFor(() => + expect(identify).toHaveBeenCalledWith("stored-earlier"), + ); + + expect(client.setAccountData).not.toHaveBeenCalled(); + }); + + it("records how it reaches Matrix as a super property", async () => { + window.matrixclient = mockClient("stored-earlier"); + PosthogAnalytics.configure({ ...credentials, matrixBackend: "embedded" }); + const register = vi.spyOn(posthog, "register"); + + PosthogAnalytics.instance.startListeningToSettingsChanges(); + + await vi.waitFor(() => + expect(register).toHaveBeenCalledWith( + expect.objectContaining({ matrixBackend: "embedded" }), + ), + ); + }); +}); diff --git a/src/analytics/PosthogAnalytics.ts b/src/analytics/PosthogAnalytics.ts index 01a146e0..01a05bfb 100644 --- a/src/analytics/PosthogAnalytics.ts +++ b/src/analytics/PosthogAnalytics.ts @@ -15,7 +15,6 @@ import { logger } from "matrix-js-sdk/lib/logger"; import { type MatrixClient } from "matrix-js-sdk"; import { type Subscription } from "rxjs"; -import { widget } from "../widget"; import { CallEndedTracker, CallStartedTracker, @@ -29,8 +28,6 @@ import { CallConnectDurationTracker, CallReconnectingTracker, } from "./PosthogEvents"; -import { Config } from "../config/Config"; -import { getUrlParams } from "../UrlParams"; import { optInAnalytics } from "../settings/settings"; /* Posthog analytics tracking. @@ -140,6 +137,27 @@ interface PlatformProperties { cryptoVersion?: string; } +/** + * How analytics reporting should be set up, supplied by whoever is starting + * Element Call rather than discovered from the page it happens to be on. + */ +export interface AnalyticsConfig { + /** The PostHog project key. Without one, analytics stay switched off. */ + apiKey?: string; + apiHost?: string; + /** + * How Element Call reaches Matrix. When `embedded`, the host owns the user's + * identity: it supplies the analytics ID, and Element Call must not store one + * in the user's account data. + */ + matrixBackend: "embedded" | "jssdk"; + /** The analytics ID the host has assigned to this user, when embedded. */ + hostAnalyticsId?: string | null; +} + +/** Analytics are off until someone asks for them. */ +const analyticsDisabled: AnalyticsConfig = { matrixBackend: "jssdk" }; + export class PosthogAnalytics { /* Wrapper for Posthog analytics. * 3 modes of anonymity are supported, governed by this.anonymity @@ -167,13 +185,32 @@ export class PosthogAnalytics { private registrationType: RegistrationType = RegistrationType.Guest; private optInListener: Subscription | null = null; + private static analyticsConfig: AnalyticsConfig = analyticsDisabled; + + /** + * Sets up analytics reporting. Must be called before the instance is first + * used; without it, analytics stay switched off. + */ + public static configure(config: AnalyticsConfig): void { + if (this.internalInstance) + // Configuration is read once, when the instance is built, so arriving + // late means analytics are already running unconfigured. + logger.warn( + "Analytics were configured after they had already been started; the new configuration will not take effect", + ); + this.analyticsConfig = config; + } + public static hasInstance(): boolean { return Boolean(this.internalInstance); } public static get instance(): PosthogAnalytics { if (!this.internalInstance) { - this.internalInstance = new PosthogAnalytics(posthog); + this.internalInstance = new PosthogAnalytics( + posthog, + PosthogAnalytics.analyticsConfig, + ); } return this.internalInstance; } @@ -181,20 +218,14 @@ export class PosthogAnalytics { public static resetInstance(): void { // Reset the singleton instance this.internalInstance = null; + this.analyticsConfig = analyticsDisabled; } - private constructor(private readonly posthog: PostHog) { - let apiKey: string | undefined; - let apiHost: string | undefined; - if (import.meta.env.VITE_PACKAGE === "embedded") { - // for the embedded package we always use the values from the URL as the widget host is responsible for analytics configuration - apiKey = getUrlParams().posthogApiKey ?? undefined; - apiHost = getUrlParams().posthogApiHost ?? undefined; - } else if (import.meta.env.VITE_PACKAGE === "full") { - // in full package it is the server responsible for the analytics - apiKey = Config.get().posthog?.api_key; - apiHost = Config.get().posthog?.api_host; - } + private constructor( + private readonly posthog: PostHog, + private readonly config: AnalyticsConfig, + ) { + const { apiKey, apiHost } = config; if (apiKey && apiHost) { const beforeSend = (event: CaptureResult | null): CaptureResult | null => @@ -225,15 +256,15 @@ export class PosthogAnalytics { } } - private static getPlatformProperties(): PlatformProperties { + private getPlatformProperties(): PlatformProperties { const appVersion = import.meta.env.VITE_APP_VERSION || "dev"; return { appVersion, - matrixBackend: widget ? "embedded" : "jssdk", + matrixBackend: this.config.matrixBackend, callBackend: "livekit", - cryptoVersion: widget - ? undefined - : window.matrixclient?.getCrypto()?.getVersion(), + // Undefined when Element Call has no crypto of its own, which is the case + // whenever a host is doing the encrypting for it. + cryptoVersion: window.matrixclient?.getCrypto()?.getVersion(), }; } @@ -283,8 +314,8 @@ export class PosthogAnalytics { // different devices to send the same ID. let analyticsID = await this.getAnalyticsId(); try { - if (!analyticsID && !widget) { - // only try setting up a new analytics ID in the standalone app. + if (!analyticsID && this.config.matrixBackend !== "embedded") { + // only mint an analytics ID when we are the ones storing it. // Couldn't retrieve an analytics ID from user settings, so create one and set it on the server. // Note there's a race condition here - if two devices do these steps at the same time, last write @@ -313,8 +344,8 @@ export class PosthogAnalytics { private async getAnalyticsId(): Promise { const client: MatrixClient = window.matrixclient; - if (widget) { - return getUrlParams().posthogUserId; + if (this.config.matrixBackend === "embedded") { + return this.config.hostAnalyticsId ?? null; } else { const accountData = await client.getAccountDataFromServer( PosthogAnalytics.ANALYTICS_EVENT_TYPE, @@ -324,7 +355,7 @@ export class PosthogAnalytics { } private async setAccountAnalyticsId(analyticsID: string): Promise { - if (!widget) { + if (this.config.matrixBackend !== "embedded") { const client = window.matrixclient; // the analytics ID only needs to be set in the standalone version. @@ -362,7 +393,7 @@ export class PosthogAnalytics { // These properties will be subsequently passed in every event. // // This only needs to be done once per page lifetime. Note that getPlatformProperties - this.platformSuperProperties = PosthogAnalytics.getPlatformProperties(); + this.platformSuperProperties = this.getPlatformProperties(); this.registerSuperProperties({ ...this.platformSuperProperties, registrationType: diff --git a/src/auth/useInteractiveRegistration.ts b/src/auth/useInteractiveRegistration.ts index 4972c031..7314c9e4 100644 --- a/src/auth/useInteractiveRegistration.ts +++ b/src/auth/useInteractiveRegistration.ts @@ -17,7 +17,7 @@ import { logger } from "matrix-js-sdk/lib/logger"; import { initClient } from "../utils/matrix"; import { type Session } from "../ClientContext"; import { Config } from "../config/Config"; -import { widget } from "../widget"; +import { useUrlParams } from "../UrlParams"; export const useInteractiveRegistration = ( oldClient?: MatrixClient, @@ -32,6 +32,7 @@ export const useInteractiveRegistration = ( passwordlessUser: boolean, ) => Promise<[MatrixClient, Session]>; } => { + const { isWidget } = useUrlParams(); const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState( undefined, ); @@ -47,7 +48,7 @@ export const useInteractiveRegistration = ( } useEffect(() => { - if (widget) return; + if (isWidget) return; // An empty registerRequest is used to get the privacy policy and recaptcha key. authClient.current!.registerRequest({}).catch((error) => { setPrivacyPolicyUrl( @@ -55,7 +56,7 @@ export const useInteractiveRegistration = ( ); setRecaptchaKey(error.data?.params["m.login.recaptcha"]?.public_key); }); - }, []); + }, [isWidget]); const register = useCallback( async ( diff --git a/src/auth/useRegisterPasswordlessUser.ts b/src/auth/useRegisterPasswordlessUser.ts index c2cbe2d3..27674c62 100644 --- a/src/auth/useRegisterPasswordlessUser.ts +++ b/src/auth/useRegisterPasswordlessUser.ts @@ -12,7 +12,7 @@ import { useClient } from "../ClientContext"; import { useInteractiveRegistration } from "../auth/useInteractiveRegistration"; import { generateRandomName } from "../auth/generateRandomName"; import { useRecaptcha } from "../auth/useRecaptcha"; -import { widget } from "../widget"; +import { useUrlParams } from "../UrlParams"; interface UseRegisterPasswordlessUserType { privacyPolicyUrl?: string; @@ -22,6 +22,7 @@ interface UseRegisterPasswordlessUserType { export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType { const { setClient } = useClient(); + const { isWidget } = useUrlParams(); const { privacyPolicyUrl, recaptchaKey, register } = useInteractiveRegistration(); const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey); @@ -31,7 +32,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType { if (!setClient) { throw new Error("No client context"); } - if (widget) { + if (isWidget) { throw new Error( "Registration was skipped: We should never try to register password-less user in embedded mode.", ); @@ -53,7 +54,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType { throw e; } }, - [execute, reset, register, setClient], + [execute, reset, register, setClient, isWidget], ); return { privacyPolicyUrl, registerPasswordlessUser, recaptchaId }; diff --git a/src/base.css b/src/base.css new file mode 100644 index 00000000..b8eaf67e --- /dev/null +++ b/src/base.css @@ -0,0 +1,219 @@ +/* +Copyright 2021-2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +/* The styles Element Call needs wherever it is shown: the element defaults and +custom properties its own stylesheets build on top of. + +Split out from index.css so that Element Call as a component can have these +without also being given the standalone page's layout, which would style the +host's own document. Compound's stylesheets — the design tokens, the component +styles and the fonts they use — are not here either: as a component, Element +Call shares the host's copy of Compound (it is a peer dependency, so that what +Compound floats into the host's body, tooltips and menus, is styled by the +host's stylesheet), and index.css loads it for the page. + +What remains here still speaks of the document — normalize.css and the +typography below use bare element selectors, and the custom properties are +declared on `:root` — which is right for the page, and is why the component +build rewrites it: there every selector is confined to Element Call's root +element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and +`:root` becoming that element. Nothing needs to be written differently here for +that to work, but nothing here may rely on reaching the host's document either. + +Nothing here should depend on where it lands relative to Element Call's +component stylesheets: the bundler decides that, and it decides differently for +the app and for the component build. */ + +@layer normalize, compound-legacy, compound; + +@import url("normalize.css/normalize.css") layer(normalize); + +:root { + --font-scale: 1; + --font-size-micro: calc(10px * var(--font-scale)); + --font-size-caption: calc(12px * var(--font-scale)); + --font-size-body: calc(15px * var(--font-scale)); + --font-size-subtitle: calc(18px * var(--font-scale)); + --font-size-title: calc(24px * var(--font-scale)); + --font-size-headline: calc(32px * var(--font-scale)); + + --cpd-color-border-accent: var(--cpd-color-green-800); + /* The distance to inset non-full-width content from the edge of Element + Call's root along the inline axis. This ramps up from 16px for typical mobile + windows, to 96px for typical desktop windows, and accounts for the safe area. + Container units resolve where the property is used, so this must only be used + by elements whose nearest query container is the root. */ + --content-inset-left: calc( + env(safe-area-inset-left) + + min( + var(--cpd-space-24x), + max(var(--cpd-space-4x), calc((100cqw - 900px) / 3)) + ) + ); + --content-inset-right: calc( + env(safe-area-inset-right) + + min( + var(--cpd-space-24x), + max(var(--cpd-space-4x), calc((100cqw - 900px) / 3)) + ) + ); + --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15); + --big-drop-shadow: 0px 0px 24px 0px #1b1d221a; + --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + + --call-view-overlay-layer: 1; + --call-view-header-footer-layer: 2; +} + +:root, +[class*="cpd-theme-"] { + --video-tile-background: var(--cpd-color-bg-subtle-secondary); +} + +/* The breakpoints in Element Call's stylesheets are container queries against +this element rather than media queries against the viewport. For the standalone +app the two are the same thing, since the root is the page; for a host that +embeds Element Call in a corner of its own page they are not, and it is the +corner that the layout has to fit. + +For the same reason, lengths that were once a share of the viewport (`100vw`) +are a share of the nearest query container (`100cqw`). Container units cannot +name their container, so they only mean this element where no other query +container — a spotlight layout, a media tile — lies in between; check that +before using one further down the tree. */ +[data-element-call-root] { + container: element-call / size; +} + +.cpd-theme-dark { + --cpd-color-border-accent: var(--cpd-color-green-1100); + --stopgap-color-on-solid-accent: var(--cpd-color-text-primary); + --stopgap-background-85: rgba(16, 19, 23, 0.85); +} + +@media (min-height: 330px) { + [data-element-call-root][data-background="gradient"]::before { + content: ""; + position: fixed; + /* Chromium abruptly fades our images to fully transparent at the edge of + the element. If we just make the element a little bigger than the viewport, + this is no longer visible. */ + inset: -20px; + background-image: url("graphics/mobile-gradient.png"); + background-size: 1400px 305px; + background-position: bottom; + background-repeat: no-repeat; + } + + [data-element-call-root][data-background="gradient"][data-platform="desktop"]::before { + background-image: url("graphics/desktop-gradient.png"); + background-size: max(1440px, 100cqw) max(1440px, 100cqh); + background-position: center; + } +} + +/* We use this to not render the page at all until we know the theme.*/ +.no-theme { + opacity: 0; +} + +/* On Android and iOS, prefer native system fonts. The global.css file of +Compound Web is where these variables ultimately get consumed to set the page's +font-family. */ +[data-element-call-root][data-platform="android"] { + --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif; +} + +[data-element-call-root][data-platform="ios"] { + --cpd-font-family-sans: + -apple-system, BlinkMacSystemFont, "Inter", sans-serif; +} + +@layer compound-legacy { + h1, + h2, + h3, + h4, + h5, + h6, + p, + a { + margin-top: 0; + } + + /* Headline Semi Bold */ + h1 { + font-weight: 600; + font-size: var(--font-size-headline); + } + + /* Title */ + h2 { + font-weight: 600; + font-size: var(--font-size-title); + } + + /* Subtitle */ + h3 { + font-weight: 600; + font-size: var(--font-size-subtitle); + } + + /* Body Semi Bold */ + h4 { + font-weight: 600; + font-size: var(--font-size-body); + } + + h1, + h2, + h3 { + line-height: 1.2; + } + + /* Body */ + p { + font-size: var(--font-size-body); + line-height: var(--font-size-title); + } + + hr { + width: calc(100% - 24px); + border: none; + border-top: 1px solid var(--cpd-color-border-interactive-secondary); + color: var(--cpd-color-border-interactive-secondary); + overflow: visible; + text-align: center; + height: 5px; + font-weight: 600; + font-size: var(--font-size-body); + line-height: 24px; + margin: 0 12px; + } + + summary { + font-size: var(--font-size-body); + } + + details > :not(summary) { + margin-left: var(--font-size-body); + } + + details[open] > summary { + margin-bottom: var(--font-size-body); + } +} + +/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom +outline, which is inconsistent with our other components and is not sufficiently +visible to be accessible. This resets it back to 'auto'. */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: auto; +} diff --git a/src/button/LeaveToHomeLink.tsx b/src/button/LeaveToHomeLink.tsx new file mode 100644 index 00000000..50385a5d --- /dev/null +++ b/src/button/LeaveToHomeLink.tsx @@ -0,0 +1,40 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { type FC, type MouseEvent, type ReactNode, useCallback } from "react"; +import { Link } from "@vector-im/compound-web"; + +import { useLeaveToHome } from "../LeaveToHomeContext"; + +interface Props { + className?: string; + children: ReactNode; +} + +/** + * A link out of the call, to wherever the user came from. Renders nothing when + * there is nowhere to go (see {@link useLeaveToHome}). + */ +export const LeaveToHomeLink: FC = ({ className, children }) => { + const leaveToHome = useLeaveToHome(); + const onClick = useCallback( + (e: MouseEvent) => { + e.preventDefault(); + leaveToHome?.(); + }, + [leaveToHome], + ); + + if (leaveToHome === null) return null; + // Where this leads is the shell's business, so the link has no address of + // its own to offer + return ( + + {children} + + ); +}; diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css index 96e064c6..5fd6ebca 100644 --- a/src/button/ReactionToggleButton.module.css +++ b/src/button/ReactionToggleButton.module.css @@ -10,7 +10,7 @@ width: fit-content; } -@media (max-width: 420px) { +@container element-call (max-width: 420px) { .reactionPopupMenu { /* 20px glyph + 2×12px padding = a 44px square touch target. Five buttons still fit a ~360px drawer row; previously these were ~32px. */ @@ -21,7 +21,12 @@ } div.reactionPopupMenuRoot.reactionPopupMenuModal { - --overlay-top: 82vh; + /* Down near the footer it belongs to, rather than centred like other modals. + A percentage, not a viewport unit: the overlay is positioned `fixed`, so this + resolves against the page in the standalone app and against the container + when a host embeds us — where 82vh would put it below the container + entirely. */ + --overlay-top: 82%; width: fit-content; } @@ -32,7 +37,7 @@ div.reactionPopupMenuRoot { .reactionPopupMenuRoot > div { width: fit-content; - max-width: 100vw; + max-width: 100cqw; } div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div { @@ -80,7 +85,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div { flex: 0 0 auto; } -.reactionButton { +.reactionPopupMenu .reactionsMenu .reactionButton { padding: var(--reaction-button-padding); border-radius: var(--cpd-radius-pill-effect); font-size: var(--reaction-button-fontsize); diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap index 5db4582c..7bc890c5 100644 --- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap +++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = ` aria-disabled="false" aria-expanded="true" aria-haspopup="true" - aria-labelledby="_r_bb_" + aria-labelledby="_r_bh_" class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="primary" data-size="lg" diff --git a/src/components/CallFooter.module.css b/src/components/CallFooter.module.css index bd7b081b..da7a3bb2 100644 --- a/src/components/CallFooter.module.css +++ b/src/components/CallFooter.module.css @@ -43,7 +43,10 @@ Please see LICENSE in the repository root for full details. inset-inline: 0; } -.footer.overlay:has(:focus-visible) { +/* Keep the footer while it is in use: focus inside it, or a menu opened from + it. The menu is portalled out, so the trigger's aria-expanded tracks it. */ +.footer.overlay:has(:focus-visible), +.footer.overlay:has([aria-expanded="true"]) { opacity: 1; pointer-events: initial; } @@ -77,7 +80,7 @@ Please see LICENSE in the repository root for full details. } /*First hide the logo*/ -@media (max-width: 750px) { +@container element-call (max-width: 750px) { .logo { display: none; } @@ -94,7 +97,7 @@ Please see LICENSE in the repository root for full details. With the logo hidden >500px is enough space to show overflow, buttons, layout. Once we exceed 500 we hide everything except the buttons. */ -@media (max-width: 500px) { +@container element-call (max-width: 500px) { .footer { grid-template-areas: "buttons buttons buttons"; /* Reclaim horizontal budget so the control row fits on phones. */ @@ -129,27 +132,27 @@ Once we exceed 500 we hide everything except the buttons. } } -@media (max-height: 800px) { +@container element-call (max-height: 800px) { .footer { padding-block: var(--cpd-space-8x) calc(env(safe-area-inset-bottom) + var(--cpd-space-8x)); } } -@media (max-height: 400px) { +@container element-call (max-height: 400px) { .footer { padding-block: var(--cpd-space-4x) calc(env(safe-area-inset-bottom) + var(--cpd-space-4x)); } } -@media (max-width: 370px) { +@container element-call (max-width: 370px) { .shareScreen { display: none; } /* PIP custom css */ - @media (max-height: 400px) { + @container element-call (max-height: 400px) { .shareScreen { display: flex; } @@ -162,13 +165,13 @@ Once we exceed 500 we hide everything except the buttons. } } -@media (max-width: 320px) { +@container element-call (max-width: 320px) { .raiseHand { display: none; } } -@media (min-width: 800px) { +@container element-call (min-width: 800px) { .buttons { gap: var(--cpd-space-4x); } diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx index 667cb607..96e010d8 100644 --- a/src/components/CallFooter.stories.tsx +++ b/src/components/CallFooter.stories.tsx @@ -13,6 +13,7 @@ import { Link } from "@vector-im/compound-web"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { CallFooter, type FooterSnapshot } from "./CallFooter"; import inCallViewStyles from "../room/InCallView.module.css"; +import styles from "./CallFooter.module.css"; import { useStaticViewModel } from "../state/ViewModel"; import { ReactionsSenderContext } from "../reactions/useReactionsSender"; import { type ReactionOption } from "../reactions"; @@ -29,7 +30,9 @@ const reactionData = { reactions$: new BehaviorSubject({}), }; -const mediaDevices = new MediaDevices(globalScope); +const mediaDevices = new MediaDevices(globalScope, { + controlledAudioDevices: false, +}); /** * A wrapper component that is used for: @@ -135,10 +138,13 @@ export const Default: Story = { debugTileLayout: false, tileStoreGeneration: undefined, audioOptions: [], + audioOutputOptions: [], videoOptions: [], selectedAudio: undefined, + selectedAudioOutput: undefined, selectedVideo: undefined, selectAudioButtonOption: undefined, + selectAudioOutputOption: undefined, selectVideoButtonOption: undefined, }, parameters: { @@ -156,15 +162,46 @@ export const WithAudioAndVideoOptions: Story = { { label: { type: "name", name: "Microphone 1" }, id: "1" }, { label: { type: "name", name: "Microphone 2" }, id: "2" }, ], + audioOutputOptions: [ + { label: { type: "default", name: "Built-in Output" }, id: "default" }, + { label: { type: "name", name: "Headset" }, id: "2" }, + ], videoOptions: [ { label: { type: "name", name: "Camera 1" }, id: "1" }, { label: { type: "name", name: "Camera 2" }, id: "2" }, ], selectedAudio: "2", + selectedAudioOutput: "default", selectedVideo: "1", }, }; +export const StaysWhileAMenuIsOpen: Story = { + ...Default, + args: { + ...WithAudioAndVideoOptions.args, + // In a short window the footer overlays the call and hides itself. + asOverlay: true, + showFooter: true, + }, + play: async ({ canvasElement }): Promise => { + const footer = canvasElement.querySelector( + '[data-testid="footer-container"]', + )!; + await userEvent.click( + within(canvasElement).getByRole("button", { name: "Microphone" }), + ); + await expect(document.body.querySelector('[role="menu"]')).not.toBeNull(); + + // The call hides the footer with this class. + footer.classList.add(styles.hidden); + + // Read after the 0.15s fade, not mid-transition. + await new Promise((settled) => setTimeout(settled, 400)); + await expect(getComputedStyle(footer).opacity).toBe("1"); + }, +}; + export const AudioBusy: Story = { ...Default, args: { diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx index 4f79f236..6fdf13dd 100644 --- a/src/components/CallFooter.tsx +++ b/src/components/CallFooter.tsx @@ -99,11 +99,15 @@ export interface FooterState { /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */ audioOptions: MenuOptions[]; + /** Output (speaker) devices. */ + audioOutputOptions: MenuOptions[]; /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */ videoOptions: MenuOptions[]; selectedAudio: string | undefined; + selectedAudioOutput: string | undefined; selectedVideo: string | undefined; selectAudioButtonOption: ((deviceId: string) => void) | undefined; + selectAudioOutputOption: ((deviceId: string) => void) | undefined; selectVideoButtonOption: ((option: string) => void) | undefined; } @@ -143,6 +147,9 @@ export const CallFooter: FC = ({ const audioOptions = useBehavior(vm.audioOptions$); const selectedAudio = useBehavior(vm.selectedAudio$); const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$); + const audioOutputOptions = useBehavior(vm.audioOutputOptions$); + const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$); + const selectAudioOutputOption = useBehavior(vm.selectAudioOutputOption$); const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$); const toggleBlur = useBehavior(vm.toggleBlur$); const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$); @@ -168,7 +175,6 @@ export const CallFooter: FC = ({ if ((audioOptions?.length ?? 0) > 0) { buttons.push( = ({ options={audioOptions} selectedOption={selectedAudio} onSelect={selectAudioButtonOption} + outputOptions={audioOutputOptions} + selectedOutputOption={selectedAudioOutput} + onSelectOutput={selectAudioOutputOption} />, ); } else { @@ -197,7 +206,6 @@ export const CallFooter: FC = ({ if ((videoOptions?.length ?? 0) > 0) { buttons.push( vi.fn(() => "desktop")); vi.mock("../Platform", () => ({ @@ -29,6 +30,11 @@ vi.mock("@livekit/track-processors", () => ({ supportsBackgroundProcessors: (): boolean => false, })); +const outputSelectionMock = vi.hoisted(() => vi.fn(() => true)); +vi.mock("livekit-client", () => ({ + supportsAudioOutputSelection: (): boolean => outputSelectionMock(), +})); + /** * Returns the minimum set of CallViewModel fields required by * createCallFooterViewModel, with all other properties stubbed to @@ -95,6 +101,65 @@ const twoMicsAndOneCamMediaDevices = mockMediaDevices({ }); describe("createCallFooterViewModel", () => { + describe("selectAudioOutputOption", () => { + function buildFooterVm(): ReturnType { + platformMock.mockReturnValue("desktop"); + return createCallFooterViewModel( + testScope(), + buildMinimalCallViewModel(gridLayout), + mockMuteStates(), + twoMicsAndOneCamMediaDevices, + /* reactionIdentifier */ undefined, + { showControls: true, header: HeaderStyle.Standard }, + ); + } + + it("is withheld where the platform cannot route audio to a chosen device", () => { + outputSelectionMock.mockReturnValue(false); + expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined(); + }); + + it("is offered where the platform can route audio to a chosen device", () => { + outputSelectionMock.mockReturnValue(true); + expect(buildFooterVm().selectAudioOutputOption$.value).toBeDefined(); + }); + }); + + describe("audioOutputOptions", () => { + it("is an empty list, not absent, where the platform enumerates no outputs", () => { + platformMock.mockReturnValue("desktop"); + outputSelectionMock.mockReturnValue(true); + + const vm = createCallFooterViewModel( + testScope(), + buildMinimalCallViewModel(gridLayout), + mockMuteStates(), + mockMediaDevices({ + audioInput: { + available$: constant( + new Map([ + ["mic1", { type: "name", name: "Microphone 1" }], + ]), + ), + selected$: constant(undefined), + select: vi.fn(), + }, + // As Safari: no outputs listed. + audioOutput: { + available$: constant(new Map()), + selected$: constant(undefined), + select: vi.fn(), + }, + }), + /* reactionIdentifier */ undefined, + { showControls: true, header: HeaderStyle.Standard }, + ); + + // Empty, not undefined: undefined would hide the section. + expect(vm.audioOutputOptions$.value).toEqual([]); + }); + }); + describe("audioOptions and videoOptions", () => { function checkEmptyFor(platform: string, layout: Layout): void { platformMock.mockReturnValue(platform); @@ -105,6 +170,7 @@ describe("createCallFooterViewModel", () => { mockMuteStates(), twoMicsAndOneCamMediaDevices, /* reactionIdentifier */ undefined, + { showControls: true, header: HeaderStyle.Standard }, ); expect(vm.audioOptions$.value).toEqual([]); @@ -126,6 +192,7 @@ describe("createCallFooterViewModel", () => { mockMuteStates(), twoMicsAndOneCamMediaDevices, /* reactionIdentifier */ undefined, + { showControls: true, header: HeaderStyle.Standard }, ); expect(vm.audioOptions$?.value).toEqual([ diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx index 7e391b16..50efb42f 100644 --- a/src/components/CallFooterViewModel.tsx +++ b/src/components/CallFooterViewModel.tsx @@ -5,8 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { combineLatest, map, switchMap } from "rxjs"; +import { combineLatest, map, type Observable, switchMap } from "rxjs"; import { supportsBackgroundProcessors } from "@livekit/track-processors"; +import { supportsAudioOutputSelection } from "livekit-client"; import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; import { type MenuOptions } from "./MediaMuteAndSwitchButton"; @@ -19,7 +20,7 @@ import { type Behavior, constant } from "../state/Behavior"; import type { ObservableScope } from "../state/ObservableScope"; import { type MuteStates } from "../state/MuteStates"; import { createStaticViewModel, type ViewModel } from "../state/ViewModel"; -import { getUrlParams, HeaderStyle } from "../UrlParams"; +import { HeaderStyle } from "../UrlParams"; import { platform } from "../Platform"; import { type FooterSnapshot } from "./CallFooter"; @@ -67,49 +68,50 @@ function buildDeviceBehaviors( | "audioOptions$" | "selectedAudio$" | "selectAudioButtonOption$" + | "audioOutputOptions$" + | "selectedAudioOutput$" + | "selectAudioOutputOption$" | "videoOptions$" | "selectedVideo$" | "selectVideoButtonOption$" | "toggleBlur$" | "videoBlurEnabled$" > { - return { - audioOptions$: scope.behavior( - disableSwitcher$.pipe( - switchMap((disable) => - disable - ? constant([] as MenuOptions[]) - : mediaDevices.audioInput.available$.pipe( - map((available) => - [...available.entries()].map(([id, label]) => ({ - id, - label, - })), - ), + const options$ = ( + available$: Behavior>, + ): Observable => + disableSwitcher$.pipe( + switchMap((disable) => + disable + ? constant([] as MenuOptions[]) + : available$.pipe( + map((available) => + [...available.entries()].map(([id, label]) => ({ id, label })), ), - ), + ), ), - ), + ); + + return { + audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)), selectedAudio$: scope.behavior( mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)), ), selectAudioButtonOption$: constant(mediaDevices.audioInput.select), - videoOptions$: scope.behavior( - disableSwitcher$.pipe( - switchMap((disable) => - disable - ? constant([] as MenuOptions[]) - : mediaDevices.videoInput.available$.pipe( - map((available) => - [...available.entries()].map(([id, label]) => ({ - id, - label, - })), - ), - ), - ), - ), + audioOutputOptions$: scope.behavior( + options$(mediaDevices.audioOutput.available$), ), + selectedAudioOutput$: scope.behavior( + mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)), + ), + // Withheld where the platform can't route audio to a chosen device, which + // disables the speaker section. + selectAudioOutputOption$: constant( + supportsAudioOutputSelection() + ? mediaDevices.audioOutput.select + : undefined, + ), + videoOptions$: scope.behavior(options$(mediaDevices.videoInput.available$)), selectedVideo$: scope.behavior( mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)), ), @@ -138,6 +140,8 @@ function buildDeviceBehaviors( * @param mediaDevices - Available and selected input devices. * @param reactionIdentifier - The local user's reaction identifier string, or * undefined when reactions are not supported (hides the reaction button). + * @param options - `showControls`: whether the call controls should be shown. + * `header`: the style of header, which decides whether to show the logo. */ export function createCallFooterViewModel( scope: ObservableScope, @@ -145,8 +149,9 @@ export function createCallFooterViewModel( muteStates: MuteStates, mediaDevices: MediaDevices, reactionIdentifier: string | undefined, + options: { showControls: boolean; header: HeaderStyle }, ): ViewModel { - const { showControls, header: headerStyle } = getUrlParams(); + const { showControls, header: headerStyle } = options; const showLogo = headerStyle === HeaderStyle.Standard; const isPip$ = scope.behavior( @@ -260,10 +265,13 @@ export function createLobbyFooterViewModel( reactionData: undefined, tileStoreGeneration: undefined, audioOptions: undefined, + audioOutputOptions: undefined, videoOptions: undefined, selectedAudio: undefined, + selectedAudioOutput: undefined, selectedVideo: undefined, selectAudioButtonOption: undefined, + selectAudioOutputOption: undefined, selectVideoButtonOption: undefined, }), ...buildMuteBehaviors(scope, muteStates), diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css index e5bba238..1d524268 100644 --- a/src/components/MediaMuteAndSwitchButton.module.css +++ b/src/components/MediaMuteAndSwitchButton.module.css @@ -35,3 +35,60 @@ Please see LICENSE in the repository root for full details. transform: rotate(360deg); } } + +.menu { + display: flex; + flex-direction: column; +} + +/* Only the device lists scroll, bounded by the measured call area: the menu is + portalled out of the root, so CSS can't size it against the call. */ +.deviceList { + overflow-y: auto; + min-block-size: 0; + max-block-size: var(--device-list-max-height); + /* Keeps a row reached by keyboard clear of the sticky heading and meter. */ + scroll-padding-block: var(--device-list-scroll-padding-start, 0) + var(--device-list-scroll-padding-end, 0); +} + +/* Compound's heading rule heads each section; the design adds space below it. */ +.menu h3 { + margin-block-end: var(--cpd-space-5x); +} + +/* And more above a heading that follows another section. */ +.deviceList [role="group"] + [role="group"] h3 { + margin-block-start: var(--cpd-space-7x); +} + +/* Sticky within its own section. Opaque and inset a border width so it doesn't + paint over the menu's outline. */ +.sectionHeading { + position: sticky; + inset-block-start: 0; + background: var(--cpd-color-bg-canvas-default); + margin-inline: var(--cpd-border-width-1); + margin-block-start: var(--cpd-border-width-1); +} + +/* Sticky at the foot of the microphone section; opaque and inset as above. */ +.stickyMeter { + position: sticky; + inset-block-end: 0; + background: var(--cpd-color-bg-canvas-default); + margin-inline: var(--cpd-border-width-1); + margin-block-end: var(--cpd-border-width-1); +} + +/* Radix focuses whatever the pointer is over, so the browser's ring would + follow the mouse. Replaced by one shown only for keyboard focus. */ +.menu [role^="menuitem"]:focus, +.menu [role^="menuitem"]:focus-visible { + outline: none; +} + +.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus { + outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused); + outline-offset: calc(-1 * var(--cpd-border-width-2)); +} diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx index 89c12392..d4965892 100644 --- a/src/components/MediaMuteAndSwitchButton.stories.tsx +++ b/src/components/MediaMuteAndSwitchButton.stories.tsx @@ -5,23 +5,90 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { fn, userEvent, within, expect } from "storybook/test"; -import { type JSX } from "react"; +import { fn, userEvent, waitFor, within, expect } from "storybook/test"; +import { useEffect, useState, type FC, type JSX, type ReactNode } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton"; +import styles from "./MediaMuteAndSwitchButton.module.css"; +import meterStyles from "./MicrophoneLevelMeter.module.css"; import { MediaDevicesContext } from "../MediaDevicesContext"; +import { RootElementProvider } from "../RootElementContext"; import { MediaDevices } from "../state/MediaDevices"; import { globalScope } from "../state/ObservableScope"; -const mediaDevices = new MediaDevices(globalScope); +const mediaDevices = new MediaDevices(globalScope, { + controlledAudioDevices: false, +}); + +/** Supplies a microphone, a wavering tone: a story's invented device ids match no hardware. */ +const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => { + useEffect(() => { + const context = new AudioContext(); + const microphone = context.createMediaStreamDestination(); + const tone = context.createOscillator(); + const loudness = context.createGain(); + // Wavers between a third and two thirds of full scale, so it reads as live. + const swing = context.createOscillator(); + const depth = context.createGain(); + loudness.gain.value = 0.25; + depth.gain.value = 0.2; + swing.frequency.value = 0.6; + tone.frequency.value = 220; + swing.connect(depth).connect(loudness.gain); + tone.connect(loudness).connect(microphone); + tone.start(); + swing.start(); + + const devices = navigator.mediaDevices; + const openedForReal = devices.getUserMedia.bind(devices); + const opened = Promise.resolve(microphone.stream); + // A fresh clone each time, so a caller stopping its tracks doesn't end the next. + devices.getUserMedia = async (): Promise => + (await opened).clone(); + + return (): void => { + devices.getUserMedia = openedForReal; + tone.stop(); + swing.stop(); + void context.close(); + }; + }, []); + + return <>{children}; +}; + +/** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */ +const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => { + const [callArea, setCallArea] = useState(null); + return ( +

+ {callArea !== null && ( + {children} + )} +
+ ); +}; const meta = { component: MediaMuteAndSwitchButton, decorators: [ (Story): JSX.Element => ( - + + + + + ), ], @@ -32,7 +99,6 @@ type Story = StoryObj; export const Default: Story = { args: { - title: "SomeMenu", iconsAndLabels: "audio", enabled: true, options: [ @@ -40,6 +106,13 @@ export const Default: Story = { { label: { type: "name", name: "Option 2" }, id: "2" }, ], selectedOption: "1", + // The footer always passes an output list to the audio menu. + outputOptions: [ + { label: { type: "default", name: "Built-in Output" }, id: "default" }, + { label: { type: "name", name: "Headset" }, id: "spk2" }, + ], + selectedOutputOption: "default", + onSelectOutput: fn(), onMuteClick: fn(), onSelect: fn(), }, @@ -48,7 +121,6 @@ export const Default: Story = { export const AudioMute: Story = { args: { ...Default.args, - title: "Microphone", iconsAndLabels: "audio", enabled: false, options: [ @@ -71,21 +143,19 @@ export const AudioMute: Story = { export const AudioUnmute: Story = { args: { - title: "Microphone", + ...Default.args, iconsAndLabels: "audio", enabled: true, options: [ { label: { type: "name", name: "Microphone 1" }, id: "1" }, { label: { type: "name", name: "Microphone 2" }, id: "2" }, ], - selectedOption: "2", }, }; export const VideoMute: Story = { args: { - title: "Camera", iconsAndLabels: "video", enabled: false, options: [ @@ -99,7 +169,6 @@ export const VideoMute: Story = { export const VideoUnmute: Story = { args: { - title: "Camera", iconsAndLabels: "video", enabled: true, options: [ @@ -111,3 +180,479 @@ export const VideoUnmute: Story = { selectedOption: "2", }, }; + +export const SpeakerAndMicrophoneSections: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + outputOptions: [ + { label: { type: "default", name: "Built-in Output" }, id: "default" }, + { label: { type: "name", name: "Headset" }, id: "spk2" }, + ], + selectedOutputOption: "default", + onSelectOutput: fn(), + }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + const headset = await within(document.body).findByRole("menuitemradio", { + name: "Headset", + }); + await userEvent.click(headset); + await expect(args.onSelectOutput).toHaveBeenCalledWith("spk2"); + + // A few devices fit, so the list doesn't scroll. + const list = document.body.querySelector( + `.${styles.deviceList}`, + )!; + await expect(list.scrollHeight).toBe(list.clientHeight); + + // Each section is headed by its own edge-to-edge rule, with no separator. + const menu = document.body.querySelector("[role='menu']")!; + await expect( + document.body.querySelectorAll("[role='separator']"), + ).toHaveLength(0); + const headings = document.body.querySelectorAll( + `.${styles.sectionHeading}`, + ); + await expect(headings).toHaveLength(2); + const frame = menu.getBoundingClientRect(); + for (const heading of headings) { + const rule = heading.querySelector("h3")!; + await expect( + Number.parseFloat(getComputedStyle(rule).borderBottomWidth), + ).toBeGreaterThan(0); + // Edge to edge, within the frame. + const box = rule.getBoundingClientRect(); + await expect(box.left - frame.left).toBeLessThanOrEqual(2); + await expect(frame.right - box.right).toBeLessThanOrEqual(2); + } + + // The first device sits further below the rule than from the menu's edge. + // Asserted as a relationship, not pixels: the asymmetry is the design. + const control = document.body.querySelector("input[type='radio']")!; + const ruleBottom = headings[0] + .querySelector("h3")! + .getBoundingClientRect().bottom; + const box = control.getBoundingClientRect(); + await expect(box.top - ruleBottom).toBeGreaterThan(box.left - frame.left); + + // And a section stands further from the one above than from its own first + // device. + const groups = document.body.querySelectorAll("[role='group']"); + const speakers = groups[0].querySelectorAll("input[type='radio']"); + const lastSpeaker = speakers[speakers.length - 1].getBoundingClientRect(); + const nextHeading = groups[1]!.querySelector("h3")!.getBoundingClientRect(); + await expect(nextHeading.top - lastSpeaker.bottom).toBeGreaterThan( + box.top - ruleBottom, + ); + }, +}; + +export const OutputCannotBeChosen: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + outputOptions: [ + { label: { type: "name", name: "Speakers" }, id: "spk1" }, + { label: { type: "name", name: "Headset" }, id: "spk2" }, + ], + selectedOutputOption: "spk1", + // No callback: the speakers are listed, but none can be picked. + onSelectOutput: undefined, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + const speakers = await within(document.body).findByRole("menuitemradio", { + name: "Speakers", + }); + await expect(speakers).toHaveAttribute("aria-disabled", "true"); + }, +}; + +export const OnlyOneDevice: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [{ label: { type: "name", name: "Microphone 1" }, id: "mic1" }], + selectedOption: "mic1", + outputOptions: [{ label: { type: "name", name: "Speakers" }, id: "spk1" }], + selectedOutputOption: "spk1", + onSelectOutput: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + // Shown, disabled, rather than hidden. + const only = await within(document.body).findByRole("menuitemradio", { + name: "Microphone 1", + }); + await expect(only).toHaveAttribute("aria-disabled", "true"); + }, +}; + +/** A requested device hasn't arrived: nothing in either section can be picked. */ +export const SelectionSettling: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + outputOptions: [ + { label: { type: "name", name: "Speakers" }, id: "spk1" }, + { label: { type: "name", name: "Headset" }, id: "spk2" }, + ], + selectedOutputOption: "spk1", + onSelectOutput: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + const menu = within(document.body); + + // selectedOption never changes, so the request stays in flight. + await userEvent.click( + await menu.findByRole("menuitemradio", { name: "Microphone 2" }), + ); + + await expect(await menu.findByLabelText("Activating…")).toBeVisible(); + for (const item of menu.getAllByRole("menuitemradio")) + await expect(item).toHaveAttribute("aria-disabled", "true"); + }, +}; + +/** + * The ring shows for keyboard focus only. Asserted on the painted outline: + * asserting data-focus-source would still pass with the CSS rule deleted. + */ +export const KeyboardFocusRing: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + const menu = within(document.body); + const first = await menu.findByRole("menuitemradio", { + name: "Microphone 1", + }); + + // Opened by pointer: no ring, even though Radix has moved focus. + await expect(outlineWidth(first)).toBe(0); + + await userEvent.keyboard("{ArrowDown}"); + const focused = document.activeElement as HTMLElement; + await expect(focused).toHaveRole("menuitemradio"); + await expect(outlineWidth(focused)).toBeGreaterThan(0); + + // And the pointer takes it away again. + await userEvent.hover(first); + await expect(outlineWidth(document.activeElement as HTMLElement)).toBe(0); + }, +}; + +/** The list scrolls; the meter stays at the foot of the microphone section. */ +export const ManyDevices: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: Array.from({ length: 20 }, (_, i) => ({ + label: { type: "name" as const, name: `Microphone ${i + 1}` }, + id: `mic${i + 1}`, + })), + selectedOption: "mic1", + outputOptions: Array.from({ length: 6 }, (_, i) => ({ + label: { type: "name" as const, name: `Speaker ${i + 1}` }, + id: `spk${i + 1}`, + })), + selectedOutputOption: "spk1", + onSelectOutput: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + const menu = within(document.body); + + // The sticky wrapper rather than the meter: without a fake microphone (as on + // WebKit) the meter shows a message instead of a level. + const list = document.body.querySelector( + `.${styles.deviceList}`, + )!; + const sticky = await waitFor(() => { + const element = document.body.querySelector( + `.${styles.stickyMeter}`, + ); + if (element === null) throw new Error("the meter has not rendered yet"); + return element; + }); + await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight); + + // Scrolled so the microphone section starts at the top: only there does a + // pinned meter differ from one that is simply last. + const group = await menu.findByRole("group", { name: "Microphone" }); + list.scrollTop += + group.getBoundingClientRect().top - list.getBoundingClientRect().top; + await expect(list.scrollTop + list.clientHeight).toBeLessThan( + list.scrollHeight, + ); + + const scrollport = list.getBoundingClientRect(); + const pinned = sticky.getBoundingClientRect(); + await expect(pinned.bottom).toBeLessThanOrEqual(scrollport.bottom + 1); + await expect(pinned.top).toBeGreaterThanOrEqual(scrollport.top - 1); + + // The whole menu is on screen, not bounded by the document. + const frame = document.body + .querySelector("[role='menu']")! + .getBoundingClientRect(); + await expect(frame.top).toBeGreaterThanOrEqual(0); + await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1); + + // The meter is the menu's one opaque part, so it must stay inside the frame. + await expect(pinned.left).toBeGreaterThan(frame.left); + await expect(pinned.right).toBeLessThan(frame.right); + }, +}; + +/** Painted outline width, in px. */ +function outlineWidth(element: HTMLElement): number { + const { outlineStyle, outlineWidth } = getComputedStyle(element); + if (outlineStyle === "none") return 0; + return Number.parseFloat(outlineWidth) || 0; +} + +/** Safari lists no outputs: a disabled, selected Default stands in. */ +export const OutputNotEnumerated: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + outputOptions: [], + selectedOutputOption: undefined, + onSelectOutput: undefined, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + const speakers = await within(document.body).findByRole("menuitemradio", { + name: "Default", + }); + await expect(speakers).toHaveAttribute("aria-disabled", "true"); + }, +}; + +/** The meter's icon shares the radio controls' centre line; only a real browser lays this out. */ +export const MeterAlignsWithTheDeviceRows: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ], + selectedOption: "mic1", + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + const menu = document.body.querySelector("[role='menu']")!; + const radio = menu.querySelector("input[type='radio']")!; + const icon = await waitFor(() => { + const element = document.body.querySelector(`.${meterStyles.icon}`); + if (element === null) throw new Error("the meter has not rendered yet"); + return element; + }); + + // A pixel of slack, for subpixel layout. + await expect(Math.abs(centre(icon) - centre(radio))).toBeLessThanOrEqual(1); + }, +}; + +/** Inline-axis centre of an element. */ +function centre(element: Element): number { + const box = element.getBoundingClientRect(); + return box.left + box.width / 2; +} + +/** Every row the keyboard reaches is fully visible, not under a heading or the meter. */ +export const KeyboardReachesEveryDevice: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + // Enough to scroll both ways, so either end can hide a row. + options: Array.from({ length: 20 }, (_, i) => ({ + label: { type: "name" as const, name: `Microphone ${i + 1}` }, + id: `mic${i + 1}`, + })), + selectedOption: "mic1", + outputOptions: Array.from({ length: 4 }, (_, i) => ({ + label: { type: "name" as const, name: `Speaker ${i + 1}` }, + id: `spk${i + 1}`, + })), + selectedOutputOption: "spk1", + onSelectOutput: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + + const meter = await waitFor(() => { + const element = document.body.querySelector( + `.${styles.stickyMeter}`, + ); + if (element === null) throw new Error("the meter has not rendered yet"); + return element; + }); + + // Drawn over the list: the sticky headings and the meter. + const overlays = [ + meter, + ...document.body.querySelectorAll( + `.${styles.sectionHeading}`, + ), + ]; + const items = within(document.body).getAllByRole("menuitemradio"); + + // Down to the last device and back up. + for (const key of ["{ArrowDown}", "{ArrowUp}"]) + for (let i = 0; i < items.length; i++) { + await userEvent.keyboard(key); + const focused = document.activeElement as HTMLElement; + await expect(focused).toHaveRole("menuitemradio"); + // Checked as overlap: a heading only covers rows while its section is on + // screen. + await expect(overlapping(focused, overlays)).toBeLessThanOrEqual(1); + } + }, +}; + +/** A section's heading stays at the top while the section is in view, and leaves with it. */ +export const HeadingsStayWhileScrolling: Story = { + args: { + ...Default.args, + iconsAndLabels: "audio", + enabled: true, + options: Array.from({ length: 20 }, (_, i) => ({ + label: { type: "name" as const, name: `Microphone ${i + 1}` }, + id: `mic${i + 1}`, + })), + selectedOption: "mic1", + outputOptions: Array.from({ length: 4 }, (_, i) => ({ + label: { type: "name" as const, name: `Speaker ${i + 1}` }, + id: `spk${i + 1}`, + })), + selectedOutputOption: "spk1", + onSelectOutput: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Microphone" })); + const menu = within(document.body); + + const list = document.body.querySelector( + `.${styles.deviceList}`, + )!; + const group = await menu.findByRole("group", { name: "Microphone" }); + // By class: the heading is aria-hidden, and its group carries the name. + const heading = group.querySelector( + `.${styles.sectionHeading}`, + )!; + + // Far enough that the heading is only on screen if it is stuck there. + list.scrollTop += + group.getBoundingClientRect().top - list.getBoundingClientRect().top + 80; + + const scrollport = list.getBoundingClientRect(); + await expect(heading.getBoundingClientRect().top).toBeLessThanOrEqual( + scrollport.top + 2, + ); + await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan( + scrollport.top, + ); + // Clear of the menu's frame. + const frame = document.body + .querySelector("[role='menu']")! + .getBoundingClientRect(); + await expect(heading.getBoundingClientRect().left).toBeGreaterThan( + frame.left, + ); + }, +}; + +/** How far the most overlapping of `overlays` covers `element`, in px. */ +function overlapping(element: Element, overlays: Element[]): number { + const box = element.getBoundingClientRect(); + return overlays.reduce((worst, overlay) => { + const over = overlay.getBoundingClientRect(); + const shared = + Math.min(box.bottom, over.bottom) - Math.max(box.top, over.top); + return Math.max(worst, shared); + }, 0); +} + +/** The blur toggle gets the keyboard ring too: it is the menu's child, not the list's. */ +export const FocusRingCoversTheBlurToggle: Story = { + args: { + ...VideoUnmute.args, + iconsAndLabels: "video", + videoBlurEnabled: false, + videoBlurToggleClick: fn(), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole("button", { name: "Camera" })); + const toggle = await within(document.body).findByRole("menuitemcheckbox", { + name: /Blur background/, + }); + + // Arrow down past the cameras to the toggle. + for (let i = 0; i < 6 && document.activeElement !== toggle; i++) + await userEvent.keyboard("{ArrowDown}"); + await expect(document.activeElement).toBe(toggle); + // The same ring the device rows get. + await expect(outlineWidth(toggle)).toBeGreaterThan(0); + + // And the pointer takes it away, with the toggle still focused. + await userEvent.hover(toggle); + await expect(document.activeElement).toBe(toggle); + await expect(outlineWidth(toggle)).toBe(0); + }, +}; diff --git a/src/components/MediaMuteAndSwitchButton.test.tsx b/src/components/MediaMuteAndSwitchButton.test.tsx index fcc9f0b4..9fd67dfd 100644 --- a/src/components/MediaMuteAndSwitchButton.test.tsx +++ b/src/components/MediaMuteAndSwitchButton.test.tsx @@ -5,40 +5,61 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { describe, expect, test, vi } from "vitest"; -import { act, render, screen, type RenderResult } from "@testing-library/react"; +import { afterEach, describe, expect, test, vi } from "vitest"; +import { axe } from "vitest-axe"; +import { + act, + render, + screen, + within, + type RenderResult, +} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { type JSX, useState, type ReactNode } from "react"; +import { Profiler, type JSX, useState, type ReactNode } from "react"; import { TooltipProvider } from "@vector-im/compound-web"; -import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton"; +import { + MediaMuteAndSwitchButton, + type MenuOptions, +} from "./MediaMuteAndSwitchButton"; import { MediaDevicesContext } from "../MediaDevicesContext"; import { type MediaDevices } from "../state/MediaDevices"; +import { restoreAudioCapture, stubAudioCapture } from "../utils/test"; interface RenderOptions { requestDeviceNames: () => void; } -function renderComponent( +function withProviders( component: ReactNode, { requestDeviceNames = (): void => {} }: Partial = {}, -): RenderResult { - return render( +): JSX.Element { + return ( {component} - , + ); } +function renderComponent( + component: ReactNode, + options: Partial = {}, +): RenderResult { + return render(withProviders(component, options)); +} + describe("MediaMuteAndSwitchButton", () => { + // Only one test stubs the capture; don't let it leak into the rest. + afterEach(restoreAudioCapture); + test("renders", () => { const { container } = renderComponent( - + , ); expect(container).toMatchSnapshot(); @@ -50,11 +71,7 @@ describe("MediaMuteAndSwitchButton", () => { enabled: boolean, ): RenderResult => { return renderComponent( - , + , ); }; const renderAudioEndabled = renderLabels("audio", true); @@ -81,7 +98,6 @@ describe("MediaMuteAndSwitchButton", () => { const onMute = vi.fn(); const { getByRole } = renderComponent( { const onMute = vi.fn(); const { getByRole } = renderComponent( { const onMute = vi.fn(); const { getByRole } = renderComponent( { const user = userEvent.setup(); const requestDeviceNames = vi.fn(); renderComponent( - , + , { requestDeviceNames }, ); @@ -157,7 +167,6 @@ describe("MediaMuteAndSwitchButton", () => { renderComponent( <> { selectedOption="mic1" /> { const onSelect = vi.fn(); const { getByRole } = renderComponent( { const onSelect = vi.fn(); const { getByRole } = renderComponent( { const [selectedOption, setSelectedOption] = useState("mic1"); return ( { const onVideoBlurToggle = vi.fn(); const { getByRole } = renderComponent( { expect(onVideoBlurToggle).toHaveBeenCalled(); }); - test("renders check icon to mark the selected menu item", async () => { + test("marks the selected menu item as checked", async () => { const user = userEvent.setup(); const { getByRole } = renderComponent( { />, ); - // open menu await user.click(getByRole("button", { name: "Microphone" })); - // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG - const mic1Item = screen.getByRole("menuitemradio", { - name: "Microphone 2", - }); - expect(mic1Item.querySelectorAll("svg").length).toBe(2); + screen.getByRole("menuitemradio", { name: "Microphone 2", checked: true }); + screen.getByRole("menuitemradio", { name: "Microphone 1", checked: false }); + }); - // The unselected item (mic1) only renders its IconOptions SVG - const mic2Item = screen.getByRole("menuitemradio", { + test("disables every device while a selection is settling", async () => { + const user = userEvent.setup(); + const { promise, resolve } = Promise.withResolvers(); + function Wrapper(): JSX.Element { + const [selectedOption, setSelectedOption] = useState("mic1"); + return ( + { + void promise.then(() => setSelectedOption(id)); + }} + outputOptions={[ + { label: { type: "name", name: "Speakers" }, id: "spk1" }, + { label: { type: "name", name: "Headset" }, id: "spk2" }, + ]} + selectedOutputOption="spk1" + onSelectOutput={vi.fn()} + /> + ); + } + + const { getByRole } = renderComponent(); + await user.click(getByRole("button", { name: "Microphone" })); + await user.click( + screen.getByRole("menuitemradio", { name: "Microphone 2" }), + ); + + // In flight: nothing else can be picked, in either section. + for (const name of ["Microphone 1", "Speakers", "Headset"]) { + expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute( + "aria-disabled", + "true", + ); + } + + await act(async () => { + resolve(); + await promise; + }); + + // Settled: selectable again. + expect( + screen.getByRole("menuitemradio", { name: "Microphone 1" }), + ).not.toHaveAttribute("aria-disabled", "true"); + expect( + screen.getByRole("menuitemradio", { name: "Headset" }), + ).not.toHaveAttribute("aria-disabled", "true"); + }); + + test("lets go of a device switch that never arrives", async () => { + const user = userEvent.setup(); + // onSelect never reports back, as when a device is removed mid-switch. + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + await user.click( + screen.getByRole("menuitemradio", { name: "Microphone 2" }), + ); + await user.keyboard("{Escape}"); + await user.click(getByRole("button", { name: "Microphone" })); + + for (const name of ["Microphone 1", "Speakers", "Headset"]) { + expect(screen.getByRole("menuitemradio", { name })).not.toHaveAttribute( + "aria-disabled", + "true", + ); + } + }); + + test("lets go of a device switch whose device is unplugged", async () => { + const user = userEvent.setup(); + const mics: MenuOptions[] = [ + { label: { type: "name", name: "Microphone 1" }, id: "mic1" }, + { label: { type: "name", name: "Microphone 2" }, id: "mic2" }, + ]; + const menu = (options: MenuOptions[]): JSX.Element => ( + + ); + + const { getByRole, rerender } = renderComponent(menu(mics)); + await user.click(getByRole("button", { name: "Microphone" })); + await user.click( + screen.getByRole("menuitemradio", { name: "Microphone 2" }), + ); + + // The second microphone is unplugged before the switch lands. + rerender(withProviders(menu(mics.slice(0, 1)))); + + // Selectable again without closing the menu. + expect( + screen.getByRole("menuitemradio", { name: "Headset" }), + ).not.toHaveAttribute("aria-disabled", "true"); + }); + + test("moves the level without re-rendering anything", async () => { + // The level is drawn into the DOM, so a moving level commits nothing. + const capture = stubAudioCapture(); + const user = userEvent.setup(); + let commits = 0; + + const { getByRole } = renderComponent( + { + commits++; + }} + > + + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + capture.grant(); + await vi.waitFor(() => expect(capture.contexts).toHaveLength(1)); + const meter = await screen.findByRole("meter"); + // The capture's arrival is one render: the idle level swapped for its own. + await act(async () => {}); + const settled = commits; + + // The meter smooths by elapsed time, so hand-driven frames need a clock. + let elapsed = performance.now(); + const clock = vi + .spyOn(performance, "now") + .mockImplementation(() => (elapsed += 16)); + + // One frame per task, as a browser delivers them: one act() would batch them. + for (let step = 1; step <= 8; step++) { + capture.speak(step / 8); + await act(async () => { + capture.drawFrames(1); + await Promise.resolve(); + }); + } + clock.mockRestore(); + + expect(meter.getAttribute("aria-valuenow")).not.toBe("0"); + expect(commits - settled).toBe(0); + }); + + test("camera menu uses the same selection pattern and keeps the blur toggle", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Camera" })); + + screen.getByRole("menuitemradio", { name: "Camera 1", checked: true }); + screen.getByRole("menuitemradio", { name: "Camera 2", checked: false }); + expect( + screen.getByRole("menuitemcheckbox", { name: "Blur background" }), + ).toBeInTheDocument(); + }); + + test("marks focus as keyboard-driven only when the keyboard moved it", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + const list = screen + .getByRole("menuitemradio", { name: "Microphone 1" }) + .closest("[data-focus-source]"); + + // The menu focuses whatever the pointer is over, so focus alone says nothing. + expect(list).toHaveAttribute("data-focus-source", "pointer"); + + await user.keyboard("{ArrowDown}"); + expect(list).toHaveAttribute("data-focus-source", "keyboard"); + + await user.pointer({ + target: screen.getByRole("menuitemradio", { name: "Microphone 2" }), + coords: { clientX: 10, clientY: 10 }, + }); + expect(list).toHaveAttribute("data-focus-source", "pointer"); + }); + + test("marks the selected device with the accent fill", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + const selected = screen + .getByRole("menuitemradio", { name: "Microphone 2" }) + .querySelector("input[type=radio]"); + expect(selected).toBeChecked(); + // readOnly would paint the selected radio muted. + expect(selected).not.toHaveAttribute("readonly"); + }); + + test("the open menu has no accessibility violations", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + const menu = document.querySelector('[role="menu"]'); + expect(await axe(menu as HTMLElement)).toHaveNoViolations(); + }); + + test("puts the speaker section above the microphone section", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + const speakers = screen.getByRole("menuitemradio", { name: "Speakers" }); + const microphone = screen.getByRole("menuitemradio", { name: "Microphone 1", }); - expect(mic2Item.querySelectorAll("svg").length).toBe(1); + expect( + speakers.compareDocumentPosition(microphone) & + Node.DOCUMENT_POSITION_FOLLOWING, + ).toBeTruthy(); + }); + + test("lists speaker and microphone sections", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + screen.getByRole("menuitemradio", { + name: "Default (Built-in Output)", + checked: true, + }); + screen.getByRole("menuitemradio", { name: "Headset", checked: false }); + screen.getByRole("menuitemradio", { name: "Microphone 1", checked: true }); + screen.getByRole("menuitemradio", { name: "Microphone 2", checked: false }); + }); + + test("calls the output select callback on speaker click", async () => { + const user = userEvent.setup(); + const onSelectOutput = vi.fn(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + await user.click(screen.getByRole("menuitemradio", { name: "Headset" })); + + expect(onSelectOutput).toHaveBeenCalledWith("spk2"); + }); + + test("shows a single device entry disabled", async () => { + const user = userEvent.setup(); + const onSelect = vi.fn(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + // Shown, but not selectable. + const only = screen.getByRole("menuitemradio", { name: "Microphone 1" }); + expect(only).toHaveAttribute("aria-disabled", "true"); + }); + + test("shows a default speaker where the platform lists none", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + const speakers = screen + .getAllByRole("group") + .find((group) => group.getAttribute("aria-label") === "Speaker")!; + const entries = within(speakers).getAllByRole("menuitemradio"); + expect(entries).toHaveLength(1); + expect(entries[0]).toHaveAccessibleName("Default"); + expect(entries[0]).toHaveAttribute("aria-disabled", "true"); + expect(entries[0]).toHaveAttribute("aria-checked", "true"); + expect( + within(entries[0]).getByRole("radio", { hidden: true }), + ).toBeChecked(); + }); + + test("shows the speaker section disabled when output selection is unsupported", async () => { + const user = userEvent.setup(); + const { getByRole } = renderComponent( + , + ); + + await user.click(getByRole("button", { name: "Microphone" })); + + expect( + screen.getByRole("menuitemradio", { name: "Speakers" }), + ).toHaveAttribute("aria-disabled", "true"); + expect( + screen.getByRole("menuitemradio", { name: "Headset" }), + ).toHaveAttribute("aria-disabled", "true"); + expect( + screen.getByRole("menuitemradio", { name: "Microphone 2" }), + ).not.toHaveAttribute("aria-disabled", "true"); }); }); diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx index 3e344dd3..25342f00 100644 --- a/src/components/MediaMuteAndSwitchButton.tsx +++ b/src/components/MediaMuteAndSwitchButton.tsx @@ -5,37 +5,48 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { type ComponentType, useState, type FC, useEffect } from "react"; +import { + useCallback, + useState, + type CSSProperties, + type FC, + useEffect, + type ReactElement, +} from "react"; import { Button, Menu, MenuItem, + MenuTitle, + RadioInput, ToggleMenuItem, } from "@vector-im/compound-web"; import { - CheckIcon, ChevronUpIcon, ChevronDownIcon, - MicOnIcon, SpinnerIcon, - VideoCallIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import classNames from "classnames"; import { useTranslation } from "react-i18next"; +import { distinctUntilChanged, map } from "rxjs"; import styles from "./MediaMuteAndSwitchButton.module.css"; import { MicButton, VideoButton } from "../button"; -import { type DeviceLabel } from "../state/MediaDevices"; +import { + type AudioOutputDeviceLabel, + type DeviceLabel, +} from "../state/MediaDevices"; import { useMediaDevices } from "../MediaDevicesContext"; +import { useRootElement } from "../RootElementContext"; +import { observeElementSize$ } from "../utils/elementSize"; +import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter"; export interface MenuOptions { - label: DeviceLabel; + label: DeviceLabel | AudioOutputDeviceLabel; id: string; } export interface MediaMuteAndSwitchButtonProps { - /** The title used in the Switcher modal. */ - title: string; /** If the Mute button is enabled */ enabled?: boolean; /** Callback if the mute button is clicked */ @@ -47,6 +58,12 @@ export interface MediaMuteAndSwitchButtonProps { options?: MenuOptions[]; /** The option that will currently be rendered as the selected option */ selectedOption?: string; + /** Output (speaker) devices. Audio menu only. */ + outputOptions?: MenuOptions[]; + /** The output option currently rendered as selected */ + selectedOutputOption?: string; + /** Picks an output device. Undefined disables the speaker section. */ + onSelectOutput?: (id: string) => void; videoBlurToggleClick?: () => void; videoBlurEnabled?: boolean; /** @@ -58,90 +75,240 @@ export interface MediaMuteAndSwitchButtonProps { const BLUR_ID = "blur"; +/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */ +const DEFAULT_OUTPUT_ID = "default"; + +/** Largest share of the call area's height the device list may take. */ +const LIST_SHARE_OF_CALL = 0.6; + +/** Smallest device list height in px, so a short call still shows more than one device. */ +const MIN_LIST_HEIGHT = 160; + export const MediaMuteAndSwitchButton: FC = ({ - title, enabled, busy, onMuteClick, iconsAndLabels, options, selectedOption, + outputOptions, + selectedOutputOption, + onSelectOutput, videoBlurEnabled, videoBlurToggleClick, onSelect, }) => { - const [plannedSelection, setPlannedSelection] = useState(null); + // Requested but not yet selected. Keyed by kind too, since Chrome uses + // "default" for both an input and an output. + const [plannedSelection, setPlannedSelection] = useState<{ + kind: "input" | "output"; + id: string; + } | null>(null); const [menuOpen, setMenuOpen] = useState(false); + const onOpenChange = useCallback((open: boolean): void => { + setMenuOpen(open); + // Drop a request that never arrived. + if (!open) setPlannedSelection(null); + }, []); const isBusy = busy ?? false; const { t } = useTranslation(); const devices = useMediaDevices(); + /** + * Records on the menu whether the keyboard or the pointer moved focus, for + * the focus ring. `:focus-visible` can't tell: Radix focuses whatever the + * pointer is over. Listened for on the menu, not the document, so a second + * Element Call on the page doesn't answer for this one. + */ + const trackFocusSource = useCallback( + (list: HTMLDivElement | null): (() => void) | undefined => { + const menu = list?.closest('[role="menu"]'); + if (menu === null || menu === undefined) return; + const record = (source: "keyboard" | "pointer"): void => { + menu.dataset.focusSource = source; + }; + record("pointer"); + const usedKeyboard = (): void => record("keyboard"); + const usedPointer = (): void => record("pointer"); + menu.addEventListener("keydown", usedKeyboard, true); + menu.addEventListener("pointermove", usedPointer, true); + return (): void => { + menu.removeEventListener("keydown", usedKeyboard, true); + menu.removeEventListener("pointermove", usedPointer, true); + }; + }, + [], + ); + + // Measured on the call area: CSS can't size the portalled menu against it. + const rootElement = useRootElement(); + const [listMaxHeight, setListMaxHeight] = useState(); + useEffect(() => { + if (!menuOpen) return; + // Followed, since a host can resize the call while the menu is open. + const subscription = observeElementSize$(rootElement) + .pipe( + map(({ height }) => + Math.max(MIN_LIST_HEIGHT, Math.round(height * LIST_SHARE_OF_CALL)), + ), + distinctUntilChanged(), + ) + .subscribe(setListMaxHeight); + return (): void => subscription.unsubscribe(); + }, [menuOpen, rootElement]); + + // Kept clear at the list's foot, so a row reached by keyboard isn't under + // the meter. + const [meterHeight, meter] = useMeasuredHeight(); + + // Likewise at its head, for the sticky headings. + const [headingHeight, heading] = useMeasuredHeight(); + useEffect(() => { if (menuOpen) devices.requestDeviceNames(); // No-op after the first call }, [menuOpen, devices]); - let button; - let toggles: { label: string; enabled: boolean; id: string }[] = []; - switch (iconsAndLabels) { - case "video": - button = ( - { - onMuteClick?.(); - e.preventDefault(); - e.stopPropagation(); - }} - disabled={isBusy || onMuteClick === undefined} - data-testid="incall_videomute" - /> - ); - if (videoBlurToggleClick !== undefined) { - toggles = [ + const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton; + const button = ( + { + onMuteClick?.(); + e.preventDefault(); + e.stopPropagation(); + }} + disabled={isBusy || onMuteClick === undefined} + data-testid={ + iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute" + } + /> + ); + + const toggles = + iconsAndLabels === "video" && videoBlurToggleClick !== undefined + ? [ { label: t("action.blur_background"), enabled: videoBlurEnabled ?? false, id: BLUR_ID, }, - ]; - } - break; - case "audio": - button = ( - { - onMuteClick?.(); - e.preventDefault(); - e.stopPropagation(); - }} - disabled={isBusy || onMuteClick === undefined} - data-testid="incall_mute" - /> - ); - break; - } + ] + : []; - let IconOptions: ComponentType> | undefined; let optionsButtonLabel: string; + let menuTitle: string; let numberedLabel: (number: number) => string; switch (iconsAndLabels) { case "video": - IconOptions = VideoCallIcon; optionsButtonLabel = t("settings.devices.camera"); + menuTitle = t("settings.devices.camera_source"); numberedLabel = (n): string => t("settings.devices.camera_numbered", { n }); break; case "audio": - IconOptions = MicOnIcon; optionsButtonLabel = t("settings.devices.microphone"); + menuTitle = t("settings.devices.mic_source"); numberedLabel = (n): string => t("settings.devices.microphone_numbered", { n }); break; } + const labelText = ( + label: MenuOptions["label"], + numbered: (n: number) => string, + ): string => { + switch (label.type) { + case "name": + return label.name; + case "number": + return numbered(label.number); + case "default": + return label.name === null + ? t("settings.devices.default") + : t("settings.devices.default_named_plain", { name: label.name }); + case "speaker": + return t("settings.devices.loudspeaker"); + case "earpiece": + return t("settings.devices.handset"); + } + }; + + // Nothing can be picked while a requested device is on offer but not yet + // selected, so a second request can't overtake it. + const plannedOutput = plannedSelection?.kind === "output"; + const selectedOfPlannedKind = plannedOutput + ? selectedOutputOption + : selectedOption; + const offeredOfPlannedKind = plannedOutput ? outputOptions : options; + const settling = + plannedSelection !== null && + plannedSelection.id !== selectedOfPlannedKind && + offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true; + + // Safari lists no outputs: show a disabled, selected Default rather than an + // empty section. + const noOutputsListed = outputOptions?.length === 0; + const speakerOptions: MenuOptions[] | undefined = noOutputsListed + ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }] + : outputOptions; + const selectedSpeaker = noOutputsListed + ? DEFAULT_OUTPUT_ID + : selectedOutputOption; + + const deviceItems = ( + kind: "input" | "output", + items: MenuOptions[] | undefined, + selected: string | undefined, + select: ((id: string) => void) | undefined, + numbered: (n: number) => string, + ): ReactElement[] => { + const list = items ?? []; + // Disabled rather than hidden, so the menu keeps its shape. + const disabled = select === undefined || list.length <= 1 || settling; + return list.map(({ label, id }) => ( + + {}} + /> + + } + onSelect={(e) => { + e.preventDefault(); + if (id === selected) return; + setPlannedSelection({ kind, id }); + select?.(id); + }} + key={id} + role="menuitemradio" + aria-checked={selected === id} + > + {selected !== id && + plannedSelection?.kind === kind && + plannedSelection.id === id && ( + + )} + + )); + }; + return (
= ({ {/* The mute button lives inside */} {button} = ({ /> } > - {options?.map(({ label, id }) => { - let labelText: string; - switch (label.type) { - case "name": - labelText = label.name; - break; - case "number": - labelText = numberedLabel(label.number); - break; +
- ) - } - onSelect={(e) => { - e.preventDefault(); - if (id === selectedOption) return; - setPlannedSelection(id); - onSelect?.(id); - }} - key={id} - role="menuitemradio" - aria-checked={selectedOption === id} - > - {selectedOption === id && ( - + {iconsAndLabels === "audio" && speakerOptions && ( + <> + {/* A menu may only contain items, separators and groups, so each + heading is a hidden part of a named group. */} +
+
+ +
+ {deviceItems( + "output", + speakerOptions, + selectedSpeaker, + onSelectOutput, + (n) => t("settings.devices.speaker_numbered", { n }), + )} +
+ + )} +
+
+ +
+ {/* Apart from the heading, so the sticky meter can't ride over it. */} +
+ {deviceItems( + "input", + options, + selectedOption, + onSelect, + numberedLabel, + )} + {iconsAndLabels === "audio" && ( + )} - {selectedOption !== id && plannedSelection === id && ( - - )} - - ); - })} - {(toggles?.length ?? 0) > 0 &&
} - {toggles?.map((toggle) => ( +
+
+
+ {toggles.length > 0 &&
} + {toggles.map((toggle) => ( { videoBlurToggleClick?.(); e.preventDefault(); }} - checked={toggle.enabled ?? false} + checked={toggle.enabled} key={toggle.id} /> ))} @@ -239,3 +415,25 @@ export const MediaMuteAndSwitchButton: FC = ({
); }; + +/** Follows an element's height. */ +function useMeasuredHeight(): [ + number | undefined, + (element: HTMLElement | null) => (() => void) | undefined, +] { + const [height, setHeight] = useState(); + const ref = useCallback( + (element: HTMLElement | null): (() => void) | undefined => { + if (element === null) return; + const subscription = observeElementSize$(element) + .pipe( + map((size) => size.height), + distinctUntilChanged(), + ) + .subscribe(setHeight); + return (): void => subscription.unsubscribe(); + }, + [], + ); + return [height, ref]; +} diff --git a/src/components/MicrophoneLevelMeter.module.css b/src/components/MicrophoneLevelMeter.module.css new file mode 100644 index 00000000..83e440c5 --- /dev/null +++ b/src/components/MicrophoneLevelMeter.module.css @@ -0,0 +1,65 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +.meter { + /* A device row's icon column, so the bars start where the names do. */ + --meter-icon-size: 24px; + + /* Compound's radio size, whose centre line the icon shares. */ + --device-control-size: 20px; + + display: flex; + align-items: center; + gap: var(--cpd-space-3x); + padding-block: var(--cpd-space-2x); + /* Centres the icon on the radio column: less the row's inset border and half + the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */ + padding-inline-start: calc( + var(--cpd-space-4x) - var(--cpd-border-width-1) - + (var(--meter-icon-size) - var(--device-control-size)) / 2 + ); + padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x)); +} + +.icon { + color: var(--cpd-color-icon-secondary); + flex-shrink: 0; + inline-size: var(--meter-icon-size); + block-size: var(--meter-icon-size); +} + +.segments { + /* Bars keep one size and the width decides how many; the component reads the + sizes back from here. */ + flex: 1; + /* So the bars never set the menu's width. */ + contain: inline-size; + min-inline-size: 0; + display: flex; + align-items: center; + /* Half again a bar's width, per the design. */ + gap: var(--cpd-space-1-5x); +} + +.segment { + flex: none; + inline-size: var(--cpd-space-1x); + block-size: var(--cpd-space-4x); + border-radius: var(--cpd-space-1x); + background: var(--cpd-color-bg-subtle-primary); +} + +/* The count of lit bars carries the level as well as their colour. */ +.segmentLit { + background: var(--cpd-color-bg-accent-rest); +} + +.message { + color: var(--cpd-color-text-secondary); + /* A paragraph's margin would lift the text off centre. */ + margin-block: 0; +} diff --git a/src/components/MicrophoneLevelMeter.stories.tsx b/src/components/MicrophoneLevelMeter.stories.tsx new file mode 100644 index 00000000..933fa186 --- /dev/null +++ b/src/components/MicrophoneLevelMeter.stories.tsx @@ -0,0 +1,161 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, within } from "storybook/test"; +import { type JSX } from "react"; + +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { + MicrophoneLevelMeter, + type MicrophoneLevelMeterProps, +} from "./MicrophoneLevelMeter"; +import styles from "./MicrophoneLevelMeter.module.css"; +import { LEVEL_SCALE } from "../state/MicrophoneLevel"; +import { constant } from "../state/Behavior"; + +/** Roughly the menu's width. It only decides how many bars fit. */ +const STORY_WIDTH = 256; + +const meta = { + component: MicrophoneLevelMeter, + decorators: [ + (Story): JSX.Element => ( +
+ +
+ ), + ], + argTypes: { + state: { + description: + "What the selected microphone can say about itself: a level, or a reason there is none.", + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** A quiet room: hiss below the noise floor lights nothing. */ +export const Silent: Story = { + args: { state: { type: "level", level$: constant(0) } }, + play: async ({ canvasElement }) => { + await expect(litSegments(canvasElement)).toBe(0); + }, +}; + +export const QuietSpeech: Story = { + args: { state: { type: "level", level$: constant(5) } }, +}; + +export const NormalSpeech: Story = { + args: { state: { type: "level", level$: constant(12) } }, + play: async ({ canvasElement }) => { + // A floor, not a count: the count follows from the design's bar and gap sizes. + await expect( + canvasElement.getElementsByClassName(styles.segment).length, + ).toBeGreaterThanOrEqual(15); + }, +}; + +export const LoudSpeech: Story = { + args: { state: { type: "level", level$: constant(LEVEL_SCALE) } }, +}; + +/** The three volumes differ in how many bars are lit, not only in colour. */ +export const VolumesAreDistinguishable: Story = { + args: { state: { type: "level", level$: constant(5) } }, + play: async ({ canvasElement, mount }) => { + const lit: number[] = []; + for (const level of [5, 12, LEVEL_SCALE]) { + await mount( + , + ); + lit.push(litSegments(canvasElement)); + await expect(within(canvasElement).getByRole("meter")).toHaveAttribute( + "aria-valuenow", + String(level), + ); + } + await expect(new Set(lit).size).toBe(lit.length); + await expect(lit).toEqual([...lit].sort((a, b) => a - b)); + }, +}; + +/** Permission refused: a message with a next action, not a still meter. */ +export const PermissionDenied: Story = { + args: { state: { type: "permission-denied" } }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.queryByRole("meter")).toBeNull(); + await expect( + canvas.getByText(/Microphone access is blocked/), + ).toBeVisible(); + }, +}; + +/** No input device, told apart from a refusal. */ +export const NoDevice: Story = { + args: { state: { type: "no-device" } }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.queryByRole("meter")).toBeNull(); + await expect(canvas.getByText(/No microphone found/)).toBeVisible(); + + // The icon sits on the middle of the text, however many lines it runs to. + const middle = (element: Element): number => { + const box = element.getBoundingClientRect(); + return box.top + box.height / 2; + }; + const icon = canvasElement.getElementsByClassName(styles.icon)[0]; + const words = canvasElement.getElementsByClassName(styles.message)[0]; + await expect(Math.abs(middle(icon) - middle(words))).toBeLessThanOrEqual(1); + }, +}; + +/** The same meter at two widths: the bars keep their size and only their count changes. */ +export const ShapeStaysTheSameAtAnyWidth: Story = { + args: { state: { type: "level", level$: constant(12) } }, + play: async ({ mount, args }) => { + const narrow = await measureAt(mount, args, 180); + const wide = await measureAt(mount, args, 400); + + await expect(narrow.bar).toBe(wide.bar); + await expect(narrow.gap).toBe(wide.gap); + await expect(narrow.count).toBeLessThan(wide.count); + // The bars are still separate, not one run of colour. + await expect(narrow.gap).toBeGreaterThan(0); + }, +}; + +/** How many bars are lit. */ +function litSegments(canvasElement: HTMLElement): number { + return canvasElement.getElementsByClassName(styles.segmentLit).length; +} + +/** Renders the meter at one width and reports its bars' shape. */ +async function measureAt( + mount: (ui: JSX.Element) => Promise, + args: MicrophoneLevelMeterProps, + width: number, +): Promise<{ count: number; bar: number; gap: number }> { + await mount( +
+ +
, + ); + const bars = Array.from(document.body.getElementsByClassName(styles.segment)); + const first = bars[0].getBoundingClientRect(); + const second = bars[1].getBoundingClientRect(); + return { + count: bars.length, + bar: first.width, + gap: second.left - first.right, + }; +} diff --git a/src/components/MicrophoneLevelMeter.test.tsx b/src/components/MicrophoneLevelMeter.test.tsx new file mode 100644 index 00000000..171f208c --- /dev/null +++ b/src/components/MicrophoneLevelMeter.test.tsx @@ -0,0 +1,42 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, test } from "vitest"; +import { render, screen } from "@testing-library/react"; + +import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter"; +import { LEVEL_SCALE } from "../state/MicrophoneLevel"; +import { constant } from "../state/Behavior"; + +describe("MicrophoneLevelMeter", () => { + test("announces the level rather than relying on hue", () => { + render( + , + ); + + const meter = screen.getByRole("meter", { name: "Microphone level" }); + expect(meter).toHaveAttribute("aria-valuenow", "6"); + expect(meter).toHaveAttribute("aria-valuemax", String(LEVEL_SCALE)); + expect(meter).toHaveAttribute("aria-valuetext", `6 of ${LEVEL_SCALE}`); + }); + + test("shows distinct messages for denied permission and no input device", () => { + const denied = render( + , + ); + expect( + denied.getByText(/Microphone access is blocked/), + ).toBeInTheDocument(); + expect(denied.queryByRole("meter")).toBeNull(); + + const missing = render( + , + ); + expect(missing.getByText(/No microphone found/)).toBeInTheDocument(); + expect(missing.queryByRole("meter")).toBeNull(); + }); +}); diff --git a/src/components/MicrophoneLevelMeter.tsx b/src/components/MicrophoneLevelMeter.tsx new file mode 100644 index 00000000..6b21491a --- /dev/null +++ b/src/components/MicrophoneLevelMeter.tsx @@ -0,0 +1,146 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { + useCallback, + useLayoutEffect, + useRef, + useState, + type FC, + type Ref, +} from "react"; +import { Text } from "@vector-im/compound-web"; +import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import classNames from "classnames"; +import { useTranslation } from "react-i18next"; + +import { distinctUntilChanged, map } from "rxjs"; + +import styles from "./MicrophoneLevelMeter.module.css"; +import { LEVEL_SCALE, type MicrophoneState } from "../state/MicrophoneLevel"; +import { observeElementSize$ } from "../utils/elementSize"; +import { useMicrophoneLevel } from "./useMicrophoneLevel"; + +export interface LiveMicrophoneLevelMeterProps { + /** The microphone to listen to. */ + deviceId: string | undefined; + /** Whether to hold a capture at all. */ + active: boolean; + className?: string; + ref?: Ref; +} + +/** + * The meter, wired to a live capture. Its own component so a changing level + * re-renders the meter, not its parent. + */ +export const LiveMicrophoneLevelMeter: FC = ({ + deviceId, + active, + className, + ref, +}) => { + const state = useMicrophoneLevel(deviceId, active); + return ; +}; + +export interface MicrophoneLevelMeterProps { + state: MicrophoneState; + className?: string; + ref?: Ref; +} + +/** The input level of a microphone, or why there is none. */ +export const MicrophoneLevelMeter: FC = ({ + state, + className, + ref, +}) => { + const { t } = useTranslation(); + // Bars keep one size, so their count follows the width. Starts full so the + // first paint, and jsdom, draw a whole meter. + const [barCount, setBarCount] = useState(LEVEL_SCALE); + const segments = useRef(null); + const track = useCallback( + (element: HTMLDivElement | null): (() => void) | undefined => { + if (element === null) return; + segments.current = element; + const subscription = observeElementSize$(element) + .pipe( + map(({ width }) => barsThatFit(element, width)), + distinctUntilChanged(), + ) + .subscribe(setBarCount); + return (): void => { + subscription.unsubscribe(); + segments.current = null; + }; + }, + [], + ); + + // Drawn straight into the DOM: the level changes many times a second, and + // re-rendering for each change is what this avoids. + useLayoutEffect(() => { + const element = segments.current; + if (state.type !== "level" || element === null) return; + const subscription = state.level$.subscribe((level) => { + element.setAttribute("aria-valuenow", String(level)); + element.setAttribute( + "aria-valuetext", + t("microphone_level.value", { level, max: LEVEL_SCALE }), + ); + // The level is a share of the scale, not a bar count. + const lit = Math.round((level / LEVEL_SCALE) * barCount); + Array.from(element.children).forEach((bar, i) => + bar.classList.toggle(styles.segmentLit, i < lit), + ); + }); + return (): void => subscription.unsubscribe(); + }, [state, barCount, t]); + + return ( +
+ + {state.type !== "level" ? ( + + {state.type === "permission-denied" + ? t("microphone_level.permission_denied") + : t("microphone_level.no_device")} + + ) : ( +
+ {Array.from({ length: barCount }, (_, i) => ( + + ))} +
+ )} +
+ ); +}; + +/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */ +function barsThatFit(track: HTMLElement, width: number): number { + const gap = Number.parseFloat(getComputedStyle(track).columnGap); + const bar = track.firstElementChild?.getBoundingClientRect().width ?? 0; + // No layout (jsdom): keep the full count. + if (!(bar > 0) || !(gap >= 0)) return LEVEL_SCALE; + return Math.max(1, Math.floor((width + gap) / (bar + gap))); +} diff --git a/src/components/useMicrophoneLevel.test.tsx b/src/components/useMicrophoneLevel.test.tsx new file mode 100644 index 00000000..47b33b99 --- /dev/null +++ b/src/components/useMicrophoneLevel.test.tsx @@ -0,0 +1,41 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { afterEach, describe, expect, test } from "vitest"; +import { renderHook } from "@testing-library/react"; + +import { useMicrophoneLevel } from "./useMicrophoneLevel"; +import { restoreAudioCapture, stubAudioCapture } from "../utils/test"; + +// Capture and release are covered in MicrophoneLevel.test.ts; this covers the bridge. +describe("useMicrophoneLevel", () => { + afterEach(restoreAudioCapture); + + test("holds no capture while the meter is not shown", () => { + const capture = stubAudioCapture(); + + renderHook(() => useMicrophoneLevel("mic1", false)); + + expect(capture.getUserMedia).not.toHaveBeenCalled(); + }); + + test("starts from nothing rather than the previous device's level", () => { + const capture = stubAudioCapture(); + + const { result, rerender } = renderHook( + ({ id }: { id: string }) => useMicrophoneLevel(id, true), + { initialProps: { id: "mic1" } }, + ); + capture.grant(); + + rerender({ id: "mic2" }); + + // No level carried over from the previous device. + const state = result.current; + expect(state.type === "level" ? state.level$.value : state.type).toBe(0); + }); +}); diff --git a/src/components/useMicrophoneLevel.ts b/src/components/useMicrophoneLevel.ts new file mode 100644 index 00000000..a787a23d --- /dev/null +++ b/src/components/useMicrophoneLevel.ts @@ -0,0 +1,34 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { useEffect, useState } from "react"; + +import { + type MicrophoneState, + observeMicrophoneState$, +} from "../state/MicrophoneLevel"; +import { constant } from "../state/Behavior"; + +const IDLE: MicrophoneState = { type: "level", level$: constant(0) }; + +/** The live level of a microphone, captured only while `active`. */ +export function useMicrophoneLevel( + deviceId: string | undefined, + active: boolean, +): MicrophoneState { + const [state, setState] = useState(IDLE); + + useEffect(() => { + if (!active) return; + // Idle first, so a new device doesn't start from the previous level. + setState(IDLE); + const subscription = observeMicrophoneState$(deviceId).subscribe(setState); + return (): void => subscription.unsubscribe(); + }, [deviceId, active]); + + return state; +} diff --git a/src/config/Config.test.ts b/src/config/Config.test.ts index 34dd44cb..5f8b09a2 100644 --- a/src/config/Config.test.ts +++ b/src/config/Config.test.ts @@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details. import { describe, expect, it, vi, afterEach } from "vitest"; import { logger } from "matrix-js-sdk/lib/logger"; -import { validateConfig } from "./Config"; -import { MatrixRTCMode } from "./ConfigOptions"; +import { Config, validateConfig } from "./Config"; +import { DEFAULT_CONFIG, MatrixRTCMode } from "./ConfigOptions"; describe("validateConfig", () => { afterEach(() => { @@ -52,3 +52,52 @@ describe("validateConfig", () => { expect(result.ssla).toBe("https://example.invalid/ssla"); }); }); + +describe("Config.initWith", () => { + // vitest.setup.ts has already called initDefault(), so every test here is + // free to re-initialize; the last call wins. + afterEach(() => { + vi.restoreAllMocks(); + Config.initDefault(); + }); + + it("makes the supplied config readable", () => { + Config.initWith({ ssla: "https://example.invalid/ssla" }); + expect(Config.get().ssla).toBe("https://example.invalid/ssla"); + }); + + it("fills in defaults for keys the embedder did not supply", () => { + Config.initWith({ ssla: "https://example.invalid/ssla" }); + expect(Config.get().media_quality).toEqual(DEFAULT_CONFIG.media_quality); + }); + + it("validates the supplied config just as a fetched one would be", () => { + const warnSpy = vi.spyOn(logger, "warn").mockImplementation(() => {}); + Config.initWith({ + matrix_rtc_mode: "nonsense" as unknown as MatrixRTCMode, + }); + expect(Config.get().matrix_rtc_mode).toBeUndefined(); + expect(warnSpy).toHaveBeenCalledTimes(1); + }); + + it("does not share nested state with DEFAULT_CONFIG", () => { + Config.initWith({}); + expect(Config.get().media_quality).not.toBe(DEFAULT_CONFIG.media_quality); + }); + + it("stops a later init() from fetching over the top of it", async () => { + const fetchSpy = vi.spyOn(globalThis, "fetch"); + Config.initWith({ ssla: "https://example.invalid/ssla" }); + + await Config.init(); + + expect(fetchSpy).not.toHaveBeenCalled(); + expect(Config.get().ssla).toBe("https://example.invalid/ssla"); + }); + + it("replaces a config initialized earlier", () => { + Config.initWith({ ssla: "https://first.invalid/ssla" }); + Config.initWith({ ssla: "https://second.invalid/ssla" }); + expect(Config.get().ssla).toBe("https://second.invalid/ssla"); + }); +}); diff --git a/src/config/Config.ts b/src/config/Config.ts index f52b28fd..e2c5eb8f 100644 --- a/src/config/Config.ts +++ b/src/config/Config.ts @@ -30,6 +30,14 @@ export class Config { return this.internalInstance.config; } + /** + * Initializes the config by fetching `config.json`, locating it relative to + * the current page. + * + * Does nothing if the config has already been initialized, including by + * {@link Config.initWith}, so that the regular startup path can run unchanged + * when a component host has already supplied the config. + */ public static async init(): Promise { if (!Config.internalInstance?.initPromise) { const internalInstance = new Config(); @@ -50,17 +58,35 @@ export class Config { Config.internalInstance.initPromise = downloadConfig(fetchTarget).then( (config) => { - internalInstance.config = merge( - {}, - DEFAULT_CONFIG, - validateConfig(config), - ); + internalInstance.config = resolveConfig(config); }, ); } return Config.internalInstance.initPromise; } + /** + * Initializes the config from an object supplied by the application hosting + * the component, instead of fetching `config.json`. + * + * {@link Config.init} derives the location of `config.json` from + * `window.location`, which only makes sense while Element Call owns the page. + * As a component, the host owns the configuration and passes it in here. + * + * The config goes through the same validation and defaulting as a fetched + * one, so that a supplied config behaves identically to a fetched one. + * + * Replaces any config initialized earlier. + */ + public static initWith(config: ConfigOptions): void { + const internalInstance = new Config(); + internalInstance.config = resolveConfig(config); + // Mark initialization as already done, so that a later init() resolves + // immediately rather than fetching config.json over the top of this. + internalInstance.initPromise = Promise.resolve(); + Config.internalInstance = internalInstance; + } + /** * This is a alternative initializer that does not load anything * from a hosted config file but instead just initializes the config using the @@ -69,8 +95,7 @@ export class Config { * It is supposed to only be used in tests. (It is executed in `vite.setup.js`) */ public static initDefault(): void { - Config.internalInstance = new Config(); - Config.internalInstance.config = { ...DEFAULT_CONFIG }; + Config.initWith({}); } // Convenience accessors @@ -94,6 +119,15 @@ export class Config { private initPromise?: Promise; } +/** + * Applies validation and the built-in defaults to a config, however it was + * obtained. Deep-merges onto a fresh object so that the result never shares + * nested state with {@link DEFAULT_CONFIG}. + */ +function resolveConfig(config: ConfigOptions): ResolvedConfigOptions { + return merge({}, DEFAULT_CONFIG, validateConfig(config)); +} + export function validateConfig(config: ConfigOptions): ConfigOptions { const mode = config.matrix_rtc_mode; if (mode !== undefined && !VALID_MATRIX_RTC_MODES.has(mode)) { diff --git a/src/config/ConfigOptions.ts b/src/config/ConfigOptions.ts index 536966e0..5d18695a 100644 --- a/src/config/ConfigOptions.ts +++ b/src/config/ConfigOptions.ts @@ -24,6 +24,35 @@ export enum MatrixRTCMode { Matrix_2_0 = "matrix_2_0", } +export interface DelayedLeaveTimings { + /** + * The delay (in milliseconds) with which delayed leave events are sent. + * + * If the server receives no keep-alives from the client for any longer than + * this duration, it will send the leave event, automatically removing the + * user from the call. + */ + delay_ms?: number; + + /** + * How frequently (in milliseconds) the client sends keep-alives to the server + * to restart the timer for a delayed leave event. Should be less than + * {@link DelayedLeaveTimings.delay_ms}. + */ + restart_ms?: number; + + /** + * The time (in milliseconds) after which we consider a delayed event restart HTTP request to have failed. + * Setting this to a lower value will result in more frequent retries, but then we will also give up earlier. + * + * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs + * helps by keeping more delayed event reset candidates in flight, + * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration, + * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.) + */ + restart_timeout_ms?: number; +} + export interface ConfigOptions { /** * The Posthog endpoint to which analytics data will be sent. @@ -178,35 +207,6 @@ export interface ConfigOptions { * Take care when changing these options. */ matrix_rtc_session?: { - /** - * How long (in milliseconds) to wait before rotating end-to-end media encryption keys - * when someone leaves a call. - */ - wait_for_key_rotation_ms?: number; - - /** - * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart) - * that the server waits before sending the leave MatrixRTC membership event. - */ - delayed_leave_event_delay_ms?: number; - - /** - * The time (in milliseconds) after which we consider a delayed event restart http request to have failed. - * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour. - * - * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs - * helps by keeping more delayed event reset candidates in flight, - * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration, - * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.) - */ - delayed_leave_event_restart_local_timeout_ms?: number; - - /** - * The time interval (in milliseconds) at which the client sends membership keep-alive - * messages to the server by restarting the timer for the delayed leave event. - */ - delayed_leave_event_restart_ms?: number; - /** * How long we wait before retrying after a network error on any of the requests. */ @@ -231,9 +231,28 @@ export interface ConfigOptions { * Defaults to the js-sdk default (undefined). Which means that rotation will always happen. */ key_rotation_participant_limit?: number; + + /** + * Timing options for delayed leave events, which are used to remove a user + * from a call when they lose connection. + */ + delayed_leave?: DelayedLeaveTimings; + + /** + * Timing options for delayed leave events, in cases where the ability to + * send the event can be delegated to the SFU. + * + * We recommend setting {@link DelayedLeaveTimings.delay_ms} >> + * {@link sync_disconnect_grace_period_ms} here. + */ + delegated_delayed_leave?: DelayedLeaveTimings; }; } +export interface ResolvedDelayedLeaveTimings extends DelayedLeaveTimings { + delay_ms: number; // Required +} + // Overrides members from ConfigOptions that are always provided by the // default config and are therefore non-optional. export interface ResolvedConfigOptions extends ConfigOptions { @@ -257,19 +276,15 @@ export interface ResolvedConfigOptions extends ConfigOptions { > >; }; - matrix_rtc_session: { - wait_for_key_rotation_ms?: number; - delayed_leave_event_delay_ms: number; - delayed_leave_event_restart_local_timeout_ms?: number; - delayed_leave_event_restart_ms?: number; + matrix_rtc_session: ConfigOptions["matrix_rtc_session"] & { network_error_retry_ms: number; - membership_event_expiry_ms?: number; - key_rotation_participant_limit?: number; + delayed_leave: ResolvedDelayedLeaveTimings; + delegated_delayed_leave: ResolvedDelayedLeaveTimings; }; } export const DEFAULT_CONFIG: ResolvedConfigOptions = { - sync_disconnect_grace_period_ms: 10000, + sync_disconnect_grace_period_ms: 10_000, ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf", media_quality: { video_codec: "vp8", @@ -285,7 +300,8 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = { }, }, matrix_rtc_session: { - delayed_leave_event_delay_ms: 10000, - network_error_retry_ms: 1000, + network_error_retry_ms: 1_000, + delayed_leave: { delay_ms: 18_000, restart_ms: 4_000 }, + delegated_delayed_leave: { delay_ms: 3_600_000, restart_ms: 300_000 }, }, }; diff --git a/src/e2ee/sharedKeyManagement.test.ts b/src/e2ee/sharedKeyManagement.test.ts new file mode 100644 index 00000000..9d037530 --- /dev/null +++ b/src/e2ee/sharedKeyManagement.test.ts @@ -0,0 +1,36 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { afterEach, describe, expect, test } from "vitest"; + +import { getKeyForRoom, saveKeyForRoom } from "./sharedKeyManagement"; + +const roomId = "!room:example.org"; + +describe("getKeyForRoom", () => { + afterEach(() => { + window.location.hash = "#"; + localStorage.clear(); + }); + + test("prefers a key given in the parameters over the stored one", () => { + saveKeyForRoom(roomId, "stored"); + window.location.hash = `#?roomId=${encodeURIComponent(roomId)}&password=from-the-link`; + + expect(getKeyForRoom(roomId)).toBe("from-the-link"); + }); + + test("falls back to the stored key", () => { + saveKeyForRoom(roomId, "stored"); + + expect(getKeyForRoom(roomId)).toBe("stored"); + }); + + test("has no key to offer for a room it has never seen", () => { + expect(getKeyForRoom(roomId)).toBeNull(); + }); +}); diff --git a/src/e2ee/sharedKeyManagement.ts b/src/e2ee/sharedKeyManagement.ts index 18d007e2..b29ede31 100644 --- a/src/e2ee/sharedKeyManagement.ts +++ b/src/e2ee/sharedKeyManagement.ts @@ -12,7 +12,7 @@ import { setLocalStorageItemReactive, useLocalStorage, } from "../useLocalStorage"; -import { getUrlParams } from "../UrlParams"; +import { getUrlParams, useUrlParams } from "../UrlParams"; import { E2eeType } from "./e2eeType"; import { useClient } from "../ClientContext"; @@ -57,19 +57,31 @@ const useRoomSharedKey = ( return [setInitialValue ?? roomSharedKey, setRoomSharedKey]; }; -export function getKeyForRoom(roomId: string): string | null { - const { roomId: urlRoomId, password } = getUrlParams(); - if (roomId !== urlRoomId) +/** + * The shared key for a room, preferring one supplied in the parameters Element + * Call was started with over whatever is in local storage. + */ +function keyForRoom( + roomId: string, + paramsRoomId: string | null, + password: string | null, +): string | null { + if (roomId !== paramsRoomId) logger.warn( "requested key for a roomId which is not the current call room id (from the URL)", roomId, - urlRoomId, + paramsRoomId, ); return ( password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId)) ); } +export function getKeyForRoom(roomId: string): string | null { + const { roomId: paramsRoomId, password } = getUrlParams(); + return keyForRoom(roomId, paramsRoomId, password); +} + export type Unencrypted = { kind: E2eeType.NONE }; export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string }; export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT }; @@ -77,10 +89,15 @@ export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE; export function useRoomEncryptionSystem(roomId: string): EncryptionSystem { const { client } = useClient(); + const { roomId: paramsRoomId, password } = useUrlParams(); const [storedPassword] = useRoomSharedKey( + // TODO: this passes an already-prefixed key where a room ID is expected, so + // the local storage key ends up prefixed twice and never matches what + // saveKeyForRoom writes. Preserved as-is here to keep this commit a pure + // refactor; the reactive read is effectively dead until it is fixed. getRoomSharedKeyLocalStorageKey(roomId), - getKeyForRoom(roomId) ?? undefined, + keyForRoom(roomId, paramsRoomId, password) ?? undefined, ); const room = client?.getRoom(roomId); diff --git a/src/grid/CallLayout.test.tsx b/src/grid/CallLayout.test.tsx new file mode 100644 index 00000000..59e05d32 --- /dev/null +++ b/src/grid/CallLayout.test.tsx @@ -0,0 +1,187 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { act, render, screen } from "@testing-library/react"; +import { BehaviorSubject } from "rxjs"; +import { describe, expect, it, vi } from "vitest"; + +import { arrangeTiles, type Bounds } from "./CallLayout"; +import { makeGridLayout } from "./GridLayout"; +import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout"; +import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout"; +import { type DragCallback, type LayoutProps } from "./Grid"; +import { constant } from "../state/Behavior"; +import { + type Alignment, + type GridLayout, + type SpotlightLandscapeLayout, + type SpotlightPortraitLayout, +} from "../state/layout-types"; +import { type UserMediaViewModel } from "../state/media/UserMediaViewModel"; +import { + GridTileViewModel, + SpotlightTileViewModel, + type TileViewModel, +} from "../state/TileViewModel"; + +// Grid supplies these hooks to the layouts it renders; on their own the +// layouts have no grid to report to +vi.mock("./Grid", async (importOriginal) => ({ + ...(await importOriginal>()), + useUpdateLayout: (): void => {}, + useVisibleTiles: (): void => {}, +})); + +describe("grid layout", () => { + it("sizes the tiles from the minimum bounds", () => { + const minBounds$ = new BehaviorSubject({ width: 800, height: 600 }); + const { scrolling: Scrolling } = makeGridLayout({ minBounds$ }); + render(); + const layer = screen.getByTestId("slot-0").parentElement!; + expect(layer.style.width).toBe("800px"); + expect(layer.style.getPropertyValue("--width")).toBe( + `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`, + ); + + act(() => minBounds$.next({ width: 400, height: 300 })); + expect(layer.style.width).toBe("400px"); + expect(layer.style.getPropertyValue("--width")).toBe( + `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`, + ); + }); + + it("moves the spotlight only when a drag reaches another corner", () => { + const model = gridModel(); + const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds }); + render(); + const alignments: Alignment[] = []; + model.spotlightAlignment$.subscribe((a) => alignments.push(a)); + const drag = drags.get("spotlight")!; + + // Still in the bottom right corner + act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 })); + // Over to the bottom left + act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 })); + // And a little further, still bottom left + act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 })); + // Up to the top left + act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 })); + + expect(alignments).toEqual([ + { inline: "end", block: "end" }, + { inline: "start", block: "end" }, + { inline: "start", block: "start" }, + ]); + const slot = screen.getByTestId("slot-spotlight"); + expect(slot.getAttribute("data-inline-alignment")).toBe("start"); + expect(slot.getAttribute("data-block-alignment")).toBe("start"); + }); +}); + +describe("spotlight landscape layout", () => { + it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => { + const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout( + { minBounds$: bounds }, + ); + const model = landscapeModel(); + const { unmount } = render(); + expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument(); + unmount(); + + render(); + expect(slotIds()).toEqual(model.grid.map((tile) => tile.id)); + }); +}); + +describe("spotlight portrait layout", () => { + it("sizes the grid tiles from the minimum width", () => { + const minBounds$ = new BehaviorSubject({ width: 300, height: 700 }); + const { scrolling: Scrolling } = makeSpotlightPortraitLayout({ + minBounds$, + }); + const model = portraitModel(); + render(); + expect(slotIds()).toEqual(model.grid.map((tile) => tile.id)); + const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement! + .parentElement!; + expect(layer.style.getPropertyValue("--grid-tile-width")).toBe( + `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`, + ); + + act(() => minBounds$.next({ width: 500, height: 700 })); + expect(layer.style.getPropertyValue("--grid-tile-width")).toBe( + `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`, + ); + }); +}); + +const bounds = constant({ width: 800, height: 600 }); + +// The layouts only pass tile view models through to their slots +const media = {} as UserMediaViewModel; +const spotlight = new SpotlightTileViewModel( + constant([]), + constant(false), + constant("solid"), +); +const tiles = (): GridTileViewModel[] => + Array.from({ length: 3 }, () => new GridTileViewModel(constant(media))); + +function gridModel(): GridLayout { + return { + type: "grid", + spotlight, + grid: tiles(), + spotlightAlignment$: new BehaviorSubject({ + inline: "end", + block: "end", + }), + setVisibleTiles: () => {}, + }; +} + +function landscapeModel(): SpotlightLandscapeLayout { + return { + type: "spotlight-landscape", + spotlight, + grid: tiles(), + setVisibleTiles: () => {}, + }; +} + +function portraitModel(): SpotlightPortraitLayout { + return { + type: "spotlight-portrait", + spotlight, + grid: tiles(), + setVisibleTiles: () => {}, + }; +} + +// Slots record their drag callback so a test can drag them, and show the id +// of the tile they hold +const drags = new Map(); +const Slot: LayoutProps["Slot"] = ({ + id, + model, + onDrag, + ...props +}) => { + drags.set(id, onDrag); + return ( +
+ {model instanceof GridTileViewModel ? model.id : "spotlight"} +
+ ); +}; + +function slotIds(): string[] { + return screen + .getAllByTestId(/^slot-/) + .map((slot) => slot.textContent ?? "") + .filter((id) => id !== "spotlight"); +} diff --git a/src/grid/CallLayout.ts b/src/grid/CallLayout.ts index 3128087b..a7dca6a3 100644 --- a/src/grid/CallLayout.ts +++ b/src/grid/CallLayout.ts @@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { type Observable } from "rxjs"; import { type ComponentType } from "react"; import { type LayoutProps } from "./Grid"; import { type TileViewModel } from "../state/TileViewModel"; +import { type Behavior } from "../state/Behavior"; export interface Bounds { width: number; @@ -20,7 +20,7 @@ export interface CallLayoutInputs { /** * The minimum bounds of the layout area. */ - minBounds$: Observable; + minBounds$: Behavior; } export interface CallLayoutOutputs { diff --git a/src/grid/GridLayout.tsx b/src/grid/GridLayout.tsx index 79c2b3a4..ecf45143 100644 --- a/src/grid/GridLayout.tsx +++ b/src/grid/GridLayout.tsx @@ -11,14 +11,12 @@ import { useCallback, useMemo, } from "react"; -import { distinctUntilChanged } from "rxjs"; -import { useObservableEagerState } from "observable-hooks"; import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts"; import styles from "./GridLayout.module.css"; -import { useInitial } from "../useInitial"; import { type CallLayout, arrangeTiles } from "./CallLayout"; import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid"; +import { useBehavior } from "../useBehavior"; interface GridCSSProperties extends CSSProperties { "--gap": string; @@ -39,22 +37,18 @@ export const makeGridLayout: CallLayout = ({ // lives fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode { useUpdateLayout(); - const alignment = useObservableEagerState( - useInitial(() => - model.spotlightAlignment$.pipe( - distinctUntilChanged( - (a1, a2) => a1.block === a2.block && a1.inline === a2.inline, - ), - ), - ), - ); + const alignment = useBehavior(model.spotlightAlignment$); const onDragSpotlight: DragCallback = useCallback( - ({ xRatio, yRatio }) => - model.spotlightAlignment$.next({ - block: yRatio < 0.5 ? "start" : "end", - inline: xRatio < 0.5 ? "start" : "end", - }), + ({ xRatio, yRatio }) => { + const block = yRatio < 0.5 ? "start" : "end"; + const inline = xRatio < 0.5 ? "start" : "end"; + // A drag reports the same alignment on every move; only a change is + // worth a re-render + const current = model.spotlightAlignment$.value; + if (current.block !== block || current.inline !== inline) + model.spotlightAlignment$.next({ block, inline }); + }, [model.spotlightAlignment$], ); @@ -78,7 +72,7 @@ export const makeGridLayout: CallLayout = ({ scrolling: function GridLayout({ ref, model, Slot }): ReactNode { useUpdateLayout(); useVisibleTiles(model.setVisibleTiles); - const { width, height: minHeight } = useObservableEagerState(minBounds$); + const { width, height: minHeight } = useBehavior(minBounds$); const { gap, tileWidth, tileHeight } = useMemo( () => arrangeTiles(width, minHeight, model.grid.length), [width, minHeight, model.grid.length], diff --git a/src/grid/OneOnOneDesktopLayout.tsx b/src/grid/OneOnOneDesktopLayout.tsx index ccf24977..beba14c1 100644 --- a/src/grid/OneOnOneDesktopLayout.tsx +++ b/src/grid/OneOnOneDesktopLayout.tsx @@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details. */ import { type ReactNode, useCallback, useMemo } from "react"; -import { useObservableEagerState } from "observable-hooks"; import classNames from "classnames"; import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts"; @@ -37,7 +36,7 @@ export const makeOneOnOneDesktopLayout: CallLayout< Slot, }): ReactNode { useUpdateLayout(); - const { width, height } = useObservableEagerState(minBounds$); + const { width, height } = useBehavior(minBounds$); const pipAlignment = useBehavior(model.pipAlignment$); const { tileWidth, tileHeight } = useMemo( () => arrangeTiles(width, height, 1), diff --git a/src/grid/OneOnOneMobileLayout.module.css b/src/grid/OneOnOneMobileLayout.module.css index 735c8985..67ddd966 100644 --- a/src/grid/OneOnOneMobileLayout.module.css +++ b/src/grid/OneOnOneMobileLayout.module.css @@ -37,7 +37,7 @@ Please see LICENSE in the repository root for full details. block-size: 140px; } -@media (max-width: 600px) { +@container element-call (max-width: 600px) { /* Give the PiP a portrait aspect ratio */ .pip[data-size="sm"] { inline-size: 88px; diff --git a/src/grid/SpotlightExpandedLayout.module.css b/src/grid/SpotlightExpandedLayout.module.css index d765c6fc..570b6266 100644 --- a/src/grid/SpotlightExpandedLayout.module.css +++ b/src/grid/SpotlightExpandedLayout.module.css @@ -25,7 +25,7 @@ Please see LICENSE in the repository root for full details. var(--content-inset-left); } -@media (min-width: 600px) { +@container element-call (min-width: 600px) { .pip { inline-size: 180px; block-size: 135px; diff --git a/src/grid/SpotlightLandscapeLayout.tsx b/src/grid/SpotlightLandscapeLayout.tsx index 5da12a89..989e3d39 100644 --- a/src/grid/SpotlightLandscapeLayout.tsx +++ b/src/grid/SpotlightLandscapeLayout.tsx @@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details. */ import { type FC, type ReactNode } from "react"; -import { useObservableEagerState } from "observable-hooks"; import classNames from "classnames"; import { type CallLayout } from "./CallLayout"; @@ -33,7 +32,7 @@ export const makeSpotlightLandscapeLayout: CallLayout< Slot, }): ReactNode { useUpdateLayout(); - useObservableEagerState(minBounds$); + useBehavior(minBounds$); return (
@@ -56,7 +55,7 @@ export const makeSpotlightLandscapeLayout: CallLayout< }): ReactNode { useUpdateLayout(); useVisibleTiles(model.setVisibleTiles); - useObservableEagerState(minBounds$); + useBehavior(minBounds$); return (
diff --git a/src/grid/SpotlightPortraitLayout.tsx b/src/grid/SpotlightPortraitLayout.tsx index 6939e082..70c428e9 100644 --- a/src/grid/SpotlightPortraitLayout.tsx +++ b/src/grid/SpotlightPortraitLayout.tsx @@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details. */ import { type ReactNode, type CSSProperties } from "react"; -import { useObservableEagerState } from "observable-hooks"; import classNames from "classnames"; import { type CallLayout, arrangeTiles } from "./CallLayout"; @@ -58,7 +57,7 @@ export const makeSpotlightPortraitLayout: CallLayout< }): ReactNode { useUpdateLayout(); useVisibleTiles(model.setVisibleTiles); - const { width } = useObservableEagerState(minBounds$); + const { width } = useBehavior(minBounds$); const { gap, tileWidth, tileHeight } = arrangeTiles( width, // TODO: We pretend that the minimum height is the width, because the diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx index ca1f0ea8..e6136855 100644 --- a/src/home/HomePage.tsx +++ b/src/home/HomePage.tsx @@ -13,7 +13,6 @@ import { ErrorPage, LoadingPage } from "../FullScreenView"; import { UnauthenticatedView } from "./UnauthenticatedView"; import { RegisteredView } from "./RegisteredView"; import { usePageTitle } from "../usePageTitle"; -import { widget } from "../widget.ts"; export const HomePage: FC = () => { const { t } = useTranslation(); @@ -24,7 +23,7 @@ export const HomePage: FC = () => { if (!clientState) { return ; } else if (clientState.state === "error") { - return ; + return ; } else { return clientState.authenticated ? ( diff --git a/src/index.css b/src/index.css index ef59b48e..79ccb42a 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -@layer normalize, compound-legacy, compound; +/* Styles for Element Call as a page of its own. The parts that apply wherever +Element Call is shown live in base.css; these are about owning the document, +and are not loaded when a host embeds Element Call as a component. + +That includes Compound: the page brings the design tokens, the component styles +and their fonts, where a host embedding the component supplies its own. The +`compound` layers are ordered by base.css. */ + +@import url("./base.css"); @import url("@fontsource/inter/400.css"); @import url("@fontsource/inter/500.css"); @@ -14,56 +22,9 @@ Please see LICENSE in the repository root for full details. @import url("@fontsource/inconsolata/400.css"); @import url("@fontsource/inconsolata/700.css"); -@import url("normalize.css/normalize.css") layer(normalize); @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound); @import url("@vector-im/compound-web/dist/style.css") layer(compound.components); -:root { - --font-scale: 1; - --font-size-micro: calc(10px * var(--font-scale)); - --font-size-caption: calc(12px * var(--font-scale)); - --font-size-body: calc(15px * var(--font-scale)); - --font-size-subtitle: calc(18px * var(--font-scale)); - --font-size-title: calc(24px * var(--font-scale)); - --font-size-headline: calc(32px * var(--font-scale)); - - --cpd-color-border-accent: var(--cpd-color-green-800); - /* The distance to inset non-full-width content from the edge of the window - along the inline axis. This ramps up from 16px for typical mobile windows, to - 96px for typical desktop windows, and accounts for the safe area. */ - --content-inset-left: calc( - env(safe-area-inset-left) + - min( - var(--cpd-space-24x), - max(var(--cpd-space-4x), calc((100vw - 900px) / 3)) - ) - ); - --content-inset-right: calc( - env(safe-area-inset-right) + - min( - var(--cpd-space-24x), - max(var(--cpd-space-4x), calc((100vw - 900px) / 3)) - ) - ); - --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15); - --big-drop-shadow: 0px 0px 24px 0px #1b1d221a; - --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); - - --call-view-overlay-layer: 1; - --call-view-header-footer-layer: 2; -} - -:root, -[class*="cpd-theme-"] { - --video-tile-background: var(--cpd-color-bg-subtle-secondary); -} - -.cpd-theme-dark { - --cpd-color-border-accent: var(--cpd-color-green-1100); - --stopgap-color-on-solid-accent: var(--cpd-color-text-primary); - --stopgap-background-85: rgba(16, 19, 23, 0.85); -} - body { background-color: var(--cpd-color-bg-canvas-default); color: var(--cpd-color-text-primary); @@ -155,17 +116,15 @@ body.lotus-transparent [data-testid="footer-container"] { } /* This prohibits the view to scroll for pages smaller than 122px in width -we use this for mobile pip webviews */ -.no-scroll-body { +we use this for mobile pip webviews. Element Call adds this class to whatever +it treats as its root, but it is only ever the page that should be pinned like +this — done to a container inside a host application it would take that +container out of the host's layout — so the selector says so. */ +body.no-scroll-body { position: fixed; width: 100%; } -/* We use this to not render the page at all until we know the theme.*/ -.no-theme { - opacity: 0; -} - html, body, #root { @@ -182,104 +141,7 @@ body, isolation: isolate; } -/* On Android and iOS, prefer native system fonts. The global.css file of -Compound Web is where these variables ultimately get consumed to set the page's -font-family. */ -body[data-platform="android"] { - --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif; -} - -body[data-platform="ios"] { - --cpd-font-family-sans: - -apple-system, BlinkMacSystemFont, "Inter", sans-serif; -} - -@layer compound-legacy { - h1, - h2, - h3, - h4, - h5, - h6, - p, - a { - margin-top: 0; - } - - /* Headline Semi Bold */ - h1 { - font-weight: 600; - font-size: var(--font-size-headline); - } - - /* Title */ - h2 { - font-weight: 600; - font-size: var(--font-size-title); - } - - /* Subtitle */ - h3 { - font-weight: 600; - font-size: var(--font-size-subtitle); - } - - /* Body Semi Bold */ - h4 { - font-weight: 600; - font-size: var(--font-size-body); - } - - h1, - h2, - h3 { - line-height: 1.2; - } - - /* Body */ - p { - font-size: var(--font-size-body); - line-height: var(--font-size-title); - } - - hr { - width: calc(100% - 24px); - border: none; - border-top: 1px solid var(--cpd-color-border-interactive-secondary); - color: var(--cpd-color-border-interactive-secondary); - overflow: visible; - text-align: center; - height: 5px; - font-weight: 600; - font-size: var(--font-size-body); - line-height: 24px; - margin: 0 12px; - } - - summary { - font-size: var(--font-size-body); - } - - details > :not(summary) { - margin-left: var(--font-size-body); - } - - details[open] > summary { - margin-bottom: var(--font-size-body); - } -} - #root > [data-overlay-container] { position: relative; height: 100%; } - -/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom -outline, which is inconsistent with our other components and is not sufficiently -visible to be accessible. This resets it back to 'auto'. */ -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: auto; -} diff --git a/src/initializer.tsx b/src/initializer.tsx index 91436d10..23c93a6f 100644 --- a/src/initializer.tsx +++ b/src/initializer.tsx @@ -6,12 +6,11 @@ Please see LICENSE in the repository root for full details. */ import React from "react"; -import i18n, { +import { type BackendModule, type ReadCallback, type ResourceKey, } from "i18next"; -import { initReactI18next } from "react-i18next"; import LanguageDetector from "i18next-browser-languagedetector"; import * as Sentry from "@sentry/react"; import { logger } from "matrix-js-sdk/lib/logger"; @@ -26,15 +25,20 @@ import { import { setLogExtension as setLKLogExtension, setLogLevel as setLKLogLevel, + LoggerNames as LKLoggerNames, } from "livekit-client"; import { getUrlParams } from "./UrlParams"; import { Config } from "./config/Config"; import { seedSettingsFromConfig } from "./settings/settings"; -import { platform } from "./Platform"; import { isFailure } from "./utils/fetch"; -import { initializeWidget } from "./widget"; +import { initializeWidget, type WidgetHelpers } from "./widget"; import { enableExtendedLivekitLogs } from "./settings/settings.ts"; +import { + type AnalyticsConfig, + PosthogAnalytics, +} from "./analytics/PosthogAnalytics.ts"; +import { i18n, languageOfLocalePath } from "./utils/i18n.ts"; // This generates a map of locale names to their URL (based on import.meta.url), which looks like this: // { @@ -53,17 +57,7 @@ const getLocaleUrl = ( ): string | undefined => locales[`../locales/${language}/${namespace}.json`]; const supportedLngs = [ - ...new Set( - Object.keys(locales).map((url) => { - // The URLs are of the form ../locales/en/app.json - // This extracts the language code from the URL - const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1]; - if (!lang) { - throw new Error(`Could not parse locale URL ${url}`); - } - return lang; - }), - ), + ...new Set(Object.keys(locales).map(languageOfLocalePath)), ]; // A backend that fetches the locale files from the URLs generated by the glob above @@ -98,6 +92,36 @@ const Backend = { }, } satisfies BackendModule; +/** + * Where analytics reporting is configured from. + * + * Note the two halves are decided differently, and deliberately so. *Where the + * PostHog credentials come from* depends on the package: an embedder passes + * them in through the URL because it is responsible for its own users' + * telemetry, whereas a standalone deployment is configured by whoever operates + * it. *Who owns the user's analytics identity*, on the other hand, depends on + * how Element Call is actually running right now — the full package can be used + * as a widget too. + */ +// Exported for testing +export function analyticsConfigFromEnvironment(): AnalyticsConfig { + const { posthogApiKey, posthogApiHost, posthogUserId, isWidget } = + getUrlParams(); + return { + matrixBackend: isWidget ? "embedded" : "jssdk", + hostAnalyticsId: posthogUserId, + ...(import.meta.env.VITE_PACKAGE === "embedded" + ? { + apiKey: posthogApiKey ?? undefined, + apiHost: posthogApiHost ?? undefined, + } + : { + apiKey: Config.get().posthog?.api_key, + apiHost: Config.get().posthog?.api_host, + }), + }; +} + enum LoadState { None, Loading, @@ -121,8 +145,8 @@ export class Initializer { return !!Initializer.internalInstance?.isInitialized; } - public static async initBeforeReact(): Promise { - initializeWidget(); + public static async initBeforeReact(): Promise { + const widget = initializeWidget(); const polyfills: Promise[] = []; if (shouldPolyfillSegmenter()) { @@ -148,10 +172,12 @@ export class Initializer { document.documentElement.lang = lng; }); + // Note: deliberately no `.use(initReactI18next)` — that would register this + // instance as react-i18next's global default, which is the very global we + // are avoiding. Components receive it through `` instead. await i18n .use(Backend) .use(languageDetector) - .use(initReactI18next) .init({ fallbackLng: "en", defaultNS: "app", @@ -193,9 +219,6 @@ export class Initializer { ); } - // Add the platform to the DOM, so CSS can query it - document.body.setAttribute("data-platform", platform); - // livekit logging configuration setLKLogExtension((level, msg, context) => { // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read @@ -204,9 +227,14 @@ export class Initializer { enableExtendedLivekitLogs.value$.subscribe((enabled) => { setLKLogLevel(enabled ? "trace" : "info"); + // ICE candidate types and connection states are what you need to diagnose + // "could not establish pc connection", so always keep those in the rageshake + setLKLogLevel("debug", LKLoggerNames.ICE); }); window.setLKLogLevel = setLKLogLevel; + + return widget; } public static init(): Promise | null { @@ -239,6 +267,7 @@ export class Initializer { Config.init().then( () => { seedSettingsFromConfig(Config.get().media_quality); + PosthogAnalytics.configure(analyticsConfigFromEnvironment()); this.loadStates.config = LoadState.Loaded; this.initStep(resolve); }, diff --git a/src/livekit/MatrixAudioRenderer.test.tsx b/src/livekit/MatrixAudioRenderer.test.tsx index eb6c306f..5d5c4f95 100644 --- a/src/livekit/MatrixAudioRenderer.test.tsx +++ b/src/livekit/MatrixAudioRenderer.test.tsx @@ -24,10 +24,12 @@ import { testAudioContext } from "../useAudioContext.test"; import * as MediaDevicesContext from "../MediaDevicesContext"; import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer"; import { + mockLocalParticipant, mockMediaDevices, mockRemoteParticipant, mockTrack, } from "../utils/test"; +import { logger as rootLogger } from "matrix-js-sdk/lib/logger"; import { initializeWidget } from "../widget"; initializeWidget(); export const TestAudioContextConstructor = vi.fn( @@ -140,6 +142,57 @@ it("should render for member", () => { expect(queryAllByTestId("audio")).toHaveLength(1); }); +function spyOnWarn(): ReturnType { + const warn = vi.fn(); + vi.spyOn(rootLogger, "getChild").mockReturnValue({ + warn, + } as unknown as typeof rootLogger); + return warn; +} + +it("should not render or warn for the local participant", () => { + const warn = spyOnWarn(); + const local = mockLocalParticipant({ identity: "@alice:DEV0" }); + vi.mocked(useTracks).mockReturnValue([mockTrack(local)]); + const { queryAllByTestId } = render( + + + , + ); + expect(queryAllByTestId("audio")).toHaveLength(0); + expect(warn).not.toHaveBeenCalled(); +}); + +it("should warn only once per unexpected participant", () => { + const warn = spyOnWarn(); + const { rerender } = renderTestComponent( + [{ userId: "@bob", deviceId: "DEV0" }], + ["@alice:DEV0"], + [ + { + participantId: "@alice:DEV0", + kind: Track.Kind.Audio, + source: Track.Source.Microphone, + }, + ], + ); + expect(warn).toHaveBeenCalledTimes(1); + rerender( + + + , + ); + expect(warn).toHaveBeenCalledTimes(1); +}); + it("should not render without member", () => { const { container, queryAllByTestId } = renderTestComponent( [{ userId: "@bob", deviceId: "DEV0" }], diff --git a/src/livekit/MatrixAudioRenderer.tsx b/src/livekit/MatrixAudioRenderer.tsx index 103d6434..65e3cc70 100644 --- a/src/livekit/MatrixAudioRenderer.tsx +++ b/src/livekit/MatrixAudioRenderer.tsx @@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details. import { getTrackReferenceId } from "@livekit/components-core"; import { type Room as LivekitRoom } from "livekit-client"; import { type RemoteAudioTrack, Track } from "livekit-client"; -import { useEffect, useMemo, useState, type ReactNode } from "react"; +import { useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { useTracks, AudioTrack, @@ -71,6 +71,9 @@ export function LivekitRoomAudioRenderer({ screenshareAudioMuted, }: MatrixAudioRendererProps): ReactNode { const logger = rootLogger.getChild("[MatrixAudioRenderer]"); + // Identities we have already warned about, so that re-renders (which happen + // on every active speaker update) don't repeat the warning. + const warnedIdentities = useRef(new Set()); const tracks = useTracks( [ Track.Source.Microphone, @@ -83,22 +86,27 @@ export function LivekitRoomAudioRenderer({ room: livekitRoom, }, ) - // Only keep audio tracks - .filter((ref) => ref.publication.kind === Track.Kind.Audio) + // Only keep remote audio tracks (we never render our own audio) + .filter( + (ref) => + ref.publication.kind === Track.Kind.Audio && !ref.participant.isLocal, + ) // Only keep tracks from participants that are in the validIdentities list .filter((ref) => { - const isValid = validIdentities.includes(ref.participant.identity); - if (!isValid) { - // TODO make sure to also skip the warn logging for the local identity + const { identity } = ref.participant; + const isValid = validIdentities.includes(identity); + if (!isValid && !warnedIdentities.current.has(identity)) { + warnedIdentities.current.add(identity); // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call. logger.warn( - `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`, + `Audio track ${identity} from ${url} has no matching matrix call member`, `current members: ${validIdentities.join()}`, `track will not get rendered`, ); - return false; + } else if (isValid) { + warnedIdentities.current.delete(identity); } - return true; + return isValid; }); // [lotus / cinny #277] Tell the host whether remote screenshare audio is diff --git a/src/livekit/TrackProcessorContext.test.ts b/src/livekit/TrackProcessorContext.test.ts new file mode 100644 index 00000000..5b977bd4 --- /dev/null +++ b/src/livekit/TrackProcessorContext.test.ts @@ -0,0 +1,87 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, it, vi } from "vitest"; +import { type LocalVideoTrack } from "livekit-client"; +import { + type BackgroundOptions, + type ProcessorWrapper, +} from "@livekit/track-processors"; + +import { applyProcessor, trackProcessorSync } from "./TrackProcessorContext"; +import { constant } from "../state/Behavior"; +import { flushPromises, testScope } from "../utils/test"; + +const processor = {} as ProcessorWrapper; + +function mockTrack( + readyState: MediaStreamTrackState, + current?: ProcessorWrapper, +): LocalVideoTrack { + return { + mediaStreamTrack: { readyState }, + getProcessor: vi.fn().mockReturnValue(current), + setProcessor: vi.fn().mockResolvedValue(undefined), + stopProcessor: vi.fn().mockResolvedValue(undefined), + } as unknown as LocalVideoTrack; +} + +describe("applyProcessor", () => { + it("attaches the processor to a live track", () => { + const track = mockTrack("live"); + applyProcessor(track, processor); + expect(track.setProcessor).toHaveBeenCalledWith(processor); + }); + + it("does not attach the processor to an ended track", () => { + const track = mockTrack("ended"); + applyProcessor(track, processor); + expect(track.setProcessor).not.toHaveBeenCalled(); + }); + + it("does not surface a rejected setProcessor", async () => { + const track = mockTrack("live"); + vi.mocked(track.setProcessor).mockRejectedValue( + new TypeError("Input track cannot be ended"), + ); + const unhandled = vi.fn(); + process.on("unhandledRejection", unhandled); + applyProcessor(track, processor); + await flushPromises(); + process.off("unhandledRejection", unhandled); + expect(unhandled).not.toHaveBeenCalled(); + }); + + it("stops the processor when none is wanted", () => { + const track = mockTrack("live", processor); + applyProcessor(track, undefined); + expect(track.stopProcessor).toHaveBeenCalled(); + }); + + it("does not surface a rejected stopProcessor", async () => { + const track = mockTrack("live", processor); + vi.mocked(track.stopProcessor).mockRejectedValue(new Error("nope")); + const unhandled = vi.fn(); + process.on("unhandledRejection", unhandled); + applyProcessor(track, undefined); + await flushPromises(); + process.off("unhandledRejection", unhandled); + expect(unhandled).not.toHaveBeenCalled(); + }); +}); + +describe("trackProcessorSync", () => { + it("applies the processor to the current track", () => { + const track = mockTrack("live"); + trackProcessorSync( + testScope(), + constant(track), + constant({ supported: true, processor }), + ); + expect(track.setProcessor).toHaveBeenCalledWith(processor); + }); +}); diff --git a/src/livekit/TrackProcessorContext.tsx b/src/livekit/TrackProcessorContext.tsx index 21cd609e..9b930949 100644 --- a/src/livekit/TrackProcessorContext.tsx +++ b/src/livekit/TrackProcessorContext.tsx @@ -19,8 +19,8 @@ import { useMemo, } from "react"; import { type LocalVideoTrack } from "livekit-client"; -import { combineLatest, map, type Observable } from "rxjs"; -import { useObservable } from "observable-hooks"; +import { logger } from "matrix-js-sdk/lib/logger"; +import { combineLatest } from "rxjs"; import { backgroundBlur as backgroundBlurSettings, @@ -30,6 +30,7 @@ import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer"; import { type Behavior } from "../state/Behavior"; import { type ObservableScope } from "../state/ObservableScope"; import { platform } from "../Platform"; +import { useValueBehavior } from "../useValueBehavior"; //TODO-MULTI-SFU: This is not yet fully there. // it is a combination of exposing observable and react hooks. @@ -51,18 +52,36 @@ export function useTrackProcessor(): ProcessorState { return state; } -export function useTrackProcessorObservable$(): Observable { - const state = use(ProcessorContext); - if (state === undefined) - throw new Error( - "useTrackProcessor must be used within a ProcessorProvider", - ); - const state$ = useObservable( - (init$) => init$.pipe(map(([init]) => init)), - [state], - ); +export function useTrackProcessorState$(): Behavior { + return useValueBehavior(useTrackProcessor()); +} - return state$; +/** + * Attaches or detaches the processor so that the track matches the desired + * state, without throwing. + */ +export function applyProcessor( + videoTrack: LocalVideoTrack, + processor: ProcessorWrapper | undefined, +): void { + if (processor && !videoTrack.getProcessor()) { + // A MediaStreamTrackProcessor cannot be constructed on an ended track + // (e.g. the camera was stopped while the processor was being applied), + // and setProcessor rejects with a TypeError. The track is going away + // anyway, so there is nothing to attach to. + if (videoTrack.mediaStreamTrack.readyState === "ended") { + logger.debug("Not attaching video processor to an ended track"); + return; + } + videoTrack.setProcessor(processor).catch((e) => { + logger.warn("Failed to attach video processor", e); + }); + } + if (!processor && videoTrack.getProcessor()) { + videoTrack.stopProcessor().catch((e) => { + logger.warn("Failed to stop video processor", e); + }); + } } /** @@ -78,13 +97,7 @@ export const trackProcessorSync = ( .subscribe(([videoTrack, processorState]) => { if (!processorState) return; if (!videoTrack) return; - const { processor } = processorState; - if (processor && !videoTrack.getProcessor()) { - void videoTrack.setProcessor(processor); - } - if (!processor && videoTrack.getProcessor()) { - void videoTrack.stopProcessor(); - } + applyProcessor(videoTrack, processorState.processor); }); }; @@ -94,12 +107,7 @@ export const useTrackProcessorSync = ( const { processor } = useTrackProcessor(); useEffect(() => { if (!videoTrack) return; - if (processor && !videoTrack.getProcessor()) { - void videoTrack.setProcessor(processor); - } - if (!processor && videoTrack.getProcessor()) { - void videoTrack.stopProcessor(); - } + applyProcessor(videoTrack, processor); }, [processor, videoTrack]); }; diff --git a/src/livekit/openIDSFU.test.ts b/src/livekit/openIDSFU.test.ts index 26523e15..3771231e 100644 --- a/src/livekit/openIDSFU.test.ts +++ b/src/livekit/openIDSFU.test.ts @@ -173,7 +173,7 @@ describe("getSFUConfigWithOpenID", () => { // Verify, that the request contains the expected delay parameters if ( body.delay_id === "mock_delay_id" && - body.delay_timeout === 10000 && + body.delay_timeout === 3600000 && body.delay_cs_api_url === "https://homeserverserver.org/cs_api" ) { return { @@ -254,7 +254,7 @@ describe("getSFUConfigWithOpenID", () => { expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token"); expect(calls[0][1]).toStrictEqual({ // check if it uses correct delayID! - body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', + body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', method: "POST", headers: { "Content-Type": "application/json", @@ -264,7 +264,7 @@ describe("getSFUConfigWithOpenID", () => { expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get"); expect(calls[1][1]).toStrictEqual({ - body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', + body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', headers: { "Content-Type": "application/json", }, @@ -309,7 +309,7 @@ describe("getSFUConfigWithOpenID", () => { expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token"); expect(calls[0][1]).toStrictEqual({ // check if it uses correct delayID! - body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', + body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}', method: "POST", headers: { "Content-Type": "application/json", diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts index db1c5524..276fe514 100644 --- a/src/livekit/openIDSFU.ts +++ b/src/livekit/openIDSFU.ts @@ -21,7 +21,7 @@ import { } from "../utils/errors"; import { doNetworkOperationWithRetry } from "../utils/matrix"; import { Config } from "../config/Config"; -import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport"; +import { MatrixRTCMode } from "../config/ConfigOptions"; /** * Configuration and access tokens provided by the SFU on successful authentication. @@ -82,11 +82,10 @@ export type OpenIDClientParts = Pick< * @param serviceUrl The URL of the livekit SFU service * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases. * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token. - * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation - * instead of a hash. + * @param opts.matrixRTCMode Determines which version of the JWT endpoint to use, which affects whether the + * RTC backend identity is based on string concatenation (legacy) or a hash (Matrix 2.0). * This function by default uses whatever is possible with the current jwt service installed next to the SFU. * For remote connections this does not matter, since we will not publish there we can rely on the newest option. - * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events. * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver. * @param opts.delayId The delay id used for the jwt service to manage. * @param logger optional logger. @@ -99,7 +98,7 @@ export async function getSFUConfigWithOpenID( serviceUrl: string, roomId: string, opts?: { - forceJwtEndpoint?: JwtEndpointVersion; + matrixRTCMode?: MatrixRTCMode; delayEndpointBaseUrl?: string; delayId?: string; }, @@ -118,19 +117,18 @@ export async function getSFUConfigWithOpenID( logger?.debug("Got openID token", openIdToken); let sfuConfig: { url: string; jwt: string } | undefined; - const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish. + const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish. - const forceMatrix2Jwt = - opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0; + const forceMatrix2Jwt = opts?.matrixRTCMode === MatrixRTCMode.Matrix_2_0; // We want to start using the new endpoint (with optional delay delegation) // if we can use both or if we are forced to use the new one. if (tryBothJwtEndpoints || forceMatrix2Jwt) { try { logger?.info( - `Trying to get JWT with delegation for focus ${serviceUrl}...`, + `Trying to get JWT via default endpoint for focus ${serviceUrl}...`, ); - const sfuConfig = await getLiveKitJWTWithDelayDelegation( + const sfuConfig = await getLiveKitJWT( membership, serviceUrl, roomId, @@ -156,7 +154,7 @@ export async function getSFUConfigWithOpenID( logger?.info( `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`, ); - sfuConfig = await getLiveKitJWT( + sfuConfig = await getLiveKitJWTLegacy( membership.deviceId, serviceUrl, roomId, @@ -198,7 +196,7 @@ function extractFullConfigFromToken(sfuConfig: { }; } -async function getLiveKitJWT( +async function getLiveKitJWTLegacy( deviceId: string, livekitServiceURL: string, matrixRoomId: string, @@ -214,11 +212,10 @@ async function getLiveKitJWT( let bodyDalayParts: IDelayParams = {}; // Also check for empty string if (delayId && delayEndpointBaseUrl) { - const delayTimeoutMs = - Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms; bodyDalayParts = { delay_id: delayId, - delay_timeout: delayTimeoutMs, + delay_timeout: + Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms, delay_cs_api_url: delayEndpointBaseUrl, }; } @@ -274,7 +271,7 @@ class NotSupportedError extends Error { } } -export async function getLiveKitJWTWithDelayDelegation( +export async function getLiveKitJWT( membership: CallMembershipIdentityParts, livekitServiceURL: string, matrixRoomId: string, @@ -298,11 +295,10 @@ export async function getLiveKitJWTWithDelayDelegation( let bodyDalayParts = {}; // Also check for empty string if (delayId && delayEndpointBaseUrl) { - const delayTimeoutMs = - Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms; bodyDalayParts = { delay_id: delayId, - delay_timeout: delayTimeoutMs, + delay_timeout: + Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms, delay_cs_api_url: delayEndpointBaseUrl, }; } diff --git a/src/lotus/lotusControls.ts b/src/lotus/lotusControls.ts index 4a020c11..40afd239 100644 --- a/src/lotus/lotusControls.ts +++ b/src/lotus/lotusControls.ts @@ -198,17 +198,15 @@ export function startLotusControls(vm: CallViewModel): () => void { lotusScreensharePrompt$, ]) .pipe( - map( - ([screensharing, layout, promptOpen]): LotusControlsState => ({ - screensharing, - layout, - screenshareAction: true, - hotkeys: true, - frameScreenshare: false, - screensharePrompt: lotusFrameScreenshareEnabled(), - screensharePromptOpen: promptOpen, - }), - ), + map(([screensharing, layout, promptOpen]): LotusControlsState => ({ + screensharing, + layout, + screenshareAction: true, + hotkeys: true, + frameScreenshare: false, + screensharePrompt: lotusFrameScreenshareEnabled(), + screensharePromptOpen: promptOpen, + })), distinctUntilChanged( (a, b) => a.screensharing === b.screensharing && diff --git a/src/main.tsx b/src/main.tsx index 8f64c680..b2f79f34 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -21,6 +21,7 @@ import { init as initRageshake } from "./settings/rageshake"; import { Initializer } from "./initializer"; import { AppViewModel } from "./state/AppViewModel"; import { globalScope } from "./state/ObservableScope"; +import { getUrlParams } from "./UrlParams"; initRageshake().catch((e) => { logger.error("Failed to initialize rageshake", e); @@ -48,10 +49,19 @@ if (fatalError !== null) { } Initializer.initBeforeReact() - .then(() => { + .then((widget) => { + const { controlledAudioDevices, callIntent } = getUrlParams(); root.render( - + , ); }) diff --git a/src/reactions/index.ts b/src/reactions/index.ts index acf7e181..26ca7f14 100644 --- a/src/reactions/index.ts +++ b/src/reactions/index.ts @@ -29,6 +29,8 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url"; import waveSoundMp3 from "../sound/reactions/wave.mp3?url"; import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url"; import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url"; +import bellSoundOgg from "../sound/reactions/bell.ogg?url"; +import bellSoundMp3 from "../sound/reactions/bell.mp3?url"; export const ElementCallReactionEventType = "io.element.call.reaction"; @@ -202,6 +204,15 @@ export const ReactionSet: ReactionOption[] = [ mp3: baduntssSoundMp3, }, }, + { + emoji: "🛎️", + name: "bell", + alias: ["ding"], + sound: { + ogg: bellSoundOgg, + mp3: bellSoundMp3, + }, + }, ]; export interface RaisedHandInfo { diff --git a/src/room/CallEndedView.module.css b/src/room/CallEndedView.module.css index e62e93d0..7b2dbee0 100644 --- a/src/room/CallEndedView.module.css +++ b/src/room/CallEndedView.module.css @@ -74,7 +74,7 @@ Please see LICENSE in the repository root for full details. margin-bottom: 44px; } -@media (min-width: 800px) { +@container element-call (min-width: 800px) { .logo { display: none; } diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx index 4df3f297..58417c38 100644 --- a/src/room/CallEndedView.tsx +++ b/src/room/CallEndedView.tsx @@ -9,8 +9,6 @@ import { type FC, type FormEventHandler, useCallback, useState } from "react"; import { type MatrixClient } from "matrix-js-sdk"; import { Trans, useTranslation } from "react-i18next"; import { Button, Heading, Text } from "@vector-im/compound-web"; -import { useNavigate } from "react-router-dom"; -import { logger } from "matrix-js-sdk/lib/logger"; import styles from "./CallEndedView.module.css"; import feedbackStyle from "../input/FeedbackInput.module.css"; @@ -19,8 +17,9 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { FieldRow, InputField } from "../input/Input"; import { StarRatingInput } from "../input/StarRatingInput"; -import { Link } from "../button/Link"; import { LinkButton } from "../button"; +import { LeaveToHomeLink } from "../button/LeaveToHomeLink"; +import { useLeaveToHome } from "../LeaveToHomeContext"; interface Props { client: MatrixClient; @@ -38,7 +37,7 @@ export const CallEndedView: FC = ({ endedCallId, }) => { const { t } = useTranslation(); - const navigate = useNavigate(); + const leaveToHome = useLeaveToHome(); const { displayName } = useProfile(client); const [surveySubmitted, setSurveySubmitted] = useState(false); @@ -68,14 +67,12 @@ export const CallEndedView: FC = ({ setSurveySubmitted(true); } else if (!confineToRoom) { // if the user already has an account immediately go back to the home screen - navigate("/")?.catch((error) => { - logger.error("Failed to navigate to /", error); - }); + leaveToHome?.(); } }, 1000); }, 1000); }, - [endedCallId, navigate, isPasswordlessUser, confineToRoom, starRating], + [endedCallId, leaveToHome, isPasswordlessUser, confineToRoom, starRating], ); const createAccountDialog = isPasswordlessUser && ( @@ -87,6 +84,8 @@ export const CallEndedView: FC = ({ calls

+ {/* Only guests of the standalone app are ever passwordless, so this + route is always the standalone app's own. */} {t("call_ended_view.create_account_button")} @@ -157,7 +156,10 @@ export const CallEndedView: FC = ({ {!confineToRoom && ( - {t("call_ended_view.not_now_button")} + + {" "} + {t("call_ended_view.not_now_button")}{" "} + )}
diff --git a/src/room/GroupCallView.test.tsx b/src/room/CallView.test.tsx similarity index 70% rename from src/room/GroupCallView.test.tsx rename to src/room/CallView.test.tsx index a5c3b0d8..8ac920b8 100644 --- a/src/room/GroupCallView.test.tsx +++ b/src/room/CallView.test.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -// TODO-MULTI-SFU: Restore or discard these tests. The role of GroupCallView has +// TODO-MULTI-SFU: Restore or discard these tests. The role of CallView has // changed (it no longer manages the connection to the same extent), so they may // need extra work to adapt. @@ -36,7 +36,8 @@ import userEvent, { import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container"; import { useState } from "react"; import { TooltipProvider } from "@vector-im/compound-web"; -import { type ITransport } from "matrix-widget-api"; +import { Subject } from "rxjs"; +import { Room as LivekitRoom } from "livekit-client"; import { prefetchSounds } from "../soundUtils"; import { useAudioContext } from "../useAudioContext"; @@ -50,15 +51,19 @@ import { mockRtcMembership, MockRTCSession, } from "../utils/test"; -import { GroupCallView } from "./GroupCallView"; +import { CallView } from "./CallView"; import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary"; -import { ElementWidgetActions, type WidgetHelpers } from "../widget"; -import { LazyEventEmitter } from "../LazyEventEmitter"; +import { + type HostBridge, + HostBridgeProvider, + type HostRequest, + nullHostBridge, +} from "../HostBridge"; +import { type JoinCallData } from "../widget"; import { MatrixRTCTransportMissingError } from "../utils/errors"; import { ProcessorProvider } from "../livekit/TrackProcessorContext"; import { MediaDevicesContext } from "../MediaDevicesContext"; import { constant } from "../state/Behavior"; -import { type MuteStates } from "../state/MuteStates.ts"; vi.mock("../soundUtils"); vi.mock("../useAudioContext"); @@ -117,7 +122,7 @@ beforeEach(() => { playSoundLooping: vi.fn(), soundDuration: {}, }); - // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here. + // A trivial implementation of Active call to ensure we are testing CallView exclusively here. (ActiveCall as MockedFunction).mockImplementation( ({ onLeft: onLeave }) => { return ( @@ -133,11 +138,13 @@ beforeEach(() => { ); }); -function createGroupCallView( - widget: WidgetHelpers | null, +function createCallView( + hostBridge: HostBridge, joined = true, options: { withErrorBoundary?: boolean; + /** Wait for the host to say when to join, rather than joining at once. */ + preload?: boolean; } = {}, ): { rtcSession: MatrixRTCSession; @@ -170,44 +177,34 @@ function createGroupCallView( constant([localRtcMember]), ); rtcSession.joined = joined; - const muteState = { - audio: { enabled: false }, - video: { enabled: false }, - // TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures - } as unknown as MuteStates; - const groupCallView = ( - ); const { getByText } = render( - - - - {options.withErrorBoundary ? ( - - {groupCallView} - - ) : ( - groupCallView - )} - - - + + + + + {options.withErrorBoundary ? ( + + {callView} + + ) : ( + callView + )} + + + + , ); return { @@ -216,9 +213,9 @@ function createGroupCallView( }; } -test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async () => { +test.skip("CallView plays a leave sound asynchronously in SPA mode", async () => { const user = userEvent.setup(); - const { getByText, rtcSession } = createGroupCallView(null); + const { getByText, rtcSession } = createCallView(nullHostBridge); const leaveButton = getByText("Leave"); await user.click(leaveButton); expect(playSound).toHaveBeenCalledWith("left"); @@ -233,14 +230,9 @@ test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async await waitFor(() => expect(leaveRTCSession).toHaveResolved()); }); -test.skip("GroupCallView plays a leave sound synchronously in widget mode", async () => { +test.skip("CallView plays a leave sound synchronously in widget mode", async () => { const user = userEvent.setup(); - const widget = { - api: { - setAlwaysOnScreen: async () => Promise.resolve(true), - } as Partial, - lazyActions: new LazyEventEmitter(), - }; + const hostBridge: HostBridge = { ...nullHostBridge, close: vi.fn() }; let resolvePlaySound: () => void; playSound = vi .fn() @@ -253,9 +245,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn soundDuration: {}, }); - const { getByText, rtcSession } = createGroupCallView( - widget as WidgetHelpers, - ); + const { getByText, rtcSession } = createCallView(hostBridge); const leaveButton = getByText("Leave"); await user.click(leaveButton); await flushPromises(); @@ -272,28 +262,13 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn expect(leaveRTCSession).toHaveBeenCalledOnce(); }); -test("Should close widget when all other left and play a sound", async () => { +test("Should ask the host to close when all other left and play a sound", async () => { const user = userEvent.setup(); - let widgetClosedCalled = false; - const { promise: widgetClosedPromise, resolve: widgetClosedResolver } = - Promise.withResolvers(); - const widgetSendMock = vi.fn().mockImplementation((action: string) => { - if (action === ElementWidgetActions.Close) { - widgetClosedCalled = true; - widgetClosedResolver(); - } - }); - const widgetStopMock = vi.fn().mockResolvedValue(undefined); - const widget = { - api: { - setAlwaysOnScreen: vi.fn().mockResolvedValue(true), - transport: { - send: widgetSendMock, - reply: vi.fn().mockResolvedValue(undefined), - stop: widgetStopMock, - } as unknown as ITransport, - } as Partial, - lazyActions: new LazyEventEmitter(), + const close = vi.fn().mockResolvedValue(undefined); + const hostBridge: HostBridge = { + ...nullHostBridge, + setAlwaysOnScreen: vi.fn().mockResolvedValue(undefined), + close, }; const resolvePlaySound = Promise.withResolvers(); playSound = vi.fn().mockReturnValue(resolvePlaySound.promise); @@ -303,53 +278,61 @@ test("Should close widget when all other left and play a sound", async () => { soundDuration: {}, }); - const { getByText } = createGroupCallView(widget as WidgetHelpers); + const { getByText } = createCallView(hostBridge); const leaveButton = getByText("SimulateOtherLeft"); await user.click(leaveButton); await flushPromises(); - expect(widgetClosedCalled).toBeFalsy(); + expect(close).not.toHaveBeenCalled(); resolvePlaySound.resolve(); expect(playSound).toHaveBeenCalledWith("left", 0); - await widgetClosedPromise; - await flushPromises(); - expect(widgetClosedCalled).toBeTruthy(); - expect(widgetStopMock).toHaveBeenCalledOnce(); + await waitFor(() => expect(close).toHaveBeenCalledOnce()); }, 80000); -test("Should not close widget when auto leave due to error", async () => { +test("Waits for the host to say when to join, when preloaded", async () => { + // Nothing to match device names against; the host names none anyway + vi.spyOn(LivekitRoom, "getLocalDevices").mockResolvedValue([]); + const join$ = new Subject>(); + const hostBridge: HostBridge = { ...nullHostBridge, join$ }; + + createCallView(hostBridge, false, { preload: true }); + await flushPromises(); + // Past the lobby, but not in the call: the host has not asked yet + expect(screen.queryByText("Leave")).toBeNull(); + + const reply = vi.fn(); + act(() => + join$.next({ data: { audioInput: null, videoInput: null }, reply }), + ); + // Then in the call, and the host told so + await waitFor(() => expect(reply).toHaveBeenCalledOnce()); + expect(screen.getByText("Leave")).toBeInTheDocument(); +}); + +test("Should not ask the host to close when auto leave due to error", async () => { const user = userEvent.setup(); - const widgetStopMock = vi.fn().mockResolvedValue(undefined); - const widgetSendMock = vi.fn().mockResolvedValue(undefined); - const widget = { - api: { - setAlwaysOnScreen: vi.fn().mockResolvedValue(true), - transport: { - send: widgetSendMock, - reply: vi.fn().mockResolvedValue(undefined), - stop: widgetStopMock, - } as unknown as ITransport, - } as Partial, - lazyActions: new LazyEventEmitter(), + const close = vi.fn().mockResolvedValue(undefined); + const setAlwaysOnScreen = vi.fn().mockResolvedValue(undefined); + const hostBridge: HostBridge = { + ...nullHostBridge, + setAlwaysOnScreen, + close, }; - const alwaysOnScreenSpy = vi.spyOn(widget.api, "setAlwaysOnScreen"); - - const { getByText } = createGroupCallView(widget as WidgetHelpers); + const { getByText } = createCallView(hostBridge); const leaveButton = getByText("SimulateErrorLeft"); await user.click(leaveButton); await flushPromises(); // When onLeft is called, we first set always on screen to false - await waitFor(() => expect(alwaysOnScreenSpy).toHaveBeenCalledWith(false)); + await waitFor(() => expect(setAlwaysOnScreen).toHaveBeenCalledWith(false)); await flushPromises(); - // But then we do not close the widget automatically - expect(widgetStopMock).not.toHaveBeenCalledOnce(); - expect(widgetSendMock).not.toHaveBeenCalledOnce(); + // But then we do not ask to be closed automatically + expect(close).not.toHaveBeenCalled(); }); -test.skip("GroupCallView leaves the session when an error occurs", async () => { +test.skip("CallView leaves the session when an error occurs", async () => { (ActiveCall as MockedFunction).mockImplementation(() => { const [error, setError] = useState(null); if (error !== null) throw error; @@ -360,7 +343,7 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => { ); }); const user = userEvent.setup(); - const { rtcSession } = createGroupCallView(null); + const { rtcSession } = createCallView(nullHostBridge); await user.click(screen.getByRole("button", { name: "Panic!" })); screen.getByText("Something went wrong"); expect(leaveRTCSession).toHaveBeenCalledWith( @@ -370,14 +353,14 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => { ); }); -test.skip("GroupCallView shows errors that occur during joining", async () => { +test.skip("CallView shows errors that occur during joining", async () => { const user = userEvent.setup(); // This should not mock this error that deep. it should only mock the CallViewModel. enterRTCSession.mockRejectedValue(new MatrixRTCTransportMissingError("")); onTestFinished(() => { enterRTCSession.mockReset(); }); - createGroupCallView(null, false); + createCallView(nullHostBridge, false); await user.click(screen.getByRole("button", { name: "Join call" })); screen.getByText("Call is not supported"); }); @@ -396,7 +379,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent { cause: stickyError }, ); - const { rtcSession } = createGroupCallView(null, true, { + const { rtcSession } = createCallView(nullHostBridge, true, { withErrorBoundary: true, }); @@ -408,7 +391,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent }); test("falls back to ConnectionLostError for unrecognised membership manager errors", async () => { - const { rtcSession } = createGroupCallView(null, true, { + const { rtcSession } = createCallView(nullHostBridge, true, { withErrorBoundary: true, }); @@ -424,7 +407,7 @@ test("falls back to ConnectionLostError for unrecognised membership manager erro test("user can reconnect after a membership manager error", async () => { const user = userEvent.setup(); - const { rtcSession } = createGroupCallView(null, true); + const { rtcSession } = createCallView(nullHostBridge, true); await act(() => rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined), ); diff --git a/src/room/GroupCallView.tsx b/src/room/CallView.tsx similarity index 73% rename from src/room/GroupCallView.tsx rename to src/room/CallView.tsx index fbd589e7..3c34dc84 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/CallView.tsx @@ -28,14 +28,8 @@ import { MatrixRTCSessionEvent, type MatrixRTCSession, } from "matrix-js-sdk/lib/matrixrtc"; -import { useNavigate } from "react-router-dom"; -import type { IWidgetApiRequest } from "matrix-widget-api"; -import { - ElementWidgetActions, - type JoinCallData, - type WidgetHelpers, -} from "../widget"; +import { type JoinCallData } from "../widget"; import { LobbyView } from "./LobbyView"; import { type MatrixInfo } from "./VideoPreview"; import { CallEndedView } from "./CallEndedView"; @@ -54,12 +48,7 @@ import { useRoomAvatar } from "./useRoomAvatar"; import { useRoomName } from "./useRoomName"; import { useJoinRule } from "./useJoinRule"; import { InviteModal } from "./InviteModal"; -import { - getUrlParams, - HeaderStyle, - type UrlParams, - useUrlParams, -} from "../UrlParams"; +import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams"; import { E2eeType } from "../e2ee/e2eeType"; import { useAudioContext } from "../useAudioContext"; import { @@ -67,7 +56,6 @@ import { type CallEventSounds, } from "./CallEventAudioRenderer"; import { useLatest } from "../useLatest"; -import { usePageTitle } from "../usePageTitle"; import { ConnectionLostError, E2EENotSupportedError, @@ -80,6 +68,10 @@ import { useTypedEventEmitter } from "../useEvents"; import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts"; import { useAppBarTitle } from "../AppBar.tsx"; import { useBehavior } from "../useBehavior.ts"; +import { useRootElement } from "../RootElementContext.ts"; +import { useHostBridge } from "../HostBridge.ts"; +import { useMuteStates } from "../state/useMuteStates.ts"; +import { useLeaveToHome } from "../LeaveToHomeContext.ts"; /** * If there already are this many participants in the call, we automatically mute @@ -94,19 +86,67 @@ declare global { } interface Props { + /** The client to place the call with. */ client: MatrixClient; - isPasswordlessUser: boolean; - confineToRoom: boolean; - preload: UrlParams["preload"]; - skipLobby: UrlParams["skipLobby"]; + /** The call to join. */ rtcSession: MatrixRTCSession; + /** + * Whether the user is signed in as a guest, and so should be offered the + * chance to create an account when the call ends. + */ + isPasswordlessUser: boolean; + /** Whether to keep the user in this call rather than letting them navigate. */ + confineToRoom: boolean; + /** Whether to wait for the host to ask us to join. */ + preload: UrlParams["preload"]; + /** Whether to enter the call directly, without showing the lobby first. */ + skipLobby: UrlParams["skipLobby"]; +} + +/** + * A call, from start to finish. + * + * This owns the whole lifecycle of being in a call: the lobby, where the user + * checks their camera and microphone before joining; the call itself; and the + * screen shown once it has ended. Not every call has every stage — the lobby + * is skipped when the user is put straight into the call, or when the host + * wants to say when to join; and after the call there may be a post-call + * screen, a return to the lobby, or nothing, depending on whether the host + * decides what comes next. The view decides which stages apply from the + * parameters it was started with and from what the host bridge says. + * + * It owns nothing about how Element Call came to be showing a call: no + * routing, no authentication, no resolving of room aliases. Those belong to + * whatever is hosting it — the standalone app's own shell, or an application + * embedding Element Call as a component. Both render this. + */ +export const CallView: FC = (props): ReactNode => { + // Whether the user is in the call is the call's own business, not its host's. + // Held here rather than below so that it survives the mute state being + // rebuilt. + const [joined, setJoined] = useState(false); + const muteStates = useMuteStates(); + + if (muteStates === null) return null; + + return ( + + ); +}; + +interface LoadedProps extends Props { joined: boolean; setJoined: (value: boolean) => void; muteStates: MuteStates; - widget: WidgetHelpers | null; } -export const GroupCallView: FC = ({ +/** {@link CallView}, once it has the mute state everything below needs. */ +const LoadedCallView: FC = ({ client, isPasswordlessUser, confineToRoom, @@ -116,13 +156,19 @@ export const GroupCallView: FC = ({ joined, setJoined, muteStates, - widget, }) => { // Used to thread through any errors that occur outside the error boundary const [externalError, setExternalError] = useState( null, ); const memberships = useMatrixRTCSessionMemberships(rtcSession); + const rootElement = useRootElement(); + const hostBridge = useHostBridge(); + // A host that can close us is a host that decides when we stop existing, so + // we neither show our own post-call screens nor assume we have time to + // finish what we are doing. (Whose account the user's is, by contrast, is + // stated outright: see `HostBridge.supportsProfileChanges`.) + const hostControlsLifetime = hostBridge.close !== undefined; const muteAllAudio = useBehavior(muteAllAudio$); const leaveSoundContext = useLatest( @@ -140,9 +186,9 @@ export const GroupCallView: FC = ({ }, []); useEffect(() => { - logger.info("[Lifecycle] GroupCallView Component mounted"); + logger.info("[Lifecycle] CallView Component mounted"); return (): void => { - logger.info("[Lifecycle] GroupCallView Component unmounted"); + logger.info("[Lifecycle] CallView Component unmounted"); }; }, []); @@ -150,11 +196,11 @@ export const GroupCallView: FC = ({ // viewport sizes smaller than 122px width. (It is actually this exact number: 122px // tested on different devices...) useEffect(() => { - document.body.classList.add("no-scroll-body"); + rootElement.classList.add("no-scroll-body"); return (): void => { - document.body.classList.remove("no-scroll-body"); + rootElement.classList.remove("no-scroll-body"); }; - }, []); + }, [rootElement]); useEffect(() => { window.rtcSession = rtcSession; @@ -209,7 +255,6 @@ export const GroupCallView: FC = ({ if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl); }, [passwordFromUrl, room.roomId]); - usePageTitle(roomName); useAppBarTitle(roomName); const matrixInfo = useMemo((): MatrixInfo => { @@ -297,28 +342,26 @@ export const GroupCallView: FC = ({ }; if (skipLobby) { - if (widget && preload) { + // `preload` is only ever set when we have a host to be preloaded by. + if (preload) { // In preload mode without lobby we wait for a join action before entering - const onJoin = (ev: CustomEvent): void => { + const subscription = hostBridge.join$.subscribe(({ data, reply }) => { (async (): Promise => { - await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData); + await defaultDeviceSetup(data); setJoined(true); - widget.api.transport.reply(ev.detail, {}); + reply(); })().catch((e) => { logger.error("Error joining RTC session on preload", e); }); - }; - widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin); - return (): void => { - widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin); - }; + }); + return (): void => subscription.unsubscribe(); } else { // No lobby and no preload: we enter the rtc session right away setJoined(true); } } }, [ - widget, + hostBridge, rtcSession, preload, skipLobby, @@ -331,7 +374,7 @@ export const GroupCallView: FC = ({ // TODO refactor this + "joined" to just one callState const [left, setLeft] = useState(false); - const navigate = useNavigate(); + const leaveToHome = useLeaveToHome(); // TODO split this into leave and onDisconnect const onLeft = useCallback( @@ -344,7 +387,7 @@ export const GroupCallView: FC = ({ // When "allOthersLeft", the leaveSoundEffect$ in CallEventAudioRenderer // already plays the "left" sound when the remote participant's media // disappears. We play it here silenced (volumeOverwrite = 0) so we have the right duration in the audioPromise. - // (used to destory the widget) + // (which is what delays asking the host to close us) audioPromise = leaveSoundContext.current?.playSound("left", 0); break; case "timeout": @@ -359,12 +402,12 @@ export const GroupCallView: FC = ({ setLeft(true); // We need to wait until the callEnded event is tracked on PostHog, - // otherwise the iframe may get killed first. + // otherwise we may be torn down first. const posthogRequest = new Promise((resolve) => { - // To increase the likelihood of the PostHog event being sent out in - // widget mode before the iframe is killed, we ask it to skip the - // usual queuing/batching of requests. - const sendInstantly = widget !== null; + // To increase the likelihood of the PostHog event being sent out + // before the host disposes of us, we ask it to skip the usual + // queuing/batching of requests. + const sendInstantly = hostControlsLifetime; PosthogAnalytics.instance.eventCallEnded.track( room.roomId, rtcSession.memberships.length, @@ -372,8 +415,8 @@ export const GroupCallView: FC = ({ rtcSession, ); // Unfortunately the PostHog library provides no way to await the - // tracking of an event, but we don't really want it to hold up the - // closing of the widget that long anyway, so giving it 10 ms will do. + // tracking of an event, but we don't really want it to hold up our + // disposal that long anyway, so giving it 10 ms will do. window.setTimeout(resolve, 10); }); @@ -390,27 +433,21 @@ export const GroupCallView: FC = ({ !confineToRoom && !PosthogAnalytics.instance.isEnabled() ) - void navigate("/"); + leaveToHome?.(); - if (widget) { - // After this point the iframe could die at any moment! + // After this point the host could dispose of us at any moment! + try { + await hostBridge.setAlwaysOnScreen(false); + } catch (e) { + logger.error("Failed to set `alwaysOnScreen` to false", e); + } + // On a normal user hangup we can shut down and ask to be closed. But + // if an error occurs we should stay open until the user reads it. + if (reason != "error" && !returnToLobby) { try { - await widget.api.setAlwaysOnScreen(false); + await hostBridge.close?.(); } catch (e) { - logger.error( - "Failed to set call widget `alwaysOnScreen` to false", - e, - ); - } - // On a normal user hangup we can shut down and close the widget. But if an - // error occurs we should keep the widget open until the user reads it. - if (reason != "error" && !getUrlParams().returnToLobby) { - try { - await widget.api.transport.send(ElementWidgetActions.Close, {}); - } catch (e) { - logger.error("Failed to send close action", e); - } - widget.api.transport.stop(); + logger.error("Failed to ask the host to close Element Call", e); } } }); @@ -418,22 +455,24 @@ export const GroupCallView: FC = ({ [ setJoined, leaveSoundContext, - widget, + hostBridge, + hostControlsLifetime, room.roomId, rtcSession, isPasswordlessUser, confineToRoom, - navigate, + returnToLobby, + leaveToHome, ], ); useEffect(() => { - if (widget && joined) - // set widget to sticky once joined. - widget.api.setAlwaysOnScreen(true).catch((e) => { + if (joined) + // ask to be kept on screen once joined. + hostBridge.setAlwaysOnScreen(true).catch((e) => { logger.error("Error calling setAlwaysOnScreen(true)", e); }); - }, [widget, joined, rtcSession]); + }, [hostBridge, joined, rtcSession]); const joinRule = useJoinRule(room); @@ -503,19 +542,16 @@ export const GroupCallView: FC = ({ /> ); - } else if (left && widget === null) { - // Left in SPA mode: + } else if (left && !hostControlsLifetime) { + // Left, and it is up to us what to show next: // The call ended view is shown for two reasons: prompting guests to create // an account, and prompting users that have opted into analytics to provide - // feedback. We don't show a feedback prompt to widget users however (at - // least for now), because we don't yet have designs that would allow widget - // users to dismiss the feedback prompt and close the call window without - // submitting anything. - if ( - isPasswordlessUser || - (PosthogAnalytics.instance.isEnabled() && widget === null) - ) { + // feedback. We don't show a feedback prompt when a host owns our lifetime + // however (at least for now), because we don't yet have designs that would + // allow those users to dismiss the feedback prompt and close the call + // window without submitting anything. + if (isPasswordlessUser || PosthogAnalytics.instance.isEnabled()) { body = ( = ({ // LobbyView again which would open capture devices again. body = null; } - } else if (left && widget !== null) { - // Left in widget mode: + } else if (left && hostControlsLifetime) { + // Left, and the host decides what happens next: body = returnToLobby ? lobbyView : null; } else if (preload || skipLobby) { // The RTC session is not joined to yet (`isJoined`), but enterRTCSessionOrError should have been called. @@ -543,7 +579,6 @@ export const GroupCallView: FC = ({ return ( { setExternalError(null); if (action == "reconnect") { @@ -555,9 +590,10 @@ export const GroupCallView: FC = ({ }} onError={(_error) => { if (rtcSession.isJoined()) onLeft("error"); - // If there is an error we need to be able to close the widget. This is done in `onLeft` as well - // We need it here explicitly in case rtcSession.isJoined is false. - void widget?.api.setAlwaysOnScreen(false); + // If there is an error we need to be dismissible again. This is done in + // `onLeft` as well; we need it here explicitly in case + // rtcSession.isJoined is false. + void hostBridge.setAlwaysOnScreen(false); }} > {body} diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx index 5880c71f..6e62a070 100644 --- a/src/room/GroupCallErrorBoundary.test.tsx +++ b/src/room/GroupCallErrorBoundary.test.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { describe, expect, test, vi } from "vitest"; +import { describe, expect, onTestFinished, test, vi } from "vitest"; import { render, screen } from "@testing-library/react"; import { type FC, @@ -14,7 +14,7 @@ import { useCallback, useState, } from "react"; -import { BrowserRouter } from "react-router-dom"; +import { LeaveToHomeProvider } from "../LeaveToHomeContext"; import userEvent from "@testing-library/user-event"; import { ConnectionError } from "livekit-client"; import { MatrixError } from "matrix-js-sdk"; @@ -36,7 +36,14 @@ import { UnknownCallError, } from "../utils/errors.ts"; import { mockConfig } from "../utils/test.ts"; -import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts"; +import { + type HostBridge, + HostBridgeProvider, + nullHostBridge, +} from "../HostBridge.ts"; + +// Somewhere to go home to, so that the error pages offer the way +const leaveToHome = vi.fn(); test.each([ { @@ -75,15 +82,14 @@ test.each([ const onErrorMock = vi.fn(); const { asFragment } = render( - + - , + , ); await screen.findByText(expectedTitle); @@ -103,16 +109,19 @@ test("should render the error page with link back to home", async () => { }; const onErrorMock = vi.fn(); + // From the home page itself the home button reloads instead of navigating, + // so be somewhere else for this test + window.history.pushState({}, "", "/room/somewhere"); + onTestFinished(() => window.history.pushState({}, "", "/")); const { asFragment } = render( - + - , + , ); await screen.findByText("Call is not supported"); @@ -121,7 +130,11 @@ test("should render the error page with link back to home", async () => { screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i), ).toBeInTheDocument(); - await screen.findByRole("button", { name: "Return to home screen" }); + // The way home is whatever the shell supplied, not a route of the call's own + await userEvent + .setup() + .click(screen.getByRole("button", { name: "Return to home screen" })); + expect(leaveToHome).toHaveBeenCalledOnce(); expect(onErrorMock).toHaveBeenCalledOnce(); expect(onErrorMock).toHaveBeenCalledWith(error); @@ -153,14 +166,11 @@ test("ConnectionLostError: Action handling should reset error state", async () = ); return ( - - + + - + ); }; @@ -195,15 +205,14 @@ describe("Rageshake button", () => { }; render( - + - , + , ); } @@ -224,30 +233,28 @@ describe("Rageshake button", () => { }); }); -test("should have a close button in widget mode", async () => { +test("should have a close button when the host can dismiss us", async () => { const error = new MatrixRTCTransportMissingError("example.com"); const TestComponent = (): ReactNode => { throw error; }; - const mockWidget = { - api: { - transport: { send: vi.fn().mockResolvedValue(undefined), stop: vi.fn() }, - }, - } as unknown as WidgetHelpers; + const close = vi.fn().mockResolvedValue(undefined); + const hostBridge: HostBridge = { ...nullHostBridge, close }; const user = userEvent.setup(); const onErrorMock = vi.fn(); const { asFragment } = render( - - - - - , + + + + + + + , ); await screen.findByText("Call is not supported"); @@ -258,11 +265,7 @@ test("should have a close button in widget mode", async () => { await user.click(screen.getByRole("button", { name: "Close" })); - expect(mockWidget.api.transport.send).toHaveBeenCalledWith( - ElementWidgetActions.Close, - expect.anything(), - ); - expect(mockWidget.api.transport.stop).toHaveBeenCalled(); + expect(close).toHaveBeenCalled(); }); test("should show technical details when error has a matrixError cause", async () => { @@ -281,15 +284,11 @@ test("should show technical details when error has a matrixError cause", async ( }; render( - - + + - , + , ); await screen.findByText("Something went wrong"); @@ -314,15 +313,11 @@ test("should not show technical details when error has no matrix error cause", a }; render( - - + + - , + , ); await screen.findByText("Connection lost"); @@ -373,15 +368,14 @@ describe("LiveKit ConnectionError variants", () => { const recoveryActionHandler = vi.fn(async () => Promise.resolve()); const { asFragment } = render( - + - , + , ); await screen.findByText("Couldn’t connect to voice"); @@ -419,15 +413,14 @@ describe("LiveKit ConnectionError variants", () => { }; const { asFragment } = render( - + - , + , ); await screen.findByText("Connection timeout"); diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx index f50b7906..8c006be6 100644 --- a/src/room/GroupCallErrorBoundary.tsx +++ b/src/room/GroupCallErrorBoundary.tsx @@ -36,9 +36,9 @@ import { PeerConnectionTimeoutError, UnknownCallError, } from "../utils/errors.ts"; +import { widget } from "../widget"; import { FullScreenView } from "../FullScreenView.tsx"; import { ErrorView } from "../ErrorView.tsx"; -import { type WidgetHelpers } from "../widget.ts"; import styles from "../ErrorView.module.css"; import { LotusWidgetActions, lotusSendToHost } from "../lotus/lotusWidget"; @@ -52,13 +52,11 @@ interface ErrorPageProps { error: ElementCallError; recoveryActionHandler: RecoveryActionHandler; resetError: () => void; - widget: WidgetHelpers | null; } const ErrorPage: FC = ({ error, recoveryActionHandler, - widget, }: ErrorPageProps): ReactElement => { const { t } = useTranslation(); logger.error("Error boundary caught:", error); @@ -98,7 +96,7 @@ const ErrorPage: FC = ({ w?.lazyActions?.off(LotusWidgetActions.Reconnect, onReconnect); lotusSendToHost(LotusWidgetActions.CallError, { code: null }); }; - }, [error.code, recoverable, recoveryActionHandler, widget]); + }, [error.code, recoverable, recoveryActionHandler]); const actions: { label: string; onClick: () => void }[] = []; if (error instanceof ConnectionLostError) { @@ -129,7 +127,6 @@ const ErrorPage: FC = ({ Icon={icon} title={error.localisedTitle} rageshake={error.code == ErrorCode.UNKNOWN_ERROR} - widget={widget} >

{error.localisedMessageKey ? ( @@ -188,14 +185,12 @@ interface BoundaryProps { children: ReactNode | (() => ReactNode); recoveryActionHandler: RecoveryActionHandler; onError?: (error: unknown) => void; - widget: WidgetHelpers | null; } export const GroupCallErrorBoundary = ({ recoveryActionHandler, onError, children, - widget, }: BoundaryProps): ReactElement => { const fallbackRenderer: FallbackRender = useCallback( ({ error, resetError }): ReactElement => { @@ -205,7 +200,6 @@ export const GroupCallErrorBoundary = ({ : new UnknownCallError(error instanceof Error ? error : new Error()); return ( { @@ -215,7 +209,7 @@ export const GroupCallErrorBoundary = ({ /> ); }, - [recoveryActionHandler, widget], + [recoveryActionHandler], ); return ( diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css index 736a915a..3c393cd6 100644 --- a/src/room/InCallView.module.css +++ b/src/room/InCallView.module.css @@ -75,7 +75,7 @@ spotlight tile is maximised and displaying video, apply a gradient background. * background: none; } -@media (max-width: 320px) { +@container element-call (max-width: 320px) { .invite { display: none; } diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx index 3113c072..357bc186 100644 --- a/src/room/InCallView.test.tsx +++ b/src/room/InCallView.test.tsx @@ -14,7 +14,7 @@ import { type MockedFunction, vi, } from "vitest"; -import { render, type RenderResult } from "@testing-library/react"; +import { act, render, type RenderResult } from "@testing-library/react"; import { type LocalParticipant } from "livekit-client"; import { BehaviorSubject, of } from "rxjs"; import { BrowserRouter } from "react-router-dom"; @@ -51,6 +51,7 @@ import { AppBar } from "../AppBar"; import { type MatrixInfo } from "./VideoPreview"; import { ProcessorProvider } from "../livekit/TrackProcessorContext"; import { initializeWidget } from "../widget"; +import { RootElementProvider } from "../RootElementContext"; initializeWidget(); vi.hoisted( @@ -263,4 +264,71 @@ describe("ActiveCall", () => { // Rendering at all proves ActiveCall created all of its view models expect(await findByTestId("incall_leave")).toBeVisible(); }); + + it("lays the call out for the size of its root element", async () => { + // jsdom has no layout and no ResizeObserver: the root reports whatever + // size we say, and the observer notifies whenever we tell it to + let size = { width: 1000, height: 800 }; + const root = document.createElement("div"); + Object.defineProperty(root, "clientWidth", { get: () => size.width }); + Object.defineProperty(root, "clientHeight", { get: () => size.height }); + document.body.appendChild(root); + + const observers: (() => void)[] = []; + const originalResizeObserver = window.ResizeObserver; + window.ResizeObserver = class { + public constructor(private readonly callback: ResizeObserverCallback) {} + public observe(): void { + observers.push(() => this.callback([], this as ResizeObserver)); + } + public unobserve(): void {} + public disconnect(): void {} + } as unknown as typeof ResizeObserver; + + try { + const mediaDevices = mockMediaDevices({}); + const { rtcSession, matrixRoom } = getBasicRTCSession([local, alice]); + const { findByTestId, container } = render( + + + + + + + {}} + /> + + + + + + , + { container: root }, + ); + await findByTestId("incall_leave"); + const call = container.querySelector("[data-layout]")!; + expect(call.getAttribute("data-layout")).not.toBe("pip"); + + // The host shrinks the container to a corner of its page. The window has + // not changed at all — what matters is the element we were given. + size = { width: 300, height: 300 }; + act(() => observers.forEach((notify) => notify())); + expect(call.getAttribute("data-layout")).toBe("pip"); + + size = { width: 1000, height: 800 }; + act(() => observers.forEach((notify) => notify())); + expect(call.getAttribute("data-layout")).not.toBe("pip"); + } finally { + window.ResizeObserver = originalResizeObserver; + root.remove(); + } + }); }); diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index dce65202..d15f3cb6 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -20,15 +20,12 @@ import { import useMeasure from "react-use-measure"; import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; import classNames from "classnames"; -import { map } from "rxjs"; -import { useObservable } from "observable-hooks"; import { logger as rootLogger } from "matrix-js-sdk/lib/logger"; import { useTranslation } from "react-i18next"; import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header"; import { HeaderStyle, useUrlParams } from "../UrlParams"; import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts"; -import { widget } from "../widget"; import { startLotusCallState } from "../lotus/lotusCallState"; import { startLotusFocus } from "../lotus/lotusFocus"; import { startLotusControls } from "../lotus/lotusControls"; @@ -43,6 +40,9 @@ import { startLotusCallSummary } from "../lotus/lotusCallSummary"; import { startLotusAudioOutput } from "../lotus/lotusAudioOutput"; import { startLotusScreenshareWatch } from "../lotus/lotusScreenshareWatch"; import { startLotusDeafen } from "../lotus/lotusDeafen"; +import { useHostBridge } from "../HostBridge.ts"; +import { useRootElement } from "../RootElementContext"; +import { observeElementSize$ } from "../utils/elementSize"; import styles from "./InCallView.module.css"; import { GridTile } from "../tile/GridTile"; import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal"; @@ -55,6 +55,7 @@ import { type MatrixInfo } from "./VideoPreview"; import { InviteButton } from "../button/InviteButton"; import { type CallViewModel, + callViewModelOptionsFromParams, createCallViewModel$, } from "../state/CallViewModel/CallViewModel.ts"; import { Grid, type TileProps } from "../grid/Grid"; @@ -89,10 +90,11 @@ import { useAppBarSubtitle, } from "../AppBar.tsx"; import { useBehavior } from "../useBehavior.ts"; +import { useValueBehavior } from "../useValueBehavior.ts"; import { constant } from "../state/Behavior.ts"; import { Toast } from "../Toast.tsx"; import overlayStyles from "../Overlay.module.css"; -import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx"; +import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx"; import { type Layout } from "../state/layout-types.ts"; import { ObservableScope } from "../state/ObservableScope.ts"; import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx"; @@ -131,8 +133,12 @@ export const ActiveCall: FC = (props) => { useState | null>(null); const urlParams = useUrlParams(); + const hostBridge = useHostBridge(); const mediaDevices = useMediaDevices(); - const trackProcessorState$ = useTrackProcessorObservable$(); + const trackProcessorState$ = useTrackProcessorState$(); + // The element we have to draw the call in: the page, or the container a host + // gave us. Its size, not the window's, decides how the call is laid out. + const rootElement = useRootElement(); useEffect(() => { rootLogger.info("START CALL VIEW SCOPE"); const scope = new ObservableScope(); @@ -147,14 +153,19 @@ export const ActiveCall: FC = (props) => { mediaDevices, props.muteStates, { + ...callViewModelOptionsFromParams(urlParams), encryptionSystem: props.e2eeSystem, + hostBridge, autoLeaveWhenOthersLeft, waitForCallPickup: waitForCallPickup && sendNotificationType === "ring", - matrixRTCMode$: matrixRTCModeSetting.value$, + // We merely sample the current mode here, so the user would need to + // manually rejoin to switch to a different one. + matrixRTCMode: matrixRTCModeSetting.value$.value, + windowSize$: scope.behavior(observeElementSize$(rootElement)), }, reactionsReader.raisedHands$, reactionsReader.reactions$, - scope.behavior(trackProcessorState$), + trackProcessorState$, ); // TODO move this somewhere else once we use the callViewModel in the lobby as well! vm.join(); @@ -172,9 +183,11 @@ export const ActiveCall: FC = (props) => { props.e2eeSystem, props.onLeft, urlParams, + hostBridge, mediaDevices, trackProcessorState$, props.client, + rootElement, ]); useEffect(() => { @@ -187,6 +200,7 @@ export const ActiveCall: FC = (props) => { props.muteStates, mediaDevices, `${props.client.getUserId()}:${props.client.getDeviceId()}`, + { showControls: urlParams.showControls, header: urlParams.header }, ); setFooterVm(footerVm); setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm)); @@ -247,11 +261,12 @@ export const InCallView: FC = ({ }) => { const logger = rootLogger.getChild("[InCallView]"); const { t } = useTranslation(); + const hostBridge = useHostBridge(); const { sendReaction, toggleRaisedHand } = useReactionsSender(); useWakeLock(); // TODO-MULTI-SFU This is unused now?? - // const connectionState = useObservableEagerState(vm.livekitConnectionState$); + // const connectionState = useBehavior(vm.livekitConnectionState$); // annoyingly we don't get the disconnection reason this way, // only by listening for the emitted event @@ -266,6 +281,20 @@ export const InCallView: FC = ({ // Merge the refs so they can attach to the same element const containerRef = useMergedRefs(containerRef1, containerRef2); + // The fixed grid is positioned against Element Call's root, so offsets + // handed to it have to be measured from there rather than from the + // viewport. Standalone the two are the same, the root being the page; for a + // component the root sits wherever the host put it, and measuring from the + // viewport would push the grid down by that much again. Taken at the same + // moment as `bounds`, so that the two agree however the host has scrolled. + const rootElement = useRootElement(); + const rootTop = useMemo( + () => rootElement.getBoundingClientRect().top, + // eslint-disable-next-line react-hooks/exhaustive-deps + [rootElement, bounds], + ); + const topWithinRoot = bounds.top - rootTop; + const { showControls, header: headerStyle } = useUrlParams(); const muteAllAudio = useBehavior(muteAllAudio$); @@ -287,6 +316,7 @@ export const InCallView: FC = ({ const audioParticipants = useBehavior(vm.livekitRoomItems$); const participantCount = useBehavior(vm.participantCount$); const reconnecting = useBehavior(vm.reconnecting$); + const screenShareError = useBehavior(vm.screenShareError$); const layout = useBehavior(vm.layout$); const edgeToEdge = useBehavior(vm.edgeToEdge$); const overflowing = useBehavior(vm.overflowing$); @@ -370,14 +400,14 @@ export const InCallView: FC = ({ const openProfile = useMemo( () => - // Profile settings are unavailable in widget mode - widget === null + // The profile is only ours to edit when the account is ours + hostBridge.supportsProfileChanges ? (): void => { setSettingsTab("profile"); setSettingsOpen(true); } : null, - [setSettingsTab, setSettingsOpen], + [setSettingsTab, setSettingsOpen, hostBridge], ); const [headerRef, headerBounds] = useMeasure(); @@ -398,10 +428,7 @@ export const InCallView: FC = ({ edgeToEdge, ], ); - const gridBoundsObservable$ = useObservable( - (inputs$) => inputs$.pipe(map(([gridBounds]) => gridBounds)), - [gridBounds], - ); + const gridBounds$ = useValueBehavior(gridBounds); useAppBarHidden(!showHeader); useAppBarSubtitle( @@ -454,6 +481,21 @@ export const InCallView: FC = ({ ); } + const onDismissScreenShareToast = useCallback( + () => vm.dismissScreenShareError(), + [vm], + ); + const screenShareToast = ( + + {t("error.screen_share_failed")} + + ); + // The reconnecting toast cannot be dismissed const onDismissReconnectingToast = useCallback(() => {}, []); // We need to use a non-modal toast to avoid trapping focus within the toast. @@ -547,7 +589,7 @@ export const InCallView: FC = ({ ); const layouts = useMemo(() => { - const inputs = { minBounds$: gridBoundsObservable$ }; + const inputs = { minBounds$: gridBounds$ }; return { grid: makeGridLayout(inputs), "spotlight-landscape": makeSpotlightLandscapeLayout(inputs), @@ -556,7 +598,7 @@ export const InCallView: FC = ({ "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs), "one-on-one-mobile": makeOneOnOneMobileLayout(inputs), }; - }, [gridBoundsObservable$]); + }, [gridBounds$]); const showFooter = useBehavior(footerVm.showFooter$); const renderContent = (): JSX.Element => { @@ -587,7 +629,7 @@ export const InCallView: FC = ({ className={styles.fixedGrid} style={{ // If not edge-to-edge, consume the header insets right here. - insetBlockStart: edgeToEdge ? 0 : bounds.top + headerBounds.height, + insetBlockStart: edgeToEdge ? 0 : topWithinRoot + headerBounds.height, height: edgeToEdge ? "100%" : gridBounds.height, // If edge-to-edge, compute new safe area insets that account for the // header and footer, passing them down to the tiles. @@ -598,7 +640,7 @@ export const InCallView: FC = ({ // itself. Otherwise account for the safe area and header size // as part of the InCallView. headerStyle === HeaderStyle.AppBar - ? `${bounds.top}px` + ? `${topWithinRoot}px` : `calc(env(safe-area-inset-top) + ${headerBounds.height}px)` : undefined, "--call-view-safe-area-inset-bottom": @@ -670,6 +712,9 @@ export const InCallView: FC = ({ [styles.overflowing]: overflowing, })} ref={containerRef} + // Which layout the call has settled on, for tests and for anyone + // wondering why the call looks the way it does at the size it was given + data-layout={layout.type} onPointerUp={onViewPointerUp} onPointerMove={onPointerMove} onPointerOut={onPointerOut} @@ -690,6 +735,7 @@ export const InCallView: FC = ({ {reconnectingToast} + {screenShareToast} {earpieceOverlay} {footer} diff --git a/src/room/KnockLobbyView.test.tsx b/src/room/KnockLobbyView.test.tsx new file mode 100644 index 00000000..a513952b --- /dev/null +++ b/src/room/KnockLobbyView.test.tsx @@ -0,0 +1,95 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { describe, expect, it, vi } from "vitest"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { TooltipProvider } from "@vector-im/compound-web"; +import { type MatrixClient, type RoomSummary } from "matrix-js-sdk"; + +import { KnockLobbyView } from "./KnockLobbyView"; +import { LeaveToHomeProvider } from "../LeaveToHomeContext"; +import { MediaDevicesContext } from "../MediaDevicesContext"; +import { type ProcessorState } from "../livekit/TrackProcessorContext"; +import { mockMediaDevices } from "../utils/test"; + +vi.mock("@livekit/components-react", () => ({ + usePreviewTracks: (): unknown[] => [], +})); + +vi.mock("../livekit/TrackProcessorContext", () => ({ + useTrackProcessor: (): ProcessorState => ({ + supported: false, + processor: undefined, + }), + useTrackProcessorSync: (): void => {}, +})); + +vi.mock("react-use-measure", () => ({ + default: (): [() => void, object] => [(): void => {}, {}], +})); + +vi.mock("../settings/SettingsModal", () => ({ + SettingsModal: (): null => null, + defaultSettingsTab: "general", +})); + +const client = { + getUserId: () => "@user:example.org", + getDeviceId: () => "DEVICE", +} as Partial as MatrixClient; + +// What peeking at a room we are not in tells us about it +const roomSummary = { + room_id: "!room:example.org", + name: "Knock Room", + "im.nheko.summary.encryption": "m.megolm.v1.aes-sha2", +} as Partial as RoomSummary; + +function renderKnockLobby(knock: (() => void) | null): void { + render( + + + + + + + , + ); +} + +describe("KnockLobbyView", () => { + it("offers to ask to join, with what it knows of the room", async () => { + const knock = vi.fn(); + renderKnockLobby(knock); + + // The mute state arrives asynchronously, and the lobby with it + const button = await screen.findByTestId("lobby_joinCall"); + expect(button).toHaveTextContent("Request to join call"); + expect(button).toBeEnabled(); + expect(screen.getByText("Knock Room")).toBeInTheDocument(); + + await userEvent.setup().click(button); + expect(knock).toHaveBeenCalledOnce(); + }); + + it("waits once it has asked", async () => { + renderKnockLobby(null); + + const button = await screen.findByTestId("lobby_joinCall"); + expect(button).toHaveTextContent("Request sent!"); + // Compound's button keeps focusable, saying so through ARIA instead + expect(button).toHaveAttribute("aria-disabled", "true"); + }); +}); diff --git a/src/room/KnockLobbyView.tsx b/src/room/KnockLobbyView.tsx new file mode 100644 index 00000000..39643b20 --- /dev/null +++ b/src/room/KnockLobbyView.tsx @@ -0,0 +1,92 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { type FC, type JSX, type ReactNode } from "react"; +import { type MatrixClient, type RoomSummary } from "matrix-js-sdk"; +import { useTranslation } from "react-i18next"; +import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; + +import { LobbyView } from "./LobbyView"; +import { E2eeType } from "../e2ee/e2eeType"; +import { useMuteStates } from "../state/useMuteStates"; + +interface Props { + client: MatrixClient; + /** What we know about the room from peeking at it. */ + roomSummary: RoomSummary; + /** The user's own name and avatar, to show in their own tile. */ + profile: { displayName: string; avatarUrl: string }; + /** + * Asks to be let in, if the room allows it. Absent once we have asked and + * are waiting for an answer. + */ + knock: (() => void) | null; + confineToRoom: boolean; + hideHeader: boolean; +} + +/** + * The lobby shown while the user is outside a room they want to call in — + * either able to ask to join, or waiting for someone to answer. + * + * This belongs to the app shell rather than to the call: it exists precisely + * because there is no call to be in yet. It keeps its own mute state, which is + * why it is a component rather than part of the page — so that the call's mute + * state and this one are never alive at the same time, reporting over each + * other to the host. + */ +export const KnockLobbyView: FC = ({ + client, + roomSummary, + profile, + knock, + confineToRoom, + hideHeader, +}): ReactNode => { + const { t } = useTranslation(); + const muteStates = useMuteStates(); + + if (muteStates === null) return null; + + const waitingForInvite = knock === null; + const enterLabel: string | JSX.Element = waitingForInvite ? ( + <> + {t("lobby.waiting_for_invite")} + + + ) : ( + t("lobby.ask_to_join") + ); + + return ( + knock?.()} + enterLabel={enterLabel} + waitingForInvite={waitingForInvite} + confineToRoom={confineToRoom} + hideHeader={hideHeader} + participantCount={null} + muteStates={muteStates} + onShareClick={null} + /> + ); +}; diff --git a/src/room/LobbyView.module.css b/src/room/LobbyView.module.css index b66d483c..b112cdf2 100644 --- a/src/room/LobbyView.module.css +++ b/src/room/LobbyView.module.css @@ -28,13 +28,13 @@ Please see LICENSE in the repository root for full details. color: var(--cpd-color-theme-primary) !important; } -@media (max-width: 500px) { +@container element-call (max-width: 500px) { .join { width: 100%; } } -@media (min-height: 650px) { +@container element-call (min-height: 650px) { .content { gap: var(--cpd-space-10x); } diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index 8cbe6be1..aedd9fdd 100644 --- a/src/room/LobbyView.test.tsx +++ b/src/room/LobbyView.test.tsx @@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { describe, expect, it, vi } from "vitest"; -import { render } from "@testing-library/react"; -import { BrowserRouter } from "react-router-dom"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { of } from "rxjs"; +import { LeaveToHomeProvider } from "../LeaveToHomeContext"; import { TooltipProvider } from "@vector-im/compound-web"; import { type MatrixClient } from "matrix-js-sdk"; import { axe } from "vitest-axe"; @@ -18,7 +20,13 @@ import { import { LobbyView } from "./LobbyView"; import { E2eeType } from "../e2ee/e2eeType"; -import { mockMediaDevices, mockMuteStates } from "../utils/test"; +import { + mockMediaDevices, + mockMuteStates, + restoreAudioCapture, + stubAudioCapture, +} from "../utils/test"; +import { type MediaDevices } from "../state/MediaDevices"; import { MediaDevicesContext } from "../MediaDevicesContext"; import { type ProcessorState } from "../livekit/TrackProcessorContext"; import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; @@ -26,6 +34,9 @@ import lobbyStyles from "./LobbyView.module.css"; import headerStyles from "../Header.module.css"; import { AppBar } from "../AppBar"; +// Somewhere to go home to, so that the lobby offers the way back +const leaveToHome = vi.fn(); + vi.mock("@livekit/components-react", () => ({ usePreviewTracks: (): unknown[] => [], })); @@ -74,9 +85,10 @@ function renderLobbyView( props: Partial[0]> = {}, withAppBar = false, platform = "android", + devices: Partial = {}, ): ReturnType { platformMock.mockReturnValue(platform); - const mediaDevices = mockMediaDevices({}); + const mediaDevices = mockMediaDevices(devices); const muteStates = mockMuteStates(); const hideHeader = withAppBar ? true : false; const lobbyView = ( @@ -93,14 +105,14 @@ function renderLobbyView( /> ); return render( - + {withAppBar && {lobbyView}} {!withAppBar && lobbyView} - , + , ); } @@ -175,3 +187,30 @@ describe("LobbyView", () => { expect(await axe(container)).toHaveNoViolations(); }); }); + +describe("LobbyView microphone level", () => { + afterEach(restoreAudioCapture); + + it("shows the microphone level meter", async () => { + const capture = stubAudioCapture(); + capture.grant(); + const user = userEvent.setup(); + const { getByRole } = renderLobbyView({}, false, "desktop", { + requestDeviceNames: (): void => {}, + audioInput: { + available$: of( + new Map([["mic1", { type: "name", name: "Microphone 1" }]]), + ), + selected$: of({ id: "mic1" }), + select: (): void => {}, + }, + } as unknown as Partial); + + // Pre-join reaches the meter through the same chevron as a call. + await user.click(getByRole("button", { name: "Microphone" })); + + expect( + await screen.findByRole("meter", { name: "Microphone level" }), + ).toBeInTheDocument(); + }); +}); diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index e122b3f2..5814e431 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -24,8 +24,6 @@ import { type LocalVideoTrack, Track, } from "livekit-client"; -import { useObservableEagerState } from "observable-hooks"; -import { useNavigate } from "react-router-dom"; import inCallStyles from "./InCallView.module.css"; import styles from "./LobbyView.module.css"; @@ -34,9 +32,10 @@ import { type MatrixInfo, VideoPreview } from "./VideoPreview"; import { type MuteStates } from "../state/MuteStates"; import { InviteButton } from "../button/InviteButton"; import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal"; -import { useMediaQuery } from "../useMediaQuery"; +import { useRootSizeMatches } from "../useRootSize"; import { E2eeType } from "../e2ee/e2eeType"; -import { Link } from "../button/Link"; +import { LeaveToHomeLink } from "../button/LeaveToHomeLink"; +import { useLeaveToHome } from "../LeaveToHomeContext"; import { useMediaDevices } from "../MediaDevicesContext"; import { ObservableScope } from "../state/ObservableScope"; import { useInitial } from "../useInitial"; @@ -44,7 +43,6 @@ import { useTrackProcessor, useTrackProcessorSync, } from "../livekit/TrackProcessorContext"; -import { usePageTitle } from "../usePageTitle"; import { getValue } from "../utils/observable"; import { useBehavior } from "../useBehavior"; import { CallFooter, type FooterSnapshot } from "../components/CallFooter"; @@ -87,7 +85,6 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); - usePageTitle(matrixInfo.roomName); useAppBarPrimaryButtonIconKind("back"); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); @@ -111,25 +108,23 @@ export const LobbyView: FC = ({ [setSettingsModalOpen], ); - const navigate = useNavigate(); - const onLeaveClick = useCallback(() => { - navigate("/")?.catch((error) => { - logger.error("Failed to navigate to /", error); - }); - }, [navigate]); - const hangup = confineToRoom ? undefined : onLeaveClick; + // Leaving the lobby means going back to wherever the user came from, if + // there is such a place + const leaveToHome = useLeaveToHome(); + const hangup = + confineToRoom || leaveToHome === null ? undefined : leaveToHome; - const recentsButtonInFooter = useMediaQuery("(max-height: 500px)"); + const recentsButtonInFooter = useRootSizeMatches( + ({ height }) => height <= 500, + ); const recentsButton = !confineToRoom && ( - + {t("lobby.leave_button")} - + ); const devices = useMediaDevices(); - const videoInputId = useObservableEagerState( - devices.videoInput.selected$, - )?.id; + const videoInputId = useBehavior(devices.videoInput.selected$)?.id; // Capture the audio options as they were when we first mounted, because // we're not doing anything with the audio anyway so we don't need to @@ -209,7 +204,7 @@ export const LobbyView: FC = ({ return (): void => { footerScope.end(); }; - }, [devices, hangup, hideHeader, muteStates, onLeaveClick, openSettings]); + }, [devices, hangup, hideHeader, muteStates, openSettings]); // TODO: Unify this component with InCallView, so we can get slick joining // animations and don't have to feel bad about reusing its CSS diff --git a/src/room/ReactionsOverlay.module.css b/src/room/ReactionsOverlay.module.css index 3738dc09..618adbf3 100644 --- a/src/room/ReactionsOverlay.module.css +++ b/src/room/ReactionsOverlay.module.css @@ -3,8 +3,11 @@ display: inline; z-index: 2; pointer-events: none; - width: 100vw; - height: 100vh; + /* Percentages, not viewport units: the containing block is the element + Element Call treats as its root, which is the page in the standalone app but + the container a host gave us when embedded. */ + width: 100%; + height: 100%; left: 0; top: 0; } @@ -16,7 +19,7 @@ animation-name: reaction-up; width: fit-content; position: relative; - top: 80vh; + top: 80%; } @keyframes reaction-up { @@ -24,7 +27,7 @@ opacity: 1; translate: 0 0; scale: 200%; - top: 80vh; + top: 80%; } to { @@ -48,7 +51,7 @@ .reaction { font-size: 48pt; animation-name: reaction-up-reduced; - top: calc(-50vh + (48pt / 2)); - left: calc(50vw - (48pt / 2)) !important; + top: calc(-50% + (48pt / 2)); + left: calc(50% - (48pt / 2)) !important; } } diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx index b1ffb3ba..71bceea7 100644 --- a/src/room/RoomPage.tsx +++ b/src/room/RoomPage.tsx @@ -6,41 +6,27 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { - type FC, - useEffect, - useState, - type ReactNode, - useRef, - type JSX, -} from "react"; +import { type FC, useEffect, useState, type ReactNode, useRef } from "react"; import { type MatrixError } from "matrix-js-sdk"; import { logger } from "matrix-js-sdk/lib/logger"; import { Trans, useTranslation } from "react-i18next"; -import { - CheckIcon, - UnknownSolidIcon, -} from "@vector-im/compound-design-tokens/assets/web/icons"; +import { UnknownSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { useClientLegacy } from "../ClientContext"; import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView"; import { RoomAuthView } from "./RoomAuthView"; -import { GroupCallView } from "./GroupCallView"; +import { CallView } from "./CallView"; import { useRoomIdentifier, useUrlParams } from "../UrlParams"; import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser"; import { HomePage } from "../home/HomePage"; -import { widget } from "../widget"; import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall"; -import { LobbyView } from "./LobbyView"; -import { E2eeType } from "../e2ee/e2eeType"; +import { KnockLobbyView } from "./KnockLobbyView"; import { useProfile } from "../profile/useProfile"; import { useOptInAnalytics } from "../settings/settings"; import { Link } from "../button/Link"; import { ErrorView } from "../ErrorView"; -import { useMediaDevices } from "../MediaDevicesContext"; -import { MuteStates } from "../state/MuteStates"; -import { ObservableScope } from "../state/ObservableScope"; -import { calculateInitialMuteState } from "../state/initialMuteState.ts"; +import { usePageTitle } from "../usePageTitle"; +import { useRoomName } from "./useRoomName"; export const RoomPage: FC = (): ReactNode => { const urlParams = useUrlParams(); @@ -61,31 +47,25 @@ export const RoomPage: FC = (): ReactNode => { const { avatarUrl, displayName: userDisplayName } = useProfile(client); const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers); - const [joined, setJoined] = useState(false); - const devices = useMediaDevices(); - const [muteStates, setMuteStates] = useState(null); - - useEffect(() => { - const scope = new ObservableScope(); - setMuteStates( - new MuteStates( - scope, - devices, - calculateInitialMuteState( - urlParams.skipLobby, - urlParams.callIntent, - widget !== null, - ), - ), - ); - return (): void => scope.end(); - }, [devices, urlParams]); + // The page title is the page's to set, not the call's: a host embedding the + // call has a title of its own. So it is set here, for whichever room we have + // got as far as knowing about. + const roomName = useRoomName( + groupCallState.kind === "loaded" ? groupCallState.rtcSession.room : null, + ); + usePageTitle( + roomName ?? + (groupCallState.kind === "canKnock" || + groupCallState.kind === "waitForInvite" + ? groupCallState.roomSummary.name + : undefined), + ); useEffect(() => { // If we've finished loading, are not already authed and we've been given a display name as // a URL param, automatically register a passwordless user - if (!loading && !authenticated && displayName && !widget) { + if (!loading && !authenticated && displayName && !urlParams.isWidget) { setIsRegistering(true); registerPasswordlessUser(displayName) .catch((e) => { @@ -99,6 +79,7 @@ export const RoomPage: FC = (): ReactNode => { loading, authenticated, displayName, + urlParams.isWidget, setIsRegistering, registerPasswordlessUser, ]); @@ -121,67 +102,34 @@ export const RoomPage: FC = (): ReactNode => { switch (groupCallState.kind) { case "loaded": return ( - muteStates && ( - - ) + ); case "waitForInvite": case "canKnock": { wasInWaitForInviteState.current = wasInWaitForInviteState.current || groupCallState.kind === "waitForInvite"; - const knock = - groupCallState.kind === "canKnock" ? groupCallState.knock : null; - const label: string | JSX.Element = - groupCallState.kind === "canKnock" ? ( - t("lobby.ask_to_join") - ) : ( - <> - {t("lobby.waiting_for_invite")} - - - ); return ( - muteStates && ( - knock?.()} - enterLabel={label} - waitingForInvite={groupCallState.kind === "waitForInvite"} - confineToRoom={confineToRoom} - hideHeader={header !== "standard"} - participantCount={null} - muteStates={muteStates} - onShareClick={null} - /> - ) + ); } case "loading": @@ -198,7 +146,6 @@ export const RoomPage: FC = (): ReactNode => {

@@ -216,7 +163,6 @@ export const RoomPage: FC = (): ReactNode => {

{groupCallState.error.messageBody}

{groupCallState.error.reason && ( @@ -230,7 +176,7 @@ export const RoomPage: FC = (): ReactNode => { ); } else { - return ; + return ; } default: return <> ; @@ -238,7 +184,7 @@ export const RoomPage: FC = (): ReactNode => { }; if (loading || isRegistering) return ; - if (error) return ; + if (error) return ; if (!client) return ; // TODO: This doesn't belong here, the app routes need to be reworked if (!roomIdOrAlias) return ; diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css index 67eae10b..4d3d0562 100644 --- a/src/room/VideoPreview.module.css +++ b/src/room/VideoPreview.module.css @@ -9,7 +9,9 @@ Please see LICENSE in the repository root for full details. margin-left: var(--content-inset-left); margin-right: var(--content-inset-right); min-block-size: 0; - block-size: 50vh; + /* Half the height of Element Call's root, not of the viewport: embedded, + the two differ (see the note on container units in base.css) */ + block-size: 50cqh; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--cpd-space-4x); @@ -71,7 +73,7 @@ video.mirror { ); } -@media (max-width: 550px) { +@container element-call (max-width: 550px) { .preview { margin-inline: 0; border-radius: 0; diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap index 20c25986..0225c99a 100644 --- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap +++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap @@ -11,11 +11,10 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
- - +
should explain the LiveKit 'internal
- should explain the LiveKit 'internal fill="white" /> - +
should explain the LiveKit 'notAllow
- should explain the LiveKit 'notAllow fill="white" /> - +
should explain the LiveKit 'serverUn
- should explain the LiveKit 'serverUn fill="white" /> - +
should explain the LiveKit 'serviceN
- should explain the LiveKit 'serviceN fill="white" /> - +
should explain the LiveKit 'timeout'
- should explain the LiveKit 'timeout' fill="white" /> - +
should link to troubleshoot guide wh
- should link to troubleshoot guide wh fill="white" /> - +
should link to troubleshoot guide wh `; -exports[`should have a close button in widget mode 1`] = ` +exports[`should have a close button when the host can dismiss us 1`] = `
- - +
- - +
- - +
- - +
- - +
- - +
- - +
rendering > renders 1`] = `
rendering > renders 1`] = ` class="_settingsLogoContainer_20b7b4" >
- {/*// modal lives outside of the root*/} + {/* A dialog, which is what claims key presses for itself; where it + lives in the DOM does not matter */} {modalOpen && ( { // container element that can be interactive and receive focus / keydown // events.