@kadal/deck 0.0.0-stage → 0.1.0

package/dist/live/client.d.ts

@@ -0,0 +1,51 @@
+import { Store } from "../core/store.js";
+import { ClientMessage, Role, RoomState, ServerMessage } from "./protocol.js";
+//#region src/live/client.d.ts
+/**
+ * The room client: one WebSocket to the deck's room, reconnecting with backoff, holding the
+ * room state in a store the React layer subscribes to, and fanning transient messages (pointer,
+ * reactions, strokes) to listeners. Works offline too — every store just stays empty.
+ */
+export type Status = "idle" | "connecting" | "open" | "closed" | "offline";
+export interface RoomClientOptions {
+  /** e.g. "/api" — the room lives at `${api}/rooms/${room}/ws`. */
+  api: string;
+  room: string;
+  role: Role;
+  viewer: string;
+  name?: string;
+  /** A one-off token appended to the URL (Turnstile), fetched before each connection attempt. */
+  token?: () => Promise<string | null>;
+}
+type Listener = (message: ServerMessage) => void;
+export declare function viewerId(): string;
+export declare class RoomClient {
+  private readonly options;
+  readonly state: Store<RoomState>;
+  readonly status: Store<Status>;
+  readonly role: Store<Role>;
+  private ws;
+  private listeners;
+  private attempts;
+  private closedByUs;
+  private timer;
+  private heartbeat;
+  private queue;
+  /** The position to announce on connect; kept current by the provider. */
+  position: {
+    h: number;
+    v: number;
+    click: number;
+  };
+  constructor(options: RoomClientOptions);
+  connect(): void;
+  private url;
+  private open;
+  private opening;
+  private start;
+  private raw;
+  send(m: ClientMessage): void;
+  on(listener: Listener): () => void;
+  close(): void;
+}
+//#endregion

package/dist/live/client.js

@@ -0,0 +1,193 @@
+import { createStore } from "../core/store.js";
+import { EMPTY_ROOM } from "./protocol.js";
+//#region src/live/client.ts
+function viewerId() {
+	try {
+		const key = "deck.viewer";
+		let id = localStorage.getItem(key);
+		if (!id) {
+			id = `v_${Math.random().toString(36).slice(2, 12)}${Date.now().toString(36)}`;
+			localStorage.setItem(key, id);
+		}
+		return id;
+	} catch {
+		return `v_${Math.random().toString(36).slice(2, 12)}`;
+	}
+}
+var RoomClient = class {
+	options;
+	state = createStore(EMPTY_ROOM);
+	status = createStore("idle");
+	role = createStore("viewer");
+	ws = null;
+	listeners = /* @__PURE__ */ new Set();
+	attempts = 0;
+	closedByUs = false;
+	timer = null;
+	heartbeat = null;
+	queue = [];
+	/** The position to announce on connect; kept current by the provider. */
+	position = {
+		h: 0,
+		v: 0,
+		click: 0
+	};
+	constructor(options) {
+		this.options = options;
+	}
+	connect() {
+		if (typeof window === "undefined") return;
+		this.closedByUs = false;
+		this.open();
+	}
+	url(token) {
+		const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+		const base = this.options.api.startsWith("http") ? this.options.api.replace(/^http/, "ws") : `${proto}//${window.location.host}${this.options.api}`;
+		const q = new URLSearchParams({ role: this.options.role });
+		if (token) q.set("t", token);
+		return `${base}/rooms/${encodeURIComponent(this.options.room)}/ws?${q}`;
+	}
+	open() {
+		if (this.ws || this.opening) return;
+		this.status.set("connecting");
+		this.opening = true;
+		const start = (token) => {
+			this.opening = false;
+			if (this.closedByUs) return;
+			this.start(token);
+		};
+		if (this.options.token) this.options.token().then(start, () => start(null));
+		else start(null);
+	}
+	opening = false;
+	start(token) {
+		let ws;
+		try {
+			ws = new WebSocket(this.url(token));
+		} catch {
+			this.status.set("offline");
+			return;
+		}
+		this.ws = ws;
+		ws.onopen = () => {
+			this.attempts = 0;
+			this.status.set("open");
+			this.raw({
+				type: "hello",
+				role: this.options.role,
+				viewer: this.options.viewer,
+				name: this.options.name,
+				position: this.position
+			});
+			for (const m of this.queue.splice(0)) this.raw(m);
+			this.heartbeat = setInterval(() => this.raw({ type: "ping" }), 25e3);
+		};
+		ws.onmessage = (e) => {
+			let m;
+			try {
+				m = JSON.parse(String(e.data));
+			} catch {
+				return;
+			}
+			if (m.type === "welcome") {
+				this.role.set(m.role);
+				const drawings = {};
+				for (const [k, list] of Object.entries(m.state.drawings)) drawings[k] = list.filter((s) => !s.fade);
+				this.state.set({
+					...m.state,
+					drawings
+				});
+			} else if (m.type === "state") this.state.update((s) => ({
+				...s,
+				...m.patch
+			}));
+			else if (m.type === "nav") this.state.update((s) => ({
+				...s,
+				position: m.position,
+				term: null
+			}));
+			else if (m.type === "term") this.state.update((s) => ({
+				...s,
+				term: {
+					slide: m.slide,
+					id: m.id,
+					n: m.n,
+					view: m.view
+				}
+			}));
+			else if (m.type === "term:off") this.state.update((s) => s.term ? {
+				...s,
+				term: null
+			} : s);
+			else if (m.type === "pointer") this.state.update((s) => ({
+				...s,
+				pointer: {
+					x: m.x,
+					y: m.y
+				}
+			}));
+			else if (m.type === "pointer:off") this.state.update((s) => s.pointer ? {
+				...s,
+				pointer: null
+			} : s);
+			else if (m.type === "draw") this.state.update((s) => ({
+				...s,
+				drawings: {
+					...s.drawings,
+					[m.slide]: [...(s.drawings[m.slide] ?? []).filter((x) => x.id !== m.stroke.id), m.stroke]
+				}
+			}));
+			else if (m.type === "draw:undo") this.state.update((s) => ({
+				...s,
+				drawings: {
+					...s.drawings,
+					[m.slide]: (s.drawings[m.slide] ?? []).slice(0, -1)
+				}
+			}));
+			else if (m.type === "draw:clear") this.state.update((s) => ({
+				...s,
+				drawings: {
+					...s.drawings,
+					[m.slide]: []
+				}
+			}));
+			for (const l of this.listeners) l(m);
+		};
+		ws.onclose = () => {
+			this.ws = null;
+			if (this.heartbeat) clearInterval(this.heartbeat);
+			this.heartbeat = null;
+			if (this.closedByUs) {
+				this.status.set("closed");
+				return;
+			}
+			this.status.set(this.attempts > 4 ? "offline" : "closed");
+			const delay = Math.min(15e3, 500 * 2 ** this.attempts++);
+			this.timer = setTimeout(() => this.open(), delay);
+		};
+		ws.onerror = () => {};
+	}
+	raw(m) {
+		if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(m));
+	}
+	send(m) {
+		if (this.ws?.readyState === WebSocket.OPEN) this.raw(m);
+		else if (m.type !== "pointer" && m.type !== "presence" && m.type !== "ping") this.queue.push(m);
+	}
+	on(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	close() {
+		this.closedByUs = true;
+		if (this.timer) clearTimeout(this.timer);
+		if (this.heartbeat) clearInterval(this.heartbeat);
+		this.ws?.close();
+		this.ws = null;
+		this.status.set("closed");
+	}
+};
+//#endregion
+export { RoomClient, viewerId };

package/dist/live/components.d.ts

@@ -0,0 +1,64 @@
+import { PollKind } from "./protocol.js";
+import { ReactNode } from "react";
+//#region src/live/components.d.ts
+/** The QR code and short URL for the audience page. */
+export declare function QrJoin({ size, caption, className }: {
+  size?: number;
+  caption?: string;
+  className?: string;
+}): import("react").JSX.Element;
+/** How many are watching. */
+export declare function Presence({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+/** The reaction bar (for slides that invite it; the audience page has its own). */
+export declare function Reactions({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+export interface PollProps {
+  id: string;
+  question: string;
+  options?: string[];
+  kind?: PollKind;
+  scale?: number;
+  /** Show results as they come, or only once closed. */
+  liveResults?: boolean;
+  className?: string;
+}
+/** A poll: defined by the slide, opened by the presenter, answered from the audience page or here. */
+export declare function Poll({ id, question, options, kind, scale, liveResults, className }: PollProps): import("react").JSX.Element;
+export declare function WordCloudView({ words }: {
+  words: Record<string, number>;
+}): import("react").JSX.Element;
+export declare function WordCloud({ id, question, className }: {
+  id: string;
+  question: string;
+  className?: string;
+}): import("react").JSX.Element;
+export interface QuizProps {
+  id: string;
+  question: string;
+  options: string[];
+  correct: number;
+  seconds?: number;
+  className?: string;
+}
+/** A timed quiz question with points for speed and a leaderboard. */
+export declare function Quiz({ id, question, options, correct, seconds, className }: QuizProps): import("react").JSX.Element;
+export declare function nickname(): string;
+/** The leaderboard across every quiz in the room. */
+export declare function Leaderboard({ top, className }: {
+  top?: number;
+  className?: string;
+}): import("react").JSX.Element;
+/** Questions from the audience, on a slide: most voted first, answered ones dimmed. */
+export declare function Questions({ limit, className, children }: {
+  limit?: number;
+  className?: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** A gauge of the audience's pace feedback: are they asking for slower or faster? */
+export declare function Pace({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion