@reslide-dev/core 0.2.0 → 0.2.2

package/dist/Mermaid-CUCMRIkQ.mjs

@@ -0,0 +1,1779 @@
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ClickNavigation.tsx
+/**
+* Invisible click zones on the left/right edges of the slide.
+* Clicking the left ~15% goes to the previous slide,
+* clicking the right ~15% goes to the next slide.
+* Shows a subtle arrow indicator on hover.
+*/
+function ClickNavigation({ onPrev, onNext, disabled }) {
+	if (disabled) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(NavZone, {
+		direction: "prev",
+		onClick: onPrev
+	}), /* @__PURE__ */ jsx(NavZone, {
+		direction: "next",
+		onClick: onNext
+	})] });
+}
+function NavZone({ direction, onClick }) {
+	const [hovered, setHovered] = useState(false);
+	const isPrev = direction === "prev";
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: useCallback((e) => {
+			e.stopPropagation();
+			onClick();
+		}, [onClick]),
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		"aria-label": isPrev ? "Previous slide" : "Next slide",
+		style: {
+			position: "absolute",
+			top: 0,
+			bottom: 0,
+			[isPrev ? "left" : "right"]: 0,
+			width: "15%",
+			background: "none",
+			border: "none",
+			cursor: "pointer",
+			zIndex: 20,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: isPrev ? "flex-start" : "flex-end",
+			padding: "0 1.5rem",
+			opacity: hovered ? 1 : 0,
+			transition: "opacity 0.2s ease"
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "32",
+			height: "32",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			style: {
+				color: "var(--slide-text, #1a1a1a)",
+				opacity: .4,
+				filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))",
+				transform: isPrev ? "none" : "rotate(180deg)"
+			},
+			children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+		})
+	});
+}
+//#endregion
+//#region src/context.ts
+const DeckContext = createContext(null);
+function useDeck() {
+	const ctx = useContext(DeckContext);
+	if (!ctx) throw new Error("useDeck must be used within a <Deck> component");
+	return ctx;
+}
+//#endregion
+//#region src/DrawingLayer.tsx
+/**
+* Canvas-based freehand drawing overlay for presentations.
+* Drawings are stored per slide and persist across navigation.
+* Toggle with `d` key, clear current slide with `c` key.
+*/
+function DrawingLayer({ active, currentSlide, color = "#ef4444", width = 3 }) {
+	const canvasRef = useRef(null);
+	const [isDrawing, setIsDrawing] = useState(false);
+	const lastPoint = useRef(null);
+	const drawingsRef = useRef(/* @__PURE__ */ new Map());
+	const prevSlideRef = useRef(currentSlide);
+	const getCanvasSize = useCallback(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return {
+			w: 0,
+			h: 0
+		};
+		return {
+			w: canvas.width,
+			h: canvas.height
+		};
+	}, []);
+	const saveCurrentSlide = useCallback((slideIndex) => {
+		const canvas = canvasRef.current;
+		const ctx = canvas?.getContext("2d");
+		if (!ctx || !canvas) return;
+		const { w, h } = getCanvasSize();
+		if (w === 0 || h === 0) return;
+		const imageData = ctx.getImageData(0, 0, w, h);
+		if (imageData.data.some((_, i) => i % 4 === 3 && imageData.data[i] > 0)) drawingsRef.current.set(slideIndex, imageData);
+		else drawingsRef.current.delete(slideIndex);
+	}, [getCanvasSize]);
+	const restoreSlide = useCallback((slideIndex) => {
+		const canvas = canvasRef.current;
+		const ctx = canvas?.getContext("2d");
+		if (!ctx || !canvas) return;
+		const { w, h } = getCanvasSize();
+		ctx.clearRect(0, 0, w, h);
+		const saved = drawingsRef.current.get(slideIndex);
+		if (saved && saved.width === w && saved.height === h) ctx.putImageData(saved, 0, 0);
+	}, [getCanvasSize]);
+	useEffect(() => {
+		if (prevSlideRef.current !== currentSlide) {
+			saveCurrentSlide(prevSlideRef.current);
+			restoreSlide(currentSlide);
+			prevSlideRef.current = currentSlide;
+		}
+	}, [
+		currentSlide,
+		saveCurrentSlide,
+		restoreSlide
+	]);
+	const getPoint = useCallback((e) => {
+		const canvas = canvasRef.current;
+		const rect = canvas.getBoundingClientRect();
+		return {
+			x: (e.clientX - rect.left) * (canvas.width / rect.width),
+			y: (e.clientY - rect.top) * (canvas.height / rect.height)
+		};
+	}, []);
+	const startDraw = useCallback((e) => {
+		if (!active) return;
+		setIsDrawing(true);
+		lastPoint.current = getPoint(e);
+	}, [active, getPoint]);
+	const draw = useCallback((e) => {
+		if (!isDrawing || !active) return;
+		const ctx = canvasRef.current?.getContext("2d");
+		if (!ctx || !lastPoint.current) return;
+		const point = getPoint(e);
+		ctx.beginPath();
+		ctx.moveTo(lastPoint.current.x, lastPoint.current.y);
+		ctx.lineTo(point.x, point.y);
+		ctx.strokeStyle = color;
+		ctx.lineWidth = width;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		ctx.stroke();
+		lastPoint.current = point;
+	}, [
+		isDrawing,
+		active,
+		color,
+		width,
+		getPoint
+	]);
+	const stopDraw = useCallback(() => {
+		setIsDrawing(false);
+		lastPoint.current = null;
+	}, []);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const resize = () => {
+			const rect = canvas.parentElement?.getBoundingClientRect();
+			if (!rect) return;
+			const newWidth = rect.width * window.devicePixelRatio;
+			const newHeight = rect.height * window.devicePixelRatio;
+			if (canvas.width !== newWidth || canvas.height !== newHeight) {
+				saveCurrentSlide(currentSlide);
+				drawingsRef.current.clear();
+				canvas.width = newWidth;
+				canvas.height = newHeight;
+			}
+		};
+		resize();
+		window.addEventListener("resize", resize);
+		return () => window.removeEventListener("resize", resize);
+	}, [currentSlide, saveCurrentSlide]);
+	useEffect(() => {
+		if (!active) return;
+		function handleKey(e) {
+			if (e.key === "c") {
+				const canvas = canvasRef.current;
+				const ctx = canvas?.getContext("2d");
+				if (ctx && canvas) {
+					ctx.clearRect(0, 0, canvas.width, canvas.height);
+					drawingsRef.current.delete(currentSlide);
+				}
+			}
+		}
+		window.addEventListener("keydown", handleKey);
+		return () => window.removeEventListener("keydown", handleKey);
+	}, [active, currentSlide]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		onMouseDown: startDraw,
+		onMouseMove: draw,
+		onMouseUp: stopDraw,
+		onMouseLeave: stopDraw,
+		style: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			cursor: active ? "crosshair" : "default",
+			pointerEvents: active ? "auto" : "none",
+			zIndex: 50
+		}
+	});
+}
+//#endregion
+//#region src/use-presenter.ts
+const CHANNEL_NAME = "reslide-presenter";
+/**
+* Hook for syncing presentation state across windows via BroadcastChannel.
+* The main presentation window broadcasts state changes and listens for
+* navigation commands from the presenter window.
+*/
+function usePresenterSync(currentSlide, clickStep, handlers) {
+	const channelRef = useRef(null);
+	useEffect(() => {
+		if (typeof BroadcastChannel === "undefined") return;
+		const channel = new BroadcastChannel(CHANNEL_NAME);
+		channelRef.current = channel;
+		if (handlers) channel.onmessage = (e) => {
+			if (e.data.type === "navigate") switch (e.data.action) {
+				case "next":
+					handlers.next();
+					break;
+				case "prev":
+					handlers.prev();
+					break;
+				case "goTo":
+					if (e.data.slideIndex != null) handlers.goTo(e.data.slideIndex);
+					break;
+			}
+		};
+		return () => {
+			channel.close();
+			channelRef.current = null;
+		};
+	}, [handlers]);
+	useEffect(() => {
+		channelRef.current?.postMessage({
+			type: "sync",
+			currentSlide,
+			clickStep
+		});
+	}, [currentSlide, clickStep]);
+}
+/**
+* Hook for the presenter window to listen for sync messages and send
+* navigation commands back to the main window.
+*/
+function usePresenterChannel(onSync) {
+	const channelRef = useRef(null);
+	const onSyncRef = useRef(onSync);
+	onSyncRef.current = onSync;
+	useEffect(() => {
+		if (typeof BroadcastChannel === "undefined") return;
+		const channel = new BroadcastChannel(CHANNEL_NAME);
+		channelRef.current = channel;
+		channel.onmessage = (e) => {
+			if (e.data.type === "sync") onSyncRef.current(e.data);
+		};
+		return () => {
+			channel.close();
+			channelRef.current = null;
+		};
+	}, []);
+	return {
+		next: useCallback(() => {
+			channelRef.current?.postMessage({
+				type: "navigate",
+				action: "next"
+			});
+		}, []),
+		prev: useCallback(() => {
+			channelRef.current?.postMessage({
+				type: "navigate",
+				action: "prev"
+			});
+		}, []),
+		goTo: useCallback((index) => {
+			channelRef.current?.postMessage({
+				type: "navigate",
+				action: "goTo",
+				slideIndex: index
+			});
+		}, [])
+	};
+}
+/**
+* Opens the presenter window at the /presenter route.
+*/
+function openPresenterWindow() {
+	const url = new URL(window.location.href);
+	url.searchParams.set("presenter", "true");
+	window.open(url.toString(), "reslide-presenter", "width=1024,height=768,menubar=no,toolbar=no");
+}
+/**
+* Check if the current window is the presenter view.
+*/
+function isPresenterView() {
+	if (typeof window === "undefined") return false;
+	return new URLSearchParams(window.location.search).get("presenter") === "true";
+}
+//#endregion
+//#region src/NavigationBar.tsx
+/**
+* Slidev-style navigation bar that appears on hover at the bottom of the presentation.
+* Provides buttons for prev/next, overview, fullscreen, presenter, and drawing modes.
+*/
+function NavigationBar({ isDrawing, onToggleDrawing }) {
+	const { currentSlide, totalSlides, clickStep, totalClickSteps, isOverview, isFullscreen, next, prev, toggleOverview, toggleFullscreen } = useDeck();
+	const [visible, setVisible] = useState(false);
+	const timerRef = useRef(null);
+	const barRef = useRef(null);
+	const showBar = useCallback(() => {
+		setVisible(true);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setVisible(false), 3e3);
+	}, []);
+	useEffect(() => {
+		function handleMouseMove(e) {
+			const threshold = window.innerHeight - 80;
+			if (e.clientY > threshold) showBar();
+		}
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => window.removeEventListener("mousemove", handleMouseMove);
+	}, [showBar]);
+	const handleMouseEnter = () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		setVisible(true);
+	};
+	const handleMouseLeave = () => {
+		timerRef.current = setTimeout(() => setVisible(false), 1500);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: barRef,
+		className: "reslide-navbar",
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		style: {
+			position: "absolute",
+			bottom: 0,
+			left: "50%",
+			transform: `translateX(-50%) translateY(${visible ? "0" : "100%"})`,
+			display: "flex",
+			alignItems: "center",
+			gap: "0.25rem",
+			padding: "0.375rem 0.75rem",
+			backgroundColor: "rgba(0, 0, 0, 0.7)",
+			backdropFilter: "blur(8px)",
+			borderRadius: "0.5rem 0.5rem 0 0",
+			transition: "transform 0.25s ease, opacity 0.25s ease",
+			opacity: visible ? 1 : 0,
+			zIndex: 200,
+			color: "#e2e8f0",
+			fontSize: "0.8125rem",
+			fontFamily: "system-ui, sans-serif",
+			fontVariantNumeric: "tabular-nums",
+			pointerEvents: visible ? "auto" : "none"
+		},
+		children: [
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: prev,
+				title: "Previous (←)",
+				disabled: isOverview,
+				children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "left" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					padding: "0 0.5rem",
+					userSelect: "none",
+					whiteSpace: "nowrap"
+				},
+				children: [
+					currentSlide + 1,
+					" / ",
+					totalSlides,
+					clickStep > 0 && totalClickSteps > 0 && /* @__PURE__ */ jsxs("span", {
+						style: {
+							opacity: .6,
+							marginLeft: "0.25rem"
+						},
+						children: [
+							"(",
+							clickStep,
+							"/",
+							totalClickSteps,
+							")"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: next,
+				title: "Next (→ / Space)",
+				disabled: isOverview,
+				children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "right" })
+			}),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: toggleOverview,
+				title: "Overview (Esc)",
+				active: isOverview,
+				children: /* @__PURE__ */ jsx(GridIcon, {})
+			}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: toggleFullscreen,
+				title: "Fullscreen (f)",
+				active: isFullscreen,
+				children: /* @__PURE__ */ jsx(FullscreenIcon, { expanded: isFullscreen })
+			}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: openPresenterWindow,
+				title: "Presenter (p)",
+				children: /* @__PURE__ */ jsx(PresenterIcon, {})
+			}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: onToggleDrawing,
+				title: "Drawing (d)",
+				active: isDrawing,
+				children: /* @__PURE__ */ jsx(PenIcon, {})
+			})
+		]
+	});
+}
+function NavButton({ children, onClick, title, active, disabled }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		title,
+		disabled,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "2rem",
+			height: "2rem",
+			background: active ? "rgba(255,255,255,0.2)" : "none",
+			border: "none",
+			borderRadius: "0.25rem",
+			cursor: disabled ? "default" : "pointer",
+			color: active ? "#fff" : "#cbd5e1",
+			opacity: disabled ? .4 : 1,
+			transition: "background 0.15s, color 0.15s",
+			padding: 0
+		},
+		onMouseEnter: (e) => {
+			if (!disabled) e.currentTarget.style.background = "rgba(255,255,255,0.15)";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.background = active ? "rgba(255,255,255,0.2)" : "none";
+		},
+		children
+	});
+}
+function Divider() {
+	return /* @__PURE__ */ jsx("div", { style: {
+		width: 1,
+		height: "1.25rem",
+		backgroundColor: "rgba(255,255,255,0.2)",
+		margin: "0 0.25rem"
+	} });
+}
+function ArrowIcon({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: direction === "left" ? /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) : /* @__PURE__ */ jsx("polyline", { points: "9 6 15 12 9 18" })
+	});
+}
+function GridIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "3",
+				width: "7",
+				height: "7"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "14",
+				y: "3",
+				width: "7",
+				height: "7"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "14",
+				width: "7",
+				height: "7"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "14",
+				y: "14",
+				width: "7",
+				height: "7"
+			})
+		]
+	});
+}
+function FullscreenIcon({ expanded }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: expanded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+			/* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "14",
+				y1: "10",
+				x2: "21",
+				y2: "3"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "3",
+				y1: "21",
+				x2: "10",
+				y2: "14"
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+			/* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "21",
+				y1: "3",
+				x2: "14",
+				y2: "10"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "3",
+				y1: "21",
+				x2: "10",
+				y2: "14"
+			})
+		] })
+	});
+}
+function PresenterIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "2",
+				y: "3",
+				width: "20",
+				height: "14",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "8",
+				y1: "21",
+				x2: "16",
+				y2: "21"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				y1: "17",
+				x2: "12",
+				y2: "21"
+			})
+		]
+	});
+}
+function PenIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 19l7-7 3 3-7 7-3-3z" }),
+			/* @__PURE__ */ jsx("path", { d: "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" }),
+			/* @__PURE__ */ jsx("path", { d: "M2 2l7.586 7.586" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "11",
+				cy: "11",
+				r: "2"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/slide-context.ts
+const SlideIndexContext = createContext(null);
+function useSlideIndex() {
+	const index = useContext(SlideIndexContext);
+	if (index == null) throw new Error("useSlideIndex must be used within a <Slide> component");
+	return index;
+}
+//#endregion
+//#region src/PrintView.tsx
+/**
+* Renders all slides vertically for print/PDF export.
+* Use with @media print CSS to generate PDFs via browser print.
+*/
+function PrintView({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-print-view",
+		children: Children.toArray(children).map((slide, i) => /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+			value: i,
+			children: slide
+		}, i))
+	});
+}
+//#endregion
+//#region src/ProgressBar.tsx
+function ProgressBar() {
+	const { currentSlide, totalSlides, clickStep, totalClickSteps } = useDeck();
+	const slideProgress = totalSlides <= 1 ? 1 : currentSlide / (totalSlides - 1);
+	const clickFraction = totalSlides <= 1 ? 0 : totalClickSteps > 0 ? clickStep / totalClickSteps * (1 / (totalSlides - 1)) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-progress-bar",
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "3px",
+			zIndex: 100
+		},
+		children: /* @__PURE__ */ jsx("div", { style: {
+			height: "100%",
+			width: `${Math.min(slideProgress + clickFraction, 1) * 100}%`,
+			backgroundColor: "var(--slide-accent, #3b82f6)",
+			transition: "width 0.3s ease"
+		} })
+	});
+}
+//#endregion
+//#region src/SlideNumber.tsx
+/**
+* Displays the current slide number in the bottom-right corner.
+* Automatically reads state from DeckContext.
+*/
+function SlideNumber() {
+	const { currentSlide, totalSlides } = useDeck();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "reslide-slide-number",
+		style: {
+			position: "absolute",
+			bottom: "0.75rem",
+			right: "1rem",
+			fontSize: "0.75rem",
+			fontFamily: "system-ui, sans-serif",
+			fontVariantNumeric: "tabular-nums",
+			color: "var(--slide-text, #1a1a1a)",
+			opacity: .4,
+			pointerEvents: "none",
+			zIndex: 10
+		},
+		children: [
+			currentSlide + 1,
+			" / ",
+			totalSlides
+		]
+	});
+}
+//#endregion
+//#region src/SlideTransition.tsx
+const DURATION = 300;
+function SlideTransition({ children, currentSlide, transition }) {
+	const slides = Children.toArray(children);
+	const [displaySlide, setDisplaySlide] = useState(currentSlide);
+	const [prevSlide, setPrevSlide] = useState(null);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const prevCurrentRef = useRef(currentSlide);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		if (currentSlide === prevCurrentRef.current) return;
+		const from = prevCurrentRef.current;
+		prevCurrentRef.current = currentSlide;
+		if (transition === "none") {
+			setDisplaySlide(currentSlide);
+			return;
+		}
+		setPrevSlide(from);
+		setDisplaySlide(currentSlide);
+		setIsAnimating(true);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			setIsAnimating(false);
+			setPrevSlide(null);
+		}, DURATION);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [currentSlide, transition]);
+	const resolvedTransition = resolveTransition(transition, prevSlide, displaySlide);
+	if (transition === "none" || !isAnimating) return /* @__PURE__ */ jsx("div", {
+		className: "reslide-transition-container",
+		children: /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+			value: displaySlide,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "reslide-transition-slide",
+				children: slides[displaySlide]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "reslide-transition-container",
+		children: [prevSlide != null && /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+			value: prevSlide,
+			children: /* @__PURE__ */ jsx("div", {
+				className: `reslide-transition-slide reslide-transition-${resolvedTransition}-exit`,
+				children: slides[prevSlide]
+			})
+		}), /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+			value: displaySlide,
+			children: /* @__PURE__ */ jsx("div", {
+				className: `reslide-transition-slide reslide-transition-${resolvedTransition}-enter`,
+				children: slides[displaySlide]
+			})
+		})]
+	});
+}
+function resolveTransition(transition, from, to) {
+	if (transition !== "slide-left" && transition !== "slide-right") return transition;
+	if (from == null) return transition;
+	const goingForward = to > from;
+	if (transition === "slide-left") return goingForward ? "slide-left" : "slide-right";
+	return goingForward ? "slide-right" : "slide-left";
+}
+//#endregion
+//#region src/use-fullscreen.ts
+function useFullscreen(ref) {
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	useEffect(() => {
+		function handleChange() {
+			setIsFullscreen(document.fullscreenElement != null);
+		}
+		document.addEventListener("fullscreenchange", handleChange);
+		return () => document.removeEventListener("fullscreenchange", handleChange);
+	}, []);
+	return {
+		isFullscreen,
+		toggleFullscreen: useCallback(() => {
+			if (!ref.current) return;
+			if (document.fullscreenElement) document.exitFullscreen();
+			else ref.current.requestFullscreen();
+		}, [ref])
+	};
+}
+//#endregion
+//#region src/Deck.tsx
+function Deck({ children, transition = "none" }) {
+	const containerRef = useRef(null);
+	const [currentSlide, setCurrentSlide] = useState(0);
+	const [clickStep, setClickStep] = useState(0);
+	const [isOverview, setIsOverview] = useState(false);
+	const [isDrawing, setIsDrawing] = useState(false);
+	const [isPrinting, setIsPrinting] = useState(false);
+	const [clickStepsMap, setClickStepsMap] = useState({});
+	const { isFullscreen, toggleFullscreen } = useFullscreen(containerRef);
+	const totalSlides = Children.count(children);
+	const totalClickSteps = clickStepsMap[currentSlide] ?? 0;
+	const registerClickSteps = useCallback((slideIndex, count) => {
+		setClickStepsMap((prev) => {
+			if (prev[slideIndex] === count) return prev;
+			return {
+				...prev,
+				[slideIndex]: count
+			};
+		});
+	}, []);
+	const next = useCallback(() => {
+		if (isOverview) return;
+		if (clickStep < totalClickSteps) setClickStep((s) => s + 1);
+		else if (currentSlide < totalSlides - 1) {
+			setCurrentSlide((s) => s + 1);
+			setClickStep(0);
+		}
+	}, [
+		isOverview,
+		clickStep,
+		totalClickSteps,
+		currentSlide,
+		totalSlides
+	]);
+	const prev = useCallback(() => {
+		if (isOverview) return;
+		if (clickStep > 0) setClickStep((s) => s - 1);
+		else if (currentSlide > 0) {
+			const prevSlide = currentSlide - 1;
+			setCurrentSlide(prevSlide);
+			setClickStep(clickStepsMap[prevSlide] ?? 0);
+		}
+	}, [
+		isOverview,
+		clickStep,
+		currentSlide,
+		clickStepsMap
+	]);
+	const goTo = useCallback((slideIndex) => {
+		if (slideIndex >= 0 && slideIndex < totalSlides) {
+			setCurrentSlide(slideIndex);
+			setClickStep(0);
+			if (isOverview) setIsOverview(false);
+		}
+	}, [totalSlides, isOverview]);
+	usePresenterSync(currentSlide, clickStep, useMemo(() => ({
+		next,
+		prev,
+		goTo
+	}), [
+		next,
+		prev,
+		goTo
+	]));
+	const toggleOverview = useCallback(() => {
+		setIsOverview((v) => !v);
+	}, []);
+	useEffect(() => {
+		function handleKeyDown(e) {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+			switch (e.key) {
+				case "ArrowRight":
+				case " ":
+					e.preventDefault();
+					next();
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					prev();
+					break;
+				case "Escape":
+					if (!document.fullscreenElement) {
+						e.preventDefault();
+						toggleOverview();
+					}
+					break;
+				case "f":
+					e.preventDefault();
+					toggleFullscreen();
+					break;
+				case "p":
+					e.preventDefault();
+					openPresenterWindow();
+					break;
+				case "d":
+					e.preventDefault();
+					setIsDrawing((v) => !v);
+					break;
+			}
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		next,
+		prev,
+		toggleOverview,
+		toggleFullscreen
+	]);
+	useEffect(() => {
+		function onBeforePrint() {
+			setIsPrinting(true);
+		}
+		function onAfterPrint() {
+			setIsPrinting(false);
+		}
+		window.addEventListener("beforeprint", onBeforePrint);
+		window.addEventListener("afterprint", onAfterPrint);
+		return () => {
+			window.removeEventListener("beforeprint", onBeforePrint);
+			window.removeEventListener("afterprint", onAfterPrint);
+		};
+	}, []);
+	const contextValue = useMemo(() => ({
+		currentSlide,
+		totalSlides,
+		clickStep,
+		totalClickSteps,
+		isOverview,
+		isFullscreen,
+		next,
+		prev,
+		goTo,
+		toggleOverview,
+		toggleFullscreen,
+		registerClickSteps
+	}), [
+		currentSlide,
+		totalSlides,
+		clickStep,
+		totalClickSteps,
+		isOverview,
+		isFullscreen,
+		next,
+		prev,
+		goTo,
+		toggleOverview,
+		toggleFullscreen,
+		registerClickSteps
+	]);
+	return /* @__PURE__ */ jsx(DeckContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: "reslide-deck",
+			style: {
+				position: "relative",
+				width: "100%",
+				height: "100%",
+				overflow: "hidden",
+				backgroundColor: "var(--slide-bg, #fff)",
+				color: "var(--slide-text, #1a1a1a)"
+			},
+			children: [
+				isPrinting ? /* @__PURE__ */ jsx(PrintView, { children }) : isOverview ? /* @__PURE__ */ jsx(OverviewGrid, {
+					totalSlides,
+					goTo,
+					children
+				}) : /* @__PURE__ */ jsx(SlideTransition, {
+					currentSlide,
+					transition,
+					children
+				}),
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ClickNavigation, {
+					onPrev: prev,
+					onNext: next,
+					disabled: isDrawing
+				}),
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ProgressBar, {}),
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(SlideNumber, {}),
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, {
+					active: isDrawing,
+					currentSlide
+				}),
+				!isPrinting && /* @__PURE__ */ jsx(NavigationBar, {
+					isDrawing,
+					onToggleDrawing: () => setIsDrawing((v) => !v)
+				})
+			]
+		})
+	});
+}
+function OverviewGrid({ children, totalSlides, goTo }) {
+	const slides = Children.toArray(children);
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-overview",
+		style: {
+			display: "grid",
+			gridTemplateColumns: `repeat(${Math.ceil(Math.sqrt(totalSlides))}, 1fr)`,
+			gap: "1rem",
+			padding: "1rem",
+			width: "100%",
+			height: "100%",
+			overflow: "auto"
+		},
+		children: slides.map((slide, i) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => goTo(i),
+			style: {
+				border: "1px solid var(--slide-accent, #3b82f6)",
+				borderRadius: "0.5rem",
+				overflow: "hidden",
+				cursor: "pointer",
+				background: "var(--slide-bg, #fff)",
+				aspectRatio: "16 / 9",
+				padding: 0,
+				position: "relative"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					transform: "scale(0.25)",
+					transformOrigin: "top left",
+					width: "400%",
+					height: "400%",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+					value: i,
+					children: slide
+				})
+			})
+		}, i))
+	});
+}
+//#endregion
+//#region src/Slide.tsx
+const baseStyle = {
+	width: "100%",
+	height: "100%",
+	display: "flex",
+	boxSizing: "border-box"
+};
+function isSlotRight(child) {
+	return isValidElement(child) && typeof child.type === "function" && "__reslideSlot" in child.type && child.type.__reslideSlot === "right";
+}
+function splitChildren(children) {
+	const left = [];
+	const right = [];
+	let inRight = false;
+	Children.forEach(children, (child) => {
+		if (isSlotRight(child)) {
+			inRight = true;
+			right.push(child.props.children);
+			return;
+		}
+		if (inRight) right.push(child);
+		else left.push(child);
+	});
+	return {
+		left,
+		right
+	};
+}
+function Slide({ children, layout = "default", image, className, style }) {
+	const cls = `reslide-slide reslide-layout-${layout}${className ? ` ${className}` : ""}`;
+	switch (layout) {
+		case "center": return /* @__PURE__ */ jsx("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				textAlign: "center",
+				padding: "3rem 4rem",
+				...style
+			},
+			children
+		});
+		case "two-cols": {
+			const { left, right } = splitChildren(children);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cls,
+				style: {
+					...baseStyle,
+					flexDirection: "row",
+					gap: "2rem",
+					padding: "3rem 4rem",
+					...style
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: left
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: right
+				})]
+			});
+		}
+		case "image-right": return /* @__PURE__ */ jsxs("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "row",
+				...style
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					padding: "3rem 2rem 3rem 4rem",
+					overflow: "auto"
+				},
+				children
+			}), image && /* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				backgroundImage: `url(${image})`,
+				backgroundSize: "cover",
+				backgroundPosition: "center"
+			} })]
+		});
+		case "image-left": return /* @__PURE__ */ jsxs("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "row",
+				...style
+			},
+			children: [image && /* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				backgroundImage: `url(${image})`,
+				backgroundSize: "cover",
+				backgroundPosition: "center"
+			} }), /* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					padding: "3rem 4rem 3rem 2rem",
+					overflow: "auto"
+				},
+				children
+			})]
+		});
+		case "section": return /* @__PURE__ */ jsx("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				textAlign: "center",
+				padding: "3rem 4rem",
+				backgroundColor: "var(--slide-accent, #3b82f6)",
+				color: "var(--slide-section-text, #fff)",
+				...style
+			},
+			children
+		});
+		case "quote": return /* @__PURE__ */ jsx("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "column",
+				justifyContent: "center",
+				padding: "3rem 6rem",
+				...style
+			},
+			children: /* @__PURE__ */ jsx("blockquote", {
+				style: {
+					fontSize: "1.5em",
+					fontStyle: "italic",
+					borderLeft: "4px solid var(--slide-accent, #3b82f6)",
+					paddingLeft: "1.5rem",
+					margin: 0
+				},
+				children
+			})
+		});
+		default: return /* @__PURE__ */ jsx("div", {
+			className: cls,
+			style: {
+				...baseStyle,
+				flexDirection: "column",
+				padding: "3rem 4rem",
+				...style
+			},
+			children
+		});
+	}
+}
+//#endregion
+//#region src/Click.tsx
+function Click({ children, at }) {
+	const { clickStep } = useDeck();
+	const visible = clickStep >= (at ?? 1);
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-click",
+		style: {
+			opacity: visible ? 1 : 0,
+			visibility: visible ? "visible" : "hidden",
+			pointerEvents: visible ? "auto" : "none",
+			transition: "opacity 0.3s ease, visibility 0.3s ease"
+		},
+		children
+	});
+}
+/**
+* Register click steps for the current slide.
+* Automatically reads the slide index from SlideIndexContext.
+* If slideIndex prop is provided, it takes precedence (for backwards compatibility).
+*/
+function ClickSteps({ count, slideIndex }) {
+	const { registerClickSteps } = useDeck();
+	const contextIndex = useContext(SlideIndexContext);
+	const resolvedIndex = slideIndex ?? contextIndex;
+	useEffect(() => {
+		if (resolvedIndex != null) registerClickSteps(resolvedIndex, count);
+	}, [
+		resolvedIndex,
+		count,
+		registerClickSteps
+	]);
+	return null;
+}
+//#endregion
+//#region src/Mark.tsx
+const markStyles = {
+	highlight: (colorName, resolvedColor) => ({
+		backgroundColor: `var(--mark-${colorName}, ${resolvedColor})`,
+		padding: "0.1em 0.2em",
+		borderRadius: "0.2em"
+	}),
+	underline: (colorName, resolvedColor) => ({
+		textDecoration: "underline",
+		textDecorationColor: `var(--mark-${colorName}, ${resolvedColor})`,
+		textDecorationThickness: "0.15em",
+		textUnderlineOffset: "0.15em"
+	}),
+	circle: (colorName, resolvedColor) => ({
+		border: `0.15em solid var(--mark-${colorName}, ${resolvedColor})`,
+		borderRadius: "50%",
+		padding: "0.1em 0.3em"
+	})
+};
+const defaultColors = {
+	orange: "#fb923c",
+	red: "#ef4444",
+	blue: "#3b82f6",
+	green: "#22c55e",
+	yellow: "#facc15",
+	purple: "#a855f7"
+};
+function Mark({ children, type = "highlight", color = "yellow" }) {
+	const resolvedColor = defaultColors[color] ?? color;
+	const styleFn = markStyles[type] ?? markStyles.highlight;
+	return /* @__PURE__ */ jsx("span", {
+		className: `reslide-mark reslide-mark-${type}`,
+		style: styleFn(color, resolvedColor),
+		children
+	});
+}
+//#endregion
+//#region src/Notes.tsx
+/**
+* Speaker notes. Hidden during normal presentation,
+* visible in overview mode.
+*/
+function Notes({ children }) {
+	const { isOverview } = useDeck();
+	if (!isOverview) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-notes",
+		style: {
+			marginTop: "auto",
+			padding: "0.75rem",
+			fontSize: "0.75rem",
+			color: "var(--slide-text, #1a1a1a)",
+			opacity: .7,
+			borderTop: "1px solid currentColor"
+		},
+		children
+	});
+}
+//#endregion
+//#region src/Slot.tsx
+/**
+* Marks content as belonging to the right column in a two-cols layout.
+* Used by remarkSlides to separate `::right` content.
+*/
+function SlotRight({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+SlotRight.displayName = "SlotRight";
+SlotRight.__reslideSlot = "right";
+//#endregion
+//#region src/PresenterView.tsx
+/**
+* Presenter view that syncs with the main presentation window.
+* Shows: current slide, next slide preview, notes, and timer.
+* Supports bidirectional control — navigate from this window to
+* drive the main presentation.
+*/
+function PresenterView({ children, notes }) {
+	const [currentSlide, setCurrentSlide] = useState(0);
+	const [clickStep, setClickStep] = useState(0);
+	const [elapsed, setElapsed] = useState(0);
+	const slides = Children.toArray(children);
+	const totalSlides = slides.length;
+	const { next, prev, goTo } = usePresenterChannel((msg) => {
+		setCurrentSlide(msg.currentSlide);
+		setClickStep(msg.clickStep);
+	});
+	useEffect(() => {
+		function handleKeyDown(e) {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+			switch (e.key) {
+				case "ArrowRight":
+				case " ":
+					e.preventDefault();
+					next();
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					prev();
+					break;
+			}
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [next, prev]);
+	useEffect(() => {
+		const start = Date.now();
+		const interval = setInterval(() => {
+			setElapsed(Math.floor((Date.now() - start) / 1e3));
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, []);
+	const formatTime = (seconds) => {
+		const m = Math.floor(seconds / 60);
+		const s = seconds % 60;
+		return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+	};
+	const noopReg = useCallback((_i, _c) => {}, []);
+	const noop = useCallback(() => {}, []);
+	const contextValue = useMemo(() => ({
+		currentSlide,
+		totalSlides,
+		clickStep,
+		totalClickSteps: 0,
+		isOverview: false,
+		isFullscreen: false,
+		next,
+		prev,
+		goTo,
+		toggleOverview: noop,
+		toggleFullscreen: noop,
+		registerClickSteps: noopReg
+	}), [
+		currentSlide,
+		totalSlides,
+		clickStep,
+		next,
+		prev,
+		goTo,
+		noop,
+		noopReg
+	]);
+	return /* @__PURE__ */ jsx(DeckContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "2fr 1fr",
+				gridTemplateRows: "1fr auto",
+				width: "100%",
+				height: "100%",
+				gap: "0.75rem",
+				padding: "0.75rem",
+				backgroundColor: "#1a1a2e",
+				color: "#e2e8f0",
+				fontFamily: "system-ui, sans-serif",
+				boxSizing: "border-box"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						border: "2px solid #3b82f6",
+						borderRadius: "0.5rem",
+						overflow: "hidden",
+						position: "relative",
+						backgroundColor: "var(--slide-bg, #fff)",
+						color: "var(--slide-text, #1a1a1a)"
+					},
+					children: /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+						value: currentSlide,
+						children: slides[currentSlide]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "0.75rem",
+						minHeight: 0
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							flex: "0 0 40%",
+							border: "1px solid #334155",
+							borderRadius: "0.5rem",
+							overflow: "hidden",
+							opacity: .8,
+							backgroundColor: "var(--slide-bg, #fff)",
+							color: "var(--slide-text, #1a1a1a)"
+						},
+						children: currentSlide < totalSlides - 1 && /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+							value: currentSlide + 1,
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									transform: "scale(0.5)",
+									transformOrigin: "top left",
+									width: "200%",
+									height: "200%"
+								},
+								children: slides[currentSlide + 1]
+							})
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							overflow: "auto",
+							padding: "1rem",
+							backgroundColor: "#0f172a",
+							borderRadius: "0.5rem",
+							fontSize: "0.875rem",
+							lineHeight: 1.6
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontWeight: 600,
+								marginBottom: "0.5rem",
+								color: "#94a3b8"
+							},
+							children: "Notes"
+						}), notes?.[currentSlide] ?? /* @__PURE__ */ jsx("span", {
+							style: { color: "#64748b" },
+							children: "No notes for this slide"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						gridColumn: "1 / -1",
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						padding: "0.5rem 1rem",
+						backgroundColor: "#0f172a",
+						borderRadius: "0.5rem"
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "1.5rem",
+								fontVariantNumeric: "tabular-nums",
+								fontWeight: 700
+							},
+							children: formatTime(elapsed)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "0.5rem"
+							},
+							children: [
+								/* @__PURE__ */ jsx(PresenterNavButton, {
+									onClick: prev,
+									title: "Previous (←)",
+									children: "◀"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									style: {
+										fontSize: "1.125rem",
+										fontVariantNumeric: "tabular-nums"
+									},
+									children: [
+										currentSlide + 1,
+										" / ",
+										totalSlides,
+										clickStep > 0 && /* @__PURE__ */ jsxs("span", {
+											style: { color: "#94a3b8" },
+											children: [
+												" (click ",
+												clickStep,
+												")"
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsx(PresenterNavButton, {
+									onClick: next,
+									title: "Next (→ / Space)",
+									children: "▶"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", { style: { width: "5rem" } })
+					]
+				})
+			]
+		})
+	});
+}
+function PresenterNavButton({ children, onClick, title }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		title,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "2.25rem",
+			height: "2.25rem",
+			background: "rgba(255,255,255,0.1)",
+			border: "1px solid rgba(255,255,255,0.15)",
+			borderRadius: "0.375rem",
+			cursor: "pointer",
+			color: "#e2e8f0",
+			fontSize: "0.875rem",
+			transition: "background 0.15s"
+		},
+		onMouseEnter: (e) => {
+			e.currentTarget.style.background = "rgba(255,255,255,0.2)";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+		},
+		children
+	});
+}
+//#endregion
+//#region src/GlobalLayer.tsx
+/**
+* Global overlay layer that persists across all slides.
+* Use for headers, footers, logos, watermarks, or progress bars.
+*
+* Place inside <Deck> to render on every slide.
+*
+* @example
+* ```tsx
+* <Deck>
+*   <GlobalLayer position="above" style={{ bottom: 0 }}>
+*     <footer>My Company</footer>
+*   </GlobalLayer>
+*   <Slide>...</Slide>
+* </Deck>
+* ```
+*/
+function GlobalLayer({ children, position = "above", style }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `reslide-global-layer reslide-global-layer-${position}`,
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none",
+			zIndex: position === "above" ? 40 : 0,
+			...style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: { pointerEvents: "auto" },
+			children
+		})
+	});
+}
+GlobalLayer.displayName = "GlobalLayer";
+GlobalLayer.__reslideGlobalLayer = true;
+//#endregion
+//#region src/Draggable.tsx
+/**
+* A draggable element within a slide.
+* Click and drag to reposition during presentation.
+*/
+function Draggable({ children, x = 0, y = 0, style }) {
+	const [pos, setPos] = useState({
+		x: typeof x === "number" ? x : 0,
+		y: typeof y === "number" ? y : 0
+	});
+	const dragRef = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		className: "reslide-draggable",
+		onMouseDown: useCallback((e) => {
+			e.preventDefault();
+			dragRef.current = {
+				startX: e.clientX,
+				startY: e.clientY,
+				origX: pos.x,
+				origY: pos.y
+			};
+			function onMouseMove(me) {
+				if (!dragRef.current) return;
+				setPos({
+					x: dragRef.current.origX + (me.clientX - dragRef.current.startX),
+					y: dragRef.current.origY + (me.clientY - dragRef.current.startY)
+				});
+			}
+			function onMouseUp() {
+				dragRef.current = null;
+				window.removeEventListener("mousemove", onMouseMove);
+				window.removeEventListener("mouseup", onMouseUp);
+			}
+			window.addEventListener("mousemove", onMouseMove);
+			window.addEventListener("mouseup", onMouseUp);
+		}, [pos.x, pos.y]),
+		style: {
+			position: "absolute",
+			left: typeof x === "string" ? x : void 0,
+			top: typeof y === "string" ? y : void 0,
+			transform: `translate(${pos.x}px, ${pos.y}px)`,
+			cursor: "grab",
+			userSelect: "none",
+			zIndex: 30,
+			...style
+		},
+		children
+	});
+}
+//#endregion
+//#region src/Toc.tsx
+/**
+* Extract heading text (h1/h2) from a React element tree.
+* Traverses children recursively to find the first h1 or h2.
+*/
+function extractHeading(node) {
+	if (!isValidElement(node)) return null;
+	const el = node;
+	const type = el.type;
+	if (type === "h1" || type === "h2") return extractText(el.props.children);
+	const children = el.props.children;
+	if (children == null) return null;
+	let result = null;
+	Children.forEach(children, (child) => {
+		if (result) return;
+		const found = extractHeading(child);
+		if (found) result = found;
+	});
+	return result;
+}
+/** Extract plain text from a React node tree */
+function extractText(node) {
+	if (node == null) return "";
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(extractText).join("");
+	if (isValidElement(node)) return extractText(node.props.children);
+	return "";
+}
+/**
+* Table of Contents component that renders a clickable list of slides
+* with their heading text extracted from h1/h2 elements.
+*
+* Must be rendered inside a `<Deck>` component.
+*
+* ```tsx
+* <Toc>
+*   <Slide><h1>Introduction</h1></Slide>
+*   <Slide><h2>Agenda</h2></Slide>
+* </Toc>
+* ```
+*/
+function Toc({ children, className, style }) {
+	const { currentSlide, goTo } = useDeck();
+	const items = Children.toArray(children).map((slide, index) => {
+		return {
+			index,
+			title: extractHeading(slide) || `Slide ${index + 1}`
+		};
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		className: `reslide-toc${className ? ` ${className}` : ""}`,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.25rem",
+			padding: "0.5rem 0",
+			...style
+		},
+		children: items.map((item) => {
+			const isActive = item.index === currentSlide;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => goTo(item.index),
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "0.5rem",
+					padding: "0.5rem 1rem",
+					border: "none",
+					borderRadius: "0.375rem",
+					cursor: "pointer",
+					textAlign: "left",
+					fontSize: "0.875rem",
+					lineHeight: 1.4,
+					fontFamily: "inherit",
+					color: isActive ? "var(--toc-active-text, var(--slide-accent, #3b82f6))" : "var(--toc-text, var(--slide-text, #1a1a1a))",
+					backgroundColor: isActive ? "var(--toc-active-bg, rgba(59, 130, 246, 0.1))" : "transparent",
+					fontWeight: isActive ? 600 : 400,
+					transition: "background-color 0.15s, color 0.15s"
+				},
+				onMouseEnter: (e) => {
+					if (!isActive) e.currentTarget.style.backgroundColor = "var(--toc-hover-bg, rgba(0, 0, 0, 0.05))";
+				},
+				onMouseLeave: (e) => {
+					e.currentTarget.style.backgroundColor = isActive ? "var(--toc-active-bg, rgba(59, 130, 246, 0.1))" : "transparent";
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						minWidth: "1.5rem",
+						textAlign: "right",
+						opacity: .5,
+						fontSize: "0.75rem",
+						fontVariantNumeric: "tabular-nums"
+					},
+					children: item.index + 1
+				}), /* @__PURE__ */ jsx("span", { children: item.title })]
+			}, item.index);
+		})
+	});
+}
+//#endregion
+//#region src/Mermaid.tsx
+/**
+* Renders a Mermaid diagram.
+*
+* Usage in MDX:
+* ```mdx
+* <Mermaid>
+* graph TD
+*   A --> B
+* </Mermaid>
+* ```
+*
+* The mermaid library is dynamically imported on the client side,
+* so it does not need to be installed as a project dependency.
+*/
+function Mermaid({ children }) {
+	const containerRef = useRef(null);
+	const [svg, setSvg] = useState("");
+	const [error, setError] = useState("");
+	const id = useId().replace(/:/g, "_");
+	useEffect(() => {
+		let cancelled = false;
+		async function render() {
+			try {
+				const mermaid = await import("mermaid");
+				mermaid.default.initialize({
+					startOnLoad: false,
+					theme: "default",
+					securityLevel: "loose"
+				});
+				const code = typeof children === "string" ? children.trim() : "";
+				if (!code) return;
+				const { svg: rendered } = await mermaid.default.render(`mermaid-${id}`, code);
+				if (!cancelled) {
+					setSvg(rendered);
+					setError("");
+				}
+			} catch (err) {
+				if (!cancelled) setError(err instanceof Error ? err.message : "Failed to render diagram");
+			}
+		}
+		render();
+		return () => {
+			cancelled = true;
+		};
+	}, [children, id]);
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "reslide-mermaid reslide-mermaid--error",
+		children: /* @__PURE__ */ jsx("pre", { children: error })
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "reslide-mermaid",
+		dangerouslySetInnerHTML: { __html: svg }
+	});
+}
+//#endregion
+export { useDeck as C, DeckContext as S, useSlideIndex as _, PresenterView as a, openPresenterWindow as b, Mark as c, Slide as d, Deck as f, SlideIndexContext as g, PrintView as h, GlobalLayer as i, Click as l, ProgressBar as m, Toc as n, SlotRight as o, SlideNumber as p, Draggable as r, Notes as s, Mermaid as t, ClickSteps as u, NavigationBar as v, ClickNavigation as w, DrawingLayer as x, isPresenterView as y };