@reslide-dev/core 0.2.2 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yoshikatsu Nishida
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/{Mermaid-CUCMRIkQ.mjs → Mermaid-BfetSkya.mjs}

@@ -5,7 +5,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * 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.
+* Shows a gradient overlay and arrow indicator on hover (docswell style).
 */
 function ClickNavigation({ onPrev, onNext, disabled }) {
 	if (disabled) return null;
@@ -20,12 +20,15 @@ function ClickNavigation({ onPrev, onNext, disabled }) {
 function NavZone({ direction, onClick }) {
 	const [hovered, setHovered] = useState(false);
 	const isPrev = direction === "prev";
+	const handleClick = useCallback((e) => {
+		e.stopPropagation();
+		e.currentTarget.blur();
+		onClick();
+	}, [onClick]);
+	const gradient = isPrev ? "linear-gradient(to right, rgba(0,0,0,0.08), transparent)" : "linear-gradient(to left, rgba(0,0,0,0.08), transparent)";
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		onClick: useCallback((e) => {
-			e.stopPropagation();
-			onClick();
-		}, [onClick]),
+		onClick: handleClick,
 		onMouseEnter: () => setHovered(true),
 		onMouseLeave: () => setHovered(false),
 		"aria-label": isPrev ? "Previous slide" : "Next slide",
@@ -35,16 +38,16 @@ function NavZone({ direction, onClick }) {
 			bottom: 0,
 			[isPrev ? "left" : "right"]: 0,
 			width: "15%",
-			background: "none",
+			background: hovered ? gradient : "none",
 			border: "none",
+			outline: "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"
+			transition: "background 0.25s ease"
 		},
 		children: /* @__PURE__ */ jsx("svg", {
 			width: "32",
@@ -57,9 +60,10 @@ function NavZone({ direction, onClick }) {
 			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)"
+				opacity: hovered ? .6 : 0,
+				filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+				transform: isPrev ? "none" : "rotate(180deg)",
+				transition: "opacity 0.25s ease"
 			},
 			children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
 		})
@@ -321,6 +325,11 @@ function isPresenterView() {
 */
 function NavigationBar({ isDrawing, onToggleDrawing }) {
 	const { currentSlide, totalSlides, clickStep, totalClickSteps, isOverview, isFullscreen, next, prev, toggleOverview, toggleFullscreen } = useDeck();
+	const handlePrint = useCallback(() => {
+		const url = new URL(window.location.href);
+		url.searchParams.set("mode", "print");
+		window.open(url.toString(), "_blank");
+	}, []);
 	const [visible, setVisible] = useState(false);
 	const timerRef = useRef(null);
 	const barRef = useRef(null);
@@ -431,6 +440,12 @@ function NavigationBar({ isDrawing, onToggleDrawing }) {
 				title: "Drawing (d)",
 				active: isDrawing,
 				children: /* @__PURE__ */ jsx(PenIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(NavButton, {
+				onClick: handlePrint,
+				title: "Print / PDF (Cmd+P)",
+				children: /* @__PURE__ */ jsx(PrintIcon, {})
 			})
 		]
 	});
@@ -622,6 +637,124 @@ function PenIcon() {
 		]
 	});
 }
+function PrintIcon() {
+	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("polyline", { points: "6 9 6 2 18 2 18 9" }),
+			/* @__PURE__ */ jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "6",
+				y: "14",
+				width: "12",
+				height: "8"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Pointer.tsx
+let rippleId = 0;
+/**
+* Presentation pointer — a large colored circle that follows the cursor.
+* Clicking creates an expanding ripple effect to highlight a point.
+* Toggle with `q` key (handled in Deck).
+*/
+function Pointer({ active, color, size = 24 }) {
+	const [pos, setPos] = useState(null);
+	const [ripples, setRipples] = useState([]);
+	const containerRef = useRef(null);
+	const getPos = useCallback((e) => {
+		const container = containerRef.current?.parentElement;
+		if (!container) return null;
+		const rect = container.getBoundingClientRect();
+		return {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		};
+	}, []);
+	const handleMouseMove = useCallback((e) => {
+		if (!active) return;
+		setPos(getPos(e));
+	}, [active, getPos]);
+	const handleClick = useCallback((e) => {
+		if (!active) return;
+		const p = getPos(e);
+		if (!p) return;
+		const id = ++rippleId;
+		setRipples((prev) => [...prev, {
+			id,
+			x: p.x,
+			y: p.y
+		}]);
+		setTimeout(() => setRipples((prev) => prev.filter((r) => r.id !== id)), 500);
+	}, [active, getPos]);
+	const handleMouseLeave = useCallback(() => setPos(null), []);
+	useEffect(() => {
+		if (!active) {
+			setPos(null);
+			setRipples([]);
+			return;
+		}
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("click", handleClick, true);
+		window.addEventListener("mouseleave", handleMouseLeave);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("click", handleClick, true);
+			window.removeEventListener("mouseleave", handleMouseLeave);
+		};
+	}, [
+		active,
+		handleMouseMove,
+		handleClick,
+		handleMouseLeave
+	]);
+	const resolvedColor = color ?? "var(--slide-accent, #16a34a)";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: `
+        @keyframes reslide-pointer-ripple {
+          0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.5; }
+          100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+        }
+      ` }), /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none",
+			zIndex: 45,
+			overflow: "hidden"
+		},
+		children: [active && pos && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			left: pos.x,
+			top: pos.y,
+			width: size,
+			height: size,
+			borderRadius: "50%",
+			backgroundColor: resolvedColor,
+			opacity: .7,
+			transform: "translate(-50%, -50%)",
+			willChange: "left, top"
+		} }), ripples.map((r) => /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			left: r.x,
+			top: r.y,
+			width: size * 3,
+			height: size * 3,
+			borderRadius: "50%",
+			border: `2px solid ${resolvedColor}`,
+			animation: "reslide-pointer-ripple 0.5s ease-out forwards"
+		} }, r.id))]
+	})] });
+}
 //#endregion
 //#region src/slide-context.ts
 const SlideIndexContext = createContext(null);
@@ -632,17 +765,84 @@ function useSlideIndex() {
 }
 //#endregion
 //#region src/PrintView.tsx
+const DESIGN_WIDTH$2 = 960;
+const DESIGN_HEIGHT$2 = 540;
+function ScaledSlideCard({ children, index }) {
+	const frameRef = useRef(null);
+	const [scale, setScale] = useState(.3);
+	useEffect(() => {
+		const el = frameRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width } = entry.contentRect;
+				if (width > 0) setScale(width / DESIGN_WIDTH$2);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "reslide-print-slide-card",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: frameRef,
+			className: "reslide-print-slide-frame",
+			children: /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+				value: index,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "reslide-print-slide-content",
+					style: {
+						width: DESIGN_WIDTH$2,
+						height: DESIGN_HEIGHT$2,
+						transform: `scale(${scale})`,
+						transformOrigin: "top left"
+					},
+					children
+				})
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "reslide-print-slide-label",
+			children: index + 1
+		})]
+	});
+}
 /**
-* Renders all slides vertically for print/PDF export.
-* Use with @media print CSS to generate PDFs via browser print.
+* Renders all slides in a printable handout layout.
+* 6 slides per page (2 columns × 3 rows), each maintaining 16:9 ratio.
 */
 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))
+	const slides = Children.toArray(children);
+	const noop = useCallback(() => {}, []);
+	const noopNum = useCallback((_n) => {}, []);
+	const noopReg = useCallback((_i, _c) => {}, []);
+	const contextValue = useMemo(() => ({
+		currentSlide: 0,
+		totalSlides: slides.length,
+		clickStep: 999,
+		totalClickSteps: 0,
+		isOverview: false,
+		isFullscreen: false,
+		next: noop,
+		prev: noop,
+		goTo: noopNum,
+		toggleOverview: noop,
+		toggleFullscreen: noop,
+		registerClickSteps: noopReg
+	}), [
+		slides.length,
+		noop,
+		noopNum,
+		noopReg
+	]);
+	return /* @__PURE__ */ jsx(DeckContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "reslide-print-view",
+			children: slides.map((slide, i) => /* @__PURE__ */ jsx(ScaledSlideCard, {
+				index: i,
+				children: slide
+			}, i))
+		})
 	});
 }
 //#endregion
@@ -655,7 +855,7 @@ function ProgressBar() {
 		className: "reslide-progress-bar",
 		style: {
 			position: "absolute",
-			top: 0,
+			bottom: 0,
 			left: 0,
 			width: "100%",
 			height: "3px",
@@ -664,7 +864,7 @@ function ProgressBar() {
 		children: /* @__PURE__ */ jsx("div", { style: {
 			height: "100%",
 			width: `${Math.min(slideProgress + clickFraction, 1) * 100}%`,
-			backgroundColor: "var(--slide-accent, #3b82f6)",
+			backgroundColor: "var(--slide-progress, #16a34a)",
 			transition: "width 0.3s ease"
 		} })
 	});
@@ -785,14 +985,20 @@ function useFullscreen(ref) {
 }
 //#endregion
 //#region src/Deck.tsx
-function Deck({ children, transition = "none" }) {
+/** Design resolution — slides are authored at this size and scaled to fit */
+const DESIGN_WIDTH$1 = 960;
+const DESIGN_HEIGHT$1 = 540;
+function Deck({ children, transition = "none", aspectRatio = 16 / 9 }) {
 	const containerRef = useRef(null);
+	const deckRef = useRef(null);
 	const [currentSlide, setCurrentSlide] = useState(0);
 	const [clickStep, setClickStep] = useState(0);
 	const [isOverview, setIsOverview] = useState(false);
 	const [isDrawing, setIsDrawing] = useState(false);
+	const [isPointer, setIsPointer] = useState(false);
 	const [isPrinting, setIsPrinting] = useState(false);
 	const [clickStepsMap, setClickStepsMap] = useState({});
+	const [scale, setScale] = useState(1);
 	const { isFullscreen, toggleFullscreen } = useFullscreen(containerRef);
 	const totalSlides = Children.count(children);
 	const totalClickSteps = clickStepsMap[currentSlide] ?? 0;
@@ -855,6 +1061,7 @@ function Deck({ children, transition = "none" }) {
 	useEffect(() => {
 		function handleKeyDown(e) {
 			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+			if (e.metaKey || e.ctrlKey || e.altKey) return;
 			switch (e.key) {
 				case "ArrowRight":
 				case " ":
@@ -882,6 +1089,12 @@ function Deck({ children, transition = "none" }) {
 				case "d":
 					e.preventDefault();
 					setIsDrawing((v) => !v);
+					setIsPointer(false);
+					break;
+				case "q":
+					e.preventDefault();
+					setIsPointer((v) => !v);
+					setIsDrawing(false);
 					break;
 			}
 		}
@@ -893,6 +1106,36 @@ function Deck({ children, transition = "none" }) {
 		toggleOverview,
 		toggleFullscreen
 	]);
+	useEffect(() => {
+		const el = deckRef.current;
+		if (!el) return;
+		let startX = 0;
+		let startY = 0;
+		function handleTouchStart(e) {
+			const touch = e.touches[0];
+			startX = touch.clientX;
+			startY = touch.clientY;
+		}
+		function handleTouchEnd(e) {
+			if (isOverview || isDrawing) return;
+			const touch = e.changedTouches[0];
+			const dx = touch.clientX - startX;
+			const dy = touch.clientY - startY;
+			if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) if (dx < 0) next();
+			else prev();
+		}
+		el.addEventListener("touchstart", handleTouchStart, { passive: true });
+		el.addEventListener("touchend", handleTouchEnd, { passive: true });
+		return () => {
+			el.removeEventListener("touchstart", handleTouchStart);
+			el.removeEventListener("touchend", handleTouchEnd);
+		};
+	}, [
+		next,
+		prev,
+		isOverview,
+		isDrawing
+	]);
 	useEffect(() => {
 		function onBeforePrint() {
 			setIsPrinting(true);
@@ -907,6 +1150,18 @@ function Deck({ children, transition = "none" }) {
 			window.removeEventListener("afterprint", onAfterPrint);
 		};
 	}, []);
+	useEffect(() => {
+		const el = deckRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				if (width > 0 && height > 0) setScale(Math.min(width / DESIGN_WIDTH$1, height / DESIGN_HEIGHT$1));
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
 	const contextValue = useMemo(() => ({
 		currentSlide,
 		totalSlides,
@@ -934,21 +1189,32 @@ function Deck({ children, transition = "none" }) {
 		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, {
+	const useLetterbox = aspectRatio > 0;
+	const slideArea = /* @__PURE__ */ jsxs("div", {
+		ref: deckRef,
+		className: "reslide-deck",
+		style: {
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			overflow: "hidden",
+			backgroundColor: "var(--slide-bg, #fff)",
+			color: "var(--slide-text, #1a1a1a)",
+			cursor: isPointer ? "none" : void 0
+		},
+		children: [
+			isPrinting ? /* @__PURE__ */ jsx(PrintView, { children }) : /* @__PURE__ */ jsx("div", {
+				className: "reslide-scale-wrapper",
+				style: {
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					width: DESIGN_WIDTH$1,
+					height: DESIGN_HEIGHT$1,
+					transform: `translate(-50%, -50%) scale(${scale})`,
+					transformOrigin: "center center"
+				},
+				children: isOverview ? /* @__PURE__ */ jsx(OverviewGrid, {
 					totalSlides,
 					goTo,
 					children
@@ -956,23 +1222,61 @@ function Deck({ children, transition = "none" }) {
 					currentSlide,
 					transition,
 					children
-				}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ClickNavigation, {
-					onPrev: prev,
-					onNext: next,
-					disabled: isDrawing
-				}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ProgressBar, {}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(SlideNumber, {}),
-				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, {
-					active: isDrawing,
-					currentSlide
-				}),
-				!isPrinting && /* @__PURE__ */ jsx(NavigationBar, {
-					isDrawing,
-					onToggleDrawing: () => setIsDrawing((v) => !v)
 				})
-			]
+			}),
+			!isOverview && !isPrinting && /* @__PURE__ */ jsx(ClickNavigation, {
+				onPrev: prev,
+				onNext: next,
+				disabled: isDrawing
+			}),
+			!isOverview && !isPrinting && /* @__PURE__ */ jsx(ProgressBar, {}),
+			!isOverview && !isPrinting && /* @__PURE__ */ jsx(SlideNumber, {}),
+			!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, {
+				active: isDrawing,
+				currentSlide
+			}),
+			!isOverview && !isPrinting && /* @__PURE__ */ jsx(Pointer, { active: isPointer }),
+			!isPrinting && /* @__PURE__ */ jsx(NavigationBar, {
+				isDrawing,
+				onToggleDrawing: () => setIsDrawing((v) => !v)
+			})
+		]
+	});
+	if (!useLetterbox) return /* @__PURE__ */ jsx(DeckContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			children: slideArea
+		})
+	});
+	return /* @__PURE__ */ jsx(DeckContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "reslide-letterbox",
+			style: {
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: "var(--reslide-letterbox-bg, #000)",
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "reslide-letterbox-inner",
+				style: {
+					height: "100%",
+					maxWidth: "100%",
+					aspectRatio: String(aspectRatio),
+					overflow: "hidden"
+				},
+				children: slideArea
+			})
 		})
 	});
 }
@@ -993,7 +1297,7 @@ function OverviewGrid({ children, totalSlides, goTo }) {
 			type: "button",
 			onClick: () => goTo(i),
 			style: {
-				border: "1px solid var(--slide-accent, #3b82f6)",
+				border: "1px solid var(--slide-accent, #16a34a)",
 				borderRadius: "0.5rem",
 				overflow: "hidden",
 				cursor: "pointer",
@@ -1140,7 +1444,7 @@ function Slide({ children, layout = "default", image, className, style }) {
 				alignItems: "center",
 				textAlign: "center",
 				padding: "3rem 4rem",
-				backgroundColor: "var(--slide-accent, #3b82f6)",
+				backgroundColor: "var(--slide-accent, #16a34a)",
 				color: "var(--slide-section-text, #fff)",
 				...style
 			},
@@ -1159,7 +1463,7 @@ function Slide({ children, layout = "default", image, className, style }) {
 				style: {
 					fontSize: "1.5em",
 					fontStyle: "italic",
-					borderLeft: "4px solid var(--slide-accent, #3b82f6)",
+					borderLeft: "4px solid var(--slide-accent, #16a34a)",
 					paddingLeft: "1.5rem",
 					margin: 0
 				},
@@ -1284,6 +1588,51 @@ SlotRight.displayName = "SlotRight";
 SlotRight.__reslideSlot = "right";
 //#endregion
 //#region src/PresenterView.tsx
+const DESIGN_WIDTH = 960;
+const DESIGN_HEIGHT = 540;
+/**
+* Scaled slide preview — renders at design size and scales to fit container.
+* Maintains 16:9 aspect ratio.
+*/
+function ScaledSlide({ children }) {
+	const containerRef = useRef(null);
+	const [scale, setScale] = useState(1);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				if (width > 0 && height > 0) setScale(Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT));
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			width: "100%",
+			aspectRatio: "16 / 9",
+			position: "relative",
+			overflow: "hidden",
+			backgroundColor: "var(--slide-bg, #fff)",
+			color: "var(--slide-text, #1a1a1a)"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				top: "50%",
+				left: "50%",
+				width: DESIGN_WIDTH,
+				height: DESIGN_HEIGHT,
+				transform: `translate(-50%, -50%) scale(${scale})`,
+				transformOrigin: "center center"
+			},
+			children
+		})
+	});
+}
 /**
 * Presenter view that syncs with the main presentation window.
 * Shows: current slide, next slide preview, notes, and timer.
@@ -1374,16 +1723,17 @@ function PresenterView({ children, notes }) {
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					style: {
-						border: "2px solid #3b82f6",
+						border: "2px solid #16a34a",
 						borderRadius: "0.5rem",
 						overflow: "hidden",
-						position: "relative",
-						backgroundColor: "var(--slide-bg, #fff)",
-						color: "var(--slide-text, #1a1a1a)"
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						backgroundColor: "#000"
 					},
 					children: /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
 						value: currentSlide,
-						children: slides[currentSlide]
+						children: /* @__PURE__ */ jsx(ScaledSlide, { children: slides[currentSlide] })
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -1395,25 +1745,29 @@ function PresenterView({ children, notes }) {
 					},
 					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)"
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							backgroundColor: "#000"
 						},
-						children: currentSlide < totalSlides - 1 && /* @__PURE__ */ jsx(SlideIndexContext.Provider, {
+						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]
-							})
+							children: /* @__PURE__ */ jsx(ScaledSlide, { children: slides[currentSlide + 1] })
+						}) : /* @__PURE__ */ jsx("div", {
+							style: {
+								width: "100%",
+								aspectRatio: "16 / 9",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								color: "#64748b",
+								fontSize: "0.875rem"
+							},
+							children: "End of slides"
 						})
 					}), /* @__PURE__ */ jsxs("div", {
 						style: {
@@ -1626,7 +1980,7 @@ 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);
+	if (type === "h1" || type === "h2") return extractText$1(el.props.children);
 	const children = el.props.children;
 	if (children == null) return null;
 	let result = null;
@@ -1638,12 +1992,12 @@ function extractHeading(node) {
 	return result;
 }
 /** Extract plain text from a React node tree */
-function extractText(node) {
+function extractText$1(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);
+	if (Array.isArray(node)) return node.map(extractText$1).join("");
+	if (isValidElement(node)) return extractText$1(node.props.children);
 	return "";
 }
 /**
@@ -1693,7 +2047,7 @@ function Toc({ children, className, style }) {
 					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))",
+					color: isActive ? "var(--toc-active-text, var(--slide-accent, #16a34a))" : "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"
@@ -1721,6 +2075,25 @@ function Toc({ children, className, style }) {
 //#endregion
 //#region src/Mermaid.tsx
 /**
+* Recursively extract text content from React children.
+* MDX wraps raw text in paragraphs and other elements,
+* so we need to traverse the tree to get the original text.
+*/
+function extractText(node) {
+	if (node == null || typeof node === "boolean") 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)) {
+		const { children } = node.props;
+		const text = extractText(children);
+		const tag = typeof node.type === "string" ? node.type : "";
+		if (tag === "p" || tag === "br") return `${text}\n`;
+		return text;
+	}
+	return "";
+}
+/**
 * Renders a Mermaid diagram.
 *
 * Usage in MDX:
@@ -1739,7 +2112,9 @@ function Mermaid({ children }) {
 	const [svg, setSvg] = useState("");
 	const [error, setError] = useState("");
 	const id = useId().replace(/:/g, "_");
+	const code = extractText(children).trim();
 	useEffect(() => {
+		if (!code) return;
 		let cancelled = false;
 		async function render() {
 			try {
@@ -1749,8 +2124,6 @@ function Mermaid({ children }) {
 					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);
@@ -1764,7 +2137,7 @@ function Mermaid({ children }) {
 		return () => {
 			cancelled = true;
 		};
-	}, [children, id]);
+	}, [code, id]);
 	if (error) return /* @__PURE__ */ jsx("div", {
 		className: "reslide-mermaid reslide-mermaid--error",
 		children: /* @__PURE__ */ jsx("pre", { children: error })
@@ -1776,4 +2149,4 @@ function Mermaid({ children }) {
 	});
 }
 //#endregion
-export { useDeck as C, DeckContext as S, useSlideIndex as _, PresenterView as a, openPresenterWindow as b, Mark as c, Slide as d, Deck as f, SlideIndexContext as g, PrintView as h, GlobalLayer as i, Click as l, ProgressBar as m, Toc as n, SlotRight as o, SlideNumber as p, Draggable as r, Notes as s, Mermaid as t, ClickSteps as u, NavigationBar as v, ClickNavigation as w, DrawingLayer as x, isPresenterView as y };
+export { DeckContext as C, DrawingLayer as S, ClickNavigation as T, useSlideIndex as _, PresenterView as a, isPresenterView as b, Mark as c, Slide as d, Deck as f, SlideIndexContext as g, PrintView as h, GlobalLayer as i, Click as l, ProgressBar as m, Toc as n, SlotRight as o, SlideNumber as p, Draggable as r, Notes as s, Mermaid as t, ClickSteps as u, Pointer as v, useDeck as w, openPresenterWindow as x, NavigationBar as y };

package/dist/{Mermaid-CUQUPHdK.d.mts → Mermaid-DWHv8vPf.d.mts}

@@ -9,10 +9,13 @@ interface DeckProps {
   children: ReactNode;
   /** Slide transition type */
   transition?: TransitionType;
+  /** Aspect ratio (default: 16/9). Set to 0 to disable and fill parent. */
+  aspectRatio?: number;
 }
 declare function Deck({
   children,
-  transition
+  transition,
+  aspectRatio
 }: DeckProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/Slide.d.ts
@@ -102,6 +105,17 @@ declare namespace SlotRight {
   var __reslideSlot: "right";
 }
 //#endregion
+//#region src/PrintView.d.ts
+/**
+ * Renders all slides in a printable handout layout.
+ * 6 slides per page (2 columns × 3 rows), each maintaining 16:9 ratio.
+ */
+declare function PrintView({
+  children
+}: {
+  children: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/PresenterView.d.ts
 interface PresenterViewProps {
   children: ReactNode;
@@ -216,8 +230,8 @@ declare function Toc({
 //#endregion
 //#region src/Mermaid.d.ts
 interface MermaidProps {
-  /** Mermaid diagram code */
-  children: string;
+  /** Mermaid diagram code (string or MDX children) */
+  children: ReactNode;
 }
 /**
  * Renders a Mermaid diagram.
@@ -237,4 +251,4 @@ declare function Mermaid({
   children
 }: MermaidProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Deck as C, SlideProps as S, TransitionType as T, MarkProps as _, Draggable as a, ClickSteps as b, GlobalLayerProps as c, PresenterView as d, PresenterViewProps as f, Mark as g, NotesProps as h, TocProps as i, isPresenterView as l, Notes as m, MermaidProps as n, DraggableProps as o, SlotRight as p, Toc as r, GlobalLayer as s, Mermaid as t, openPresenterWindow as u, Click as v, DeckProps as w, Slide as x, ClickProps as y };
+export { SlideProps as C, TransitionType as E, Slide as S, DeckProps as T, Mark as _, Draggable as a, ClickProps as b, GlobalLayerProps as c, PresenterView as d, PresenterViewProps as f, NotesProps as g, Notes as h, TocProps as i, isPresenterView as l, SlotRight as m, MermaidProps as n, DraggableProps as o, PrintView as p, Toc as r, GlobalLayer as s, Mermaid as t, openPresenterWindow as u, MarkProps as v, Deck as w, ClickSteps as x, Click as y };

package/dist/index.d.mts

@@ -1,19 +1,8 @@
-import { C as Deck, S as SlideProps, T as TransitionType, _ as MarkProps, a as Draggable, b as ClickSteps, c as GlobalLayerProps, d as PresenterView, f as PresenterViewProps, g as Mark, h as NotesProps, i as TocProps, l as isPresenterView, m as Notes, n as MermaidProps, o as DraggableProps, p as SlotRight, r as Toc, s as GlobalLayer, t as Mermaid, u as openPresenterWindow, v as Click, w as DeckProps, x as Slide, y as ClickProps } from "./Mermaid-CUQUPHdK.mjs";
+import { C as SlideProps, E as TransitionType, S as Slide, T as DeckProps, _ as Mark, a as Draggable, b as ClickProps, c as GlobalLayerProps, d as PresenterView, f as PresenterViewProps, g as NotesProps, h as Notes, i as TocProps, l as isPresenterView, m as SlotRight, n as MermaidProps, o as DraggableProps, p as PrintView, r as Toc, s as GlobalLayer, t as Mermaid, u as openPresenterWindow, v as MarkProps, w as Deck, x as ClickSteps, y as Click } from "./Mermaid-DWHv8vPf.mjs";
 import * as react from "react";
-import { CSSProperties, ElementType, ReactNode } from "react";
+import { CSSProperties, ElementType } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/PrintView.d.ts
-/**
- * Renders all slides vertically for print/PDF export.
- * Use with @media print CSS to generate PDFs via browser print.
- */
-declare function PrintView({
-  children
-}: {
-  children: ReactNode;
-}): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/DrawingLayer.d.ts
 interface DrawingLayerProps {
   /** Whether drawing mode is active */
@@ -77,7 +66,7 @@ interface ClickNavigationProps {
  * 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.
+ * Shows a gradient overlay and arrow indicator on hover (docswell style).
  */
 declare function ClickNavigation({
   onPrev,
@@ -98,6 +87,26 @@ declare function NavigationBar({
   onToggleDrawing: () => void;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Pointer.d.ts
+interface PointerProps {
+  /** Whether pointer mode is active */
+  active: boolean;
+  /** Pointer color (default: uses --slide-accent or #16a34a) */
+  color?: string;
+  /** Pointer diameter in pixels */
+  size?: number;
+}
+/**
+ * Presentation pointer — a large colored circle that follows the cursor.
+ * Clicking creates an expanding ripple effect to highlight a point.
+ * Toggle with `q` key (handled in Deck).
+ */
+declare function Pointer({
+  active,
+  color,
+  size
+}: PointerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/ProgressBar.d.ts
 declare function ProgressBar(): react_jsx_runtime0.JSX.Element;
 //#endregion
@@ -182,4 +191,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, NavigationBar, Notes, type NotesProps, PresenterView, type PresenterViewProps, PrintView, ProgressBar, ReslideEmbed, type ReslideEmbedProps, Slide, SlideIndexContext, SlideNumber, 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, Pointer, type PointerProps, PresenterView, type PresenterViewProps, PrintView, ProgressBar, ReslideEmbed, type ReslideEmbedProps, Slide, SlideIndexContext, SlideNumber, type SlideProps, SlotRight, Toc, type TocProps, type TransitionType, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { C as useDeck, S as DeckContext, _ as useSlideIndex, a as PresenterView, b as openPresenterWindow, c as Mark, d as Slide, f as Deck, g as SlideIndexContext, h as PrintView, i as GlobalLayer, l as Click, m as ProgressBar, n as Toc, o as SlotRight, p as SlideNumber, r as Draggable, s as Notes, t as Mermaid, u as ClickSteps, v as NavigationBar, w as ClickNavigation, x as DrawingLayer, y as isPresenterView } from "./Mermaid-CUCMRIkQ.mjs";
+import { C as DeckContext, S as DrawingLayer, T as ClickNavigation, _ as useSlideIndex, a as PresenterView, b as isPresenterView, c as Mark, d as Slide, f as Deck, g as SlideIndexContext, h as PrintView, i as GlobalLayer, l as Click, m as ProgressBar, n as Toc, o as SlotRight, p as SlideNumber, r as Draggable, s as Notes, t as Mermaid, u as ClickSteps, v as Pointer, w as useDeck, x as openPresenterWindow, y as NavigationBar } from "./Mermaid-BfetSkya.mjs";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import * as runtime from "react/jsx-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -180,4 +180,4 @@ function ReslideEmbed({ code, transition, components: userComponents, className,
 	});
 }
 //#endregion
-export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Mermaid, NavigationBar, Notes, PresenterView, PrintView, ProgressBar, ReslideEmbed, Slide, SlideIndexContext, SlideNumber, SlotRight, Toc, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };
+export { Click, ClickNavigation, ClickSteps, CodeEditor, Deck, DeckContext, Draggable, DrawingLayer, GlobalLayer, Mark, Mermaid, NavigationBar, Notes, Pointer, PresenterView, PrintView, ProgressBar, ReslideEmbed, Slide, SlideIndexContext, SlideNumber, SlotRight, Toc, isPresenterView, openPresenterWindow, useDeck, useSlideIndex };

package/dist/mdx-components.d.mts

@@ -1,4 +1,4 @@
-import { C as Deck, a as Draggable, b as ClickSteps, d as PresenterView, f as PresenterViewProps, g as Mark, l as isPresenterView, m as Notes, p as SlotRight, r as Toc, s as GlobalLayer, t as Mermaid, v as Click, x as Slide } from "./Mermaid-CUQUPHdK.mjs";
+import { S as Slide, _ as Mark, a as Draggable, d as PresenterView, f as PresenterViewProps, h as Notes, l as isPresenterView, m as SlotRight, p as PrintView, r as Toc, s as GlobalLayer, t as Mermaid, w as Deck, x as ClickSteps, y as Click } from "./Mermaid-DWHv8vPf.mjs";
 
 //#region src/mdx-components.d.ts
 declare const reslideComponents: {
@@ -15,4 +15,4 @@ declare const reslideComponents: {
   Mermaid: typeof Mermaid;
 };
 //#endregion
-export { PresenterView, type PresenterViewProps, isPresenterView, reslideComponents };
+export { PresenterView, type PresenterViewProps, PrintView, isPresenterView, reslideComponents };

package/dist/mdx-components.mjs

@@ -1,4 +1,4 @@
-import { a as PresenterView, c as Mark, d as Slide, f as Deck, i as GlobalLayer, l as Click, n as Toc, o as SlotRight, r as Draggable, s as Notes, t as Mermaid, u as ClickSteps, y as isPresenterView } from "./Mermaid-CUCMRIkQ.mjs";
+import { a as PresenterView, b as isPresenterView, c as Mark, d as Slide, f as Deck, h as PrintView, i as GlobalLayer, l as Click, n as Toc, o as SlotRight, r as Draggable, s as Notes, t as Mermaid, u as ClickSteps } from "./Mermaid-BfetSkya.mjs";
 //#region src/mdx-components.ts
 const reslideComponents = {
 	Deck,
@@ -14,4 +14,4 @@ const reslideComponents = {
 	Mermaid
 };
 //#endregion
-export { PresenterView, isPresenterView, reslideComponents };
+export { PresenterView, PrintView, isPresenterView, reslideComponents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reslide-dev/core",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Framework-agnostic React presentation components",
   "license": "MIT",
   "files": [

package/src/themes/default.css

@@ -1,7 +1,7 @@
 :root {
   --slide-bg: #ffffff;
   --slide-text: #1a1a2e;
-  --slide-accent: #3b82f6;
+  --slide-accent: #16a34a;
   --slide-section-text: #ffffff;
 
   --mark-yellow: #fef08a;

package/src/themes/print.css

@@ -1,58 +1,87 @@
 /**
  * Print stylesheet for reslide presentations.
- * Import this to enable Ctrl+P / Cmd+P PDF export.
+ * Handout layout: 6 slides per page (2 columns × 3 rows).
  *
- * Usage: import '@reslide/core/themes/print.css'
- *
- * This renders all slides vertically for printing,
- * each slide on its own page at 16:9 aspect ratio.
+ * Usage: import '@reslide-dev/core/print.css'
  */
-@media print {
-  /* Reset the deck for print layout */
-  .reslide-deck {
-    width: auto !important;
-    height: auto !important;
-    overflow: visible !important;
-    position: static !important;
-  }
 
-  /* Show all slides stacked vertically */
-  .reslide-slide {
-    page-break-after: always;
-    page-break-inside: avoid;
-    width: 100vw !important;
-    height: 56.25vw !important; /* 16:9 aspect ratio */
-    max-height: 100vh;
-    position: relative !important;
-    overflow: hidden !important;
-  }
+/* ── Screen preview ── */
+.reslide-print-page {
+  background: #f0f0f0;
+  min-height: 100vh;
+  padding: 2rem;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+.reslide-print-page .reslide-print-view {
+  max-width: 800px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.reslide-print-page .reslide-print-slide-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
 
-  /* Remove the last page break */
-  .reslide-slide:last-child {
-    page-break-after: auto;
+.reslide-print-page .reslide-print-slide-frame {
+  aspect-ratio: 16 / 9;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--slide-bg, white);
+  position: relative;
+}
+
+.reslide-print-page .reslide-print-slide-content {
+  overflow: hidden;
+}
+
+.reslide-print-page .reslide-print-slide-label {
+  font-size: 0.75rem;
+  color: #888;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+}
+
+/* Show all click content */
+.reslide-print-page .reslide-click {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+/* ── Print layout ── */
+@media print {
+  .reslide-print-page {
+    background: white !important;
+    padding: 0 !important;
   }
 
-  /* Hide UI elements */
-  .reslide-slide-number,
-  .reslide-overview,
-  .reslide-notes,
-  canvas {
-    display: none !important;
+  .reslide-print-page .reslide-print-view {
+    max-width: none !important;
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+    gap: 8mm !important;
+    padding: 10mm !important;
   }
 
-  /* Show all click content */
-  .reslide-click {
-    opacity: 1 !important;
-    visibility: visible !important;
+  .reslide-print-page .reslide-print-slide-frame {
+    border: 0.5pt solid #ccc !important;
+    border-radius: 0 !important;
   }
 
-  /* Ensure transition container shows content */
-  .reslide-transition-container {
-    position: static !important;
+  .reslide-print-page .reslide-print-slide-label {
+    font-size: 7pt !important;
+    color: #666 !important;
+    margin-top: 1mm !important;
   }
 
-  .reslide-transition-slide {
-    position: static !important;
-    animation: none !important;
+  /* 6 slides per page (2×3) — force page break after every 6th card */
+  .reslide-print-page .reslide-print-slide-card:nth-child(6n) {
+    page-break-after: always;
   }
 }