@reslide-dev/core 0.1.0 → 0.2.1

package/dist/index.mjs

@@ -1,1026 +1,7 @@
-import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { C as ClickNavigation, S as useDeck, _ as NavigationBar, a as PresenterView, b as DrawingLayer, c as Mark, d as Slide, f as Deck, g as useSlideIndex, h as SlideIndexContext, i as GlobalLayer, l as Click, m as PrintView, n as Toc, o as SlotRight, p as ProgressBar, r as Draggable, s as Notes, t as Mermaid, u as ClickSteps, v as isPresenterView, x as DeckContext, y as openPresenterWindow } from "./Mermaid-BtXG2Ea2.mjs";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import * as runtime from "react/jsx-runtime";
-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.
-* Toggle with `d` key (handled in Deck).
-*/
-function DrawingLayer({ active, color = "#ef4444", width = 3 }) {
-	const canvasRef = useRef(null);
-	const [isDrawing, setIsDrawing] = useState(false);
-	const lastPoint = useRef(null);
-	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) {
-				canvas.width = rect.width * window.devicePixelRatio;
-				canvas.height = rect.height * window.devicePixelRatio;
-			}
-		};
-		resize();
-		window.addEventListener("resize", resize);
-		return () => window.removeEventListener("resize", resize);
-	}, []);
-	useEffect(() => {
-		if (!active) return;
-		function handleKey(e) {
-			if (e.key === "c") {
-				const ctx = canvasRef.current?.getContext("2d");
-				if (ctx && canvasRef.current) ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-			}
-		}
-		window.addEventListener("keydown", handleKey);
-		return () => window.removeEventListener("keydown", handleKey);
-	}, [active]);
-	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/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/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",
-				style: { position: "relative" },
-				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/use-presenter.ts
-const CHANNEL_NAME = "reslide-presenter";
-/**
-* Hook for syncing presentation state across windows via BroadcastChannel.
-* The main presentation window broadcasts state changes.
-*/
-function usePresenterSync(currentSlide, clickStep, onReceive) {
-	const channelRef = useRef(null);
-	useEffect(() => {
-		if (typeof BroadcastChannel === "undefined") return;
-		const channel = new BroadcastChannel(CHANNEL_NAME);
-		channelRef.current = channel;
-		if (onReceive) channel.onmessage = (e) => {
-			onReceive(e.data);
-		};
-		return () => {
-			channel.close();
-			channelRef.current = null;
-		};
-	}, [onReceive]);
-	useEffect(() => {
-		channelRef.current?.postMessage({
-			type: "sync",
-			currentSlide,
-			clickStep
-		});
-	}, [currentSlide, clickStep]);
-}
-/**
-* 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/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);
-	usePresenterSync(currentSlide, clickStep);
-	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]);
-	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(SlideNumber, {
-					current: currentSlide + 1,
-					total: totalSlides
-				}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ProgressBar, {}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, { active: isDrawing })
-			]
-		})
-	});
-}
-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))
-	});
-}
-function SlideNumber({ current, total }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "reslide-slide-number",
-		style: {
-			position: "absolute",
-			bottom: "1rem",
-			right: "1rem",
-			fontSize: "0.875rem",
-			opacity: .6,
-			fontVariantNumeric: "tabular-nums"
-		},
-		children: [
-			current,
-			" / ",
-			total
-		]
-	});
-}
-//#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.
-*/
-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;
-	useEffect(() => {
-		if (typeof BroadcastChannel === "undefined") return;
-		const channel = new BroadcastChannel("reslide-presenter");
-		channel.onmessage = (e) => {
-			if (e.data.type === "sync") {
-				setCurrentSlide(e.data.currentSlide);
-				setClickStep(e.data.clickStep);
-			}
-		};
-		return () => channel.close();
-	}, []);
-	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 noop = useCallback(() => {}, []);
-	const contextValue = {
-		currentSlide,
-		totalSlides,
-		clickStep,
-		totalClickSteps: 0,
-		isOverview: false,
-		isFullscreen: false,
-		next: noop,
-		prev: noop,
-		goTo: useCallback((_n) => {}, []),
-		toggleOverview: noop,
-		toggleFullscreen: noop,
-		registerClickSteps: useCallback((_i, _c) => {}, [])
-	};
-	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: {
-							fontSize: "1.125rem",
-							fontVariantNumeric: "tabular-nums"
-						},
-						children: [
-							currentSlide + 1,
-							" / ",
-							totalSlides,
-							clickStep > 0 && /* @__PURE__ */ jsxs("span", {
-								style: { color: "#94a3b8" },
-								children: [
-									" (click ",
-									clickStep,
-									")"
-								]
-							})
-						]
-					})]
-				})
-			]
-		})
-	});
-}
-//#endregion
+import { jsx } from "react/jsx-runtime";
 //#region src/CodeEditor.tsx
 /**
 * Live code editor component for presentations.
@@ -1125,251 +106,6 @@ function CodeEditor({ value, language = "typescript", readOnly = false, height =
 	});
 }
 //#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
 //#region src/ReslideEmbed.tsx
 /** Built-in reslide components available in MDX */
 const builtinComponents = {
@@ -1441,4 +177,4 @@ function ReslideEmbed({ code, transition, components: userComponents, className,
 	});
 }
 //#endregion
-export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Mermaid, Notes, PresenterView, PrintView, ProgressBar, ReslideEmbed, Slide, SlideIndexContext, SlotRight, Toc, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };
+export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Mermaid, NavigationBar, Notes, PresenterView, PrintView, ProgressBar, ReslideEmbed, Slide, SlideIndexContext, SlotRight, Toc, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };