@kadal/deck 0.0.0-stage → 0.1.0

package/dist/components/Term.js

@@ -0,0 +1,492 @@
+import { adhocId, buildMatcher, inlineHtml, linkLabel } from "../glossary/model.js";
+import { useStore } from "../core/store.js";
+import { useDeck, useSlideOptional } from "../react/context.js";
+import { closeTerm, entryFor, mentionIndex, openTerm, slideKeyOf } from "../react/terms.js";
+import { Icon } from "./bling.js";
+import { Children, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Term.tsx
+/** The smallest the card's body type may get on screen, in CSS pixels. */
+const MIN_BODY_PX = 13;
+/** The card's body type in stage pixels at zoom 1 (the stylesheet's `--term-body`). */
+const BODY_STAGE_PX = 23;
+const CLOSE_GRACE = 180;
+function textOf(node) {
+	let out = "";
+	Children.forEach(node, (c) => {
+		if (typeof c === "string" || typeof c === "number") out += String(c);
+		else if (isValidElement(c)) out += textOf(c.props.children);
+	});
+	return out;
+}
+/** The countdown cursor Paadam and the Sanket docs use: a 24 px ring whose pie fills over the delay. */
+function pieCursor(fraction) {
+	const f = Math.max(0, Math.min(1, fraction));
+	const ink = "%23475569";
+	let fill = "";
+	if (f >= .999) fill = `<circle cx='12' cy='12' r='7' fill='${ink}'/>`;
+	else if (f > .01) {
+		const a = 2 * Math.PI * f;
+		const x = (12 + 7 * Math.sin(a)).toFixed(2);
+		const y = (12 - 7 * Math.cos(a)).toFixed(2);
+		fill = `<path d='M12 12 L12 5 A7 7 0 ${f > .5 ? 1 : 0} 1 ${x} ${y} Z' fill='${ink}'/>`;
+	}
+	return `url("data:image/svg+xml;utf8,${`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='9' fill='white' fill-opacity='0.85'/><circle cx='12' cy='12' r='9' fill='none' stroke='${ink}' stroke-width='1'/>${fill}</svg>`}") 12 12, help`;
+}
+function Term({ id, def, more, title, full, tag, link, html, moreHtml, auto, children }) {
+	const deck = useDeck();
+	const slide = useSlideOptional();
+	const label = useMemo(() => textOf(children).replace(/\s+/g, " ").trim(), [children]);
+	const oneOff = def !== void 0 || html !== void 0;
+	const entry = useMemo(() => {
+		if (!oneOff) return entryFor(deck, id ?? label) ?? resolveByWord(deck.glossary, id ?? label);
+		const source = String(def ?? "");
+		return {
+			id: id ?? adhocId(`${label}|${source}`),
+			name: title ?? label,
+			full: full ?? null,
+			aliases: [],
+			tag: tag ?? null,
+			link: link ? {
+				href: link,
+				label: linkLabel(link)
+			} : null,
+			see: [],
+			auto: false,
+			html: {
+				def: html ?? inlineHtml(source.replace(/\s+/g, " ").trim()),
+				more: moreHtml ?? (more ? inlineHtml(more.replace(/\s+/g, " ").trim()) : null)
+			}
+		};
+	}, [
+		oneOff,
+		deck,
+		id,
+		label,
+		def,
+		more,
+		title,
+		full,
+		tag,
+		link,
+		html,
+		moreHtml
+	]);
+	useEffect(() => {
+		if (oneOff && entry) deck.glossary.set(entry.id, entry);
+	}, [
+		oneOff,
+		entry,
+		deck.glossary
+	]);
+	const live = !!entry && !!slide && slide.terms && deck.mode !== "print";
+	const ref = useRef(null);
+	const [shown, setShown] = useState(null);
+	const [arming, setArming] = useState(false);
+	const timers = useRef({
+		open: 0,
+		close: 0,
+		raf: 0
+	});
+	const delay = deck.config.glossary.delay;
+	const slideKey = slide ? `${slide.h},${slide.v}` : "";
+	useEffect(() => {
+		if (!live || !entry) return;
+		const check = (r) => {
+			const el = ref.current;
+			const mine = !!r && !!el && r.id === entry.id && r.slide === slideKey && mentionIndex(el, r.id) === r.n;
+			setShown(mine ? r : null);
+		};
+		check(deck.terms.get());
+		return deck.terms.subscribe(check);
+	}, [
+		live,
+		entry,
+		slideKey,
+		deck.terms
+	]);
+	const disarm = useCallback(() => {
+		const t = timers.current;
+		if (t.open) clearTimeout(t.open);
+		if (t.raf) cancelAnimationFrame(t.raf);
+		t.open = 0;
+		t.raf = 0;
+		if (ref.current) ref.current.style.cursor = "";
+		setArming(false);
+	}, []);
+	const holdOpen = useCallback(() => {
+		if (timers.current.close) clearTimeout(timers.current.close);
+		timers.current.close = 0;
+	}, []);
+	useEffect(() => () => {
+		disarm();
+		holdOpen();
+	}, [disarm, holdOpen]);
+	const reveal = useCallback((pinned) => {
+		const el = ref.current;
+		if (!el || !entry) return;
+		const key = slideKeyOf(el);
+		if (!key) return;
+		disarm();
+		holdOpen();
+		openTerm(deck, {
+			slide: key,
+			id: entry.id,
+			n: mentionIndex(el, entry.id),
+			view: null,
+			pinned,
+			from: "local"
+		});
+	}, [
+		deck,
+		entry,
+		disarm,
+		holdOpen
+	]);
+	const leaveSoon = useCallback(() => {
+		holdOpen();
+		timers.current.close = window.setTimeout(() => {
+			const now = deck.terms.get();
+			if (now && !now.pinned && now.from === "local") closeTerm(deck);
+		}, CLOSE_GRACE);
+	}, [deck, holdOpen]);
+	if (!entry) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (!live) return /* @__PURE__ */ jsx("span", {
+		className: "deck-term is-inert",
+		"data-term": entry.id,
+		children
+	});
+	const cardId = `deck-term-${entry.id.replace(/[^a-z0-9-]/gi, "")}-${slideKey.replace(",", "-")}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		ref,
+		role: "term",
+		className: [
+			"deck-term",
+			auto ? "is-auto" : "",
+			arming ? "is-arming" : "",
+			shown ? "is-open" : ""
+		].filter(Boolean).join(" "),
+		style: { "--term-delay": `${delay}ms` },
+		"data-term": entry.id,
+		"data-hint": "",
+		"aria-describedby": shown ? cardId : void 0,
+		onPointerEnter: (e) => {
+			if (e.pointerType !== "mouse" || deck.ui.get().drawing) return;
+			holdOpen();
+			if (shown || timers.current.open) return;
+			setArming(true);
+			const t0 = performance.now();
+			let last = -1;
+			const tick = () => {
+				const f = (performance.now() - t0) / Math.max(1, delay);
+				if (f >= 1) return;
+				const step = Math.floor(f * 12);
+				if (step !== last && ref.current) {
+					last = step;
+					ref.current.style.cursor = pieCursor(f);
+				}
+				timers.current.raf = requestAnimationFrame(tick);
+			};
+			if (delay > 0) timers.current.raf = requestAnimationFrame(tick);
+			timers.current.open = window.setTimeout(() => reveal(false), delay);
+		},
+		onPointerLeave: (e) => {
+			if (e.pointerType !== "mouse") return;
+			disarm();
+			if (shown && !shown.pinned) leaveSoon();
+		},
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			if (shown?.pinned && shown.from === "local") closeTerm(deck);
+			else reveal(true);
+		},
+		children
+	}), shown ? /* @__PURE__ */ jsx(TermCard, {
+		id: cardId,
+		anchor: ref,
+		entry,
+		reveal: shown,
+		onEnter: holdOpen,
+		onLeave: () => {
+			if (!shown.pinned && shown.from === "local") leaveSoon();
+		}
+	}) : null] });
+}
+let wordIndex = null;
+function matcherFor(glossary) {
+	if (!wordIndex || wordIndex.map !== glossary) wordIndex = {
+		map: glossary,
+		matcher: buildMatcher([...glossary.values()])
+	};
+	return wordIndex.matcher;
+}
+/** A hand-written `<Term>` the compiler never saw (inside a custom component): find it by name. */
+function resolveByWord(glossary, word) {
+	return matcherFor(glossary).resolve(word);
+}
+/**
+* Links the glossary's mentions inside a plain string, at render time — for a component whose
+* words arrive as a prop (`<Stat label="quantisation RMSE" />`), where the compiler, which only
+* sees a slide's children, cannot reach. The first mention of each term in the string is linked.
+*
+*   <small><Terms>{note}</Terms></small>
+*/
+function Terms({ children }) {
+	const deck = useDeck();
+	const text = children ?? "";
+	const parts = useMemo(() => {
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		let last = 0;
+		for (const m of matcherFor(deck.glossary).find(text)) {
+			if (seen.has(m.entry.id)) continue;
+			seen.add(m.entry.id);
+			if (m.index > last) out.push(text.slice(last, m.index));
+			out.push(/* @__PURE__ */ jsx(Term, {
+				id: m.entry.id,
+				auto: true,
+				children: m.text
+			}, m.index));
+			last = m.index + m.text.length;
+		}
+		if (last < text.length) out.push(text.slice(last));
+		return out;
+	}, [deck.glossary, text]);
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+function TermCard({ id, anchor, entry, reveal, onEnter, onLeave }) {
+	const deck = useDeck();
+	const card = useRef(null);
+	const [host, setHost] = useState(null);
+	const [place, setPlace] = useState({
+		left: 0,
+		top: 0,
+		arrow: 40,
+		above: true,
+		zoom: 1,
+		ready: false
+	});
+	const sync = useStore(deck.ui, (s) => s.termSync);
+	const viewed = (reveal.view ? entryFor(deck, reveal.view) : void 0) ?? entry;
+	useLayoutEffect(() => {
+		const slide = anchor.current?.closest(".deck-slide") ?? null;
+		setHost(slide && !slide.closest("[data-term-cards='off']") ? slide : null);
+	}, [anchor]);
+	useLayoutEffect(() => {
+		const el = anchor.current;
+		const box = card.current;
+		if (!el || !box || !host) return;
+		const measure = () => {
+			const sr = host.getBoundingClientRect();
+			const scale = sr.width / host.offsetWidth || 1;
+			const zoom = Math.min(3.2, Math.max(1, MIN_BODY_PX / (BODY_STAGE_PX * scale)));
+			const tr = el.getClientRects()[0] ?? el.getBoundingClientRect();
+			const W = host.offsetWidth;
+			const H = host.offsetHeight;
+			const x = (tr.left - sr.left) / scale;
+			const y = (tr.top - sr.top) / scale;
+			const w = tr.width / scale;
+			const h = tr.height / scale;
+			const cw = box.offsetWidth;
+			const ch = box.offsetHeight;
+			const gap = 16 * zoom;
+			const pad = 20;
+			const roomAbove = y - gap - pad;
+			const roomBelow = H - (y + h) - gap - pad;
+			const above = roomAbove >= ch || roomAbove >= roomBelow;
+			const left = Math.min(Math.max(pad, x + w / 2 - cw / 2), Math.max(pad, W - cw - pad));
+			const top = above ? Math.max(pad, y - gap - ch) : Math.min(y + h + gap, H - ch - pad);
+			const arrow = Math.min(Math.max(28 * zoom, x + w / 2 - left), cw - 28 * zoom);
+			setPlace((p) => p.ready && Math.abs(p.left - left) < .5 && Math.abs(p.top - top) < .5 && Math.abs(p.arrow - arrow) < .5 && p.above === above && p.zoom === zoom ? p : {
+				left,
+				top,
+				arrow,
+				above,
+				zoom,
+				ready: true
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(host);
+		ro.observe(box);
+		window.addEventListener("resize", measure);
+		return () => {
+			ro.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		anchor,
+		host,
+		viewed
+	]);
+	if (!host) return null;
+	const swap = (view) => {
+		const now = deck.terms.get();
+		if (now) openTerm(deck, {
+			...now,
+			view,
+			pinned: true,
+			from: "local"
+		});
+	};
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		ref: card,
+		id,
+		role: "tooltip",
+		className: [
+			"deck-term-card",
+			place.above ? "is-above" : "is-below",
+			place.ready ? "is-ready" : "",
+			reveal.pinned ? "is-pinned" : ""
+		].filter(Boolean).join(" "),
+		style: {
+			left: place.left,
+			top: place.top,
+			"--term-arrow": `${place.arrow}px`,
+			"--term-zoom": place.zoom
+		},
+		onPointerEnter: onEnter,
+		onPointerLeave: onLeave,
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ jsx(TermBody, {
+			entry: viewed,
+			origin: viewed === entry ? null : entry,
+			onView: swap,
+			badge: reveal.from === "remote" ? {
+				icon: "radio",
+				text: "From the presenter"
+			} : deck.isPresenter && sync ? {
+				icon: "radio",
+				text: "On every screen"
+			} : null
+		}), reveal.pinned ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "deck-term-close",
+			"aria-label": "Close",
+			onClick: () => closeTerm(deck),
+			children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+		}) : null]
+	}), host);
+}
+/** What a definition says, shared by the card on the slide and the readout on a phone. */
+function TermBody({ entry, origin, onView, badge }) {
+	const deck = useDeck();
+	const related = entry.see.map((id) => entryFor(deck, id)).filter((e) => !!e && e.id !== origin?.id);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "deck-term-head",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: "book-open-text",
+					className: "deck-term-icon"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "deck-term-name",
+					children: entry.name
+				}),
+				entry.tag ? /* @__PURE__ */ jsx("span", {
+					className: "deck-term-tag",
+					children: entry.tag
+				}) : null
+			]
+		}),
+		entry.full ? /* @__PURE__ */ jsx("div", {
+			className: "deck-term-full",
+			children: entry.full
+		}) : null,
+		/* @__PURE__ */ jsx("p", {
+			className: "deck-term-def",
+			dangerouslySetInnerHTML: { __html: entry.html.def }
+		}),
+		entry.html.more ? /* @__PURE__ */ jsx("p", {
+			className: "deck-term-more",
+			dangerouslySetInnerHTML: { __html: entry.html.more }
+		}) : null,
+		origin || related.length || entry.link || badge ? /* @__PURE__ */ jsxs("div", {
+			className: "deck-term-foot",
+			children: [
+				origin ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "deck-term-see is-back",
+					onClick: () => onView(null),
+					children: [
+						/* @__PURE__ */ jsx(Icon, { name: "arrow-left" }),
+						" ",
+						origin.name
+					]
+				}) : null,
+				related.length ? /* @__PURE__ */ jsx("span", {
+					className: "deck-term-see-label",
+					children: "See also"
+				}) : null,
+				related.map((r) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "deck-term-see",
+					onClick: () => onView(r.id),
+					children: r.name
+				}, r.id)),
+				entry.link ? /* @__PURE__ */ jsxs("a", {
+					className: "deck-term-link",
+					href: entry.link.href,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"data-no-preview": "",
+					children: [
+						entry.link.label,
+						" ",
+						/* @__PURE__ */ jsx(Icon, { name: "arrow-up-right" })
+					]
+				}) : null,
+				badge ? /* @__PURE__ */ jsxs("span", {
+					className: "deck-term-badge",
+					children: [
+						/* @__PURE__ */ jsx(Icon, { name: badge.icon }),
+						" ",
+						badge.text
+					]
+				}) : null
+			]
+		}) : null
+	] });
+}
+/**
+* The window's open definition as ordinary page content, at reading size — for a page whose slide
+* is too small to carry a card (the audience's phone). Put the mirror inside an element with
+* `data-term-cards="off"` and this beside it.
+*/
+function TermReadout({ className }) {
+	const deck = useDeck();
+	const reveal = useStore(deck.terms);
+	const entry = reveal ? entryFor(deck, reveal.id) : void 0;
+	if (!reveal || !entry) return null;
+	const viewed = (reveal.view ? entryFor(deck, reveal.view) : void 0) ?? entry;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["deck-term-readout", className].filter(Boolean).join(" "),
+		role: "status",
+		children: [/* @__PURE__ */ jsx(TermBody, {
+			entry: viewed,
+			origin: viewed === entry ? null : entry,
+			onView: (view) => openTerm(deck, {
+				...reveal,
+				view,
+				pinned: true,
+				from: "local"
+			}),
+			badge: reveal.from === "remote" ? {
+				icon: "radio",
+				text: "From the presenter"
+			} : null
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "deck-term-close",
+			"aria-label": "Close",
+			onClick: () => closeTerm(deck),
+			children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+		})]
+	});
+}
+//#endregion
+export { Term, TermReadout, Terms };

package/dist/components/bling.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from "react";
+//#region src/components/bling.d.ts
+export type Tone = "accent" | "accent-2" | "good" | "warn" | "bad" | "info" | "neutral" | "purple" | "pink" | "amber" | "teal";
+export declare function GradientText({ children, from, to, angle, className, as: Tag }: {
+  children?: ReactNode;
+  from?: string;
+  to?: string;
+  angle?: number;
+  className?: string;
+  as?: "span" | "h1" | "h2" | "h3" | "strong";
+}): import("react").JSX.Element;
+export declare function Glass({ children, className, tone, pad, glow, style }: {
+  children?: ReactNode;
+  className?: string;
+  tone?: Tone;
+  pad?: string;
+  glow?: boolean;
+  style?: React.CSSProperties;
+}): import("react").JSX.Element;
+export declare function Glow({ color, size, x, y, opacity, className }: {
+  color?: string;
+  size?: string;
+  x?: string;
+  y?: string;
+  opacity?: number;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Chip({ children, tone, icon, className }: {
+  children?: ReactNode;
+  tone?: Tone;
+  icon?: string;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Icon({ name, size, color, strokeWidth, className }: {
+  name: string;
+  size?: string | number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Divider({ label, className }: {
+  label?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Ribbon({ children, tone, corner }: {
+  children?: ReactNode;
+  tone?: Tone;
+  corner?: "left" | "right";
+}): import("react").JSX.Element;
+export declare function Halo({ children, tone, size, className }: {
+  children?: ReactNode;
+  tone?: Tone;
+  size?: string;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Shimmer({ children, className, as: Tag }: {
+  children?: ReactNode;
+  className?: string;
+  as?: "span" | "h1" | "h2" | "strong";
+}): import("react").JSX.Element;
+export declare function Blob({ color, x, y, size, rotate, opacity, className }: {
+  color?: string;
+  x?: string;
+  y?: string;
+  size?: string;
+  rotate?: number;
+  opacity?: number;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Tilt({ children, className, max }: {
+  children?: ReactNode;
+  className?: string;
+  max?: number;
+}): import("react").JSX.Element;
+//#endregion