@kadal/deck 0.0.0-stage → 0.1.0

package/dist/draw/DrawingLayer.js

@@ -0,0 +1,315 @@
+import { createStore, useStore } from "../core/store.js";
+import { useDeck } from "../react/context.js";
+import { useActions, useLayout, useNav, useUi } from "../react/hooks.js";
+import { Icon } from "../components/bling.js";
+import { useLiveOptional } from "../live/context.js";
+import { EMPTY_ROOM } from "../live/protocol.js";
+import { DRAW_COLORS, DRAW_SIZES, FADE_DWELL, fadeDuration, loadDrawings, newStroke, saveDrawings, segmentsOf, simplify, swatchGradient } from "./strokes.js";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/draw/DrawingLayer.tsx
+const noRoom = createStore(EMPTY_ROOM);
+/**
+* Drawing and annotation on the current slide: pen and highlighter, colours, sizes, undo, clear.
+* Strokes are kept in stage coordinates so they line up on every screen size, persisted per
+* deck in localStorage, and — when the room is live — sent to the room so every window shows
+* them. A stylus draws without the mode being on; fingers and the mouse navigate.
+*
+* A stroke drifts through its colour's family as it travels (see `segmentsOf`). Unless the pin
+* is on, a stroke is a scribble: it lingers a few seconds after the pen lifts, then unwinds
+* along its own path — every screen does the same from the moment it saw the stroke, so nothing
+* more needs to cross the wire. Pinned strokes stay, persist, and can be undone or cleared.
+*
+* `inCanvas`: rendered inside a scaled stage canvas (the presenter's current-slide box) rather
+* than over the viewport — it fills the canvas in stage pixels and its toolbar is portalled out.
+*/
+function DrawingLayer({ inCanvas = false } = {}) {
+	const deck = useDeck();
+	const layout = useLayout();
+	const drawing = useUi((s) => s.drawing);
+	const { h, v } = useNav((s) => ({
+		h: s.h,
+		v: s.v
+	}));
+	const actions = useActions();
+	const live = useLiveOptional();
+	const slideKey = `${h},${v}`;
+	const canDraw = deck.config.drawings.enabled && (!deck.config.drawings.presenterOnly || deck.isPresenter || !live);
+	const [local, setLocal] = useState(() => canDraw && deck.config.drawings.persist ? loadDrawings(deck.config.slug || "deck") : {});
+	const [tool, setTool] = useState("pen");
+	const [color, setColor] = useState(DRAW_COLORS[0]);
+	const [size, setSize] = useState(DRAW_SIZES[1]);
+	const [keep, setKeep] = useState(false);
+	const [current, setCurrent] = useState(null);
+	const svg = useRef(null);
+	const remote = useStore(live?.client.state ?? noRoom, (s) => s.drawings);
+	const seen = useRef(/* @__PURE__ */ new Map());
+	const gone = useRef(/* @__PURE__ */ new Set());
+	const [progress, setProgress] = useState({});
+	const mine = local[slideKey] ?? [];
+	const strokes = [...mine, ...(remote[slideKey] ?? []).filter((r) => !mine.some((l) => l.id === r.id))].filter((s) => !gone.current.has(s.id));
+	useEffect(() => {
+		if (canDraw && deck.config.drawings.persist) saveDrawings(deck.config.slug || "deck", local);
+	}, [
+		local,
+		canDraw,
+		deck.config.drawings.persist,
+		deck.config.slug
+	]);
+	const fadingKey = strokes.filter((s) => s.fade).map((s) => s.id).join(",");
+	useEffect(() => {
+		if (!fadingKey) return;
+		const fading = strokes.filter((s) => s.fade);
+		const now = performance.now();
+		for (const s of fading) if (!seen.current.has(s.id)) seen.current.set(s.id, now);
+		let raf = 0;
+		let timer = null;
+		const tick = () => {
+			const t = performance.now();
+			const next = {};
+			const finished = [];
+			let unwinding = false;
+			let soonest = Number.POSITIVE_INFINITY;
+			for (const s of fading) {
+				const t0 = seen.current.get(s.id) ?? t;
+				const p = (t - t0 - FADE_DWELL) / fadeDuration(s);
+				if (p >= 1) finished.push(s.id);
+				else if (p > 0) {
+					next[s.id] = p;
+					unwinding = true;
+				} else soonest = Math.min(soonest, t0 + FADE_DWELL - t);
+			}
+			if (finished.length) {
+				for (const id of finished) {
+					gone.current.add(id);
+					seen.current.delete(id);
+				}
+				setLocal((d) => {
+					const list = d[slideKey] ?? [];
+					if (!list.some((s) => finished.includes(s.id))) return d;
+					return {
+						...d,
+						[slideKey]: list.filter((s) => !finished.includes(s.id))
+					};
+				});
+				live?.client.state.update((st) => {
+					const list = st.drawings[slideKey] ?? [];
+					if (!list.some((s) => finished.includes(s.id))) return st;
+					return {
+						...st,
+						drawings: {
+							...st.drawings,
+							[slideKey]: list.filter((s) => !finished.includes(s.id))
+						}
+					};
+				});
+			}
+			setProgress((prev) => {
+				const a = Object.keys(prev);
+				const b = Object.keys(next);
+				if (a.length === b.length && a.every((k) => prev[k] === next[k])) return prev;
+				return next;
+			});
+			if (unwinding) raf = requestAnimationFrame(tick);
+			else if (Number.isFinite(soonest)) timer = setTimeout(tick, Math.max(16, soonest));
+		};
+		tick();
+		return () => {
+			cancelAnimationFrame(raf);
+			if (timer) clearTimeout(timer);
+		};
+	}, [fadingKey, slideKey]);
+	const toStage = (e) => {
+		const rect = svg.current.getBoundingClientRect();
+		return [(e.clientX - rect.left) / rect.width * deck.config.width, (e.clientY - rect.top) / rect.height * deck.config.height];
+	};
+	const onDown = (e) => {
+		if (!canDraw) return;
+		if (!drawing && e.pointerType !== "pen") return;
+		if (e.button !== 0) return;
+		e.target.setPointerCapture?.(e.pointerId);
+		const s = newStroke(tool, color, size, !keep);
+		s.points.push(toStage(e));
+		setCurrent(s);
+	};
+	const onMove = (e) => {
+		if (!current) return;
+		setCurrent({
+			...current,
+			points: [...current.points, toStage(e)]
+		});
+	};
+	const onUp = () => {
+		if (!current) return;
+		const done = {
+			...current,
+			points: simplify(current.points)
+		};
+		setCurrent(null);
+		setLocal((d) => ({
+			...d,
+			[slideKey]: [...d[slideKey] ?? [], done]
+		}));
+		if (live && (deck.isPresenter || deck.config.drawings.syncAll)) live.client.send({
+			type: "draw",
+			slide: slideKey,
+			stroke: done
+		});
+	};
+	const undo = () => {
+		setLocal((d) => ({
+			...d,
+			[slideKey]: (d[slideKey] ?? []).slice(0, -1)
+		}));
+		if (live && (deck.isPresenter || deck.config.drawings.syncAll)) live.client.send({
+			type: "draw:undo",
+			slide: slideKey
+		});
+	};
+	const clear = () => {
+		setLocal((d) => ({
+			...d,
+			[slideKey]: []
+		}));
+		if (live && (deck.isPresenter || deck.config.drawings.syncAll)) live.client.send({
+			type: "draw:clear",
+			slide: slideKey
+		});
+	};
+	useEffect(() => {
+		const onKey = (e) => {
+			if (!drawing) return;
+			if (e.code === "KeyC" && e.shiftKey) clear();
+			if (e.code === "KeyZ" && (e.ctrlKey || e.metaKey)) undo();
+			if (e.code === "Escape") actions.toggleDrawing(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	});
+	if (!deck.config.drawings.enabled) return null;
+	const toolbar = /* @__PURE__ */ jsxs("div", {
+		className: "deck-draw-toolbar",
+		role: "toolbar",
+		"aria-label": "Drawing tools",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: tool === "pen" ? "is-on" : "",
+				onClick: () => setTool("pen"),
+				title: "Pen",
+				"aria-label": "Pen",
+				children: /* @__PURE__ */ jsx(Icon, { name: "pencil" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: tool === "highlighter" ? "is-on" : "",
+				onClick: () => setTool("highlighter"),
+				title: "Highlighter",
+				"aria-label": "Highlighter",
+				children: /* @__PURE__ */ jsx(Icon, { name: "highlighter" })
+			}),
+			/* @__PURE__ */ jsx("span", { className: "deck-draw-sep" }),
+			DRAW_COLORS.map((c) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: ["deck-draw-color", color === c ? "is-on" : ""].join(" "),
+				onClick: () => setColor(c),
+				"aria-label": c,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "deck-draw-swatch",
+					style: { background: swatchGradient(c) }
+				})
+			}, c)),
+			/* @__PURE__ */ jsx("span", { className: "deck-draw-sep" }),
+			DRAW_SIZES.map((s) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: size === s ? "is-on" : "",
+				onClick: () => setSize(s),
+				title: `Size ${s}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "deck-draw-dot",
+					style: {
+						width: s + 4,
+						height: s + 4
+					}
+				})
+			}, s)),
+			/* @__PURE__ */ jsx("span", { className: "deck-draw-sep" }),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: keep ? "is-on" : "",
+				onClick: () => setKeep((k) => !k),
+				title: keep ? "Strokes stay on the slide — click to let them fade" : "Strokes fade after a moment — click to keep them",
+				"aria-label": keep ? "Strokes stay" : "Strokes fade",
+				children: /* @__PURE__ */ jsx(Icon, { name: keep ? "pin" : "pin-off" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: undo,
+				title: "Undo (Ctrl Z)",
+				"aria-label": "Undo",
+				children: /* @__PURE__ */ jsx(Icon, { name: "undo-2" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: clear,
+				title: "Clear (Shift C)",
+				"aria-label": "Clear",
+				children: /* @__PURE__ */ jsx(Icon, { name: "eraser" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.toggleDrawing(false),
+				title: "Done (Esc)",
+				"aria-label": "Done",
+				children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+		ref: svg,
+		className: "deck-drawing",
+		viewBox: `0 0 ${deck.config.width} ${deck.config.height}`,
+		style: inCanvas ? {
+			left: 0,
+			top: 0,
+			width: deck.config.width,
+			height: deck.config.height,
+			pointerEvents: drawing && canDraw ? "auto" : "none"
+		} : {
+			left: layout.left,
+			top: layout.top,
+			width: layout.width,
+			height: layout.height,
+			pointerEvents: drawing && canDraw ? "auto" : "none"
+		},
+		onPointerDown: onDown,
+		onPointerMove: onMove,
+		onPointerUp: onUp,
+		onPointerCancel: onUp,
+		"aria-hidden": true,
+		children: [...strokes, ...current ? [current] : []].map((s) => {
+			const p = progress[s.id] ?? 0;
+			const from = p > 0 ? Math.floor(p * s.points.length) : 0;
+			const wide = s.tool === "highlighter";
+			return /* @__PURE__ */ jsx("g", {
+				opacity: p > 0 ? 1 - p * .35 : 1,
+				style: wide ? { mixBlendMode: "multiply" } : void 0,
+				children: segmentsOf(s, from).map((seg, i) => /* @__PURE__ */ jsx("path", {
+					d: seg.d,
+					stroke: seg.color,
+					strokeWidth: wide ? s.size * 3 : s.size,
+					strokeOpacity: wide ? .35 : 1,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					fill: "none"
+				}, i))
+			}, s.id);
+		})
+	}), drawing && canDraw ? inCanvas ? createPortal(/* @__PURE__ */ jsx("div", {
+		className: "deck-draw-toolbar-host",
+		children: toolbar
+	}), document.body) : toolbar : null] });
+}
+//#endregion
+export { DrawingLayer };

package/dist/draw/strokes.js

@@ -0,0 +1,188 @@
+//#region src/draw/strokes.ts
+/** A smooth SVG path through a stroke's points: quadratic curves through midpoints. */
+function pathOf(points) {
+	if (points.length === 0) return "";
+	if (points.length === 1) {
+		const [x, y] = points[0];
+		return `M ${x} ${y} L ${x + .01} ${y}`;
+	}
+	let d = `M ${points[0][0]} ${points[0][1]}`;
+	for (let i = 1; i < points.length - 1; i++) {
+		const [x0, y0] = points[i];
+		const [x1, y1] = points[i + 1];
+		d += ` Q ${x0} ${y0} ${(x0 + x1) / 2} ${(y0 + y1) / 2}`;
+	}
+	const last = points[points.length - 1];
+	d += ` L ${last[0]} ${last[1]}`;
+	return d;
+}
+/** Drop points closer than `min` to the previous kept point, so strokes stay light on the wire. */
+function simplify(points, min = 2) {
+	const out = [];
+	for (const p of points) {
+		const last = out[out.length - 1];
+		if (!last || Math.hypot(p[0] - last[0], p[1] - last[1]) >= min) out.push(p);
+	}
+	return out;
+}
+function newStroke(tool, color, size, fade = false) {
+	return {
+		id: `s_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`,
+		tool,
+		color,
+		size,
+		points: [],
+		...fade ? { fade: true } : {}
+	};
+}
+const DRAW_COLORS = [
+	"#ef4444",
+	"#f59e0b",
+	"#22c55e",
+	"#3b82f6",
+	"#a855f7",
+	"#111827",
+	"#ffffff"
+];
+const DRAW_SIZES = [
+	4,
+	8,
+	16
+];
+/**
+* Each pen is a small family rather than one flat colour: the swatch shows the family as a
+* gradient, and a stroke drifts through it as it travels — orange through amber and coral and
+* back — so a scribble reads as one gesture with a little life in it. Every screen derives the
+* same colours from the stroke's base colour and points, so nothing extra goes over the wire.
+*/
+const FAMILIES = {
+	"#ef4444": [
+		"#f43f5e",
+		"#ef4444",
+		"#fb923c"
+	],
+	"#f59e0b": [
+		"#f97316",
+		"#f59e0b",
+		"#fbbf24"
+	],
+	"#22c55e": [
+		"#10b981",
+		"#22c55e",
+		"#84cc16"
+	],
+	"#3b82f6": [
+		"#0ea5e9",
+		"#3b82f6",
+		"#6366f1"
+	],
+	"#a855f7": [
+		"#8b5cf6",
+		"#a855f7",
+		"#ec4899"
+	],
+	"#111827": [
+		"#0f172a",
+		"#111827",
+		"#374151"
+	],
+	"#ffffff": [
+		"#f1f5f9",
+		"#ffffff",
+		"#e2e8f0"
+	]
+};
+function familyOf(color) {
+	return FAMILIES[color.toLowerCase()] ?? [
+		color,
+		color,
+		color
+	];
+}
+function swatchGradient(color) {
+	const [a, b, c] = familyOf(color);
+	return `linear-gradient(135deg, ${a} 0%, ${b} 50%, ${c} 100%)`;
+}
+function hexToRgb(hex) {
+	const h = hex.replace("#", "");
+	const n = parseInt(h.length === 3 ? [...h].map((c) => c + c).join("") : h, 16);
+	return [
+		n >> 16 & 255,
+		n >> 8 & 255,
+		n & 255
+	];
+}
+function mix(a, b, t) {
+	const [r1, g1, b1] = hexToRgb(a);
+	const [r2, g2, b2] = hexToRgb(b);
+	return `rgb(${Math.round(r1 + (r2 - r1) * t)} ${Math.round(g1 + (g2 - g1) * t)} ${Math.round(b1 + (b2 - b1) * t)})`;
+}
+/** The family colour at phase `u` in 0..1: a → b → c → b → a, so the cycle has no seam. */
+function familyAt(color, u) {
+	const [a, b, c] = familyOf(color);
+	const q = (u % 1 + 1) % 1 * 4;
+	if (q < 1) return mix(a, b, q);
+	if (q < 2) return mix(b, c, q - 1);
+	if (q < 3) return mix(c, b, q - 2);
+	return mix(b, a, q - 3);
+}
+/**
+* A stroke as runs of a few points, each coloured by its distance along the path. Round caps
+* overlap the joins; from `from` on (a point index) the head has already been erased.
+*/
+function segmentsOf(stroke, from = 0, run = 5) {
+	const pts = stroke.points;
+	if (pts.length === 0) return [];
+	const [a, b, c] = familyOf(stroke.color);
+	if (a === b && b === c) return [{
+		d: pathOf(pts.slice(from)),
+		color: stroke.color
+	}];
+	const out = [];
+	let dist = 0;
+	const start = Math.max(0, Math.min(from, pts.length - 1));
+	for (let i = 1; i <= start; i++) dist += Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+	for (let i = start; i < pts.length; i += run) {
+		const slice = pts.slice(i, Math.min(pts.length, i + run + 1));
+		if (slice.length === 0) break;
+		let d = dist;
+		for (let j = 1; j < slice.length; j++) d += Math.hypot(slice[j][0] - slice[j - 1][0], slice[j][1] - slice[j - 1][1]);
+		const mid = (dist + d) / 2;
+		out.push({
+			d: pathOf(slice),
+			color: familyAt(stroke.color, mid / 640)
+		});
+		dist = d;
+		if (slice.length < run + 1) break;
+	}
+	return out;
+}
+/** A fading stroke lingers this long after the pen lifts, then unwinds along its own path. */
+const FADE_DWELL = 5e3;
+/** How long the unwinding takes: roughly the pace it was drawn at, within reason. */
+function fadeDuration(stroke) {
+	return Math.min(2400, Math.max(500, stroke.points.length * 9));
+}
+const key = (slug) => `deck.drawings.${slug}`;
+function loadDrawings(slug) {
+	try {
+		const raw = localStorage.getItem(key(slug));
+		const all = raw ? JSON.parse(raw) : {};
+		for (const k of Object.keys(all)) all[k] = (all[k] ?? []).filter((s) => !s.fade);
+		return all;
+	} catch {
+		return {};
+	}
+}
+function saveDrawings(slug, drawings) {
+	try {
+		const kept = {};
+		for (const [k, list] of Object.entries(drawings)) {
+			const keep = list.filter((s) => !s.fade);
+			if (keep.length) kept[k] = keep;
+		}
+		localStorage.setItem(key(slug), JSON.stringify(kept));
+	} catch {}
+}
+//#endregion
+export { DRAW_COLORS, DRAW_SIZES, FADE_DWELL, fadeDuration, familyAt, familyOf, loadDrawings, newStroke, pathOf, saveDrawings, segmentsOf, simplify, swatchGradient };

package/dist/export/index.d.ts

@@ -0,0 +1,68 @@
+//#region src/export/index.d.ts
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * EXPORT  —  PDF, PNG and PPTX from a running deck, with an optional upload to the host
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * Drives a headless Chromium over the deck's print view (`?print-pdf`), which lays every slide
+ * (and every click step when `pdfSeparateFragments` is on) out as a page at the authored size.
+ * PDF comes from the browser's own printer; PNGs are element screenshots of each page; PPTX
+ * wraps those PNGs one per slide with the notes attached, so the deck opens in PowerPoint,
+ * Keynote and Google Slides looking exactly like the web.
+ *
+ * Embedded pages cannot be live on paper, so before the build the exporter captures a poster
+ * for every iframe slide and `<Iframe>` that names none: a screenshot of the URL at the pane's
+ * size, saved under `public/posters/` where the frame shell looks for it (see core/poster.ts).
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+export interface PosterJob {
+  /** The page the frame embeds — what names the poster. */
+  url: string;
+  /** The page to photograph, when it differs (a state the frame's URL does not carry). */
+  capture: string;
+  width: number;
+  height: number;
+  /** Relative to the deck's `public/`. */
+  file: string;
+  /** Milliseconds to let the page settle before the shot. */
+  wait: number;
+}
+/** Every embedded page in the deck that has no poster of its own, with the size to capture. */
+export declare function posterJobs(deckDir: string, config: {
+  width: number;
+  height: number;
+}, entry?: string): PosterJob[];
+/**
+ * Capture the posters that are missing (or all of them with `refresh`). WebGL pages render
+ * through SwiftShader; each page gets its job's `wait` after load for maps and fonts.
+ */
+export declare function capturePosters(deckDir: string, jobs: PosterJob[], { refresh, log }?: {
+  refresh?: boolean;
+  log?: (line: string) => void;
+}): Promise<number>;
+export interface ExportOptions {
+  /** The deck's URL, e.g. http://localhost:4173/showcase/ (with the trailing slash). */
+  url: string;
+  outDir: string;
+  slug: string;
+  pdf?: boolean;
+  png?: boolean;
+  pptx?: boolean;
+  /** Device scale for PNG/PPTX captures. */
+  scale?: number;
+  /** Upload the results to a host (`https://deck.kadal.cc`) using DECK_ADMIN_KEY or a presenter cookie. */
+  upload?: string | null;
+  adminKey?: string | null;
+  log?: (line: string) => void;
+}
+export interface ExportResult {
+  files: {
+    kind: "pdf" | "png" | "pptx";
+    path: string;
+    size: number;
+    uploaded?: string;
+  }[];
+  pages: number;
+}
+export declare function exportDeck(options: ExportOptions): Promise<ExportResult>;
+//#endregion