@reslide-dev/core 0.1.0 → 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;
@@ -314,6 +320,19 @@ 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
@@ -391,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, Mermaid, type MermaidProps, 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 };
+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

@@ -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() {
@@ -248,7 +707,6 @@ function SlideTransition({ children, currentSlide, transition }) {
 			value: displaySlide,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "reslide-transition-slide",
-				style: { position: "relative" },
 				children: slides[displaySlide]
 			})
 		})
@@ -298,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);
@@ -352,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) => {
@@ -399,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);
 	}, []);
@@ -512,12 +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 })
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, {
+					active: isDrawing,
+					currentSlide
+				}),
+				!isPrinting && /* @__PURE__ */ jsx(NavigationBar, {
+					isDrawing,
+					onToggleDrawing: () => setIsDrawing((v) => !v)
+				})
 			]
 		})
 	});
@@ -564,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 = {
@@ -851,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);
@@ -858,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(() => {
@@ -881,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", {
@@ -989,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
 /**
@@ -1441,4 +1922,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reslide-dev/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Framework-agnostic React presentation components",
   "license": "MIT",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "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",
@@ -21,22 +21,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^3.1.1"
+    "@mdx-js/mdx": "3.1.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "jsdom": "^29.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@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"
   },
   "scripts": {
     "build": "vp pack",