@kadal/deck 0.0.0-stage → 0.1.0

package/dist/components/content.js

@@ -0,0 +1,637 @@
+import { useDeck, useSlide, useSlideOptional } from "../react/context.js";
+import { useActions, useClick, useNav, useUi } from "../react/hooks.js";
+import { burstConfetti } from "../react/ConfettiLayer.js";
+import { FrameShell } from "../react/Frame.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import katex from "katex";
+//#region src/components/content.tsx
+/** `$…$` in Markdown is rendered at build time; this is for JSX: `<Math tex="…" block />`. */
+function Tex({ tex, block = false, children }) {
+	const source = tex ?? (typeof children === "string" ? children : "");
+	const html = useMemo(() => katex.renderToString(source, {
+		displayMode: block,
+		throwOnError: false
+	}), [source, block]);
+	return block ? /* @__PURE__ */ jsx("div", {
+		className: "deck-math",
+		dangerouslySetInnerHTML: { __html: html }
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "deck-math",
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+let mermaidPromise = null;
+/** A Mermaid diagram, rendered in the browser in the deck's colour scheme. */
+function Mermaid({ children, scale = 1, className }) {
+	const source = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+	const scheme = useUi((s) => s.colorScheme);
+	const [svg, setSvg] = useState("");
+	const id = useMemo(() => `m${Math.random().toString(36).slice(2, 9)}`, []);
+	useEffect(() => {
+		let alive = true;
+		mermaidPromise ??= import("mermaid");
+		mermaidPromise.then(async ({ default: mermaid }) => {
+			mermaid.initialize({
+				startOnLoad: false,
+				theme: scheme === "dark" ? "dark" : "neutral",
+				securityLevel: "loose"
+			});
+			try {
+				const out = await mermaid.render(id, source.trim());
+				if (alive) setSvg(out.svg);
+			} catch (e) {
+				if (alive) setSvg(`<pre class="deck-mermaid-error">${String(e)}</pre>`);
+			}
+		});
+		return () => {
+			alive = false;
+		};
+	}, [
+		source,
+		scheme,
+		id
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-mermaid", className].filter(Boolean).join(" "),
+		style: { zoom: scale },
+		dangerouslySetInnerHTML: { __html: svg }
+	});
+}
+/** Speaker notes are lifted out at compile time; anything left renders nowhere. */
+function Notes(_props) {
+	return null;
+}
+/** Go to a slide by number (1-based), `h.v`, or id. */
+function Link({ to, title, children, className }) {
+	const actions = useActions();
+	const go = (e) => {
+		e.preventDefault();
+		const raw = String(to);
+		if (/^\d+$/.test(raw)) actions.gotoFlat(Number(raw) - 1);
+		else if (/^\d+\.\d+$/.test(raw)) {
+			const [h, v] = raw.split(".").map((n) => Number(n) - 1);
+			actions.goto(h, v);
+		} else actions.gotoId(raw);
+	};
+	return /* @__PURE__ */ jsx("a", {
+		href: `#/${to}`,
+		onClick: go,
+		className: ["deck-link", className].filter(Boolean).join(" "),
+		title,
+		children: children ?? title ?? String(to)
+	});
+}
+/** The `a` mapping: in-deck `#/…` links navigate, external links open in a new tab. */
+function Anchor({ href, children, ...rest }) {
+	const actions = useActions();
+	if (href?.startsWith("#/")) return /* @__PURE__ */ jsx("a", {
+		href,
+		...rest,
+		onClick: (e) => {
+			e.preventDefault();
+			actions.gotoId(href.slice(2));
+		},
+		children
+	});
+	const external = !!href && /^https?:/.test(href);
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		target: external ? "_blank" : void 0,
+		rel: external ? "noreferrer" : void 0,
+		...rest,
+		children
+	});
+}
+/** The table of contents from every slide's title and level (`hideInToc` slides skipped). */
+function Toc({ columns = 1, maxDepth = Number.POSITIVE_INFINITY, minDepth = 1, mode = "all", listClass }) {
+	const deck = useDeck();
+	const actions = useActions();
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v
+	}));
+	const entries = deck.columns.flatMap((c) => c.slides.map((s, v) => ({
+		h: c.h,
+		v,
+		title: s.title,
+		level: s.level,
+		hide: !!s.frontmatter.hideInToc || deck.options.get(`${c.h},${v}`)?.hideInToc
+	})).filter((e) => e.title && !e.hide && e.level >= minDepth && e.level <= maxDepth));
+	const currentFlat = entries.findIndex((e) => e.h === nav.h && e.v === nav.v);
+	const shown = entries.filter((e, i) => {
+		if (mode === "all") return true;
+		if (currentFlat === -1) return e.level === minDepth;
+		const cur = entries[currentFlat];
+		if (mode === "onlySiblings") return e.level <= cur.level;
+		if (e.level === minDepth) return true;
+		let j = i;
+		while (j >= 0 && entries[j].level > minDepth) j--;
+		let k = currentFlat;
+		while (k >= 0 && entries[k].level > minDepth) k--;
+		return j === k;
+	});
+	return /* @__PURE__ */ jsx("ol", {
+		className: ["deck-toc", listClass].filter(Boolean).join(" "),
+		style: { columnCount: columns },
+		children: shown.map((e) => /* @__PURE__ */ jsx("li", {
+			className: [
+				`level-${e.level}`,
+				e.h === nav.h && e.v === nav.v ? "is-current" : "",
+				entries.indexOf(e) < currentFlat ? "is-past" : ""
+			].filter(Boolean).join(" "),
+			style: { marginInlineStart: `${(e.level - minDepth) * 1.2}em` },
+			children: /* @__PURE__ */ jsx("a", {
+				href: `#/${e.h}${e.v ? `/${e.v}` : ""}`,
+				onClick: (ev) => {
+					ev.preventDefault();
+					actions.goto(e.h, e.v);
+				},
+				children: e.title
+			})
+		}, `${e.h},${e.v}`))
+	});
+}
+/** The `img` mapping: lazy, optionally a lightbox on click (`preview`). */
+function Image({ src, alt = "", preview, fit, className, ...rest }) {
+	const previewSrc = typeof preview === "string" ? preview : preview ? src : void 0;
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		loading: "lazy",
+		decoding: "async",
+		className: ["deck-image", className].filter(Boolean).join(" "),
+		"data-preview-image": previewSrc,
+		"data-preview-fit": fit,
+		...rest
+	});
+}
+function Video({ src, autoplay, loop, muted = true, controls = false, className, ...rest }) {
+	return /* @__PURE__ */ jsx("video", {
+		"data-src": src,
+		"data-autoplay": autoplay ? "" : void 0,
+		loop,
+		muted,
+		controls,
+		playsInline: true,
+		className: ["deck-video", className].filter(Boolean).join(" "),
+		...rest
+	});
+}
+function Audio({ src, autoplay, loop, controls = true, className }) {
+	return /* @__PURE__ */ jsx("audio", {
+		"data-src": src,
+		"data-autoplay": autoplay ? "" : void 0,
+		loop,
+		controls,
+		className
+	});
+}
+/** An embedded page, loaded only while its slide is near (`preload` loads it earlier). */
+function Iframe({ src, preload, className, title, poster, posterSize, scale }) {
+	return /* @__PURE__ */ jsx(FrameShell, {
+		url: src,
+		preload,
+		className,
+		title,
+		poster,
+		posterSize,
+		scale
+	});
+}
+function Youtube({ id, url, autoplay, start, className }) {
+	const videoId = id ?? (url ? /(?:v=|youtu\.be\/|embed\/)([\w-]{6,})/.exec(url)?.[1] ?? "" : "");
+	const params = new URLSearchParams({
+		rel: "0",
+		modestbranding: "1",
+		...autoplay ? {
+			autoplay: "1",
+			mute: "1"
+		} : {},
+		...start ? { start: String(start) } : {}
+	});
+	return /* @__PURE__ */ jsx(Iframe, {
+		src: `https://www.youtube-nocookie.com/embed/${videoId}?${params}`,
+		className: ["deck-youtube", className].filter(Boolean).join(" ")
+	});
+}
+function Tweet({ id, url, scale = 1 }) {
+	const tweetId = String(id ?? (url ? /status\/(\d+)/.exec(url)?.[1] ?? "" : ""));
+	const scheme = useUi((s) => s.colorScheme);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-tweet",
+		style: { zoom: scale },
+		children: /* @__PURE__ */ jsx(Iframe, { src: `https://platform.twitter.com/embed/Tweet.html?id=${tweetId}&theme=${scheme}&dnt=true` })
+	});
+}
+/** reveal.js's `r-stack`: children stacked at the same spot, for stepping through with clicks. */
+function Stack({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-stack", className].filter(Boolean).join(" "),
+		children
+	});
+}
+/** reveal.js's `r-stretch`: grows to fill the slide's remaining height. */
+function Stretch({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-stretch", className].filter(Boolean).join(" "),
+		children
+	});
+}
+/** Columns: `<Cols cols="2fr 1fr">` or `<Cols n={3}>`, each child a column (or use `<Col>`). */
+function Cols({ cols, n, gap = "2rem", children, className, align }) {
+	const template = cols ?? `repeat(${n ?? 2}, minmax(0, 1fr))`;
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-cols", className].filter(Boolean).join(" "),
+		style: {
+			gridTemplateColumns: template,
+			gap,
+			alignItems: align
+		},
+		children
+	});
+}
+function Col({ children, className, span }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-col", className].filter(Boolean).join(" "),
+		style: span ? { gridColumn: `span ${span}` } : void 0,
+		children
+	});
+}
+function Grid({ cols = 3, rows, gap = "1.5rem", children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-grid", className].filter(Boolean).join(" "),
+		style: {
+			gridTemplateColumns: typeof cols === "number" ? `repeat(${cols}, minmax(0, 1fr))` : cols,
+			gridTemplateRows: typeof rows === "number" ? `repeat(${rows}, minmax(0, 1fr))` : rows,
+			gap
+		},
+		children
+	});
+}
+function Center({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-center", className].filter(Boolean).join(" "),
+		children
+	});
+}
+function Spacer({ size = "1rem" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-spacer",
+		style: { height: size }
+	});
+}
+/** reveal.js's `r-frame`. */
+function Frame({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-frame", className].filter(Boolean).join(" "),
+		children
+	});
+}
+/** Slidev's `<Transform>`: scale a block around an origin. */
+function Transform({ scale = 1, origin = "top left", children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-transform", className].filter(Boolean).join(" "),
+		style: {
+			transform: `scale(${scale})`,
+			transformOrigin: origin
+		},
+		children
+	});
+}
+/** Place a block at stage coordinates: `<Absolute x={100} y={200} w={400}>`. */
+function Absolute({ x = 0, y = 0, w, h, rotate = 0, children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-absolute", className].filter(Boolean).join(" "),
+		style: {
+			left: x,
+			top: y,
+			width: w,
+			height: h,
+			transform: rotate ? `rotate(${rotate}deg)` : void 0
+		},
+		children
+	});
+}
+/** reveal.js's `r-fit-text` and Slidev's `AutoFitText`: as big as fits, no bigger than `max`. */
+function FitText({ children, max = 400, min = 12, className }) {
+	const outer = useRef(null);
+	const inner = useRef(null);
+	const [size, setSize] = useState(max);
+	useEffect(() => {
+		const o = outer.current;
+		const i = inner.current;
+		if (!o || !i) return;
+		const fit = () => {
+			const avail = o.clientWidth;
+			if (!avail) return;
+			let lo = min;
+			let hi = max;
+			for (let k = 0; k < 14; k++) {
+				const mid = (lo + hi) / 2;
+				i.style.fontSize = `${mid}px`;
+				if (i.scrollWidth <= avail) lo = mid;
+				else hi = mid;
+			}
+			setSize(lo);
+		};
+		fit();
+		const ro = new ResizeObserver(fit);
+		ro.observe(o);
+		return () => ro.disconnect();
+	}, [
+		max,
+		min,
+		children
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: outer,
+		className: ["deck-fit-text", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("span", {
+			ref: inner,
+			style: {
+				fontSize: size,
+				whiteSpace: "nowrap",
+				display: "inline-block"
+			},
+			children
+		})
+	});
+}
+/** Slidev's `<Arrow>`: a straight arrow in stage coordinates. */
+function Arrow({ x1, y1, x2, y2, width = 2, color = "currentColor", twoWay = false, className }) {
+	const id = useMemo(() => `arrow${Math.random().toString(36).slice(2, 8)}`, []);
+	const minX = Math.min(x1, x2) - 20;
+	const minY = Math.min(y1, y2) - 20;
+	const w = Math.abs(x2 - x1) + 40;
+	const h = Math.abs(y2 - y1) + 40;
+	return /* @__PURE__ */ jsxs("svg", {
+		className: ["deck-arrow", className].filter(Boolean).join(" "),
+		style: {
+			position: "absolute",
+			left: minX,
+			top: minY,
+			width: w,
+			height: h,
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		viewBox: `${minX} ${minY} ${w} ${h}`,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+			id,
+			viewBox: "0 0 10 10",
+			refX: "9",
+			refY: "5",
+			markerWidth: 6,
+			markerHeight: 6,
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M 0 0 L 10 5 L 0 10 z",
+				fill: color
+			})
+		}) }), /* @__PURE__ */ jsx("line", {
+			x1,
+			y1,
+			x2,
+			y2,
+			stroke: color,
+			strokeWidth: width,
+			markerEnd: `url(#${id})`,
+			markerStart: twoWay ? `url(#${id})` : void 0
+		})]
+	});
+}
+function Kbd({ children }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: "deck-kbd",
+		children
+	});
+}
+function Badge({ children, tone = "neutral", className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: [
+			"deck-badge",
+			`tone-${tone}`,
+			className
+		].filter(Boolean).join(" "),
+		children
+	});
+}
+function Callout({ kind = "info", title, children, className }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		className: [
+			"deck-callout",
+			`kind-${kind}`,
+			className
+		].filter(Boolean).join(" "),
+		children: [title ? /* @__PURE__ */ jsx("strong", {
+			className: "deck-callout-title",
+			children: title
+		}) : null, /* @__PURE__ */ jsx("div", { children })]
+	});
+}
+/** A number that counts up when its slide is shown (or at its click). */
+function Counter({ value, from = 0, duration = 1500, decimals = 0, prefix = "", suffix = "", className }) {
+	const slide = useSlide();
+	const [shown, setShown] = useState(slide.preview && !slide.active ? value : from);
+	useEffect(() => {
+		if (!slide.active) {
+			setShown(slide.preview ? value : from);
+			return;
+		}
+		const start = performance.now();
+		let raf = 0;
+		const tick = (t) => {
+			const p = Math.min(1, (t - start) / duration);
+			const eased = 1 - Math.pow(1 - p, 3);
+			setShown(from + (value - from) * eased);
+			if (p < 1) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [
+		slide.active,
+		slide.preview,
+		value,
+		from,
+		duration
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		className: ["deck-counter", className].filter(Boolean).join(" "),
+		children: [
+			prefix,
+			shown.toLocaleString(void 0, {
+				minimumFractionDigits: decimals,
+				maximumFractionDigits: decimals
+			}),
+			suffix
+		]
+	});
+}
+/** Text that types itself out when the slide is shown. */
+function Typewriter({ text, speed = 35, className, cursor = true }) {
+	const slide = useSlide();
+	const [n, setN] = useState(0);
+	useEffect(() => {
+		if (!slide.active) {
+			setN(0);
+			return;
+		}
+		let i = 0;
+		const t = setInterval(() => {
+			i++;
+			setN(i);
+			if (i >= text.length) clearInterval(t);
+		}, speed);
+		return () => clearInterval(t);
+	}, [
+		slide.active,
+		text,
+		speed
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		className: ["deck-typewriter", className].filter(Boolean).join(" "),
+		children: [text.slice(0, n), cursor && n < text.length ? /* @__PURE__ */ jsx("span", {
+			className: "deck-typewriter-cursor",
+			children: "▍"
+		}) : null]
+	});
+}
+const GLYPHS = "!<>-_\\/[]{}—=+*^?#________";
+/** Text that resolves out of noise, glyph by glyph — the RLA deck's `EncryptedText`. */
+function Encrypted({ text, speed = 30, delay = 0, className }) {
+	const slide = useSlide();
+	const [out, setOut] = useState(text);
+	useEffect(() => {
+		if (!slide.active) {
+			setOut(text.replace(/\S/g, () => GLYPHS[Math.floor(Math.random() * 26)]));
+			return;
+		}
+		let frame = 0;
+		const perChar = 3;
+		const total = text.length * perChar + 10;
+		let raf = 0;
+		const start = performance.now() + delay;
+		const tick = (t) => {
+			if (t < start) {
+				raf = requestAnimationFrame(tick);
+				return;
+			}
+			frame++;
+			const resolved = Math.floor(frame / perChar);
+			setOut(text.split("").map((ch, i) => ch === " " ? " " : i < resolved ? ch : GLYPHS[Math.floor(Math.random() * 26)]).join(""));
+			if (frame < total) raf = setTimeout(() => requestAnimationFrame(tick), speed);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => {
+			cancelAnimationFrame(raf);
+			clearTimeout(raf);
+		};
+	}, [
+		slide.active,
+		text,
+		speed,
+		delay
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		className: ["deck-encrypted", className].filter(Boolean).join(" "),
+		children: out
+	});
+}
+/** A countdown or stopwatch that starts when its slide is shown. */
+function Timer({ seconds, className }) {
+	const slide = useSlide();
+	const [elapsed, setElapsed] = useState(0);
+	useEffect(() => {
+		if (!slide.active) {
+			setElapsed(0);
+			return;
+		}
+		const start = Date.now();
+		const t = setInterval(() => setElapsed((Date.now() - start) / 1e3), 250);
+		return () => clearInterval(t);
+	}, [slide.active]);
+	const value = seconds !== void 0 ? Math.max(0, seconds - elapsed) : elapsed;
+	const m = Math.floor(value / 60);
+	const s = Math.floor(value % 60);
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			"deck-timer",
+			seconds !== void 0 && value === 0 ? "is-done" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			m,
+			":",
+			String(s).padStart(2, "0")
+		]
+	});
+}
+/** A hand-drawn mark around inline content, drawn on its click: underline, circle, box, highlight. */
+function Mark({ type = "underline", color = "var(--deck-accent)", at, children, className }) {
+	const { shown } = useClick({ at });
+	return /* @__PURE__ */ jsx("span", {
+		className: [
+			"deck-mark",
+			`type-${type}`,
+			shown ? "is-on" : "",
+			className
+		].filter(Boolean).join(" "),
+		style: { "--mark-color": color },
+		children
+	});
+}
+/** A quick burst of confetti when the slide (or its click) arrives. */
+function Confetti({ at, count = 140, duration = 2200 }) {
+	const { shown, current } = useClick(at !== void 0 ? { at } : { at: "+0" });
+	const slide = useSlideOptional();
+	const canvas = useRef(null);
+	const fire = at !== void 0 ? shown && current : !!slide?.active;
+	useEffect(() => {
+		const c = canvas.current;
+		if (!c || !fire) return;
+		return burstConfetti(c, {
+			count,
+			duration
+		});
+	}, [
+		fire,
+		count,
+		duration
+	]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvas,
+		className: "deck-confetti",
+		"aria-hidden": true
+	});
+}
+/** A QR code, rendered locally. */
+function Qr({ value, size = 240, className }) {
+	const [src, setSrc] = useState("");
+	useEffect(() => {
+		let alive = true;
+		import("qrcode").then(({ default: QRCode }) => QRCode.toDataURL(value, {
+			width: size,
+			margin: 1,
+			errorCorrectionLevel: "M"
+		})).then((url) => alive && setSrc(url)).catch(() => {});
+		return () => {
+			alive = false;
+		};
+	}, [value, size]);
+	return src ? /* @__PURE__ */ jsx("img", {
+		src,
+		width: size,
+		height: size,
+		alt: `QR code for ${value}`,
+		className: ["deck-qr", className].filter(Boolean).join(" ")
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "deck-qr",
+		style: {
+			width: size,
+			height: size
+		}
+	});
+}
+//#endregion
+export { Absolute, Anchor, Arrow, Audio, Badge, Callout, Center, Col, Cols, Confetti, Counter, Encrypted, FitText, Frame, Grid, Iframe, Image, Kbd, Link, Mark, Mermaid, Notes, Qr, Spacer, Stack, Stretch, Tex, Timer, Toc, Transform, Tweet, Typewriter, Video, Youtube };

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+import { After, Click, Clicks, Fragment, Li, Ol, Ul } from "./Click.js";
+import { Code, MagicMove } from "./Code.js";
+import { Absolute, Anchor, Arrow, Audio, Badge, Callout, Center, Col, Cols, Confetti, Counter, Encrypted, FitText, Frame, Grid, Iframe, Image, Kbd, Link, Mark, Mermaid, Notes, Qr, Spacer, Stack, Stretch, Tex, Timer, Toc, Transform, Tweet, Typewriter, Video, Youtube } from "./content.js";
+import { Motion } from "./Motion.js";
+import { Term, TermProps, TermReadout, Terms } from "./Term.js";
+import { Sketch, SketchProps, SketchStep } from "./Sketch.js";
+import { Background } from "./Background.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud } from "../live/components.js";
+import { Blob, Chip, Divider, Glass, Glow, GradientText, Halo, Icon, Ribbon, Shimmer, Tilt } from "./bling.js";
+export { Absolute, After, Anchor, Arrow, Audio, Background, Badge, Blob, Callout, Center, Chip, Click, Clicks, Code, Col, Cols, Confetti, Counter, Divider, Encrypted, FitText, Fragment, Frame, Glass, Glow, GradientText, Grid, Halo, Icon, Iframe, Image, Kbd, Leaderboard, Li, Link, MagicMove, Mark, Tex as Math, Mermaid, Motion, Notes, Ol, Pace, Poll, Presence, Qr, QrJoin, Questions, Quiz, Reactions, Ribbon, Shimmer, Sketch, type SketchProps, type SketchStep, Spacer, Stack, Stretch, Term, type TermProps, TermReadout, Terms, Tex, Tilt, Timer, Toc, Transform, Tweet, Typewriter, Ul, Video, WordCloud, Youtube, Li as li, Ol as ol, Ul as ul };