@reslide-dev/core 0.0.1 → 0.2.0

package/dist/index.d.mts

@@ -123,6 +123,8 @@ interface PresenterViewProps {
 /**
  * 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.
  */
 declare function PresenterView({
   children,
@@ -143,6 +145,8 @@ declare function isPresenterView(): boolean;
 interface DrawingLayerProps {
   /** Whether drawing mode is active */
   active: boolean;
+  /** Current slide index — drawings are stored per slide */
+  currentSlide: number;
   /** Pen color */
   color?: string;
   /** Pen width */
@@ -150,10 +154,12 @@ interface DrawingLayerProps {
 }
 /**
  * Canvas-based freehand drawing overlay for presentations.
- * Toggle with `d` key (handled in Deck).
+ * Drawings are stored per slide and persist across navigation.
+ * Toggle with `d` key, clear current slide with `c` key.
  */
 declare function DrawingLayer({
   active,
+  currentSlide,
   color,
   width
 }: DrawingLayerProps): react_jsx_runtime0.JSX.Element;
@@ -245,6 +251,57 @@ declare function Draggable({
   style
 }: DraggableProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Toc.d.ts
+interface TocProps {
+  /** The slide elements to extract headings from */
+  children: ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: CSSProperties;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function Toc({
+  children,
+  className,
+  style
+}: TocProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/Mermaid.d.ts
+interface MermaidProps {
+  /** Mermaid diagram code */
+  children: string;
+}
+/**
+ * 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.
+ */
+declare function Mermaid({
+  children
+}: MermaidProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/ClickNavigation.d.ts
 interface ClickNavigationProps {
   onPrev: () => void;
@@ -263,6 +320,22 @@ declare function ClickNavigation({
   disabled
 }: ClickNavigationProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
+//#region src/NavigationBar.d.ts
+/**
+ * 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.
+ */
+declare function NavigationBar({
+  isDrawing,
+  onToggleDrawing
+}: {
+  isDrawing: boolean;
+  onToggleDrawing: () => void;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ProgressBar.d.ts
+declare function ProgressBar(): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/ReslideEmbed.d.ts
 interface ReslideEmbedProps {
   /** Compiled MDX code from compileMdxSlides() */
@@ -337,4 +410,4 @@ declare function useDeck(): DeckContextValue;
 declare const SlideIndexContext: react.Context<number | null>;
 declare function useSlideIndex(): number;
 //#endregion
-export { Click, ClickNavigation, type ClickProps, ClickSteps, CodeEditor, type CodeEditorProps, Deck, type DeckActions, DeckContext, type DeckContextValue, type DeckProps, type DeckState, Draggable, type DraggableProps, DrawingLayer, type DrawingLayerProps, GlobalLayer, type GlobalLayerProps, Mark, type MarkProps, Notes, type NotesProps, PresenterView, type PresenterViewProps, PrintView, ReslideEmbed, type ReslideEmbedProps, Slide, SlideIndexContext, type SlideProps, SlotRight, type TransitionType, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };
+export { Click, ClickNavigation, type ClickProps, ClickSteps, CodeEditor, type CodeEditorProps, Deck, type DeckActions, DeckContext, type DeckContextValue, type DeckProps, type DeckState, Draggable, type DraggableProps, DrawingLayer, type DrawingLayerProps, GlobalLayer, type GlobalLayerProps, Mark, type MarkProps, Mermaid, type MermaidProps, NavigationBar, Notes, type NotesProps, PresenterView, type PresenterViewProps, PrintView, ProgressBar, ReslideEmbed, type ReslideEmbedProps, Slide, SlideIndexContext, type SlideProps, SlotRight, Toc, type TocProps, type TransitionType, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useId, 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
@@ -78,12 +78,56 @@ function useDeck() {
 //#region src/DrawingLayer.tsx
 /**
 * Canvas-based freehand drawing overlay for presentations.
-* Toggle with `d` key (handled in Deck).
+* Drawings are stored per slide and persist across navigation.
+* Toggle with `d` key, clear current slide with `c` key.
 */
-function DrawingLayer({ active, color = "#ef4444", width = 3 }) {
+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();
@@ -127,26 +171,35 @@ function DrawingLayer({ active, color = "#ef4444", width = 3 }) {
 		if (!canvas) return;
 		const resize = () => {
 			const rect = canvas.parentElement?.getBoundingClientRect();
-			if (rect) {
-				canvas.width = rect.width * window.devicePixelRatio;
-				canvas.height = rect.height * window.devicePixelRatio;
+			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 ctx = canvasRef.current?.getContext("2d");
-				if (ctx && canvasRef.current) ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+				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]);
+	}, [active, currentSlide]);
 	return /* @__PURE__ */ jsx("canvas", {
 		ref: canvasRef,
 		onMouseDown: startDraw,
@@ -165,6 +218,412 @@ function DrawingLayer({ active, color = "#ef4444", width = 3 }) {
 	});
 }
 //#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() {
@@ -188,6 +647,30 @@ function PrintView({ children }) {
 	});
 }
 //#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 }) {
@@ -195,14 +678,17 @@ function SlideTransition({ children, currentSlide, transition }) {
 	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 === displaySlide) return;
+		if (currentSlide === prevCurrentRef.current) return;
+		const from = prevCurrentRef.current;
+		prevCurrentRef.current = currentSlide;
 		if (transition === "none") {
 			setDisplaySlide(currentSlide);
 			return;
 		}
-		setPrevSlide(displaySlide);
+		setPrevSlide(from);
 		setDisplaySlide(currentSlide);
 		setIsAnimating(true);
 		if (timerRef.current) clearTimeout(timerRef.current);
@@ -213,11 +699,7 @@ function SlideTransition({ children, currentSlide, transition }) {
 		return () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 		};
-	}, [
-		currentSlide,
-		displaySlide,
-		transition
-	]);
+	}, [currentSlide, transition]);
 	const resolvedTransition = resolveTransition(transition, prevSlide, displaySlide);
 	if (transition === "none" || !isAnimating) return /* @__PURE__ */ jsx("div", {
 		className: "reslide-transition-container",
@@ -225,7 +707,6 @@ function SlideTransition({ children, currentSlide, transition }) {
 			value: displaySlide,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "reslide-transition-slide",
-				style: { position: "relative" },
 				children: slides[displaySlide]
 			})
 		})
@@ -275,50 +756,6 @@ function useFullscreen(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);
@@ -329,7 +766,6 @@ function Deck({ children, transition = "none" }) {
 	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) => {
@@ -376,6 +812,15 @@ function Deck({ children, transition = "none" }) {
 			if (isOverview) setIsOverview(false);
 		}
 	}, [totalSlides, isOverview]);
+	usePresenterSync(currentSlide, clickStep, useMemo(() => ({
+		next,
+		prev,
+		goTo
+	}), [
+		next,
+		prev,
+		goTo
+	]));
 	const toggleOverview = useCallback(() => {
 		setIsOverview((v) => !v);
 	}, []);
@@ -489,11 +934,15 @@ function Deck({ children, transition = "none" }) {
 					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,
+					currentSlide
 				}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, { active: isDrawing })
+				!isPrinting && /* @__PURE__ */ jsx(NavigationBar, {
+					isDrawing,
+					onToggleDrawing: () => setIsDrawing((v) => !v)
+				})
 			]
 		})
 	});
@@ -540,24 +989,6 @@ function OverviewGrid({ children, totalSlides, goTo }) {
 		}, 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 = {
@@ -755,19 +1186,19 @@ function ClickSteps({ count, slideIndex }) {
 //#endregion
 //#region src/Mark.tsx
 const markStyles = {
-	highlight: (color) => ({
-		backgroundColor: `var(--mark-${color}, ${color})`,
+	highlight: (colorName, resolvedColor) => ({
+		backgroundColor: `var(--mark-${colorName}, ${resolvedColor})`,
 		padding: "0.1em 0.2em",
 		borderRadius: "0.2em"
 	}),
-	underline: (color) => ({
+	underline: (colorName, resolvedColor) => ({
 		textDecoration: "underline",
-		textDecorationColor: `var(--mark-${color}, ${color})`,
+		textDecorationColor: `var(--mark-${colorName}, ${resolvedColor})`,
 		textDecorationThickness: "0.15em",
 		textUnderlineOffset: "0.15em"
 	}),
-	circle: (color) => ({
-		border: `0.15em solid var(--mark-${color}, ${color})`,
+	circle: (colorName, resolvedColor) => ({
+		border: `0.15em solid var(--mark-${colorName}, ${resolvedColor})`,
 		borderRadius: "50%",
 		padding: "0.1em 0.3em"
 	})
@@ -785,7 +1216,7 @@ function Mark({ children, type = "highlight", color = "yellow" }) {
 	const styleFn = markStyles[type] ?? markStyles.highlight;
 	return /* @__PURE__ */ jsx("span", {
 		className: `reslide-mark reslide-mark-${type}`,
-		style: styleFn(resolvedColor),
+		style: styleFn(color, resolvedColor),
 		children
 	});
 }
@@ -827,6 +1258,8 @@ SlotRight.__reslideSlot = "right";
 /**
 * 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);
@@ -834,17 +1267,28 @@ function PresenterView({ children, notes }) {
 	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(() => {
-		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);
+		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;
 			}
-		};
-		return () => channel.close();
-	}, []);
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [next, prev]);
 	useEffect(() => {
 		const start = Date.now();
 		const interval = setInterval(() => {
@@ -857,21 +1301,31 @@ function PresenterView({ children, notes }) {
 		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 = {
+	const contextValue = useMemo(() => ({
 		currentSlide,
 		totalSlides,
 		clickStep,
 		totalClickSteps: 0,
 		isOverview: false,
 		isFullscreen: false,
-		next: noop,
-		prev: noop,
-		goTo: useCallback((_n) => {}, []),
+		next,
+		prev,
+		goTo,
 		toggleOverview: noop,
 		toggleFullscreen: noop,
-		registerClickSteps: useCallback((_i, _c) => {}, [])
-	};
+		registerClickSteps: noopReg
+	}), [
+		currentSlide,
+		totalSlides,
+		clickStep,
+		next,
+		prev,
+		goTo,
+		noop,
+		noopReg
+	]);
 	return /* @__PURE__ */ jsx(DeckContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -965,37 +1419,88 @@ function PresenterView({ children, notes }) {
 						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,
-									")"
-								]
-							})
-						]
-					})]
+					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/CodeEditor.tsx
 /**
@@ -1187,6 +1692,165 @@ function Draggable({ children, x = 0, y = 0, style }) {
 	});
 }
 //#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 = {
@@ -1258,4 +1922,4 @@ function ReslideEmbed({ code, transition, components: userComponents, className,
 	});
 }
 //#endregion
-export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Notes, PresenterView, PrintView, ReslideEmbed, Slide, SlideIndexContext, SlotRight, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reslide-dev/core",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Framework-agnostic React presentation components",
   "license": "MIT",
   "files": [
@@ -9,33 +9,38 @@
   ],
   "type": "module",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./src/index.ts",
+    "./mdx-components": "./src/mdx-components.ts",
+    "./themes/default.css": "./src/themes/default.css",
+    "./themes/dark.css": "./src/themes/dark.css",
+    "./transitions.css": "./src/transitions.css",
+    "./print.css": "./src/themes/print.css",
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test"
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^3.1.1"
+    "@mdx-js/mdx": "3.1.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "catalog:",
-    "@testing-library/react": "catalog:",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "jsdom": "catalog:",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "vite-plus": "catalog:",
-    "vitest": "catalog:"
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "29.0.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
-  "publishConfig": {
-    "access": "public"
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test"
   }
-}
+}

package/src/themes/dark.css

@@ -75,6 +75,29 @@
   padding: 0;
 }
 
+.reslide-slide table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+  font-size: 0.9em;
+}
+
+.reslide-slide th,
+.reslide-slide td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #334155;
+}
+
+.reslide-slide th {
+  font-weight: 600;
+  border-bottom: 2px solid #475569;
+}
+
+.reslide-slide tr:last-child td {
+  border-bottom: none;
+}
+
 .reslide-slide a {
   color: var(--slide-accent);
   text-decoration: underline;

package/src/themes/default.css

@@ -75,6 +75,29 @@
   padding: 0;
 }
 
+.reslide-slide table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+  font-size: 0.9em;
+}
+
+.reslide-slide th,
+.reslide-slide td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.reslide-slide th {
+  font-weight: 600;
+  border-bottom: 2px solid #cbd5e1;
+}
+
+.reslide-slide tr:last-child td {
+  border-bottom: none;
+}
+
 .reslide-slide a {
   color: var(--slide-accent);
   text-decoration: underline;