@open-slide/core 0.0.7 → 0.0.8

package/dist/{build-cUKUY4bh.js → build-CXY2DSzy.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-BYTf0qVz.js";
 import path from "node:path";
 import { build as build$1, mergeConfig } from "vite";
 

package/dist/cli/bin.js

@@ -22,15 +22,15 @@ async function run(argv) {
 	const program = new Command();
 	program.name("open-slide").description("Author slides — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-slide --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { dev } = await import("../dev-Brzmgu64.js");
+		const { dev } = await import("../dev-BxCKugi3.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-cUKUY4bh.js");
+		const { build } = await import("../build-CXY2DSzy.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-Bf8iFXA-.js");
+		const { preview } = await import("../preview-C1F-rHfx.js");
 		await preview(flags);
 	});
 	await program.parseAsync(argv, { from: "user" });

package/dist/{config-DOcMmFJ7.js → config-BYTf0qVz.js}

@@ -758,7 +758,16 @@ async function createViteConfig(opts) {
 				"tailwind-merge",
 				"class-variance-authority",
 				"emoji-picker-react"
-			]
+			],
+			esbuildOptions: { plugins: [{
+				name: "open-slide:virtual-externals",
+				setup(build$1) {
+					build$1.onResolve({ filter: /^virtual:open-slide\// }, (args) => ({
+						path: args.path,
+						external: true
+					}));
+				}
+			}] }
 		},
 		server: {
 			port: config.port ?? 5173,

package/dist/{dev-Brzmgu64.js → dev-BxCKugi3.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-BYTf0qVz.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/{preview-Bf8iFXA-.js → preview-C1F-rHfx.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-BYTf0qVz.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/vite/index.js

@@ -1,3 +1,3 @@
-import { createViteConfig } from "../config-DOcMmFJ7.js";
+import { createViteConfig } from "../config-BYTf0qVz.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/src/app/components/Player.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useWheelPageNavigation } from '@/lib/useWheelPageNavigation';
 import type { Page } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
 
@@ -12,6 +13,20 @@ type Props = {
 
 export function Player({ pages, index, onIndexChange, onExit, allowExit = true }: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
+  const goPrev = useCallback(() => {
+    if (index > 0) onIndexChange(index - 1);
+  }, [index, onIndexChange]);
+  const goNext = useCallback(() => {
+    if (index < pages.length - 1) onIndexChange(index + 1);
+  }, [index, pages.length, onIndexChange]);
+
+  useWheelPageNavigation({
+    ref: rootRef,
+    canPrev: index > 0,
+    canNext: index < pages.length - 1,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
 
   useEffect(() => {
     const el = rootRef.current;
@@ -69,14 +84,14 @@ export function Player({ pages, index, onIndexChange, onExit, allowExit = true }
       <button
         type="button"
         aria-label="Previous page"
-        onClick={() => index > 0 && onIndexChange(index - 1)}
+        onClick={goPrev}
         disabled={index === 0}
         className="absolute inset-y-0 left-0 z-10 w-[30%]"
       />
       <button
         type="button"
         aria-label="Next page"
-        onClick={() => index < pages.length - 1 && onIndexChange(index + 1)}
+        onClick={goNext}
         disabled={index === pages.length - 1}
         className="absolute inset-y-0 right-0 z-10 w-[30%]"
       />

package/src/app/lib/useWheelPageNavigation.ts

@@ -0,0 +1,92 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+const WHEEL_PAGE_THRESHOLD_PX = 12;
+const WHEEL_NAV_COOLDOWN_MS = 100;
+const WHEEL_GESTURE_IDLE_MS = 80;
+
+type UseWheelPageNavigationOptions<T extends HTMLElement> = {
+  ref: RefObject<T>;
+  enabled?: boolean;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+export function useWheelPageNavigation<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+}: UseWheelPageNavigationOptions<T>) {
+  const accumulatedDeltaRef = useRef(0);
+  const lastWheelAtRef = useRef(0);
+  const lastNavigateAtRef = useRef(0);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.defaultPrevented || event.ctrlKey || shouldIgnoreWheelTarget(event.target)) return;
+
+      const deltaY = normalizeDeltaY(event);
+      if (Math.abs(deltaY) <= Math.abs(normalizeDeltaX(event))) return;
+
+      const now = performance.now();
+      if (now - lastWheelAtRef.current > WHEEL_GESTURE_IDLE_MS) {
+        accumulatedDeltaRef.current = 0;
+      }
+      lastWheelAtRef.current = now;
+
+      if (now - lastNavigateAtRef.current < WHEEL_NAV_COOLDOWN_MS) {
+        event.preventDefault();
+        return;
+      }
+
+      accumulatedDeltaRef.current += deltaY;
+      if (Math.abs(accumulatedDeltaRef.current) < WHEEL_PAGE_THRESHOLD_PX) {
+        event.preventDefault();
+        return;
+      }
+
+      const direction = Math.sign(accumulatedDeltaRef.current);
+      accumulatedDeltaRef.current = 0;
+      event.preventDefault();
+
+      if (direction > 0 && canNext) {
+        lastNavigateAtRef.current = now;
+        onNext();
+      } else if (direction < 0 && canPrev) {
+        lastNavigateAtRef.current = now;
+        onPrev();
+      }
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [ref, enabled, canPrev, canNext, onPrev, onNext]);
+}
+
+function normalizeDeltaY(event: WheelEvent) {
+  return normalizeWheelDelta(event.deltaY, event.deltaMode);
+}
+
+function normalizeDeltaX(event: WheelEvent) {
+  return normalizeWheelDelta(event.deltaX, event.deltaMode);
+}
+
+function normalizeWheelDelta(delta: number, deltaMode: number) {
+  if (deltaMode === WheelEvent.DOM_DELTA_LINE) return delta * 16;
+  if (deltaMode === WheelEvent.DOM_DELTA_PAGE) return delta * 800;
+  return delta;
+}
+
+function shouldIgnoreWheelTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest('input, textarea, select, [contenteditable="true"], [data-wheel-nav-ignore]'),
+  );
+}

package/src/app/routes/Slide.tsx

@@ -1,10 +1,14 @@
+import config from 'virtual:open-slide/config';
 import { ChevronLeft, Download, FileCode2, Loader2, Pencil, Play } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
-import config from 'virtual:open-slide/config';
 import { CommentWidget } from '@/components/inspector/CommentWidget';
 import { InspectOverlay } from '@/components/inspector/InspectOverlay';
-import { InspectorProvider, InspectToggleButton } from '@/components/inspector/InspectorProvider';
+import {
+  InspectorProvider,
+  InspectToggleButton,
+  useInspector,
+} from '@/components/inspector/InspectorProvider';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -14,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Separator } from '@/components/ui/separator';
 import { useFolders } from '@/lib/folders';
+import { useWheelPageNavigation } from '@/lib/useWheelPageNavigation';
 import { cn } from '@/lib/utils';
 import { ClickNavZones } from '../components/ClickNavZones';
 import { Player } from '../components/Player';
@@ -33,6 +38,7 @@ export function Slide() {
   const [playing, setPlaying] = useState(false);
   const [exporting, setExporting] = useState(false);
   const { renameSlide } = useFolders();
+  const slideViewportRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -231,9 +237,17 @@ export function Slide() {
             <ThumbnailRail pages={pages} current={index} onSelect={goTo} />
           </div>
           <main
+            ref={slideViewportRef}
             data-inspector-root
             className="relative min-h-0 min-w-0 flex-1 bg-background p-2 md:p-8"
           >
+            <SlideWheelNavigation
+              targetRef={slideViewportRef}
+              onPrev={() => goTo(index - 1)}
+              onNext={() => goTo(index + 1)}
+              canPrev={index > 0}
+              canNext={index < pageCount - 1}
+            />
             <SlideCanvas>
               <CurrentPage />
             </SlideCanvas>
@@ -256,6 +270,33 @@ export function Slide() {
   );
 }
 
+function SlideWheelNavigation({
+  targetRef,
+  onPrev,
+  onNext,
+  canPrev,
+  canNext,
+}: {
+  targetRef: RefObject<HTMLElement>;
+  onPrev: () => void;
+  onNext: () => void;
+  canPrev: boolean;
+  canNext: boolean;
+}) {
+  const { active } = useInspector();
+
+  useWheelPageNavigation({
+    ref: targetRef,
+    enabled: !active,
+    canPrev,
+    canNext,
+    onPrev,
+    onNext,
+  });
+
+  return null;
+}
+
 function InlineTitleEditor({
   title,
   onSubmit,