diff --git a/web/src/reader/gestures.ts b/web/src/reader/gestures.ts
new file mode 100644
index 0000000..16abd0a
--- /dev/null
+++ b/web/src/reader/gestures.ts
@@ -0,0 +1,115 @@
+// Touch gesture controls for mobile/tablet
+// Procedural implementation (no OOP)
+
+interface GestureHandlers {
+ onSwipeLeft: () => void;
+ onSwipeRight: () => void;
+ onSwipeUp: () => void;
+ onSwipeDown: () => void;
+ onPinch: (scale: number) => void;
+ onTap: () => void;
+ onDoubleTap: () => void;
+}
+
+interface GestureState {
+ touchStartX: number;
+ touchStartY: number;
+ touchStartTime: number;
+ lastTapTime: number;
+ initialPinchDistance: number;
+ scale: number;
+}
+
+function setupGestureControls(
+ container: HTMLElement,
+ handlers: GestureHandlers,
+): void {
+ let state: GestureState = {
+ touchStartX: 0,
+ touchStartY: 0,
+ touchStartTime: 0,
+ lastTapTime: 0,
+ initialPinchDistance: 0,
+ scale: 1,
+ };
+
+ container.addEventListener(
+ "touchstart",
+ (e) => {
+ if (e.touches.length === 1) {
+ state.touchStartX = e.touches[0].clientX;
+ state.touchStartY = e.touches[0].clientY;
+ state.touchStartTime = Date.now();
+ } else if (e.touches.length === 2) {
+ state.initialPinchDistance = getPinchDistance(e.touches);
+ }
+ },
+ { passive: true },
+ );
+
+ container.addEventListener(
+ "touchend",
+ (e) => {
+ const deltaX = e.changedTouches[0].clientX - state.touchStartX;
+ const deltaY = e.changedTouches[0].clientY - state.touchStartY;
+ const deltaTime = Date.now() - state.touchStartTime;
+
+ if (Math.abs(deltaX) < 30 && Math.abs(deltaY) < 30 && deltaTime < 300) {
+ const now = Date.now();
+ if (now - state.lastTapTime < 300) {
+ handlers.onDoubleTap();
+ state.lastTapTime = 0;
+ } else {
+ state.lastTapTime = now;
+ setTimeout(() => {
+ if (state.lastTapTime !== 0) {
+ handlers.onTap();
+ }
+ }, 300);
+ }
+ return;
+ }
+
+ const minSwipeDistance = 50;
+ const maxSwipeTime = 500;
+
+ if (deltaTime > maxSwipeTime) return;
+
+ if (Math.abs(deltaX) > Math.abs(deltaY)) {
+ if (deltaX > minSwipeDistance) {
+ handlers.onSwipeRight();
+ } else if (deltaX < -minSwipeDistance) {
+ handlers.onSwipeLeft();
+ }
+ } else {
+ if (deltaY > minSwipeDistance) {
+ handlers.onSwipeDown();
+ } else if (deltaY < -minSwipeDistance) {
+ handlers.onSwipeUp();
+ }
+ }
+ },
+ { passive: true },
+ );
+
+ container.addEventListener(
+ "touchmove",
+ (e) => {
+ if (e.touches.length === 2) {
+ const currentDistance = getPinchDistance(e.touches);
+ if (state.initialPinchDistance > 0) {
+ const scale = currentDistance / state.initialPinchDistance;
+ state.scale = scale;
+ handlers.onPinch(scale);
+ }
+ }
+ },
+ { passive: true },
+ );
+}
+
+function getPinchDistance(touches: TouchList): number {
+ const dx = touches[0].clientX - touches[1].clientX;
+ const dy = touches[0].clientY - touches[1].clientY;
+ return Math.sqrt(dx * dx + dy * dy);
+}
diff --git a/web/src/reader/keyboard-shortcuts.ts b/web/src/reader/keyboard-shortcuts.ts
new file mode 100644
index 0000000..7f87e6f
--- /dev/null
+++ b/web/src/reader/keyboard-shortcuts.ts
@@ -0,0 +1,146 @@
+// Extended keyboard shortcuts for all readers
+// Procedural implementation (no OOP)
+
+interface KeyboardShortcutHandler {
+ onNextPage: () => void;
+ onPreviousPage: () => void;
+ onNextChapter: () => void;
+ onPreviousChapter: () => void;
+ onGoToPage: (page: number) => void;
+ onToggleBookmark: () => void;
+ onZoomIn: () => void;
+ onZoomOut: () => void;
+ onToggleFullscreen: () => void;
+ onClose: () => void;
+}
+
+function setupKeyboardShortcuts(
+ container: HTMLElement,
+ handlers: KeyboardShortcutHandler,
+ maxPage: number,
+): void {
+ container.addEventListener("keydown", (e) => {
+ if (
+ e.target instanceof HTMLInputElement ||
+ e.target instanceof HTMLTextAreaElement
+ ) {
+ return;
+ }
+
+ switch (e.key) {
+ case "ArrowRight":
+ case "PageDown":
+ case "l":
+ e.preventDefault();
+ handlers.onNextPage();
+ break;
+
+ case "ArrowLeft":
+ case "PageUp":
+ case "h":
+ e.preventDefault();
+ handlers.onPreviousPage();
+ break;
+
+ case "ArrowUp":
+ case "k":
+ e.preventDefault();
+ handlers.onPreviousPage();
+ break;
+
+ case "ArrowDown":
+ case "j":
+ e.preventDefault();
+ handlers.onNextPage();
+ break;
+
+ case " ":
+ e.preventDefault();
+ handlers.onNextPage();
+ break;
+
+ case "Home":
+ e.preventDefault();
+ handlers.onGoToPage(1);
+ break;
+
+ case "End":
+ e.preventDefault();
+ handlers.onGoToPage(maxPage);
+ break;
+
+ case "b":
+ if (!e.ctrlKey && !e.metaKey) {
+ e.preventDefault();
+ handlers.onToggleBookmark();
+ }
+ break;
+
+ case "+":
+ case "=":
+ e.preventDefault();
+ handlers.onZoomIn();
+ break;
+
+ case "-":
+ case "_":
+ e.preventDefault();
+ handlers.onZoomOut();
+ break;
+
+ case "0":
+ e.preventDefault();
+ handlers.onZoomIn();
+ handlers.onZoomIn();
+ handlers.onZoomIn();
+ break;
+
+ case "f":
+ if (!e.ctrlKey && !e.metaKey) {
+ e.preventDefault();
+ handlers.onToggleFullscreen();
+ }
+ break;
+
+ case "Escape":
+ e.preventDefault();
+ handlers.onClose();
+ break;
+
+ default:
+ if (e.key >= "1" && e.key <= "9") {
+ const targetPage = Math.floor((parseInt(e.key) / 10) * maxPage);
+ e.preventDefault();
+ handlers.onGoToPage(targetPage);
+ }
+ }
+ });
+}
+
+function showShortcutHelp(): void {
+ const help = document.createElement("div");
+ help.className =
+ "keyboard-shortcut-help fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50";
+ help.innerHTML = `
+
+
Keyboard Shortcuts
+
+
→ / Space Next page
+
← Previous page
+
Home First page
+
End Last page
+
+ / - Zoom
+
B Toggle bookmark
+
F Fullscreen
+
1-9 Jump to %
+
+
+