@reslide-dev/core 0.0.1 → 0.1.0

package/dist/index.d.mts

@@ -245,6 +245,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 +314,9 @@ declare function ClickNavigation({
   disabled
 }: ClickNavigationProps): react_jsx_runtime0.JSX.Element | null;
 //#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 +391,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, 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
@@ -188,6 +188,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 +219,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 +240,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",
@@ -493,6 +516,7 @@ function Deck({ children, transition = "none" }) {
 					current: currentSlide + 1,
 					total: totalSlides
 				}),
+				!isOverview && !isPrinting && /* @__PURE__ */ jsx(ProgressBar, {}),
 				!isOverview && !isPrinting && /* @__PURE__ */ jsx(DrawingLayer, { active: isDrawing })
 			]
 		})
@@ -755,19 +779,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 +809,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
 	});
 }
@@ -1187,6 +1211,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 +1441,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, 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.1.0",
   "description": "Framework-agnostic React presentation components",
   "license": "MIT",
   "files": [
@@ -10,32 +10,37 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.mjs",
+    "./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"
   },
   "devDependencies": {
-    "@testing-library/dom": "catalog:",
-    "@testing-library/react": "catalog:",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "jsdom": "catalog:",
+    "jsdom": "^29.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "vite-plus": "catalog:",
-    "vitest": "catalog:"
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
   },
   "peerDependencies": {
     "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;