@irtio/lobby 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 irtio contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * `<irt-lobby>` — the whole share story in one tag: room code, share link, QR,
+ * connection status, 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.
+ */
+/**
+ * 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.
+ */
+interface AttachableRoom {
+    readonly id: string;
+    readonly link: string;
+    readonly status: string;
+    on(event: 'status', cb: (status: string) => void): () => void;
+}
+/**
+ * The custom element class. Registered as `irt-lobby` by `defineLobby()`, which this package
+ * calls for you on import when a `customElements` registry exists.
+ */
+declare class IrtLobbyElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): readonly string[];
+    constructor();
+    /** The room code shown large. Mirrors the `room-code` attribute. */
+    get roomCode(): string;
+    set roomCode(value: string);
+    /** The shareable URL, shown under the code and encoded into the QR. */
+    get link(): string;
+    set link(value: string);
+    /** One of `@irtio/client`'s statuses. Anything else renders as a grey dot with that text. */
+    get status(): string;
+    set status(value: string);
+    /** Whether the name box is shown. Mirrors the `name-entry` boolean attribute. */
+    get nameEntry(): boolean;
+    set nameEntry(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(): 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.
+     */
+    attach(room: AttachableRoom): () => void;
+    /** The room passed to the last `attach`, if it is still attached. */
+    get room(): AttachableRoom | undefined;
+    /** Rebuilds the shadow tree. Cheap enough to do wholesale: this is a handful of nodes. */
+    render(): void;
+}
+/** The tag name the element registers under. */
+declare const LOBBY_TAG = "irt-lobby";
+/**
+ * Registers `<irt-lobby>`. 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 defineLobby(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.
+ *
+ * It exists because `<irt-lobby>` must be zero-dependency and buildless — a consumer drops the
+ * package in and gets a scannable share link with no CDN, no wasm and no CSS file. Only the
+ * encoder half of the spec is here: the lobby draws codes, it never reads them.
+ *
+ * The structure follows ISO/IEC 18004 directly (Nayuki's reference decomposition): encode the
+ * payload into a bit string, split it into blocks, append Reed–Solomon parity, interleave, draw
+ * the function patterns, zig-zag the codewords in, then pick the mask with the lowest penalty.
+ */
+/** The finished code: `modules[y][x]` is true where the module is dark. */
+interface QrMatrix {
+    /** Side length in modules, always `4 * version + 17`. */
+    readonly size: number;
+    readonly version: number;
+    /** The mask pattern (0–7) the encoder chose. */
+    readonly mask: number;
+    readonly modules: readonly (readonly boolean[])[];
+}
+/**
+ * Encodes `text` as a level-L byte-mode QR code, picking the smallest version that fits and the
+ * mask with the lowest penalty. Throws only when the text exceeds version 40.
+ */
+declare function encodeQr(text: string): QrMatrix;
+
+export { type AttachableRoom, IrtLobbyElement, LOBBY_TAG, type QrMatrix, defineLobby, encodeQr };

package/dist/index.js

@@ -0,0 +1,722 @@
+// src/qr.ts
+var ECC_PER_BLOCK = [
+  7,
+  10,
+  15,
+  20,
+  26,
+  18,
+  20,
+  24,
+  30,
+  18,
+  20,
+  24,
+  26,
+  30,
+  22,
+  24,
+  28,
+  30,
+  28,
+  28,
+  28,
+  28,
+  30,
+  30,
+  26,
+  28,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30,
+  30
+];
+var BLOCKS = [
+  1,
+  1,
+  1,
+  1,
+  1,
+  2,
+  2,
+  2,
+  2,
+  4,
+  4,
+  4,
+  4,
+  4,
+  6,
+  6,
+  6,
+  6,
+  7,
+  8,
+  8,
+  9,
+  9,
+  10,
+  12,
+  12,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  19,
+  20,
+  21,
+  22,
+  24,
+  25
+];
+var PENALTY_N1 = 3;
+var PENALTY_N2 = 3;
+var PENALTY_N3 = 40;
+var PENALTY_N4 = 10;
+function rawDataModules(version) {
+  let result = (16 * version + 128) * version + 64;
+  if (version >= 2) {
+    const numAlign = Math.floor(version / 7) + 2;
+    result -= (25 * numAlign - 10) * numAlign - 55;
+    if (version >= 7) result -= 36;
+  }
+  return result;
+}
+function dataCodewords(version) {
+  return Math.floor(rawDataModules(version) / 8) - ECC_PER_BLOCK[version - 1] * BLOCKS[version - 1];
+}
+function alignmentPositions(version) {
+  if (version === 1) return [];
+  const size = version * 4 + 17;
+  const numAlign = Math.floor(version / 7) + 2;
+  const step = version === 32 ? 26 : Math.ceil((version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+  const result = [6];
+  for (let pos = size - 7; result.length < numAlign; pos -= step) result.splice(1, 0, pos);
+  return result;
+}
+function gfMul(x, y) {
+  let z = 0;
+  for (let i = 7; i >= 0; i--) {
+    z = z << 1 ^ (z >>> 7) * 285;
+    z ^= (y >>> i & 1) * x;
+  }
+  return z & 255;
+}
+function rsDivisor(degree) {
+  const result = new Uint8Array(degree);
+  result[degree - 1] = 1;
+  let root = 1;
+  for (let i = 0; i < degree; i++) {
+    for (let j = 0; j < degree; j++) {
+      result[j] = gfMul(result[j], root);
+      if (j + 1 < degree) result[j] = result[j] ^ result[j + 1];
+    }
+    root = gfMul(root, 2);
+  }
+  return result;
+}
+function rsRemainder(data, divisor) {
+  const result = new Uint8Array(divisor.length);
+  for (const b of data) {
+    const factor = b ^ result[0];
+    result.copyWithin(0, 1);
+    result[result.length - 1] = 0;
+    for (let i = 0; i < result.length; i++) result[i] = result[i] ^ gfMul(divisor[i], factor);
+  }
+  return result;
+}
+function toBytes(text) {
+  return new TextEncoder().encode(text);
+}
+function pickVersion(byteCount) {
+  for (let version = 1; version <= 40; version++) {
+    const countBits = version < 10 ? 8 : 16;
+    if (4 + countBits + byteCount * 8 <= dataCodewords(version) * 8) return version;
+  }
+  throw new RangeError(`irt-lobby: ${byteCount} bytes do not fit in a QR code`);
+}
+function buildCodewords(bytes, version) {
+  const bits = [];
+  const push = (value, width) => {
+    for (let i = width - 1; i >= 0; i--) bits.push(value >>> i & 1);
+  };
+  push(4, 4);
+  push(bytes.length, version < 10 ? 8 : 16);
+  for (const b of bytes) push(b, 8);
+  const capacityBits = dataCodewords(version) * 8;
+  push(0, Math.min(4, capacityBits - bits.length));
+  push(0, (8 - bits.length % 8) % 8);
+  const codewords = [];
+  for (let i = 0; i < bits.length; i += 8) {
+    let byte = 0;
+    for (let j = 0; j < 8; j++) byte = byte << 1 | bits[i + j];
+    codewords.push(byte);
+  }
+  for (let pad = 236; codewords.length < capacityBits / 8; pad ^= 236 ^ 17) {
+    codewords.push(pad);
+  }
+  return codewords;
+}
+function addEccAndInterleave(data, version) {
+  const numBlocks = BLOCKS[version - 1];
+  const eccLen = ECC_PER_BLOCK[version - 1];
+  const rawCodewords = Math.floor(rawDataModules(version) / 8);
+  const numShort = numBlocks - rawCodewords % numBlocks;
+  const shortLen = Math.floor(rawCodewords / numBlocks);
+  const divisor = rsDivisor(eccLen);
+  const blocks = [];
+  for (let i = 0, k = 0; i < numBlocks; i++) {
+    const len = shortLen - eccLen + (i < numShort ? 0 : 1);
+    const dat = data.slice(k, k + len);
+    k += len;
+    const block = dat.slice();
+    if (i < numShort) block.push(0);
+    blocks.push(block.concat(Array.from(rsRemainder(dat, divisor))));
+  }
+  const result = [];
+  for (let i = 0; i < blocks[0].length; i++) {
+    for (let j = 0; j < blocks.length; j++) {
+      if (i !== shortLen - eccLen || j >= numShort) result.push(blocks[j][i]);
+    }
+  }
+  return result;
+}
+var Grid = class {
+  constructor(version) {
+    this.version = version;
+    this.size = version * 4 + 17;
+    this.modules = Array.from(
+      { length: this.size },
+      () => new Array(this.size).fill(false)
+    );
+    this.reserved = Array.from(
+      { length: this.size },
+      () => new Array(this.size).fill(false)
+    );
+  }
+  version;
+  size;
+  modules;
+  reserved;
+  /** Function modules are both set and marked, so the data pass and the mask skip them. */
+  setFunction(x, y, dark) {
+    this.modules[y][x] = dark;
+    this.reserved[y][x] = true;
+  }
+  drawFunctionPatterns() {
+    for (let i = 0; i < this.size; i++) {
+      this.setFunction(6, i, i % 2 === 0);
+      this.setFunction(i, 6, i % 2 === 0);
+    }
+    this.drawFinder(3, 3);
+    this.drawFinder(this.size - 4, 3);
+    this.drawFinder(3, this.size - 4);
+    const align = alignmentPositions(this.version);
+    for (let i = 0; i < align.length; i++) {
+      for (let j = 0; j < align.length; j++) {
+        const corner = i === 0 && j === 0 || i === 0 && j === align.length - 1 || i === align.length - 1 && j === 0;
+        if (!corner) this.drawAlignment(align[i], align[j]);
+      }
+    }
+    this.drawFormatBits(0);
+    this.drawVersionBits();
+  }
+  drawFinder(x, y) {
+    for (let dy = -4; dy <= 4; dy++) {
+      for (let dx = -4; dx <= 4; dx++) {
+        const dist = Math.max(Math.abs(dx), Math.abs(dy));
+        const xx = x + dx;
+        const yy = y + dy;
+        if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size) {
+          this.setFunction(xx, yy, dist !== 2 && dist !== 4);
+        }
+      }
+    }
+  }
+  drawAlignment(x, y) {
+    for (let dy = -2; dy <= 2; dy++) {
+      for (let dx = -2; dx <= 2; dx++) {
+        this.setFunction(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+      }
+    }
+  }
+  /** The 15-bit BCH format word (level L = 0b01), written twice as the spec requires. */
+  drawFormatBits(mask) {
+    const data = 1 << 3 | mask;
+    let rem = data;
+    for (let i = 0; i < 10; i++) rem = rem << 1 ^ (rem >>> 9) * 1335;
+    const bits = (data << 10 | rem) ^ 21522;
+    const bit = (i) => (bits >>> i & 1) !== 0;
+    for (let i = 0; i <= 5; i++) this.setFunction(8, i, bit(i));
+    this.setFunction(8, 7, bit(6));
+    this.setFunction(8, 8, bit(7));
+    this.setFunction(7, 8, bit(8));
+    for (let i = 9; i < 15; i++) this.setFunction(14 - i, 8, bit(i));
+    for (let i = 0; i < 8; i++) this.setFunction(this.size - 1 - i, 8, bit(i));
+    for (let i = 8; i < 15; i++) this.setFunction(8, this.size - 15 + i, bit(i));
+    this.setFunction(8, this.size - 8, true);
+  }
+  drawVersionBits() {
+    if (this.version < 7) return;
+    let rem = this.version;
+    for (let i = 0; i < 12; i++) rem = rem << 1 ^ (rem >>> 11) * 7973;
+    const bits = this.version << 12 | rem;
+    for (let i = 0; i < 18; i++) {
+      const dark = (bits >>> i & 1) !== 0;
+      const a = this.size - 11 + i % 3;
+      const b = Math.floor(i / 3);
+      this.setFunction(a, b, dark);
+      this.setFunction(b, a, dark);
+    }
+  }
+  /** Two-module-wide columns, right to left, alternating upward and downward. */
+  drawCodewords(data) {
+    let i = 0;
+    for (let right = this.size - 1; right >= 1; right -= 2) {
+      if (right === 6) right = 5;
+      for (let vert = 0; vert < this.size; vert++) {
+        for (let j = 0; j < 2; j++) {
+          const x = right - j;
+          const upward = (right + 1 & 2) === 0;
+          const y = upward ? this.size - 1 - vert : vert;
+          if (!this.reserved[y][x] && i < data.length * 8) {
+            this.modules[y][x] = (data[i >>> 3] >>> 7 - (i & 7) & 1) !== 0;
+            i++;
+          }
+        }
+      }
+    }
+  }
+  /** XORs the mask over the data modules; applying it twice restores the grid. */
+  applyMask(mask) {
+    for (let y = 0; y < this.size; y++) {
+      for (let x = 0; x < this.size; x++) {
+        if (this.reserved[y][x]) continue;
+        let invert;
+        switch (mask) {
+          case 0:
+            invert = (x + y) % 2 === 0;
+            break;
+          case 1:
+            invert = y % 2 === 0;
+            break;
+          case 2:
+            invert = x % 3 === 0;
+            break;
+          case 3:
+            invert = (x + y) % 3 === 0;
+            break;
+          case 4:
+            invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+            break;
+          case 5:
+            invert = x * y % 2 + x * y % 3 === 0;
+            break;
+          case 6:
+            invert = (x * y % 2 + x * y % 3) % 2 === 0;
+            break;
+          default:
+            invert = ((x + y) % 2 + x * y % 3) % 2 === 0;
+            break;
+        }
+        if (invert) this.modules[y][x] = !this.modules[y][x];
+      }
+    }
+  }
+  /** The spec's four penalty rules; the lowest-scoring mask is the one that ships. */
+  penalty() {
+    let result = 0;
+    for (let y = 0; y < this.size; y++) {
+      result += this.linePenalty((x) => this.modules[y][x]);
+    }
+    for (let x = 0; x < this.size; x++) {
+      result += this.linePenalty((y) => this.modules[y][x]);
+    }
+    for (let y = 0; y < this.size - 1; y++) {
+      for (let x = 0; x < this.size - 1; x++) {
+        const c = this.modules[y][x];
+        if (c === this.modules[y][x + 1] && c === this.modules[y + 1][x] && c === this.modules[y + 1][x + 1]) {
+          result += PENALTY_N2;
+        }
+      }
+    }
+    let dark = 0;
+    for (const row of this.modules) for (const m of row) if (m) dark++;
+    const total = this.size * this.size;
+    result += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * PENALTY_N4;
+    return result;
+  }
+  /** Rules 1 and 3 for one row or column: long runs, plus 1:1:3:1:1 finder look-alikes. */
+  linePenalty(at) {
+    let result = 0;
+    let runColor = false;
+    let runLength = 0;
+    const history = [0, 0, 0, 0, 0, 0, 0];
+    const addHistory = (length) => {
+      if (history[0] === 0) length += this.size;
+      history.pop();
+      history.unshift(length);
+    };
+    const countPatterns = () => {
+      const n = history[1];
+      const core = n > 0 && history[2] === n && history[3] === n * 3 && history[4] === n && history[5] === n;
+      return (core && history[0] >= n * 4 && history[6] >= n ? 1 : 0) + (core && history[6] >= n * 4 && history[0] >= n ? 1 : 0);
+    };
+    for (let i = 0; i < this.size; i++) {
+      if (at(i) === runColor) {
+        runLength++;
+        if (runLength === 5) result += PENALTY_N1;
+        else if (runLength > 5) result++;
+      } else {
+        addHistory(runLength);
+        if (!runColor) result += countPatterns() * PENALTY_N3;
+        runColor = at(i);
+        runLength = 1;
+      }
+    }
+    if (runColor) {
+      addHistory(runLength);
+      runLength = 0;
+    }
+    addHistory(runLength + this.size);
+    return result + countPatterns() * PENALTY_N3;
+  }
+};
+function encodeQr(text) {
+  const bytes = toBytes(text);
+  const version = pickVersion(bytes.length);
+  const codewords = addEccAndInterleave(buildCodewords(bytes, version), version);
+  const grid = new Grid(version);
+  grid.drawFunctionPatterns();
+  grid.drawCodewords(codewords);
+  let bestMask = 0;
+  let bestPenalty = Number.POSITIVE_INFINITY;
+  for (let mask = 0; mask < 8; mask++) {
+    grid.applyMask(mask);
+    grid.drawFormatBits(mask);
+    const penalty = grid.penalty();
+    if (penalty < bestPenalty) {
+      bestPenalty = penalty;
+      bestMask = mask;
+    }
+    grid.applyMask(mask);
+  }
+  grid.applyMask(bestMask);
+  grid.drawFormatBits(bestMask);
+  return { size: grid.size, version, mask: bestMask, modules: grid.modules };
+}
+
+// src/element.ts
+var STATUS_LABELS = {
+  connecting: "connecting",
+  starting: "waking the server",
+  connected: "connected",
+  reconnecting: "reconnecting",
+  closed: "disconnected"
+};
+var STATUS_COLORS = {
+  connecting: "#e0a33a",
+  starting: "#e0a33a",
+  connected: "#3ac177",
+  reconnecting: "#e0a33a",
+  closed: "#d1495b"
+};
+var OBSERVED = ["room-code", "link", "status", "name-entry"];
+var STYLE = `
+  :host {
+    display: block;
+    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;
+  }
+  :host([hidden]) { display: none; }
+  * { box-sizing: border-box; }
+  .status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa1ad; }
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa1ad; flex: none; }
+  .code {
+    display: block; width: 100%; margin: 10px 0 4px;
+    font: 700 40px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    letter-spacing: 0.12em; text-align: center;
+    color: inherit; background: none; border: 0; padding: 8px 0; cursor: pointer;
+    border-radius: 8px;
+  }
+  .code:hover { background: #1e2129; }
+  .link {
+    display: block; width: 100%;
+    font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: #9aa1ad; background: none; border: 0; padding: 4px; cursor: pointer;
+    overflow-wrap: anywhere; text-align: center; border-radius: 6px;
+  }
+  .link:hover { background: #1e2129; color: #f2f3f5; }
+  canvas { display: block; margin: 12px auto 0; image-rendering: pixelated; border-radius: 4px; }
+  form { display: flex; gap: 6px; margin-top: 12px; }
+  input {
+    flex: 1 1 auto; min-width: 0; padding: 7px 9px; border-radius: 7px;
+    border: 1px solid #2a2e37; background: #101216; color: inherit; font: inherit; font-size: 13px;
+  }
+  button[type='submit'] {
+    padding: 7px 12px; border-radius: 7px; border: 0; cursor: pointer;
+    background: #f2f3f5; color: #16181d; font: inherit; font-size: 13px; font-weight: 600;
+  }
+  .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; }
+`;
+var IrtLobbyElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return OBSERVED;
+  }
+  #root;
+  #detach;
+  /** Set by `attach`; re-read on every render so a reconnect that changes the code is picked up. */
+  #room;
+  #toastTimer;
+  constructor() {
+    super();
+    this.#root = this.attachShadow({ mode: "open" });
+  }
+  // -- attribute-driven properties (the framework path) ----------------------
+  /** The room code shown large. Mirrors the `room-code` attribute. */
+  get roomCode() {
+    return this.getAttribute("room-code") ?? "";
+  }
+  set roomCode(value) {
+    this.setAttribute("room-code", value);
+  }
+  /** The shareable URL, shown under the code and encoded into the QR. */
+  get link() {
+    return this.getAttribute("link") ?? "";
+  }
+  set link(value) {
+    this.setAttribute("link", value);
+  }
+  /** 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);
+  }
+  /** Whether the name box is shown. Mirrors the `name-entry` boolean attribute. */
+  get nameEntry() {
+    return this.hasAttribute("name-entry");
+  }
+  set nameEntry(value) {
+    if (value) this.setAttribute("name-entry", "");
+    else this.removeAttribute("name-entry");
+  }
+  // -- lifecycle -------------------------------------------------------------
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.#root.childElementCount > 0) this.render();
+  }
+  /** Unsubscribing here is why `attach` needs no matching `detach` call in app code. */
+  disconnectedCallback() {
+    this.#detach?.();
+    this.#detach = void 0;
+    if (this.#toastTimer !== void 0) clearTimeout(this.#toastTimer);
+  }
+  // -- 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.
+   */
+  attach(room) {
+    this.#detach?.();
+    this.#room = room;
+    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;
+    });
+    const detach = () => {
+      off();
+      if (this.#detach === detach) {
+        this.#detach = void 0;
+        this.#room = void 0;
+      }
+    };
+    this.#detach = detach;
+    this.render();
+    return detach;
+  }
+  /** The room passed to the last `attach`, if it is still attached. */
+  get room() {
+    return this.#room;
+  }
+  // -- rendering -------------------------------------------------------------
+  /** Rebuilds the shadow tree. Cheap enough to do wholesale: this is a handful of nodes. */
+  render() {
+    const doc = this.ownerDocument;
+    this.#root.textContent = "";
+    const style = doc.createElement("style");
+    style.textContent = STYLE;
+    this.#root.append(style);
+    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";
+    const statusText = doc.createElement("span");
+    statusText.textContent = STATUS_LABELS[status] ?? status;
+    statusRow.append(dot, statusText);
+    this.#root.append(statusRow);
+    const code = doc.createElement("button");
+    code.type = "button";
+    code.className = "code";
+    code.setAttribute("part", "code");
+    code.textContent = this.roomCode || "\xB7\xB7\xB7\xB7";
+    code.title = "copy the room code";
+    code.addEventListener("click", () => {
+      void this.#copy(this.roomCode, "room code copied");
+    });
+    this.#root.append(code);
+    const link = doc.createElement("button");
+    link.type = "button";
+    link.className = "link";
+    link.setAttribute("part", "link");
+    link.textContent = this.link || "waiting for a room\u2026";
+    link.title = "copy the share link";
+    link.addEventListener("click", () => {
+      void this.#copy(this.link, "link copied");
+    });
+    this.#root.append(link);
+    const toast = doc.createElement("div");
+    toast.className = "toast";
+    this.#root.append(toast);
+    const canvas = doc.createElement("canvas");
+    canvas.setAttribute("part", "qr");
+    this.#root.append(canvas);
+    if (this.link) this.#drawQr(canvas, this.link);
+    else canvas.hidden = true;
+    if (this.nameEntry) this.#root.append(this.#nameForm(doc));
+    const badge = doc.createElement("div");
+    badge.className = "badge";
+    badge.setAttribute("part", "badge");
+    const anchor = doc.createElement("a");
+    anchor.href = "https://irt.io";
+    anchor.target = "_blank";
+    anchor.rel = "noreferrer";
+    anchor.textContent = "multiplayer by irt.io";
+    badge.append(anchor);
+    this.#root.append(badge);
+  }
+  /** The optional name box. Submitting emits `name` **before** the app joins, which is the point. */
+  #nameForm(doc) {
+    const form = doc.createElement("form");
+    const input = doc.createElement("input");
+    input.type = "text";
+    input.name = "name";
+    input.placeholder = "your name";
+    input.maxLength = 24;
+    const submit = doc.createElement("button");
+    submit.type = "submit";
+    submit.textContent = "join";
+    form.append(input, submit);
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      const name = input.value.trim();
+      if (name === "") return;
+      this.dispatchEvent(
+        new CustomEvent("name", { detail: { name }, bubbles: true, composed: true })
+      );
+    });
+    return form;
+  }
+  /** `navigator.clipboard` is absent on http:// origins and in jsdom; failing is not an error. */
+  async #copy(text, message) {
+    if (text === "") return;
+    const clipboard = globalThis.navigator?.clipboard;
+    const writeText = clipboard?.writeText;
+    if (typeof writeText !== "function") return;
+    try {
+      await writeText.call(clipboard, text);
+      this.#toast(message);
+    } catch {
+    }
+  }
+  #toast(message) {
+    const toast = this.#root.querySelector(".toast");
+    if (!toast) return;
+    toast.textContent = message;
+    if (this.#toastTimer !== void 0) clearTimeout(this.#toastTimer);
+    this.#toastTimer = setTimeout(() => {
+      toast.textContent = "";
+    }, 1500);
+  }
+  /**
+   * Draws the QR at whole-module scale so it stays crisp. jsdom (and any canvas-less environment)
+   * returns no 2D context; the element must still render everything else, so this bails quietly.
+   */
+  #drawQr(canvas, text) {
+    let qr;
+    try {
+      qr = encodeQr(text);
+    } catch {
+      canvas.hidden = true;
+      return;
+    }
+    const quiet = 2;
+    const scale = 4;
+    const side = (qr.size + quiet * 2) * scale;
+    canvas.width = side;
+    canvas.height = side;
+    canvas.style.width = `${side / 2}px`;
+    canvas.style.height = `${side / 2}px`;
+    canvas.setAttribute("role", "img");
+    canvas.setAttribute("aria-label", `QR code for ${text}`);
+    const ctx = canvas.getContext?.("2d");
+    if (!ctx) return;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, side, side);
+    ctx.fillStyle = "#000000";
+    for (let y = 0; y < qr.size; y++) {
+      const row = qr.modules[y];
+      for (let x = 0; x < qr.size; x++) {
+        if (row[x]) ctx.fillRect((x + quiet) * scale, (y + quiet) * scale, scale, scale);
+      }
+    }
+  }
+};
+var LOBBY_TAG = "irt-lobby";
+function defineLobby(tag = LOBBY_TAG) {
+  const registry = globalThis.customElements;
+  if (!registry || registry.get(tag)) return;
+  registry.define(tag, IrtLobbyElement);
+}
+
+// src/index.ts
+defineLobby();
+export {
+  IrtLobbyElement,
+  LOBBY_TAG,
+  defineLobby,
+  encodeQr
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@irtio/lobby",
+  "version": "0.1.0",
+  "description": "<irt-lobby>: room code, share link, QR, connection status, name entry",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run"
+  }
+}