@honeydeck/honeydeck 0.1.0

package/src/runtime/useSwipeNav.ts

@@ -0,0 +1,257 @@
+import { type RefObject, useEffect, useRef } from "react";
+import { shouldDeckOwnTouchGesture } from "./inputOwnership.ts";
+import {
+	nextSlide,
+	nextStep,
+	previousSlide,
+	previousStep,
+} from "./navigation.ts";
+import type { Route } from "./router.ts";
+import { parseHash } from "./router.ts";
+import { slideData } from "./slideData.ts";
+
+export type PanDelta = { dx: number; dy: number };
+
+export type UseSwipeNavOptions = {
+	/** Whether touch navigation should be active. */
+	enabled?: boolean;
+	/** Minimum swipe distance in px before the gesture fires. @default 50 */
+	threshold?: number;
+	/** Current Honeydeck slide zoom. */
+	zoom?: number;
+	/** Gesture boundary. Scrollable ancestors are detected before this element. */
+	boundaryRef?: RefObject<Element | null>;
+	/** Called when the center tap zone is tapped. */
+	onToggleNavBar?: () => void;
+	/** Called when pinch/drag changes slide zoom. */
+	onZoomChange?: (zoom: number) => void;
+	/** Called when zoom should reset to 1. */
+	onResetZoom?: () => void;
+	/** Called when one-finger drag pans a zoomed slide. */
+	onPanBy?: (delta: PanDelta) => void;
+};
+
+type TouchGestureState =
+	| null
+	| {
+			kind: "single";
+			x: number;
+			y: number;
+			lastX: number;
+			lastY: number;
+			owned: boolean;
+	  }
+	| {
+			kind: "pinch";
+			distance: number;
+			initialZoom: number;
+			lastFactor: number;
+			lastZoom: number;
+			owned: boolean;
+	  };
+
+const TAP_MAX_DISTANCE = 10;
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 5;
+const ZOOM_RESET_THRESHOLD = 1.05;
+
+export function useSwipeNav({
+	enabled = true,
+	threshold = 50,
+	zoom = 1,
+	boundaryRef,
+	onToggleNavBar,
+	onZoomChange,
+	onResetZoom,
+	onPanBy,
+}: UseSwipeNavOptions = {}): void {
+	const gestureRef = useRef<TouchGestureState>(null);
+	const zoomRef = useRef(zoom);
+	zoomRef.current = zoom;
+
+	const callbacksRef = useRef({
+		onToggleNavBar,
+		onZoomChange,
+		onResetZoom,
+		onPanBy,
+	});
+	callbacksRef.current = {
+		onToggleNavBar,
+		onZoomChange,
+		onResetZoom,
+		onPanBy,
+	};
+
+	useEffect(() => {
+		if (!enabled) return;
+
+		function getBoundary() {
+			return boundaryRef?.current ?? null;
+		}
+
+		function onTouchStart(e: TouchEvent) {
+			const owned = shouldDeckOwnTouchGesture(e.target, getBoundary());
+
+			if (e.touches.length >= 2) {
+				const distance = getTouchDistance(e.touches[0], e.touches[1]);
+				gestureRef.current = {
+					kind: "pinch",
+					distance,
+					initialZoom: zoomRef.current,
+					lastFactor: 1,
+					lastZoom: zoomRef.current,
+					owned,
+				};
+				return;
+			}
+
+			const t = e.touches[0];
+			if (!t) return;
+			gestureRef.current = {
+				kind: "single",
+				x: t.clientX,
+				y: t.clientY,
+				lastX: t.clientX,
+				lastY: t.clientY,
+				owned,
+			};
+		}
+
+		function onTouchMove(e: TouchEvent) {
+			const state = gestureRef.current;
+			if (!state?.owned) return;
+
+			if (state.kind === "pinch" && e.touches.length >= 2) {
+				const distance = getTouchDistance(e.touches[0], e.touches[1]);
+				const factor = distance / state.distance;
+				state.lastFactor = factor;
+
+				const nextZoom = clampZoom(state.initialZoom * factor);
+				state.lastZoom = nextZoom;
+				if (nextZoom >= MIN_ZOOM) {
+					callbacksRef.current.onZoomChange?.(nextZoom);
+				}
+				e.preventDefault();
+				return;
+			}
+
+			if (state.kind === "single" && zoomRef.current > 1) {
+				const t = e.touches[0];
+				if (!t) return;
+				callbacksRef.current.onPanBy?.({
+					dx: t.clientX - state.lastX,
+					dy: t.clientY - state.lastY,
+				});
+				state.lastX = t.clientX;
+				state.lastY = t.clientY;
+				e.preventDefault();
+			}
+		}
+
+		function onTouchEnd(e: TouchEvent) {
+			const state = gestureRef.current;
+			if (!state) return;
+			gestureRef.current = null;
+
+			if (!state.owned) return;
+
+			if (state.kind === "pinch") {
+				const route = parseCurrentRoute();
+				if (route.view !== "slide") return;
+
+				if (state.lastZoom < ZOOM_RESET_THRESHOLD) {
+					callbacksRef.current.onResetZoom?.();
+				}
+				return;
+			}
+
+			const t = e.changedTouches[0];
+			if (!t) return;
+
+			const dx = t.clientX - state.x;
+			const dy = t.clientY - state.y;
+			const adx = Math.abs(dx);
+			const ady = Math.abs(dy);
+
+			if (adx <= TAP_MAX_DISTANCE && ady <= TAP_MAX_DISTANCE) {
+				handleTapZone(t.clientX, t.clientY, zoomRef.current > 1);
+				return;
+			}
+
+			if (zoomRef.current > 1) return;
+			if (adx < threshold && ady < threshold) return;
+
+			const route = parseCurrentRoute();
+			if (route.view !== "slide" && route.view !== "presenter") return;
+
+			const options = {
+				slideCount: slideData.length,
+				getStepCount: (slideIndex: number) =>
+					slideData[slideIndex]?.stepCount ?? 0,
+			};
+
+			if (adx >= ady) {
+				if (dx < 0) nextStep(route, options);
+				else previousStep(route, options);
+			} else if (dy < 0) {
+				nextSlide(route, options);
+			} else {
+				previousSlide(route, options);
+			}
+		}
+
+		function handleTapZone(x: number, y: number, isZoomed: boolean) {
+			const width = window.innerWidth || 1;
+			const height = window.innerHeight || 1;
+			const xRatio = x / width;
+			const yRatio = y / height;
+
+			const isCenter =
+				yRatio >= 0.25 && yRatio <= 0.75 && xRatio >= 0.35 && xRatio <= 0.65;
+			if (isCenter) {
+				callbacksRef.current.onToggleNavBar?.();
+				return;
+			}
+
+			if (isZoomed) return;
+
+			const route = parseCurrentRoute();
+			if (route.view !== "slide" && route.view !== "presenter") return;
+			const options = {
+				slideCount: slideData.length,
+				getStepCount: (slideIndex: number) =>
+					slideData[slideIndex]?.stepCount ?? 0,
+			};
+
+			if (yRatio < 0.25) previousSlide(route, options);
+			else if (yRatio > 0.75) nextSlide(route, options);
+			else if (xRatio < 0.35) previousStep(route, options);
+			else if (xRatio > 0.65) nextStep(route, options);
+			else callbacksRef.current.onToggleNavBar?.();
+		}
+
+		window.addEventListener("touchstart", onTouchStart, { passive: true });
+		window.addEventListener("touchmove", onTouchMove, { passive: false });
+		window.addEventListener("touchend", onTouchEnd, { passive: true });
+		window.addEventListener("touchcancel", onTouchEnd, { passive: true });
+
+		return () => {
+			window.removeEventListener("touchstart", onTouchStart);
+			window.removeEventListener("touchmove", onTouchMove);
+			window.removeEventListener("touchend", onTouchEnd);
+			window.removeEventListener("touchcancel", onTouchEnd);
+		};
+	}, [enabled, threshold, boundaryRef]);
+}
+
+function getTouchDistance(a: Touch, b: Touch): number {
+	return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+}
+
+function clampZoom(value: number): number {
+	return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
+}
+
+function parseCurrentRoute(): Route {
+	return parseHash(location.hash);
+}

package/src/runtime/views/DocsView.tsx

@@ -0,0 +1,74 @@
+/**
+ * DocsView — built-in runtime reference for the active Honeydeck setup.
+ *
+ * Routes:
+ *   /#/theme
+ *   /#/layouts
+ *   /#/components
+ */
+
+import { useEffect, useRef } from "react";
+import type { ColorMode } from "../components/ColorModeCycleButton.tsx";
+import { isEditableKeyboardTarget } from "../keyboardTarget.ts";
+import { getRememberedSlideRoute } from "../lastSlideRoute.ts";
+import type { KitTab } from "../router.ts";
+import { navigate } from "../router.ts";
+import { ComponentsTab } from "./docs/ComponentsTab.tsx";
+import { DocsHeader } from "./docs/DocsHeader.tsx";
+import { LayoutsTab } from "./docs/LayoutsTab.tsx";
+import { ThemeTab } from "./docs/ThemeTab.tsx";
+
+export type DocsViewProps = {
+	tab?: KitTab;
+	colorMode: ColorMode;
+	onSetColorMode: (mode: ColorMode) => void;
+};
+
+export function DocsView({
+	tab = "theme",
+	colorMode,
+	onSetColorMode,
+}: DocsViewProps) {
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		void tab;
+		scrollRef.current?.scrollTo({ top: 0 });
+	}, [tab]);
+
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key !== "Escape") return;
+			if (isEditableKeyboardTarget(event.target)) return;
+
+			event.preventDefault();
+			navigate(getRememberedSlideRoute());
+		}
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, []);
+
+	return (
+		<div
+			ref={scrollRef}
+			className="fixed inset-0 overflow-auto bg-background text-foreground font-sans"
+		>
+			<DocsHeader
+				tab={tab}
+				colorMode={colorMode}
+				onSetColorMode={onSetColorMode}
+			/>
+
+			<main className="mx-auto max-w-7xl px-5 py-8 sm:px-8">
+				{tab === "layouts" ? (
+					<LayoutsTab />
+				) : tab === "components" ? (
+					<ComponentsTab />
+				) : (
+					<ThemeTab />
+				)}
+			</main>
+		</div>
+	);
+}

package/src/runtime/views/OverviewView.tsx

@@ -0,0 +1,386 @@
+import {
+	type KeyboardEvent,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { navigate } from "../router.ts";
+import { SlideCanvas } from "../SlideCanvas.tsx";
+import { BASE_HEIGHT, BASE_WIDTH, slideData } from "../slideData.ts";
+import {
+	getOverviewGridColumnCount,
+	getOverviewGridSelectionMove,
+} from "./overviewGrid.ts";
+
+const DESKTOP_THUMB_W = 360;
+const SELECTION_SCROLL_MARGIN = 96;
+const SELECTION_SCROLL_DURATION_MS = 180;
+const MOBILE_COLUMNS = 2;
+const MOBILE_PADDING = 16;
+const MOBILE_GAP = 12;
+
+type BoundaryFeedback = {
+	direction: "up" | "down";
+	key: number;
+	selected: number;
+};
+
+type SelectionState = {
+	selected: number;
+	boundaryFeedback: BoundaryFeedback | null;
+};
+
+type SelectionSource = "keyboard" | "direct";
+
+export type OverviewViewProps = {
+	/** 1-based number of the slide encoded by the overview route. */
+	currentSlide: number;
+	/** 0-based step remembered by the overview route for returning to slides. */
+	currentStep: number;
+	/** Called when the overview should close. */
+	onClose: () => void;
+};
+
+export function OverviewView({
+	currentSlide,
+	currentStep,
+	onClose,
+}: OverviewViewProps) {
+	void currentStep;
+	const [selectionState, setSelectionState] = useState<SelectionState>({
+		selected: Math.max(0, currentSlide - 1),
+		boundaryFeedback: null,
+	});
+	const { selected, boundaryFeedback } = selectionState;
+	const [viewportWidth, setViewportWidth] = useState(() =>
+		typeof window === "undefined" ? 1024 : window.innerWidth,
+	);
+	const isMobile = useOverviewMobile();
+	const selectionSourceRef = useRef<SelectionSource>("direct");
+	const containerRef = useRef<HTMLDivElement>(null);
+	const gridRef = useRef<HTMLDivElement>(null);
+	const selectedRef = useRef<HTMLDivElement | null>(null);
+	const colsRef = useRef(1);
+	const total = slideData.length;
+
+	const gap = isMobile ? MOBILE_GAP : 48;
+	const thumbW = isMobile
+		? Math.max(
+				1,
+				(viewportWidth - MOBILE_PADDING * 2 - gap * (MOBILE_COLUMNS - 1)) /
+					MOBILE_COLUMNS,
+			)
+		: DESKTOP_THUMB_W;
+	const canvasW = thumbW;
+	const canvasH = canvasW * (BASE_HEIGHT / BASE_WIDTH);
+	const thumbScale = canvasW / BASE_WIDTH;
+
+	useEffect(() => {
+		containerRef.current?.focus();
+	}, []);
+
+	useEffect(() => {
+		const routeSelected = Math.max(0, currentSlide - 1);
+		selectionSourceRef.current = "direct";
+		setSelectionState({ selected: routeSelected, boundaryFeedback: null });
+	}, [currentSlide]);
+
+	useEffect(() => {
+		const update = () => setViewportWidth(window.innerWidth);
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, []);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		const selectedElement = selectedRef.current;
+		if (selected < 0 || !container || !selectedElement) return;
+
+		const scrollContainer = container;
+		const startTop = scrollContainer.scrollTop;
+		const targetTop = getScrollTopForNearestElement(
+			scrollContainer,
+			selectedElement,
+			SELECTION_SCROLL_MARGIN,
+		);
+		const distance = targetTop - startTop;
+
+		if (Math.abs(distance) < 1 || getReducedMotionPreference()) {
+			container.scrollTop = targetTop;
+			return;
+		}
+
+		const startTime = performance.now();
+		let animationFrame = 0;
+
+		function animate(now: number) {
+			const progress = Math.min(
+				1,
+				(now - startTime) / SELECTION_SCROLL_DURATION_MS,
+			);
+			scrollContainer.scrollTop = startTop + distance * easeOutCubic(progress);
+
+			if (progress < 1) animationFrame = requestAnimationFrame(animate);
+		}
+
+		animationFrame = requestAnimationFrame(animate);
+		return () => cancelAnimationFrame(animationFrame);
+	}, [selected]);
+
+	const jumpTo = useCallback((index: number) => {
+		navigate({ view: "slide", slide: index + 1, step: 0 });
+	}, []);
+
+	const updateColumnCount = useCallback(() => {
+		colsRef.current = getOverviewGridColumnCount(gridRef.current);
+		return colsRef.current;
+	}, []);
+
+	useEffect(() => {
+		updateColumnCount();
+
+		const grid = gridRef.current;
+		if (!grid) return;
+
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", updateColumnCount);
+			return () => window.removeEventListener("resize", updateColumnCount);
+		}
+
+		const resizeObserver = new ResizeObserver(() => updateColumnCount());
+		resizeObserver.observe(grid);
+		return () => resizeObserver.disconnect();
+	}, [updateColumnCount]);
+
+	function setSelectedFrom(source: SelectionSource, index: number) {
+		selectionSourceRef.current = source;
+		setSelectionState({ selected: index, boundaryFeedback: null });
+	}
+
+	function moveSelection(
+		direction: Parameters<typeof getOverviewGridSelectionMove>[3],
+	) {
+		const columns = updateColumnCount();
+		selectionSourceRef.current = "keyboard";
+
+		setSelectionState((state) => {
+			const move = getOverviewGridSelectionMove(
+				state.selected,
+				total,
+				columns,
+				direction,
+			);
+
+			if (!move.didMove && direction === "ArrowUp") {
+				return {
+					selected: move.selected,
+					boundaryFeedback: {
+						direction: "up",
+						key: (state.boundaryFeedback?.key ?? 0) + 1,
+						selected: state.selected,
+					},
+				};
+			}
+
+			if (!move.didMove && direction === "ArrowDown") {
+				return {
+					selected: move.selected,
+					boundaryFeedback: {
+						direction: "down",
+						key: (state.boundaryFeedback?.key ?? 0) + 1,
+						selected: state.selected,
+					},
+				};
+			}
+
+			return { selected: move.selected, boundaryFeedback: null };
+		});
+	}
+
+	function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowLeft":
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault();
+				moveSelection(e.key);
+				break;
+			case "w":
+			case "a":
+			case "s":
+			case "d":
+				e.preventDefault();
+				break;
+			case "Enter":
+				if (e.target !== e.currentTarget) return;
+				e.preventDefault();
+				jumpTo(selected);
+				break;
+			case "o":
+			case "Escape":
+				e.preventDefault();
+				onClose();
+				break;
+		}
+	}
+
+	return (
+		<div
+			className="fixed inset-0 z-[100] overflow-y-auto bg-background/50 text-foreground outline-none backdrop-blur-xl overscroll-contain"
+			tabIndex={-1}
+			ref={containerRef}
+			onKeyDown={handleKeyDown}
+			role="dialog"
+			aria-label="Slide overview"
+			data-honeydeck-scrollable="true"
+		>
+			<div className="sticky top-0 z-20 flex justify-between items-center bg-background/75 px-4 py-3 backdrop-blur-xl border-b border-border/50">
+				<span className="text-foreground/60 text-base font-sans">
+					{total} slide{total !== 1 ? "s" : ""}
+					{!isMobile && " — click or press Enter to jump"}
+				</span>
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						onClick={onClose}
+						className="h-8 rounded-md border border-border bg-primary px-3 text-sm text-primary-foreground"
+					>
+						Close
+					</button>
+				</div>
+			</div>
+
+			<div
+				style={{
+					padding: isMobile ? MOBILE_PADDING : 24,
+					paddingTop: isMobile ? MOBILE_PADDING : 24,
+				}}
+			>
+				<div
+					ref={gridRef}
+					className="grid justify-center"
+					style={{
+						gap,
+						gridTemplateColumns: isMobile
+							? `repeat(${MOBILE_COLUMNS}, ${thumbW}px)`
+							: `repeat(auto-fill, ${DESKTOP_THUMB_W}px)`,
+					}}
+				>
+					{slideData.map((slide, i) => {
+						const isActive = i + 1 === currentSlide;
+						const isSelected = i === selected;
+						const showSelection = !isMobile && isSelected;
+
+						return (
+							<div
+								key={
+									isSelected && boundaryFeedback?.selected === i
+										? `${slide.id}-${boundaryFeedback.key}`
+										: slide.id
+								}
+								ref={isSelected ? selectedRef : null}
+								style={{ scrollMarginBlock: SELECTION_SCROLL_MARGIN }}
+								data-slide-index={i}
+								data-boundary-feedback={
+									isSelected && boundaryFeedback?.selected === i
+										? boundaryFeedback.direction
+										: undefined
+								}
+								className={`honeydeck-overview-thumbnail block rounded-md overflow-hidden relative bg-background transition-all duration-100 ease-out outline-solid hover:outline-2 ${
+									showSelection
+										? "outline-4 outline-foreground shadow-lg scale-[1.01]"
+										: "outline-1 outline-foreground/40"
+								}`}
+							>
+								<SlideCanvas
+									slideIndex={i}
+									stepIndex={0}
+									scale={thumbScale}
+									showFutureSteps
+									style={{
+										width: canvasW,
+										height: canvasH,
+										pointerEvents: "none",
+									}}
+								/>
+
+								<div className="absolute bottom-1.5 right-2 bg-surface text-surface-foreground text-xs px-1.5 py-0.5 rounded-xs">
+									{i + 1}
+								</div>
+
+								{isActive && (
+									<div className="absolute top-1.5 left-2 bg-accent text-accent-foreground text-2xs font-bold px-2 py-0.5 rounded-xs tracking-wider uppercase shadow">
+										Current
+									</div>
+								)}
+								<button
+									type="button"
+									aria-current={isActive ? "true" : undefined}
+									aria-label={`Go to slide ${i + 1}`}
+									className="absolute inset-0 z-10"
+									onClick={() => jumpTo(i)}
+									onFocus={() => setSelectedFrom("direct", i)}
+								/>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function useOverviewMobile(): boolean {
+	const [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(pointer: coarse)").matches;
+	});
+
+	useEffect(() => {
+		const query = window.matchMedia("(pointer: coarse)");
+		const update = () => setIsMobile(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+
+	return isMobile;
+}
+
+function easeOutCubic(t: number): number {
+	return 1 - (1 - t) ** 3;
+}
+
+function getReducedMotionPreference(): boolean {
+	return (
+		window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
+	);
+}
+
+function getScrollTopForNearestElement(
+	container: HTMLElement,
+	element: HTMLElement,
+	margin: number,
+): number {
+	const containerRect = container.getBoundingClientRect();
+	const elementRect = element.getBoundingClientRect();
+	const currentTop = container.scrollTop;
+	const viewportTop = currentTop;
+	const viewportBottom = currentTop + container.clientHeight;
+	const elementTop = currentTop + elementRect.top - containerRect.top;
+	const elementBottom = currentTop + elementRect.bottom - containerRect.top;
+
+	let targetTop = currentTop;
+
+	if (elementTop - margin < viewportTop) {
+		targetTop = elementTop - margin;
+	} else if (elementBottom + margin > viewportBottom) {
+		targetTop = elementBottom + margin - container.clientHeight;
+	}
+
+	const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
+	return Math.min(Math.max(0, targetTop), maxTop);
+}