@reslide-dev/core 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1261 @@
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, 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/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 timerRef = useRef(null);
+	useEffect(() => {
+		if (currentSlide === displaySlide) return;
+		if (transition === "none") {
+			setDisplaySlide(currentSlide);
+			return;
+		}
+		setPrevSlide(displaySlide);
+		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,
+		displaySlide,
+		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(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: (color) => ({
+		backgroundColor: `var(--mark-${color}, ${color})`,
+		padding: "0.1em 0.2em",
+		borderRadius: "0.2em"
+	}),
+	underline: (color) => ({
+		textDecoration: "underline",
+		textDecorationColor: `var(--mark-${color}, ${color})`,
+		textDecorationThickness: "0.15em",
+		textUnderlineOffset: "0.15em"
+	}),
+	circle: (color) => ({
+		border: `0.15em solid var(--mark-${color}, ${color})`,
+		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(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
+//#region src/CodeEditor.tsx
+/**
+* Live code editor component for presentations.
+* Uses Monaco Editor (loaded from CDN) for syntax highlighting and editing.
+*
+* Falls back to a styled <textarea> if Monaco fails to load.
+*/
+function CodeEditor({ value, language = "typescript", readOnly = false, height = 300, onChange, style }) {
+	const containerRef = useRef(null);
+	const editorRef = useRef(null);
+	const [fallback, setFallback] = useState(false);
+	const [text, setText] = useState(value);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || fallback) return;
+		let disposed = false;
+		async function initMonaco() {
+			try {
+				const monacoUrl = "https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs";
+				if (!window.require) await new Promise((resolve, reject) => {
+					const script = document.createElement("script");
+					script.src = `${monacoUrl}/loader.js`;
+					script.onload = () => resolve();
+					script.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load Monaco loader"));
+					document.head.appendChild(script);
+				});
+				if (disposed) return;
+				const amdRequire = window.require;
+				amdRequire({ paths: { vs: monacoUrl } })(["vs/editor/editor.main"], (monaco) => {
+					if (disposed || !container) return;
+					const editor = monaco.editor.create(container, {
+						value,
+						language,
+						readOnly,
+						theme: "vs-dark",
+						minimap: { enabled: false },
+						scrollBeyondLastLine: false,
+						fontSize: 14,
+						lineNumbers: "on",
+						automaticLayout: true,
+						padding: {
+							top: 12,
+							bottom: 12
+						}
+					});
+					editor.onDidChangeModelContent(() => {
+						const newValue = editor.getValue();
+						setText(newValue);
+						onChange?.(newValue);
+					});
+					editorRef.current = editor;
+				});
+			} catch {
+				if (!disposed) setFallback(true);
+			}
+		}
+		initMonaco();
+		return () => {
+			disposed = true;
+			if (editorRef.current && typeof editorRef.current.dispose === "function") editorRef.current.dispose();
+		};
+	}, [
+		language,
+		readOnly,
+		value,
+		onChange,
+		fallback
+	]);
+	const handleFallbackChange = useCallback((e) => {
+		setText(e.target.value);
+		onChange?.(e.target.value);
+	}, [onChange]);
+	if (fallback) return /* @__PURE__ */ jsx("textarea", {
+		className: "reslide-code-editor-fallback",
+		value: text,
+		onChange: handleFallbackChange,
+		readOnly,
+		style: {
+			width: "100%",
+			height,
+			fontFamily: "monospace",
+			fontSize: "14px",
+			padding: "12px",
+			backgroundColor: "#1e1e1e",
+			color: "#d4d4d4",
+			border: "1px solid #333",
+			borderRadius: "0.5rem",
+			resize: "vertical",
+			...style
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "reslide-code-editor",
+		style: {
+			width: "100%",
+			height,
+			borderRadius: "0.5rem",
+			overflow: "hidden",
+			...style
+		}
+	});
+}
+//#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/ReslideEmbed.tsx
+/** Built-in reslide components available in MDX */
+const builtinComponents = {
+	Deck,
+	Slide,
+	Click,
+	ClickSteps,
+	Mark,
+	Notes,
+	SlotRight,
+	GlobalLayer,
+	Draggable
+};
+/**
+* Renders compiled MDX slides as a full reslide presentation.
+*
+* Usage:
+* ```tsx
+* // Server component
+* import { compileMdxSlides } from '@reslide/mdx'
+* const { code } = await compileMdxSlides(mdxSource)
+*
+* // Client component
+* import { ReslideEmbed } from '@reslide/core'
+* <ReslideEmbed code={code} transition="fade" />
+* ```
+*/
+function ReslideEmbed({ code, transition, components: userComponents, className, style }) {
+	const [Content, setContent] = useState(null);
+	useEffect(() => {
+		async function evaluate() {
+			const { run } = await import("@mdx-js/mdx");
+			const mod = await run(code, {
+				...runtime,
+				Fragment,
+				baseUrl: import.meta.url
+			});
+			setContent(() => mod.default);
+		}
+		evaluate();
+	}, [code]);
+	if (!Content) return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "100%",
+			height: "100%",
+			...style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: { opacity: .5 },
+			children: "Loading slides..."
+		})
+	});
+	const allComponents = {
+		...builtinComponents,
+		...userComponents
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			width: "100%",
+			height: "100%",
+			...style
+		},
+		children: /* @__PURE__ */ jsx(Content, { components: allComponents })
+	});
+}
+//#endregion
+export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Notes, PresenterView, PrintView, ReslideEmbed, Slide, SlideIndexContext, SlotRight, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };