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/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));
+}