@irtio/lobby 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1,21 +1,45 @@
 /**
  * `<irt-lobby>` — the whole share story in one tag: room code, share link, QR,
- * connection status, an optional name box, and the badge.
+ * connection status, player count, an optional name box, and the badge.
  *
  * Two deliberate constraints shape this file. It is a **plain `HTMLElement`** with shadow DOM and
  * inline styles, so a consumer needs no build step, no CSS import and no framework. And it takes
  * its room **structurally** (`AttachableRoom`) rather than importing `@irtio/client`, so the
  * package keeps zero dependencies and a React/Svelte user can drive it with attributes instead.
+ *
+ * ### Modal mode
+ *
+ * Set the boolean `modal` attribute to render the panel inside a fixed, full-viewport backdrop
+ * instead of inline. The element supplies no trigger of its own — a dev wires their own button to
+ * call `.open()`, and the element handles the rest: it renders hidden until the `open` boolean
+ * attribute is present, closes on a backdrop click, Escape, or its own × button, and toggling
+ * either the attribute or the `open()`/`close()`/`toggle()` methods keeps the other in sync.
+ * Leaving `modal` off keeps the element's non-modal rendering byte-for-byte unchanged.
  */
 /**
  * The part of `@irtio/client`'s `Room` the lobby actually uses. Typed structurally on purpose:
  * `lobby.attach(room)` accepts a real room without this package depending on the client.
+ *
+ * `clients`, `maxClients` and `rtt` are all optional, so a room without them still satisfies this
+ * type and still attaches; the element just leaves the player count unset. A stand-in whose `on`
+ * takes a plain `string` event (rather than the exact three-way overload below) is still
+ * structurally compatible — TypeScript checks methods bivariantly — so an older or hand-rolled
+ * room needs no changes to attach.
  */
 interface AttachableRoom {
     readonly id: string;
     readonly link: string;
     readonly status: string;
+    readonly clients?: readonly {
+        connected: boolean;
+    }[];
+    readonly maxClients?: number;
+    readonly rtt?: number;
     on(event: 'status', cb: (status: string) => void): () => void;
+    on(event: 'clients', cb: (clients: readonly {
+        connected: boolean;
+    }[]) => void): () => void;
+    on(event: 'rtt', cb: (rtt: number) => void): () => void;
 }
 /**
  * The custom element class. Registered as `irt-lobby` by `defineLobby()`, which this package
@@ -37,14 +61,36 @@ declare class IrtLobbyElement extends HTMLElement {
     /** Whether the name box is shown. Mirrors the `name-entry` boolean attribute. */
     get nameEntry(): boolean;
     set nameEntry(value: boolean);
+    /**
+     * The connected player count. `undefined` (the attribute absent) hides the whole row; any other
+     * value, including `0`, shows it. Mirrors the `players` attribute.
+     */
+    get players(): number | undefined;
+    set players(value: number | undefined);
+    /** The room's capacity, if known. `0` or the attribute absent both mean "unknown". */
+    get maxPlayers(): number;
+    set maxPlayers(value: number);
+    /** Whether the panel renders inside a fixed full-viewport backdrop. Mirrors `modal`. */
+    get modal(): boolean;
+    set modal(value: boolean);
+    /** Whether a modal panel is currently shown. Meaningless outside `modal` mode. */
+    get isOpen(): boolean;
+    /** Shows the modal panel and starts listening for Escape. No-op outside `modal` mode. */
+    open(): void;
+    /** Hides the modal panel and stops listening for Escape. */
+    close(): void;
+    /** Convenience for a single trigger button that both opens and closes the modal. */
+    toggle(): void;
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
     /** Unsubscribing here is why `attach` needs no matching `detach` call in app code. */
     disconnectedCallback(): void;
     /**
      * Drives the element from a live room: copies `id`/`link`/`status` in and follows `status`
-     * afterwards. Attaching twice replaces the previous subscription. Returns the unsubscribe so
-     * a framework can tie it to its own teardown; `disconnectedCallback` calls it regardless.
+     * afterwards. When the room reports `clients` or `maxClients`, seeds and follows the player
+     * count too; a room without them just leaves `players` unset. Attaching twice replaces the
+     * previous subscription. Returns the unsubscribe so a framework can tie it to its own teardown;
+     * `disconnectedCallback` calls it regardless.
      */
     attach(room: AttachableRoom): () => void;
     /** The room passed to the last `attach`, if it is still attached. */
@@ -60,6 +106,112 @@ declare const LOBBY_TAG = "irt-lobby";
  */
 declare function defineLobby(tag?: string): void;
 
+/**
+ * `<irt-status>` — a compact inline status dot for when you already have your own share UI and
+ * just want the connection indicator: a coloured dot, and optionally the latest ping next to it.
+ *
+ * Same constraints as `<irt-lobby>`: plain `HTMLElement`, shadow DOM, inline styles, zero
+ * dependencies, and a structural `AttachableRoom` rather than an import of `@irtio/client`.
+ */
+
+/**
+ * The custom element class. Registered as `irt-status` by `defineStatus()`, which this package
+ * calls for you on import when a `customElements` registry exists.
+ */
+declare class IrtStatusElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): readonly string[];
+    constructor();
+    /** One of `@irtio/client`'s statuses. Anything else renders as a grey dot with that text. */
+    get status(): string;
+    set status(value: string);
+    /** The latest round-trip time in milliseconds, if known. */
+    get ping(): number | undefined;
+    set ping(value: number | undefined);
+    /** Whether the ping is rendered next to the dot. Mirrors the `show-ping` boolean attribute. */
+    get showPing(): boolean;
+    set showPing(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Drives the element from a live room: seeds `status` and `ping` and follows `status`
+     * afterwards. For the ping, it follows the room's `'rtt'` event when the room emits one;
+     * otherwise it polls `room.rtt` every two seconds, since not every room reports RTT as an
+     * event. Attaching twice replaces the previous subscription and polling loop.
+     */
+    attach(room: AttachableRoom): () => void;
+    render(): void;
+}
+/** The tag name the element registers under. */
+declare const STATUS_TAG = "irt-status";
+/**
+ * Registers `<irt-status>`. Idempotent and safe to call anywhere — importing this package already
+ * calls it once, and a second registration (HMR, two bundled copies) would otherwise throw.
+ */
+declare function defineStatus(tag?: string): void;
+
+/**
+ * `<irt-profile>` — a dev-mode bandwidth overlay: where this client's bytes are going, by
+ * collection and field, once a second (D65).
+ *
+ * Same constraints as the other two elements: plain `HTMLElement`, shadow DOM, inline styles,
+ * zero dependencies, and a structural room type rather than an import of `@irtio/client`. It is a
+ * development surface — mount it behind a flag rather than shipping it on.
+ */
+/**
+ * The part of `@irtio/client`'s `Room` this element uses, typed structurally so the package keeps
+ * its zero dependencies. `profile` is what `joinRoom(schema, { profile: true })` adds; a room
+ * without it attaches fine and the overlay says the profiler is off.
+ */
+interface ProfilableRoom {
+    readonly profile?: {
+        perSecond(): ProfileReading;
+        total(): ProfileReading;
+    };
+}
+/** The shape `@irtio/protocol`'s `ProfileSnapshot` has, structurally. */
+interface ProfileReading {
+    readonly rows: readonly {
+        readonly kind: string;
+        readonly key: string;
+        readonly out: number;
+        readonly in: number;
+    }[];
+    readonly bytesIn: number;
+    readonly bytesOut: number;
+}
+declare class IrtProfileElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): readonly string[];
+    constructor();
+    /** How many rows to show. Mirrors the `rows` attribute. */
+    get rows(): number;
+    set rows(value: number);
+    /** The heading above the table. Mirrors the `title-text` attribute. */
+    get titleText(): string;
+    set titleText(value: string);
+    /**
+     * The room to read. Assigning it starts the 1 Hz refresh; assigning `undefined` stops it. A
+     * room joined without `profile: true` has no ledger, and the overlay says so rather than
+     * rendering zeros.
+     */
+    get room(): ProfilableRoom | undefined;
+    set room(value: ProfilableRoom | undefined);
+    /** Symmetry with `<irt-lobby>` and `<irt-status>`: `attach(room)` returns a detach function. */
+    attach(room: ProfilableRoom): () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    /** Reads the ledger once. Exposed so a test drives it without waiting for the interval. */
+    refresh(): void;
+    render(): void;
+}
+/** The tag name the element registers under. */
+declare const PROFILE_TAG = "irt-profile";
+/** Registers `<irt-profile>`. Idempotent, like `defineLobby()` and `defineStatus()`. */
+declare function defineProfile(tag?: string): void;
+
 /**
  * A QR encoder small enough to inline: byte mode, error-correction level L, versions 1–40,
  * automatic version selection and automatic mask selection.
@@ -87,4 +239,4 @@ interface QrMatrix {
  */
 declare function encodeQr(text: string): QrMatrix;
 
-export { type AttachableRoom, IrtLobbyElement, LOBBY_TAG, type QrMatrix, defineLobby, encodeQr };
+export { type AttachableRoom, IrtLobbyElement, IrtProfileElement, IrtStatusElement, LOBBY_TAG, PROFILE_TAG, type ProfilableRoom, type ProfileReading, type QrMatrix, STATUS_TAG, defineLobby, defineProfile, defineStatus, encodeQr };

package/dist/index.js

@@ -420,7 +420,7 @@ function encodeQr(text) {
   return { size: grid.size, version, mask: bestMask, modules: grid.modules };
 }
 
-// src/element.ts
+// src/status-colors.ts
 var STATUS_LABELS = {
   connecting: "connecting",
   starting: "waking the server",
@@ -435,7 +435,22 @@ var STATUS_COLORS = {
   reconnecting: "#e0a33a",
   closed: "#d1495b"
 };
-var OBSERVED = ["room-code", "link", "status", "name-entry"];
+var UNKNOWN_STATUS_COLOR = "#9aa1ad";
+
+// src/element.ts
+function countConnected(clients) {
+  return clients.filter((c) => c.connected !== false).length;
+}
+var OBSERVED = [
+  "room-code",
+  "link",
+  "status",
+  "name-entry",
+  "players",
+  "max-players",
+  "modal",
+  "open"
+];
 var STYLE = `
   :host {
     display: block;
@@ -449,8 +464,10 @@ var STYLE = `
     max-width: 320px;
   }
   :host([hidden]) { display: none; }
+  :host([modal]) { display: contents; }
   * { box-sizing: border-box; }
   .status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa1ad; }
+  .status .players { margin-left: auto; }
   .dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa1ad; flex: none; }
   .code {
     display: block; width: 100%; margin: 10px 0 4px;
@@ -480,6 +497,29 @@ var STYLE = `
   .badge { margin-top: 12px; font-size: 11px; color: #6c7280; text-align: center; }
   .badge a { color: inherit; }
   .toast { min-height: 14px; font-size: 11px; color: #3ac177; text-align: center; }
+  .backdrop {
+    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
+    background: rgba(8, 9, 12, 0.6); z-index: 999;
+  }
+  .backdrop[hidden] { display: none; }
+  .panel {
+    position: relative;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+    color: #f2f3f5;
+    background: #16181d;
+    border: 1px solid #2a2e37;
+    border-radius: 12px;
+    padding: 16px;
+    max-width: 320px;
+    width: calc(100vw - 32px);
+  }
+  .close {
+    position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
+    border: 1px solid #2a2e37; background: #16181d; color: #f2f3f5; font-size: 14px; line-height: 1;
+    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
+  }
+  .close:hover { background: #1e2129; }
 `;
 var IrtLobbyElement = class extends HTMLElement {
   static get observedAttributes() {
@@ -490,6 +530,7 @@ var IrtLobbyElement = class extends HTMLElement {
   /** Set by `attach`; re-read on every render so a reconnect that changes the code is picked up. */
   #room;
   #toastTimer;
+  #escapeListening = false;
   constructor() {
     super();
     this.#root = this.attachShadow({ mode: "open" });
@@ -524,11 +565,61 @@ var IrtLobbyElement = class extends HTMLElement {
     if (value) this.setAttribute("name-entry", "");
     else this.removeAttribute("name-entry");
   }
+  /**
+   * The connected player count. `undefined` (the attribute absent) hides the whole row; any other
+   * value, including `0`, shows it. Mirrors the `players` attribute.
+   */
+  get players() {
+    if (!this.hasAttribute("players")) return void 0;
+    const value = Number(this.getAttribute("players"));
+    return Number.isFinite(value) ? value : void 0;
+  }
+  set players(value) {
+    if (value === void 0) this.removeAttribute("players");
+    else this.setAttribute("players", String(value));
+  }
+  /** The room's capacity, if known. `0` or the attribute absent both mean "unknown". */
+  get maxPlayers() {
+    const value = Number(this.getAttribute("max-players"));
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  }
+  set maxPlayers(value) {
+    this.setAttribute("max-players", String(value));
+  }
+  /** Whether the panel renders inside a fixed full-viewport backdrop. Mirrors `modal`. */
+  get modal() {
+    return this.hasAttribute("modal");
+  }
+  set modal(value) {
+    if (value) this.setAttribute("modal", "");
+    else this.removeAttribute("modal");
+  }
+  /** Whether a modal panel is currently shown. Meaningless outside `modal` mode. */
+  get isOpen() {
+    return this.hasAttribute("open");
+  }
+  /** Shows the modal panel and starts listening for Escape. No-op outside `modal` mode. */
+  open() {
+    if (!this.modal || this.hasAttribute("open")) return;
+    this.setAttribute("open", "");
+  }
+  /** Hides the modal panel and stops listening for Escape. */
+  close() {
+    if (!this.hasAttribute("open")) return;
+    this.removeAttribute("open");
+  }
+  /** Convenience for a single trigger button that both opens and closes the modal. */
+  toggle() {
+    if (this.hasAttribute("open")) this.close();
+    else this.open();
+  }
   // -- lifecycle -------------------------------------------------------------
   connectedCallback() {
     this.render();
+    this.#syncEscapeListener();
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name) {
+    if (name === "open" || name === "modal") this.#syncEscapeListener();
     if (this.#root.childElementCount > 0) this.render();
   }
   /** Unsubscribing here is why `attach` needs no matching `detach` call in app code. */
@@ -536,12 +627,28 @@ var IrtLobbyElement = class extends HTMLElement {
     this.#detach?.();
     this.#detach = void 0;
     if (this.#toastTimer !== void 0) clearTimeout(this.#toastTimer);
+    this.#setEscapeListening(false);
+  }
+  /** Adds or removes the document-level Escape listener to match whether the modal is open. */
+  #syncEscapeListener() {
+    this.#setEscapeListening(this.modal && this.hasAttribute("open") && this.isConnected);
   }
+  #setEscapeListening(on) {
+    if (on === this.#escapeListening) return;
+    this.#escapeListening = on;
+    if (on) this.ownerDocument.addEventListener("keydown", this.#onKeydown);
+    else this.ownerDocument.removeEventListener("keydown", this.#onKeydown);
+  }
+  #onKeydown = (event) => {
+    if (event.key === "Escape") this.close();
+  };
   // -- the room path ---------------------------------------------------------
   /**
    * Drives the element from a live room: copies `id`/`link`/`status` in and follows `status`
-   * afterwards. Attaching twice replaces the previous subscription. Returns the unsubscribe so
-   * a framework can tie it to its own teardown; `disconnectedCallback` calls it regardless.
+   * afterwards. When the room reports `clients` or `maxClients`, seeds and follows the player
+   * count too; a room without them just leaves `players` unset. Attaching twice replaces the
+   * previous subscription. Returns the unsubscribe so a framework can tie it to its own teardown;
+   * `disconnectedCallback` calls it regardless.
    */
   attach(room) {
     this.#detach?.();
@@ -549,13 +656,23 @@ var IrtLobbyElement = class extends HTMLElement {
     this.roomCode = room.id;
     this.link = room.link;
     this.status = room.status;
-    const off = room.on("status", (status) => {
-      this.roomCode = room.id;
-      this.link = room.link;
-      this.status = status;
-    });
+    if (room.maxClients !== void 0) this.maxPlayers = room.maxClients;
+    if (room.clients !== void 0) this.players = countConnected(room.clients);
+    const offs = [];
+    offs.push(
+      room.on("status", (status) => {
+        this.roomCode = room.id;
+        this.link = room.link;
+        this.status = status;
+      })
+    );
+    offs.push(
+      room.on("clients", (clients) => {
+        this.players = countConnected(clients);
+      })
+    );
     const detach = () => {
-      off();
+      for (const off of offs) off();
       if (this.#detach === detach) {
         this.#detach = void 0;
         this.#room = void 0;
@@ -577,17 +694,54 @@ var IrtLobbyElement = class extends HTMLElement {
     const style = doc.createElement("style");
     style.textContent = STYLE;
     this.#root.append(style);
+    const modal = this.modal;
+    let host;
+    if (modal) {
+      const backdrop = doc.createElement("div");
+      backdrop.className = "backdrop";
+      backdrop.setAttribute("part", "backdrop");
+      backdrop.hidden = !this.isOpen;
+      backdrop.addEventListener("click", (event) => {
+        if (event.target === backdrop) this.close();
+      });
+      const panel = doc.createElement("div");
+      panel.className = "panel";
+      panel.setAttribute("part", "panel");
+      const closeButton = doc.createElement("button");
+      closeButton.type = "button";
+      closeButton.className = "close";
+      closeButton.setAttribute("part", "close");
+      closeButton.setAttribute("aria-label", "close");
+      closeButton.textContent = "\xD7";
+      closeButton.addEventListener("click", () => this.close());
+      panel.append(closeButton);
+      backdrop.append(panel);
+      this.#root.append(backdrop);
+      host = panel;
+    } else {
+      host = this.#root;
+    }
     const status = this.status;
     const statusRow = doc.createElement("div");
     statusRow.className = "status";
     statusRow.setAttribute("part", "status");
     const dot = doc.createElement("span");
     dot.className = "dot";
-    dot.style.background = STATUS_COLORS[status] ?? "#9aa1ad";
+    dot.style.background = STATUS_COLORS[status] ?? UNKNOWN_STATUS_COLOR;
     const statusText = doc.createElement("span");
     statusText.textContent = STATUS_LABELS[status] ?? status;
     statusRow.append(dot, statusText);
-    this.#root.append(statusRow);
+    const players = this.players;
+    if (players !== void 0) {
+      const playersSpan = doc.createElement("span");
+      playersSpan.className = "players";
+      playersSpan.setAttribute("part", "players");
+      const max = this.maxPlayers;
+      const noun = max > 0 ? "players" : players === 1 ? "player" : "players";
+      playersSpan.textContent = max > 0 ? `${players}/${max} ${noun}` : `${players} ${noun}`;
+      statusRow.append(playersSpan);
+    }
+    host.append(statusRow);
     const code = doc.createElement("button");
     code.type = "button";
     code.className = "code";
@@ -597,7 +751,7 @@ var IrtLobbyElement = class extends HTMLElement {
     code.addEventListener("click", () => {
       void this.#copy(this.roomCode, "room code copied");
     });
-    this.#root.append(code);
+    host.append(code);
     const link = doc.createElement("button");
     link.type = "button";
     link.className = "link";
@@ -607,16 +761,16 @@ var IrtLobbyElement = class extends HTMLElement {
     link.addEventListener("click", () => {
       void this.#copy(this.link, "link copied");
     });
-    this.#root.append(link);
+    host.append(link);
     const toast = doc.createElement("div");
     toast.className = "toast";
-    this.#root.append(toast);
+    host.append(toast);
     const canvas = doc.createElement("canvas");
     canvas.setAttribute("part", "qr");
-    this.#root.append(canvas);
+    host.append(canvas);
     if (this.link) this.#drawQr(canvas, this.link);
     else canvas.hidden = true;
-    if (this.nameEntry) this.#root.append(this.#nameForm(doc));
+    if (this.nameEntry) host.append(this.#nameForm(doc));
     const badge = doc.createElement("div");
     badge.className = "badge";
     badge.setAttribute("part", "badge");
@@ -626,7 +780,7 @@ var IrtLobbyElement = class extends HTMLElement {
     anchor.rel = "noreferrer";
     anchor.textContent = "multiplayer by irt.io";
     badge.append(anchor);
-    this.#root.append(badge);
+    host.append(badge);
   }
   /** The optional name box. Submitting emits `name` **before** the app joins, which is the point. */
   #nameForm(doc) {
@@ -712,11 +866,338 @@ function defineLobby(tag = LOBBY_TAG) {
   registry.define(tag, IrtLobbyElement);
 }
 
+// src/profile.ts
+var OBSERVED2 = ["rows", "title-text"];
+var REFRESH_MS = 1e3;
+var DEFAULT_ROWS = 8;
+var STYLE2 = `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    line-height: 1.5;
+    color: #c9d1e1;
+    background: rgba(11, 14, 20, 0.86);
+    border: 1px solid #232838;
+    border-radius: 6px;
+    padding: 8px 10px;
+    min-width: 260px;
+  }
+  * { box-sizing: border-box; }
+  h4 { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
+       font-weight: 600; color: #6b7590; }
+  table { border-collapse: collapse; width: 100%; }
+  td { padding: 1px 0; white-space: nowrap; }
+  td.kind { color: #6b7590; padding-right: 8px; }
+  td.key { padding-right: 10px; }
+  td.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 8px; }
+  tr.total td { border-top: 1px solid #232838; padding-top: 3px; color: #7dd3fc; }
+  p.off { margin: 0; color: #6b7590; }
+`;
+function rate(bytesPerSecond) {
+  if (bytesPerSecond >= 1e6) return `${(bytesPerSecond / 1e6).toFixed(1)} MB/s`;
+  if (bytesPerSecond >= 1e3) return `${(bytesPerSecond / 1e3).toFixed(1)} kB/s`;
+  return `${Math.round(bytesPerSecond)} B/s`;
+}
+function labelFor(kind, key) {
+  return kind === "churn" ? `${key} enter/leave (incl. spawns)` : key;
+}
+var IrtProfileElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return OBSERVED2;
+  }
+  #shadow;
+  #room;
+  #timer;
+  #reading;
+  constructor() {
+    super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+  }
+  /** How many rows to show. Mirrors the `rows` attribute. */
+  get rows() {
+    const value = Number(this.getAttribute("rows"));
+    return Number.isInteger(value) && value > 0 ? value : DEFAULT_ROWS;
+  }
+  set rows(value) {
+    this.setAttribute("rows", String(value));
+  }
+  /** The heading above the table. Mirrors the `title-text` attribute. */
+  get titleText() {
+    return this.getAttribute("title-text") ?? "bandwidth";
+  }
+  set titleText(value) {
+    this.setAttribute("title-text", value);
+  }
+  /**
+   * The room to read. Assigning it starts the 1 Hz refresh; assigning `undefined` stops it. A
+   * room joined without `profile: true` has no ledger, and the overlay says so rather than
+   * rendering zeros.
+   */
+  get room() {
+    return this.#room;
+  }
+  set room(value) {
+    this.#room = value;
+    this.#reading = void 0;
+    this.#stop();
+    if (value?.profile) {
+      this.#tick();
+      this.#timer = setInterval(() => this.#tick(), REFRESH_MS);
+    }
+    this.render();
+  }
+  /** Symmetry with `<irt-lobby>` and `<irt-status>`: `attach(room)` returns a detach function. */
+  attach(room) {
+    this.room = room;
+    return () => {
+      if (this.#room === room) this.room = void 0;
+    };
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.#shadow.childElementCount > 0) this.render();
+  }
+  disconnectedCallback() {
+    this.#stop();
+  }
+  /** Reads the ledger once. Exposed so a test drives it without waiting for the interval. */
+  refresh() {
+    this.#tick();
+  }
+  #tick() {
+    const profile = this.#room?.profile;
+    if (!profile) return;
+    this.#reading = profile.perSecond();
+    this.render();
+  }
+  #stop() {
+    if (this.#timer !== void 0) {
+      clearInterval(this.#timer);
+      this.#timer = void 0;
+    }
+  }
+  render() {
+    const doc = this.ownerDocument;
+    this.#shadow.textContent = "";
+    const style = doc.createElement("style");
+    style.textContent = STYLE2;
+    this.#shadow.append(style);
+    const heading = doc.createElement("h4");
+    heading.textContent = this.titleText;
+    this.#shadow.append(heading);
+    if (!this.#room?.profile) {
+      const off = doc.createElement("p");
+      off.className = "off";
+      off.setAttribute("part", "off");
+      off.textContent = "join with { profile: true } to see this";
+      this.#shadow.append(off);
+      return;
+    }
+    const reading = this.#reading;
+    const table = doc.createElement("table");
+    table.setAttribute("part", "table");
+    const shown = [...reading?.rows ?? []].filter((r) => r.out !== 0 || r.in !== 0).sort((a, b) => b.out + b.in - (a.out + a.in)).slice(0, this.rows);
+    for (const row of shown) {
+      const tr = doc.createElement("tr");
+      const kind = doc.createElement("td");
+      kind.className = "kind";
+      kind.textContent = row.kind;
+      const key = doc.createElement("td");
+      key.className = "key";
+      key.textContent = labelFor(row.kind, row.key);
+      const inCell = doc.createElement("td");
+      inCell.className = "num";
+      inCell.textContent = rate(row.in);
+      const outCell = doc.createElement("td");
+      outCell.className = "num";
+      outCell.textContent = rate(row.out);
+      tr.append(kind, key, inCell, outCell);
+      table.append(tr);
+    }
+    const total = doc.createElement("tr");
+    total.className = "total";
+    total.setAttribute("part", "total");
+    const label = doc.createElement("td");
+    label.className = "kind";
+    label.textContent = "total";
+    const spacer = doc.createElement("td");
+    const totalIn = doc.createElement("td");
+    totalIn.className = "num";
+    totalIn.textContent = `in ${rate(reading?.bytesIn ?? 0)}`;
+    const totalOut = doc.createElement("td");
+    totalOut.className = "num";
+    totalOut.textContent = `out ${rate(reading?.bytesOut ?? 0)}`;
+    total.append(label, spacer, totalIn, totalOut);
+    table.append(total);
+    this.#shadow.append(table);
+  }
+};
+var PROFILE_TAG = "irt-profile";
+function defineProfile(tag = PROFILE_TAG) {
+  const registry = globalThis.customElements;
+  if (!registry || registry.get(tag)) return;
+  registry.define(tag, IrtProfileElement);
+}
+
+// src/status.ts
+var OBSERVED3 = ["status", "ping", "show-ping"];
+var PING_POLL_MS = 2e3;
+var STYLE3 = `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+    font-size: 12px;
+    color: #9aa1ad;
+  }
+  * { box-sizing: border-box; }
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa1ad; flex: none; }
+  .ping { font-variant-numeric: tabular-nums; }
+`;
+var IrtStatusElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return OBSERVED3;
+  }
+  #root;
+  #detach;
+  #pingTimer;
+  constructor() {
+    super();
+    this.#root = this.attachShadow({ mode: "open" });
+  }
+  /** One of `@irtio/client`'s statuses. Anything else renders as a grey dot with that text. */
+  get status() {
+    return this.getAttribute("status") ?? "connecting";
+  }
+  set status(value) {
+    this.setAttribute("status", value);
+  }
+  /** The latest round-trip time in milliseconds, if known. */
+  get ping() {
+    if (!this.hasAttribute("ping")) return void 0;
+    const value = Number(this.getAttribute("ping"));
+    return Number.isFinite(value) ? value : void 0;
+  }
+  set ping(value) {
+    if (value === void 0) this.removeAttribute("ping");
+    else this.setAttribute("ping", String(value));
+  }
+  /** Whether the ping is rendered next to the dot. Mirrors the `show-ping` boolean attribute. */
+  get showPing() {
+    return this.hasAttribute("show-ping");
+  }
+  set showPing(value) {
+    if (value) this.setAttribute("show-ping", "");
+    else this.removeAttribute("show-ping");
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.#root.childElementCount > 0) this.render();
+  }
+  disconnectedCallback() {
+    this.#detach?.();
+    this.#detach = void 0;
+    this.#stopPolling();
+  }
+  /**
+   * Drives the element from a live room: seeds `status` and `ping` and follows `status`
+   * afterwards. For the ping, it follows the room's `'rtt'` event when the room emits one;
+   * otherwise it polls `room.rtt` every two seconds, since not every room reports RTT as an
+   * event. Attaching twice replaces the previous subscription and polling loop.
+   */
+  attach(room) {
+    this.#detach?.();
+    this.#stopPolling();
+    this.status = room.status;
+    if (room.rtt !== void 0) this.ping = room.rtt;
+    const offs = [];
+    offs.push(
+      room.on("status", (status) => {
+        this.status = status;
+      })
+    );
+    let usesRttEvent = false;
+    try {
+      offs.push(
+        room.on("rtt", (rtt) => {
+          usesRttEvent = true;
+          this.ping = rtt;
+        })
+      );
+    } catch {
+    }
+    this.#pingTimer = setInterval(() => {
+      if (usesRttEvent) return;
+      if (room.rtt !== void 0) this.ping = room.rtt;
+    }, PING_POLL_MS);
+    const detach = () => {
+      for (const off of offs) off();
+      this.#stopPolling();
+      if (this.#detach === detach) this.#detach = void 0;
+    };
+    this.#detach = detach;
+    this.render();
+    return detach;
+  }
+  #stopPolling() {
+    if (this.#pingTimer !== void 0) {
+      clearInterval(this.#pingTimer);
+      this.#pingTimer = void 0;
+    }
+  }
+  render() {
+    const doc = this.ownerDocument;
+    this.#root.textContent = "";
+    const style = doc.createElement("style");
+    style.textContent = STYLE3;
+    this.#root.append(style);
+    const status = this.status;
+    const label = STATUS_LABELS[status] ?? status;
+    this.title = label;
+    this.setAttribute("aria-label", label);
+    const dot = doc.createElement("span");
+    dot.className = "dot";
+    dot.setAttribute("part", "dot");
+    dot.style.background = STATUS_COLORS[status] ?? UNKNOWN_STATUS_COLOR;
+    this.#root.append(dot);
+    if (this.showPing) {
+      const ping = this.ping;
+      const pingSpan = doc.createElement("span");
+      pingSpan.className = "ping";
+      pingSpan.setAttribute("part", "ping");
+      pingSpan.textContent = ping === void 0 || ping <= 0 ? "" : `${Math.round(ping)}ms`;
+      this.#root.append(pingSpan);
+    }
+  }
+};
+var STATUS_TAG = "irt-status";
+function defineStatus(tag = STATUS_TAG) {
+  const registry = globalThis.customElements;
+  if (!registry || registry.get(tag)) return;
+  registry.define(tag, IrtStatusElement);
+}
+
 // src/index.ts
 defineLobby();
+defineStatus();
+defineProfile();
 export {
   IrtLobbyElement,
+  IrtProfileElement,
+  IrtStatusElement,
   LOBBY_TAG,
+  PROFILE_TAG,
+  STATUS_TAG,
   defineLobby,
+  defineProfile,
+  defineStatus,
   encodeQr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irtio/lobby",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "<irt-lobby>: room code, share link, QR, connection status, name entry",
   "license": "MIT",
   "publishConfig": {