room-kit 1.0.0

package/example/public/app.ts

@@ -0,0 +1,298 @@
+import { io } from "socket.io-client";
+
+import { createRoomClient, type JoinedRoom } from "../../src/index";
+import { chatRoomType, type ChatMessage } from "../common";
+
+const socket = io();
+const chatClient = createRoomClient(socket, chatRoomType);
+
+const joinPanel = document.getElementById("join-panel") as HTMLElement;
+const workspace = document.getElementById("workspace") as HTMLElement;
+const joinForm = document.getElementById("join-form") as HTMLFormElement;
+const messageForm = document.getElementById("message-form") as HTMLFormElement;
+const leaveButton = document.getElementById("leave-button") as HTMLButtonElement;
+const presencePrevButton = document.getElementById("presence-prev") as HTMLButtonElement;
+const presenceNextButton = document.getElementById("presence-next") as HTMLButtonElement;
+const status = document.getElementById("status") as HTMLParagraphElement;
+const roomTitle = document.getElementById("room-title") as HTMLHeadingElement;
+const roomSubtitle = document.getElementById("room-subtitle") as HTMLParagraphElement;
+const messages = document.getElementById("messages") as HTMLElement;
+const presenceList = document.getElementById("presence-list") as HTMLUListElement;
+const presenceCount = document.getElementById("presence-count") as HTMLSpanElement;
+const presencePage = document.getElementById("presence-page") as HTMLParagraphElement;
+const nameInput = document.getElementById("name-input") as HTMLInputElement;
+const roomInput = document.getElementById("room-input") as HTMLInputElement;
+const keyInput = document.getElementById("key-input") as HTMLInputElement;
+const messageInput = document.getElementById("message-input") as HTMLInputElement;
+
+let joinedRoom: JoinedRoom<typeof chatRoomType> | null = null;
+let stopMessageListener: (() => void) | null = null;
+let stopSystemListener: (() => void) | null = null;
+let stopPresenceListener: (() => void) | null = null;
+let presenceOffset = 0;
+const presencePageSize = 4;
+
+function setStatus(message: string): void {
+  status.textContent = message;
+}
+
+function setWorkspaceVisible(visible: boolean): void {
+  workspace.classList.toggle("hidden", !visible);
+  joinPanel.classList.toggle("hidden", visible);
+}
+
+function clearMessages(): void {
+  messages.innerHTML = "";
+}
+
+function renderMessage(message: ChatMessage): void {
+  const item = document.createElement("article");
+  item.className = "message";
+  item.innerHTML = `
+    <div class="message-header">
+      <span class="message-name">${escapeHtml(message.name)}</span>
+      <span class="message-time">${formatTime(message.sentAt)}</span>
+    </div>
+    <div class="message-text">${escapeHtml(message.text)}</div>
+  `;
+  messages.appendChild(item);
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function renderSystemNotice(text: string, sentAt: string): void {
+  const item = document.createElement("article");
+  item.className = "message";
+  item.innerHTML = `
+    <div class="message-header">
+      <span class="message-name">System</span>
+      <span class="message-time">${formatTime(sentAt)}</span>
+    </div>
+    <div class="message-text">${escapeHtml(text)}</div>
+  `;
+  messages.appendChild(item);
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function renderHistory(history: ChatMessage[]): void {
+  clearMessages();
+  for (const message of history) {
+    renderMessage(message);
+  }
+}
+
+function renderPresence(): void {
+  if (!joinedRoom) {
+    presenceCount.textContent = "0 online";
+    presencePage.textContent = "Showing 0 members.";
+    presenceList.innerHTML = "";
+    return;
+  }
+
+  const presence = joinedRoom.presence.current;
+  presenceCount.textContent = `${presence.count} online`;
+  presencePage.textContent = `Showing ${Math.min(presenceOffset + 1, presence.count)}-${Math.min(
+    presenceOffset + presence.members.length,
+    presence.count,
+  )} of ${presence.count} members.`;
+  presenceList.innerHTML = "";
+
+  if (presence.members.length === 0) {
+    const empty = document.createElement("li");
+    empty.className = "presence-empty";
+    empty.textContent = "Nobody is here yet.";
+    presenceList.appendChild(empty);
+    return;
+  }
+
+  for (const entry of presence.members) {
+    const item = document.createElement("li");
+    item.className = "presence-item";
+    item.innerHTML = `
+      <span>${escapeHtml(entry.memberProfile.userName)}</span>
+      <span class="presence-pill" aria-hidden="true"></span>
+    `;
+    presenceList.appendChild(item);
+  }
+}
+
+async function refreshPresence(): Promise<void> {
+  if (!joinedRoom) {
+    return;
+  }
+
+  const [count, page] = await Promise.all([
+    joinedRoom.presence.count(),
+    joinedRoom.presence.list({ offset: presenceOffset, limit: presencePageSize }),
+  ]);
+
+  presenceCount.textContent = `${count} online`;
+  presencePage.textContent = page.members.length === 0
+    ? `Showing 0 of ${count} members.`
+    : `Showing ${page.offset + 1}-${page.offset + page.members.length} of ${count} members.`;
+
+  presenceList.innerHTML = "";
+  if (page.members.length === 0) {
+    const empty = document.createElement("li");
+    empty.className = "presence-empty";
+    empty.textContent = "Nobody is here yet.";
+    presenceList.appendChild(empty);
+    return;
+  }
+
+  for (const entry of page.members) {
+    const item = document.createElement("li");
+    item.className = "presence-item";
+    item.innerHTML = `
+      <span>${escapeHtml(entry.memberProfile.userName)}</span>
+      <span class="presence-pill" aria-hidden="true"></span>
+    `;
+    presenceList.appendChild(item);
+  }
+}
+
+function formatTime(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? ""
+    : new Intl.DateTimeFormat(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+      }).format(date);
+}
+
+function escapeHtml(value: string): string {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+async function connectRoom(): Promise<void> {
+  const payload = {
+    roomId: roomInput.value.trim().toLowerCase(),
+    roomKey: keyInput.value,
+    userName: nameInput.value,
+  };
+
+  setStatus("Joining room...");
+
+  try {
+    presenceOffset = 0;
+    joinedRoom = await chatClient.join(payload);
+    renderHistory(joinedRoom.roomProfile.history);
+    await refreshPresence();
+
+    stopMessageListener = joinedRoom.on.message((message) => {
+      renderMessage(message);
+    });
+
+    stopSystemListener = joinedRoom.on.systemNotice((notice) => {
+      renderSystemNotice(notice.text, notice.sentAt);
+    });
+
+    stopPresenceListener = joinedRoom.presence.onChange(() => {
+      void refreshPresence();
+    });
+
+    roomTitle.textContent = joinedRoom.roomId;
+    roomSubtitle.textContent = `Signed in as ${payload.userName}. The room stays private behind the shared key.`;
+    setWorkspaceVisible(true);
+    setStatus(`Connected to ${joinedRoom.roomId}.`);
+    messageInput.focus();
+  } catch (error) {
+    joinedRoom = null;
+    setStatus(error instanceof Error ? error.message : String(error));
+  }
+}
+
+async function leaveRoom(): Promise<void> {
+  if (!joinedRoom) {
+    return;
+  }
+
+  const roomId = joinedRoom.roomId;
+
+  try {
+    await joinedRoom.leave();
+  } finally {
+    stopMessageListener?.();
+    stopSystemListener?.();
+    stopPresenceListener?.();
+    stopMessageListener = null;
+    stopSystemListener = null;
+    stopPresenceListener = null;
+    joinedRoom = null;
+
+    setWorkspaceVisible(false);
+    joinForm.reset();
+    clearMessages();
+    presenceList.innerHTML = "";
+    presenceCount.textContent = "0 online";
+    presencePage.textContent = "Showing 0 members.";
+    roomTitle.textContent = "-";
+    roomSubtitle.textContent = "-";
+    setStatus(`Left ${roomId}.`);
+  }
+}
+
+joinForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  await connectRoom();
+});
+
+messageForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  if (!joinedRoom) {
+    setStatus("Join a room before sending messages.");
+    return;
+  }
+
+  const text = messageInput.value.trim();
+  if (!text) {
+    return;
+  }
+
+  try {
+    await joinedRoom.rpc.sendMessage({ text });
+    messageInput.value = "";
+  } catch (error) {
+    setStatus(error instanceof Error ? error.message : String(error));
+  }
+});
+
+leaveButton.addEventListener("click", async () => {
+  await leaveRoom();
+});
+
+presencePrevButton.addEventListener("click", async () => {
+  if (!joinedRoom || presenceOffset === 0) {
+    return;
+  }
+
+  presenceOffset = Math.max(0, presenceOffset - presencePageSize);
+  await refreshPresence();
+});
+
+presenceNextButton.addEventListener("click", async () => {
+  if (!joinedRoom) {
+    return;
+  }
+
+  presenceOffset += presencePageSize;
+  await refreshPresence();
+});
+
+socket.on("connect", () => {
+  setStatus("Connected. Join a room to start chatting.");
+});
+
+socket.on("disconnect", () => {
+  setStatus("Disconnected from the server.");
+});
+
+setWorkspaceVisible(false);
+setStatus("Connecting to server...");
+presencePage.textContent = "Showing 0 members.";

package/example/public/index.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Private Room Chat</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <p class="eyebrow">Example app</p>
+        <h1>Private room chat with live presence</h1>
+        <p class="lede">
+          Create a room, share the room key with the people you want inside, and watch the member list update in real time.
+        </p>
+      </section>
+
+      <section class="panel" id="join-panel">
+        <h2>Join a room</h2>
+        <form id="join-form" class="form-grid">
+          <label>
+            Display name
+            <input id="name-input" name="name" type="text" maxlength="32" placeholder="Ada" autocomplete="nickname" required />
+          </label>
+          <label>
+            Room id
+            <input id="room-input" name="roomId" type="text" maxlength="64" placeholder="launch-team" autocomplete="off" required />
+          </label>
+          <label>
+            Room key
+            <input id="key-input" name="roomKey" type="password" maxlength="64" placeholder="secret phrase" autocomplete="off" required />
+          </label>
+          <div class="actions">
+            <button type="submit">Enter room</button>
+          </div>
+        </form>
+        <p class="hint">
+          The first person to join a room sets the key. Everyone else needs the same key to enter.
+        </p>
+        <p id="status" class="status">Disconnected.</p>
+      </section>
+
+      <section class="workspace hidden" id="workspace">
+        <div class="panel room-header">
+          <div>
+            <p class="eyebrow">Active room</p>
+            <h2 id="room-title">-</h2>
+            <p id="room-subtitle" class="hint">-</p>
+          </div>
+          <button id="leave-button" class="ghost-button" type="button">Leave room</button>
+        </div>
+
+        <div class="columns">
+          <section class="panel feed-panel">
+            <div class="panel-title-row">
+              <h3>Messages</h3>
+            </div>
+            <div id="messages" class="feed"></div>
+            <form id="message-form" class="message-form">
+              <input id="message-input" type="text" maxlength="500" placeholder="Type a message..." autocomplete="off" required />
+              <button type="submit">Send</button>
+            </form>
+          </section>
+
+          <aside class="panel presence-panel">
+            <div class="panel-title-row">
+              <div>
+                <h3>Presence</h3>
+                <span id="presence-count" class="count">0 online</span>
+              </div>
+              <div class="presence-controls">
+                <button id="presence-prev" class="ghost-button" type="button">Prev</button>
+                <button id="presence-next" class="ghost-button" type="button">Next</button>
+              </div>
+            </div>
+            <p id="presence-page" class="meta">Showing 0 members.</p>
+            <ul id="presence-list" class="presence-list"></ul>
+          </aside>
+        </div>
+      </section>
+    </main>
+
+    <script src="/app.js"></script>
+  </body>
+</html>

package/example/public/styles.css

@@ -0,0 +1,317 @@
+:root {
+  color-scheme: dark;
+  --bg: #0b1020;
+  --bg-alt: #111936;
+  --panel: rgba(15, 22, 47, 0.86);
+  --panel-border: rgba(148, 163, 184, 0.18);
+  --text: #e5eefc;
+  --muted: #9db0d0;
+  --accent: #7dd3fc;
+  --accent-strong: #38bdf8;
+  --danger: #fb7185;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), transparent 36%),
+    radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.16), transparent 26%),
+    linear-gradient(160deg, var(--bg), var(--bg-alt));
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 90%);
+}
+
+.shell {
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 40px 0 56px;
+  position: relative;
+  z-index: 1;
+}
+
+.hero {
+  padding: 24px 0 32px;
+  max-width: 760px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.78rem;
+  color: var(--accent);
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  font-size: clamp(2.4rem, 5vw, 4.6rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+  margin-bottom: 18px;
+}
+
+.lede {
+  max-width: 60ch;
+  font-size: 1.06rem;
+  line-height: 1.65;
+  color: var(--muted);
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+#join-panel,
+.room-header,
+.feed-panel,
+.presence-panel {
+  padding: 22px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  align-items: end;
+}
+
+label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+input {
+  width: 100%;
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  background: rgba(15, 23, 42, 0.9);
+  color: var(--text);
+  border-radius: 14px;
+  padding: 14px 16px;
+  font: inherit;
+  outline: none;
+}
+
+input:focus {
+  border-color: rgba(125, 211, 252, 0.7);
+  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
+}
+
+.actions {
+  display: flex;
+  align-items: end;
+}
+
+button {
+  border: 0;
+  border-radius: 14px;
+  padding: 14px 18px;
+  font: inherit;
+  font-weight: 700;
+  color: #042f49;
+  background: linear-gradient(180deg, #bae6fd, #38bdf8);
+  cursor: pointer;
+}
+
+button:hover {
+  filter: brightness(1.04);
+}
+
+button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ghost-button {
+  color: var(--text);
+  background: rgba(148, 163, 184, 0.12);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.hint,
+.status,
+.count,
+.meta {
+  color: var(--muted);
+}
+
+.status {
+  margin-bottom: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.workspace {
+  display: grid;
+  gap: 18px;
+  margin-top: 18px;
+}
+
+.room-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
+  gap: 18px;
+}
+
+.panel-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.presence-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.feed-panel,
+.presence-panel {
+  min-height: 480px;
+}
+
+.feed {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+  height: 360px;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.message {
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(8, 15, 31, 0.62);
+  border-radius: 18px;
+  padding: 14px 16px;
+}
+
+.message-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.message-name {
+  font-weight: 700;
+}
+
+.message-time,
+.meta {
+  font-size: 0.82rem;
+}
+
+.message-text {
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.message-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.presence-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.presence-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(8, 15, 31, 0.45);
+  border-radius: 16px;
+  padding: 12px 14px;
+}
+
+.presence-pill {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14);
+}
+
+.presence-empty {
+  color: var(--muted);
+  border: 1px dashed rgba(148, 163, 184, 0.18);
+  border-radius: 16px;
+  padding: 14px;
+}
+
+.presence-controls button {
+  padding: 10px 14px;
+}
+
+@media (max-width: 900px) {
+  .form-grid,
+  .columns,
+  .message-form {
+    grid-template-columns: 1fr;
+  }
+
+  .room-header {
+    flex-direction: column;
+  }
+
+  .presence-controls {
+    justify-content: flex-start;
+  }
+}