@kadal/deck 0.0.0-stage → 0.1.0

package/dist/live/components.js

@@ -0,0 +1,471 @@
+import { createStore, useStore } from "../core/store.js";
+import { useDeck, useSlideOptional } from "../react/context.js";
+import { Qr } from "../components/content.js";
+import { useLiveOptional, useRole, useRoomStatus } from "./context.js";
+import { REACTIONS } from "./protocol.js";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/live/components.tsx
+/**
+* The interactive pieces a slide can carry. Each works in three states: live (the room is up),
+* offline (a local, single-screen fallback so rehearsals and exports still make sense), and
+* presenter (extra controls to open, close, reveal).
+*/
+function useRoomSlice(selector, fallback) {
+	const live = useLiveOptional();
+	const value = useStore(live?.client.state ?? fallbackStore, (s) => live ? selector(s) : fallback);
+	return live ? value : fallback;
+}
+const fallbackStore = createStore(null);
+/** The QR code and short URL for the audience page. */
+function QrJoin({ size = 260, caption = "Scan to follow along, react and ask", className }) {
+	const live = useLiveOptional();
+	const deck = useDeck();
+	const url = live?.joinUrl ?? `${typeof window === "undefined" ? "" : window.location.origin}${deck.base}join`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["deck-qr-join", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(Qr, {
+			value: url,
+			size
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "deck-qr-join-text",
+			children: [/* @__PURE__ */ jsx("strong", { children: url.replace(/^https?:\/\//, "") }), /* @__PURE__ */ jsx("span", { children: caption })]
+		})]
+	});
+}
+/** How many are watching. */
+function Presence({ className }) {
+	const presence = useRoomSlice((s) => s.presence, null);
+	const status = useRoomStatus();
+	if (!presence) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			"deck-presence",
+			status === "open" ? "is-live" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("i", {}),
+			presence.viewers,
+			" watching",
+			presence.hands ? ` · ${presence.hands} ✋` : ""
+		]
+	});
+}
+/** The reaction bar (for slides that invite it; the audience page has its own). */
+function Reactions({ className }) {
+	const live = useLiveOptional();
+	const totals = useRoomSlice((s) => s.reactions, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-reaction-bar", className].filter(Boolean).join(" "),
+		children: REACTIONS.map((e) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => live?.client.send({
+				type: "react",
+				emoji: e
+			}),
+			children: [/* @__PURE__ */ jsx("span", { children: e }), totals[e] ? /* @__PURE__ */ jsx("small", { children: totals[e] }) : null]
+		}, e))
+	});
+}
+/** A poll: defined by the slide, opened by the presenter, answered from the audience page or here. */
+function Poll({ id, question, options = [], kind = "choice", scale = 5, liveResults = true, className }) {
+	const live = useLiveOptional();
+	const role = useRole();
+	const slide = useSlideOptional();
+	const state = useRoomSlice((s) => s.polls[id] ?? null, null);
+	const [localVote, setLocalVote] = useState(null);
+	const [word, setWord] = useState("");
+	const def = useMemo(() => ({
+		id,
+		kind,
+		question,
+		options: kind === "rating" ? Array.from({ length: scale }, (_, i) => String(i + 1)) : options,
+		scale
+	}), [
+		id,
+		kind,
+		question,
+		options,
+		scale
+	]);
+	useEffect(() => {
+		if (!live || role !== "presenter" || !slide?.active) return;
+		live.client.send({
+			type: "poll:define",
+			poll: def
+		});
+	}, [
+		live,
+		role,
+		slide?.active,
+		def
+	]);
+	const counts = state?.counts ?? def.options.map(() => 0);
+	const total = state?.total ?? 0;
+	const open = state?.open ?? false;
+	const mine = state?.mine ?? localVote;
+	const showResults = liveResults || !open || role === "presenter";
+	const vote = (i) => {
+		if (kind === "multi") {
+			const cur = Array.isArray(mine) ? mine : [];
+			const next = cur.includes(i) ? cur.filter((x) => x !== i) : [...cur, i];
+			setLocalVote(next);
+			live?.client.send({
+				type: "poll:vote",
+				id,
+				options: next
+			});
+			return;
+		}
+		setLocalVote(i);
+		live?.client.send(kind === "rating" ? {
+			type: "poll:vote",
+			id,
+			rating: i + 1
+		} : {
+			type: "poll:vote",
+			id,
+			option: i
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"deck-poll",
+			`kind-${kind}`,
+			open ? "is-open" : "is-closed",
+			className
+		].filter(Boolean).join(" "),
+		"data-poll": id,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "deck-poll-head",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: question }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "deck-poll-meta",
+					children: [
+						open ? "open" : "closed",
+						" · ",
+						total,
+						" ",
+						total === 1 ? "answer" : "answers"
+					]
+				}),
+				role === "presenter" ? /* @__PURE__ */ jsxs("span", {
+					className: "deck-poll-controls",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => live?.client.send({
+							type: "poll:open",
+							id,
+							open: !open
+						}),
+						children: open ? "Close" : "Open"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => live?.client.send({
+							type: "poll:reset",
+							id
+						}),
+						children: "Reset"
+					})]
+				}) : null
+			]
+		}), kind === "words" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WordCloudView, { words: state?.words ?? {} }), /* @__PURE__ */ jsxs("form", {
+			className: "deck-poll-word",
+			onSubmit: (e) => {
+				e.preventDefault();
+				if (!word.trim()) return;
+				live?.client.send({
+					type: "poll:vote",
+					id,
+					word: word.trim()
+				});
+				setLocalVote(word.trim());
+				setWord("");
+			},
+			children: [/* @__PURE__ */ jsx("input", {
+				value: word,
+				onChange: (e) => setWord(e.target.value),
+				placeholder: "One word",
+				maxLength: 24,
+				disabled: !open && !!live
+			}), /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				disabled: !open && !!live,
+				children: "Add"
+			})]
+		})] }) : /* @__PURE__ */ jsx("ul", {
+			className: "deck-poll-options",
+			children: def.options.map((opt, i) => {
+				const n = counts[i] ?? 0;
+				const pct = total ? Math.round(n / total * 100) : 0;
+				const chosen = Array.isArray(mine) ? mine.includes(i) : mine === i;
+				return /* @__PURE__ */ jsx("li", {
+					className: chosen ? "is-mine" : "",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => vote(i),
+						disabled: !open && !!live,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "deck-poll-bar",
+								style: { width: showResults ? `${pct}%` : 0 }
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "deck-poll-label",
+								children: opt
+							}),
+							showResults ? /* @__PURE__ */ jsxs("span", {
+								className: "deck-poll-count",
+								children: [
+									pct,
+									"% · ",
+									n
+								]
+							}) : null
+						]
+					})
+				}, i);
+			})
+		})]
+	});
+}
+function WordCloudView({ words }) {
+	const entries = Object.entries(words).sort((a, b) => b[1] - a[1]).slice(0, 40);
+	const max = entries[0]?.[1] ?? 1;
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-wordcloud",
+		children: entries.length ? entries.map(([w, n]) => /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: `${.6 + n / max * 1.6}em`,
+				opacity: .55 + n / max * .45
+			},
+			children: w
+		}, w)) : /* @__PURE__ */ jsx("span", {
+			className: "deck-muted",
+			children: "Waiting for words…"
+		})
+	});
+}
+function WordCloud({ id, question, className }) {
+	return /* @__PURE__ */ jsx(Poll, {
+		id,
+		question,
+		kind: "words",
+		className
+	});
+}
+/** A timed quiz question with points for speed and a leaderboard. */
+function Quiz({ id, question, options, correct, seconds = 20, className }) {
+	const live = useLiveOptional();
+	const role = useRole();
+	const slide = useSlideOptional();
+	const state = useRoomSlice((s) => s.quizzes[id] ?? null, null);
+	const [now, setNow] = useState(Date.now());
+	const [local, setLocal] = useState(null);
+	const def = useMemo(() => ({
+		id,
+		question,
+		options,
+		correct,
+		seconds
+	}), [
+		id,
+		question,
+		options,
+		correct,
+		seconds
+	]);
+	useEffect(() => {
+		if (!live || role !== "presenter" || !slide?.active) return;
+		live.client.send({
+			type: "quiz:define",
+			quiz: def
+		});
+	}, [
+		live,
+		role,
+		slide?.active,
+		def
+	]);
+	useEffect(() => {
+		const t = setInterval(() => setNow(Date.now()), 250);
+		return () => clearInterval(t);
+	}, []);
+	const open = state?.open ?? false;
+	const left = state?.deadline ? Math.max(0, Math.ceil((state.deadline - now) / 1e3)) : seconds;
+	const revealed = state?.revealed ?? false;
+	const mine = state?.mine ?? local;
+	const counts = state?.counts ?? options.map(() => 0);
+	const total = counts.reduce((a, b) => a + b, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"deck-quiz",
+			open ? "is-open" : "",
+			revealed ? "is-revealed" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "deck-quiz-head",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: question }),
+				/* @__PURE__ */ jsx("span", {
+					className: ["deck-quiz-timer", open && left <= 5 ? "is-urgent" : ""].join(" "),
+					children: open ? `${left}s` : revealed ? "revealed" : "ready"
+				}),
+				role === "presenter" ? /* @__PURE__ */ jsxs("span", {
+					className: "deck-poll-controls",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => live?.client.send({
+							type: "quiz:open",
+							id,
+							open: !open
+						}),
+						children: open ? "Close" : "Start"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => live?.client.send({
+							type: "quiz:reveal",
+							id
+						}),
+						disabled: open,
+						children: "Reveal"
+					})]
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "deck-poll-options",
+			children: options.map((opt, i) => {
+				const n = counts[i] ?? 0;
+				const pct = total ? Math.round(n / total * 100) : 0;
+				return /* @__PURE__ */ jsx("li", {
+					className: [
+						mine === i ? "is-mine" : "",
+						revealed && i === correct ? "is-correct" : "",
+						revealed && mine === i && i !== correct ? "is-wrong" : ""
+					].join(" "),
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: !open && !!live || mine !== null,
+						onClick: () => {
+							setLocal(i);
+							live?.client.send({
+								type: "quiz:answer",
+								id,
+								option: i,
+								name: nickname()
+							});
+						},
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "deck-poll-bar",
+								style: { width: revealed ? `${pct}%` : 0 }
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "deck-poll-label",
+								children: opt
+							}),
+							revealed ? /* @__PURE__ */ jsx("span", {
+								className: "deck-poll-count",
+								children: n
+							}) : null
+						]
+					})
+				}, i);
+			})
+		})]
+	});
+}
+function nickname() {
+	try {
+		return localStorage.getItem("deck.name") ?? "";
+	} catch {
+		return "";
+	}
+}
+/** The leaderboard across every quiz in the room. */
+function Leaderboard({ top = 8, className }) {
+	const quizzes = useRoomSlice((s) => s.quizzes, {});
+	const scores = /* @__PURE__ */ new Map();
+	for (const q of Object.values(quizzes)) for (const e of q.leaderboard) scores.set(e.name, (scores.get(e.name) ?? 0) + e.score);
+	const rows = [...scores.entries()].sort((a, b) => b[1] - a[1]).slice(0, top);
+	return /* @__PURE__ */ jsx("ol", {
+		className: ["deck-leaderboard", className].filter(Boolean).join(" "),
+		children: rows.length ? rows.map(([name, score], i) => /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "deck-leaderboard-rank",
+				children: i + 1
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "deck-leaderboard-name",
+				children: name || "anonymous"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "deck-leaderboard-score",
+				children: score
+			})
+		] }, name)) : /* @__PURE__ */ jsx("li", {
+			className: "deck-muted",
+			children: "No scores yet."
+		})
+	});
+}
+/** Questions from the audience, on a slide: most voted first, answered ones dimmed. */
+function Questions({ limit = 6, className, children }) {
+	const live = useLiveOptional();
+	const role = useRole();
+	const sorted = [...useRoomSlice((s) => s.questions, [])].sort((a, b) => Number(a.answered) - Number(b.answered) || b.votes - a.votes || a.at - b.at).slice(0, limit);
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["deck-questions", className].filter(Boolean).join(" "),
+		children: [children, sorted.length ? /* @__PURE__ */ jsx("ul", { children: sorted.map((q) => /* @__PURE__ */ jsxs("li", {
+			className: q.answered ? "is-answered" : "",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "deck-question-votes",
+					children: ["▲ ", q.votes]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "deck-question-text",
+					children: q.text
+				}),
+				role === "presenter" ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => live?.client.send({
+						type: "qa:answered",
+						id: q.id,
+						answered: !q.answered
+					}),
+					children: q.answered ? "Reopen" : "Answered"
+				}) : null
+			]
+		}, q.id)) }) : /* @__PURE__ */ jsx("p", {
+			className: "deck-muted",
+			children: "No questions yet — the audience page has an ask box."
+		})]
+	});
+}
+/** A gauge of the audience's pace feedback: are they asking for slower or faster? */
+function Pace({ className }) {
+	const pace = useRoomSlice((s) => s.presence.pace, {
+		slower: 0,
+		faster: 0,
+		total: 0
+	});
+	const bias = pace.total ? (pace.faster - pace.slower) / pace.total : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["deck-pace", className].filter(Boolean).join(" "),
+		title: `${pace.slower} slower · ${pace.faster} faster`,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "slower" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "deck-pace-track",
+				children: /* @__PURE__ */ jsx("i", { style: { left: `${50 + bias * 50}%` } })
+			}),
+			/* @__PURE__ */ jsx("span", { children: "faster" })
+		]
+	});
+}
+//#endregion
+export { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud, WordCloudView, nickname };

package/dist/live/context.d.ts

@@ -0,0 +1,15 @@
+import { Role, RoomState } from "./protocol.js";
+import { RoomClient, Status } from "./client.js";
+//#region src/live/context.d.ts
+export interface LiveValue {
+  client: RoomClient;
+  /** The audience page URL for the QR code. */
+  joinUrl: string;
+}
+export declare const LiveContext: import("react").Context<LiveValue | null>;
+export declare function useLiveOptional(): LiveValue | null;
+export declare function useLive(): LiveValue;
+export declare function useRoom<S = RoomState>(selector?: (s: RoomState) => S): S;
+export declare function useRoomStatus(): Status;
+export declare function useRole(): Role;
+//#endregion

package/dist/live/context.js

@@ -0,0 +1,28 @@
+import { createStore, useStore } from "../core/store.js";
+import { createContext, useContext } from "react";
+//#region src/live/context.ts
+const LiveContext = createContext(null);
+function useLiveOptional() {
+	return useContext(LiveContext);
+}
+function useLive() {
+	const v = useContext(LiveContext);
+	if (!v) throw new Error("This needs <LiveProvider> inside <Deck>");
+	return v;
+}
+function useRoom(selector) {
+	const live = useLive();
+	return useStore(live.client.state, selector);
+}
+function useRoomStatus() {
+	const live = useLiveOptional();
+	return useStore(live?.client.status ?? emptyStatus);
+}
+function useRole() {
+	const live = useLiveOptional();
+	return useStore(live?.client.role ?? viewerRole);
+}
+const emptyStatus = createStore("idle");
+const viewerRole = createStore("viewer");
+//#endregion
+export { LiveContext, useLive, useLiveOptional, useRole, useRoom, useRoomStatus };

package/dist/live/index.d.ts

@@ -0,0 +1,7 @@
+import { ClientMessage, EMPTY_ROOM, PollDef, PollKind, PollState, Question, QuizDef, QuizState, REACTIONS, Role, RoomPosition, RoomState, RoomTerm, ServerMessage, Stroke } from "./protocol.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud, WordCloudView, nickname } from "./components.js";
+import { LiveProvider, PointerLayer } from "./LiveProvider.js";
+import { RoomClient, Status, viewerId } from "./client.js";
+import { LiveContext, useLive, useLiveOptional, useRole, useRoom, useRoomStatus } from "./context.js";
+import { Analytics, copyText, shareLink } from "./analytics.js";
+export { Analytics, ClientMessage, EMPTY_ROOM, Leaderboard, LiveContext, LiveProvider, Pace, PointerLayer, Poll, PollDef, PollKind, PollState, Presence, QrJoin, Question, Questions, Quiz, QuizDef, QuizState, REACTIONS, Reactions, Role, RoomClient, RoomPosition, RoomState, RoomTerm, ServerMessage, type Status, Stroke, WordCloud, WordCloudView, copyText, nickname, shareLink, useLive, useLiveOptional, useRole, useRoom, useRoomStatus, viewerId };

package/dist/live/index.js

@@ -0,0 +1,7 @@
+import { LiveContext, useLive, useLiveOptional, useRole, useRoom, useRoomStatus } from "./context.js";
+import { EMPTY_ROOM, REACTIONS } from "./protocol.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud, WordCloudView, nickname } from "./components.js";
+import { RoomClient, viewerId } from "./client.js";
+import { Analytics, copyText, shareLink } from "./analytics.js";
+import { LiveProvider, PointerLayer } from "./LiveProvider.js";
+export { Analytics, EMPTY_ROOM, Leaderboard, LiveContext, LiveProvider, Pace, PointerLayer, Poll, Presence, QrJoin, Questions, Quiz, REACTIONS, Reactions, RoomClient, WordCloud, WordCloudView, copyText, nickname, shareLink, useLive, useLiveOptional, useRole, useRoom, useRoomStatus, viewerId };