Add the MatrixRTC SDK package, its harness and a failing smoke test

Set up `sdk/` as a package shaped exactly like `component/`: its own
package.json with peer dependencies, the pnpm workspace marker so a host can
install it as a git dependency, a build tsconfig for type emission, and a vite
lib config with an externals list that `pnpm lint:externals` now checks for
both library builds.

The package holds only the interface for now. `createRtcSession` returns an
empty object; `RtcSession`, `RtcMember`, `MemberMedia` and `TransportMetadata`
are the contract Element Call's `CallViewModel` will be rebuilt on (see
sdk-plan.md). The shared primitives are re-exported from `src` until the first
implementation slice moves them.

`sdk/dev` is the smallest consumer of the SDK: a plain page that logs in, joins
a room and renders one tile per member, served by `pnpm dev:sdk` on port 3002.
Playwright starts it as a third web server, and `playwright/sdk/smoke.spec.ts`
has two browsers join one session. It fails on the status line with the SDK's
own error until there is an implementation behind the interface.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

sdk/dev/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<!--
+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.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MatrixRTC SDK harness</title>
+    <style>
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      form {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+      #members {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 0.5rem;
+      }
+      #members video {
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        background: #222;
+      }
+      #members h2 {
+        font-size: 1rem;
+        margin: 0.25rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <input
+        name="homeserver"
+        placeholder="homeserver"
+        value="https://synapse.m.localhost"
+      />
+      <input name="username" placeholder="username" />
+      <input name="password" type="password" placeholder="password" />
+      <input name="room" placeholder="room id or alias" />
+      <button type="submit">Start</button>
+      <button type="button" id="leave" hidden>Leave</button>
+    </form>
+    <p id="status" data-testid="status"></p>
+    <main id="members"></main>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

sdk/dev/main.ts

@@ -0,0 +1,157 @@
+/*
+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 smallest consumer of the SDK: log in, join a room, show every member's
+ * camera and play every remote member's microphone, leave. What a host writes,
+ * and nothing a host would not.
+ */
+
+import { logger } from "matrix-js-sdk/lib/logger";
+import { combineLatest, type Observable, of, switchMap } from "rxjs";
+import {
+  constant,
+  createRtcSession,
+  E2eeType,
+  MatrixRTCMode,
+  type MediaTrack,
+  ObservableScope,
+  type RtcMember,
+  type RtcSession,
+} from "@element-hq/matrixrtc-sdk";
+
+import { createSession } from "./session";
+
+const form = document.querySelector("form")!;
+const status = document.getElementById("status")!;
+const members = document.getElementById("members")!;
+const leaveButton = document.getElementById("leave") as HTMLButtonElement;
+
+// So that a test, or a bookmark, can fill the form from the URL
+const params = new URLSearchParams(location.search);
+for (const input of form.querySelectorAll("input"))
+  input.value = params.get(input.name) ?? input.value;
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const fields = new FormData(form);
+  const field = (name: string): string => fields.get(name) as string;
+  void start(
+    field("homeserver"),
+    field("username"),
+    field("password"),
+    field("room"),
+  );
+});
+
+async function start(
+  homeserver: string,
+  username: string,
+  password: string,
+  roomIdOrAlias: string,
+): Promise<void> {
+  try {
+    status.textContent = "Logging in";
+    const client = await createSession(homeserver, username, password);
+    const room = await client.joinRoom(roomIdOrAlias);
+
+    const scope = new ObservableScope();
+    const session = createRtcSession(
+      scope,
+      client,
+      room,
+      {
+        microphoneEnabled$: constant(true),
+        cameraEnabled$: constant(true),
+        audioInputDeviceId$: constant(undefined),
+        videoInputDeviceId$: constant(undefined),
+        videoProcessor$: constant(undefined),
+      },
+      {
+        encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      },
+    );
+    showMembers(scope, session);
+    session.join();
+    status.textContent = "Joined";
+
+    leaveButton.hidden = false;
+    leaveButton.onclick = (): void => {
+      session.leave();
+      scope.end();
+      members.replaceChildren();
+      leaveButton.hidden = true;
+      status.textContent = "Left";
+    };
+  } catch (e) {
+    status.textContent = `Error: ${e}`;
+    logger.error(e);
+  }
+}
+
+function showMembers(scope: ObservableScope, session: RtcSession): void {
+  const tiles = new Map<string, HTMLElement>();
+  combineLatest([session.localMember$, session.remoteMembers$])
+    .pipe(scope.bind())
+    .subscribe(([local, remote]) => {
+      const current = local === null ? remote : [local, ...remote];
+      for (const [id, tile] of tiles)
+        if (!current.some((m) => m.id === id)) {
+          tile.remove();
+          tiles.delete(id);
+        }
+      for (const member of current)
+        if (!tiles.has(member.id)) {
+          const tile = memberTile(scope, member);
+          tiles.set(member.id, tile);
+          members.append(tile);
+        }
+    });
+}
+
+function memberTile(scope: ObservableScope, member: RtcMember): HTMLElement {
+  const tile = document.createElement("section");
+  tile.dataset.testid = "member";
+  tile.dataset.userId = member.userId;
+
+  const name = tile.appendChild(document.createElement("h2"));
+  member.displayName$.pipe(scope.bind()).subscribe((n) => {
+    name.textContent = n;
+  });
+
+  const camera$ = member.media$.pipe(
+    switchMap((media) => media?.camera$ ?? of(undefined)),
+  );
+  render(scope, camera$, tile.appendChild(document.createElement("video")));
+  // Our own microphone would only echo
+  if (!member.local) {
+    const microphone$ = member.media$.pipe(
+      switchMap((media) => media?.microphone$ ?? of(undefined)),
+    );
+    render(
+      scope,
+      microphone$,
+      tile.appendChild(document.createElement("audio")),
+    );
+  }
+  return tile;
+}
+
+function render(
+  scope: ObservableScope,
+  track$: Observable<MediaTrack | undefined>,
+  element: HTMLMediaElement,
+): void {
+  let attached: MediaTrack | undefined;
+  track$.pipe(scope.bind()).subscribe((track) => {
+    attached?.detach(element);
+    attached = track;
+    track?.attach(element);
+  });
+  scope.onEnd(() => attached?.detach(element));
+}

sdk/dev/session.ts

@@ -0,0 +1,49 @@
+/*
+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 with a password and returns a client that has finished its first sync. */
+export async function createSession(
+  homeserver: string,
+  username: string,
+  password: string,
+): Promise<MatrixClient> {
+  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,
+  });
+
+  await client.initRustCrypto({ useIndexedDB: false });
+  await client.startClient();
+  await new Promise<void>((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;
+}