@honeydeck/honeydeck 0.6.0 → 0.7.0

package/docs/mobile.md

@@ -13,7 +13,7 @@ Honeydeck works on phones and tablets, but mobile presentation mode behaves diff
 | Text selection | Slide text can be selected normally | Slide text selection is off by default; use the nav bar toggle when you need it |
 | Zoom | Browser/page zoom or normal browser controls | Honeydeck-controlled slide zoom with pinch, up to `5x` |
 | Overview | Keyboard selection and mouse clicks | Responsive fixed two-column grid |
-| Presenter mode | Current slide, next preview, notes, clock | Current slide, notes, navigation buttons; no next preview |
+| Presenter mode | Current slide, next preview, notes, clock, timer, actions; no navigation buttons | Current slide, notes, navigation buttons; no next preview |
 
 ## Tap zones
 

package/docs/presenter-mode.md

@@ -20,7 +20,7 @@ Presenter mode shows the presenter everything they need while the audience sees
 │  - Remember to demo the sparkle button   │
 │  - Mention PDF export                    │
 │                                          │
-│  Slide 3/12 · Step 2/4    12:34  [Open]  │
+│  Slide 3/12 · Step 2/4  12:34  Timer 1:23  [Open] │
 └──────────────────────────────────────────┘
 ```
 
@@ -29,10 +29,12 @@ Includes:
 - Next timeline-state preview (smaller): the next step on the current slide when one exists, otherwise the next slide at step 0
 - Speaker notes for current slide
 - Slide number / step counter
-- Wall clock
+- Wall clock and an elapsed presentation timer with start, pause, continue, restart, and close/reset controls
 - Button to open audience view in a new tab/window
-- Button to cast the audience view to a secondary display when supported; the same control becomes a stop button while casting and is disabled with a hint when unsupported
-- Navigation buttons that move through the timeline while staying in presenter mode
+- Color mode toggle that also updates audience views and cast receivers
+- Blank screen toggle (`b`) that makes audience and cast views black while presenter mode shows a `Screen blanked (b)` indicator
+- Button to cast the audience view to a secondary display when supported; the same control becomes a stop button while casting. Unsupported browsers show a visibly disabled-looking button with hover/accessible text explaining why casting is unavailable.
+- Navigation buttons that move through the timeline while staying in presenter mode on mobile. Desktop presenter mode uses keyboard shortcuts instead.
 
 ## Speaker Notes
 
@@ -65,7 +67,7 @@ Content here.
 - Navigation controls button in normal presentation.
 - Direct URL: `/#/presenter/1/0`
 
-Pressing `p` opens presenter mode in the **current tab**.
+Pressing `p` opens presenter mode in the **current tab**. In presenter mode, press `p` or `Escape` to return to the audience slide view at the same slide and step.
 
 ## Navigation
 
@@ -86,12 +88,16 @@ Reveal content from later timeline steps is also shown in the `Next` preview at
 
 When no next timeline state exists, the `Next` preview shows an end-of-deck placeholder instead of trying to render a missing slide.
 
+## Blank Screen
+
+Press `b` or use the blank screen button to make the audience and cast views black. Press `b` again or use the same button to restore the slide. Audience tabs unblank automatically when presenter mode disconnects.
+
 ## Presenter/Audience Sync
 
 Presenter mode and audience view synchronize navigation via `BroadcastChannel` and, when supported, the Presentation API.
 
 - Presenter mode acts as the controller.
-- Audience view (opened from presenter mode) listens for navigation updates.
+- Audience view (opened from presenter mode) listens for navigation, color mode, and blank-screen updates.
 - The cast audience sends a `sync-request` as soon as the receiver connection appears; the presenter replies with the current slide/step in a `sync-response` so late connections resync immediately.
 - The cast audience follows presenter navigation through Presentation API receiver messages.
 - No server, internet, WebSocket, or device pairing required.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@honeydeck/honeydeck",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "MDX and React-based presentation framework for AI-friendly slide decks.",
 	"license": "MIT",
 	"publishConfig": {

package/src/runtime/Deck.tsx

@@ -156,12 +156,22 @@ export function Deck() {
 	}, [route]);
 
 	// ── Audience sync: BroadcastChannel + Presentation API receiver ──────
+	const [blankScreen, setBlankScreen] = useState<"black" | null>(null);
+	const handleBlankScreen = useCallback(
+		(mode: "black" | "off") =>
+			setBlankScreen(mode === "black" ? "black" : null),
+		[],
+	);
 	useSync({
 		enabled: route.view === "slide" || route.view === "overview",
 		isPresenter: false,
+		onSetColorMode: setColorMode,
+		onBlankScreen: handleBlankScreen,
 	});
 	usePresentationReceiverSync({
 		enabled: route.view === "slide" || route.view === "overview",
+		onSetColorMode: setColorMode,
+		onBlankScreen: handleBlankScreen,
 	});
 
 	const resetZoom = useCallback(() => {
@@ -250,7 +260,9 @@ export function Deck() {
 
 	// ── Presenter mode: delegate to PresenterView ──────────────────────────
 	if (route.view === "presenter") {
-		return <PresenterView />;
+		return (
+			<PresenterView colorMode={colorMode} onSetColorMode={setColorMode} />
+		);
 	}
 
 	// Whether slide transitions are enabled (can be disabled via deck frontmatter)
@@ -394,6 +406,11 @@ export function Deck() {
 					/>
 				)}
 
+				{/* ── Black screen overlay (controlled by presenter) ────────── */}
+				{blankScreen === "black" && (
+					<div className="fixed inset-0 bg-black z-[100]" aria-hidden="true" />
+				)}
+
 				{/* ── Navigation bar ────────────────────────────────────────────── */}
 				{/* GAP-06: showSlideNumbers wired from config */}
 				{!isOverview && (

package/src/runtime/presentationApi.ts

@@ -1,9 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ColorMode } from "./components/ColorModeCycleButton.tsx";
 import { getRouteUrl } from "./navigation.ts";
 import { navigate, parseHash, type Route } from "./router.ts";
 import {
+	createSyncColorModeMessage,
 	createSyncResponseMessage,
 	resolveAudienceRouteFromSyncMessage,
+	type SyncBlankScreenMessage,
+	type SyncColorModeMessage,
 	type SyncMessage,
 	type SyncNavigateMessage,
 	type SyncRequestMessage,
@@ -60,6 +64,10 @@ type PresenterRoute = {
 	step: number;
 };
 
+type PresentationColorModeRef = {
+	current: ColorMode;
+};
+
 type PresentationWindowLike = Window & {
 	PresentationRequest?: PresentationRequestLike;
 	navigator: Navigator & {
@@ -142,13 +150,21 @@ function sendPresentationSyncResponse(
 	connection: PresentationConnectionLike | null,
 	slide: number,
 	step: number,
+	colorMode?: ColorMode,
 ): void {
 	sendPresentationMessage(
 		connection,
-		createSyncResponseMessage({ slide, step }),
+		createSyncResponseMessage({ slide, step }, colorMode),
 	);
 }
 
+function sendPresentationColorModeToConnection(
+	connection: PresentationConnectionLike | null,
+	colorMode: ColorMode,
+): void {
+	sendPresentationMessage(connection, createSyncColorModeMessage(colorMode));
+}
+
 type PresentationRouteRef = {
 	current: PresenterRoute;
 };
@@ -163,7 +179,9 @@ export async function startPresentationCast({
 	audienceUrl,
 	currentSlide,
 	currentStep,
+	currentColorMode,
 	routeRef,
+	colorModeRef,
 	requestConstructor,
 	connectionRef,
 	startInFlightRef,
@@ -175,7 +193,9 @@ export async function startPresentationCast({
 	audienceUrl: string | null;
 	currentSlide: number;
 	currentStep: number;
+	currentColorMode: ColorMode;
 	routeRef: PresentationRouteRef;
+	colorModeRef: PresentationColorModeRef;
 	requestConstructor: PresentationRequestLike | null;
 	connectionRef: { current: PresentationConnectionLike | null };
 	startInFlightRef: { current: boolean };
@@ -212,6 +232,7 @@ export async function startPresentationCast({
 				connection,
 				routeRef.current.slide,
 				routeRef.current.step,
+				colorModeRef.current,
 			);
 		};
 
@@ -235,6 +256,7 @@ export async function startPresentationCast({
 		connection.addEventListener?.("statechange", onStateChange);
 
 		sendPresentationRouteToConnection(connection, currentSlide, currentStep);
+		sendPresentationColorModeToConnection(connection, currentColorMode);
 	} catch {
 		if (castGeneration !== castGenerationRef.current) {
 			return;
@@ -265,8 +287,12 @@ function getConnectionFromEvent(event: {
 
 export function usePresentationReceiverSync({
 	enabled = true,
+	onSetColorMode,
+	onBlankScreen,
 }: {
 	enabled?: boolean;
+	onSetColorMode?: (mode: ColorMode) => void;
+	onBlankScreen?: (mode: "black" | "off") => void;
 }): void {
 	useEffect(() => {
 		if (!enabled) return;
@@ -283,6 +309,20 @@ export function usePresentationReceiverSync({
 		function handleMessage(event: MessageEvent<unknown>) {
 			const message = parsePresentationMessage(event.data);
 			if (cancelled || !isSyncMessage(message)) return;
+
+			if (isColorModeMessage(message)) {
+				onSetColorMode?.(message.colorMode);
+				return;
+			}
+
+			if (isBlankScreenMessage(message)) {
+				onBlankScreen?.(message.mode);
+				return;
+			}
+
+			if (message.type === "sync-response" && message.colorMode) {
+				onSetColorMode?.(message.colorMode);
+			}
 			const currentRoute = parseHash(location.hash);
 			const nextRoute = resolveAudienceRouteFromSyncMessage(
 				currentRoute,
@@ -342,7 +382,7 @@ export function usePresentationReceiverSync({
 			});
 			connections.clear();
 		};
-	}, [enabled]);
+	}, [enabled, onSetColorMode, onBlankScreen]);
 }
 
 export function usePresentationCast({
@@ -350,16 +390,19 @@ export function usePresentationCast({
 	audienceUrl,
 	currentSlide,
 	currentStep,
+	currentColorMode,
 }: {
 	enabled?: boolean;
 	audienceUrl: string | null;
 	currentSlide: number;
 	currentStep: number;
+	currentColorMode: ColorMode;
 }): {
 	supported: boolean;
 	isCasting: boolean;
 	startCasting: () => Promise<void>;
 	stopCasting: () => void;
+	sendMessage: (message: SyncMessage) => void;
 } {
 	const [isCasting, setIsCasting] = useState(false);
 	const isMountedRef = useRef(true);
@@ -370,6 +413,7 @@ export function usePresentationCast({
 		slide: currentSlide,
 		step: currentStep,
 	});
+	const colorModeRef = useRef<ColorMode>(currentColorMode);
 	const supported = isPresentationApiSupported();
 
 	useEffect(() => {
@@ -379,6 +423,10 @@ export function usePresentationCast({
 		};
 	}, [currentSlide, currentStep]);
 
+	useEffect(() => {
+		colorModeRef.current = currentColorMode;
+	}, [currentColorMode]);
+
 	const setCastingState = useCallback((next: boolean) => {
 		if (isMountedRef.current) setIsCasting(next);
 	}, []);
@@ -394,7 +442,9 @@ export function usePresentationCast({
 			audienceUrl,
 			currentSlide,
 			currentStep,
+			currentColorMode,
 			routeRef,
+			colorModeRef,
 			requestConstructor: getPresentationRequestConstructor(),
 			connectionRef,
 			startInFlightRef,
@@ -405,6 +455,7 @@ export function usePresentationCast({
 		audienceUrl,
 		currentSlide,
 		currentStep,
+		currentColorMode,
 		enabled,
 		supported,
 		setCastingState,
@@ -419,6 +470,14 @@ export function usePresentationCast({
 		);
 	}, [currentSlide, currentStep, isCasting]);
 
+	useEffect(() => {
+		if (!isCasting) return;
+		sendPresentationColorModeToConnection(
+			connectionRef.current,
+			currentColorMode,
+		);
+	}, [currentColorMode, isCasting]);
+
 	useEffect(() => {
 		isMountedRef.current = true;
 		return () => {
@@ -427,9 +486,13 @@ export function usePresentationCast({
 		};
 	}, [stopCasting]);
 
+	const sendMessage = useCallback((message: SyncMessage) => {
+		sendPresentationMessage(connectionRef.current, message);
+	}, []);
+
 	return useMemo(
-		() => ({ supported, isCasting, startCasting, stopCasting }),
-		[supported, isCasting, startCasting, stopCasting],
+		() => ({ supported, isCasting, startCasting, stopCasting, sendMessage }),
+		[supported, isCasting, startCasting, stopCasting, sendMessage],
 	);
 }
 
@@ -441,9 +504,52 @@ function isSyncRequestMessage(value: unknown): value is SyncRequestMessage {
 
 function isSyncMessage(
 	value: unknown,
-): value is SyncNavigateMessage | SyncResponseMessage {
+): value is
+	| SyncNavigateMessage
+	| SyncResponseMessage
+	| SyncColorModeMessage
+	| SyncBlankScreenMessage {
 	if (typeof value !== "object" || value === null) return false;
 	if (!("type" in value)) return false;
 	const type = (value as SyncMessage).type;
-	return type === "navigate" || type === "sync-response";
+	if (type === "color-mode") return isColorModeMessage(value);
+	if (type === "blank-screen") return isBlankScreenMessage(value);
+	if (type !== "navigate" && type !== "sync-response") return false;
+
+	const slide = (value as { slide?: unknown }).slide;
+	const step = (value as { step?: unknown }).step;
+	if (
+		typeof slide !== "number" ||
+		!Number.isFinite(slide) ||
+		typeof step !== "number" ||
+		!Number.isFinite(step)
+	) {
+		return false;
+	}
+
+	const colorMode = (value as { colorMode?: unknown }).colorMode;
+	return colorMode === undefined || isColorMode(colorMode);
+}
+
+function isColorModeMessage(value: unknown): value is SyncColorModeMessage {
+	if (typeof value !== "object" || value === null) return false;
+	if (!("type" in value)) return false;
+	return (
+		(value as SyncMessage).type === "color-mode" &&
+		isColorMode((value as { colorMode?: unknown }).colorMode)
+	);
+}
+
+function isBlankScreenMessage(value: unknown): value is SyncBlankScreenMessage {
+	if (typeof value !== "object" || value === null) return false;
+	if (!("type" in value)) return false;
+	const mode = (value as { mode?: unknown }).mode;
+	return (
+		(value as SyncMessage).type === "blank-screen" &&
+		(mode === "black" || mode === "off")
+	);
+}
+
+function isColorMode(value: unknown): value is ColorMode {
+	return value === "system" || value === "light" || value === "dark";
 }

package/src/runtime/sync.ts

@@ -9,6 +9,8 @@
  *
  * ### Message types
  * - `navigate`              — presenter changed slide/step
+ * - `color-mode`            — presenter changed configured color mode
+ * - `blank-screen`          — presenter toggled audience blank screen
  * - `sync-request`          — audience asks for the current presenter route
  * - `sync-response`         — presenter replies with the current route
  * - `presenter-connected`   — a presenter window opened
@@ -28,7 +30,8 @@
  * ```
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { ColorMode } from "./components/ColorModeCycleButton.tsx";
 import { navigate, parseHash, type Route } from "./router.ts";
 
 // ---------------------------------------------------------------------------
@@ -49,6 +52,17 @@ export type SyncResponseMessage = {
 	type: "sync-response";
 	slide: number;
 	step: number;
+	colorMode?: ColorMode;
+};
+
+export type SyncColorModeMessage = {
+	type: "color-mode";
+	colorMode: ColorMode;
+};
+
+export type SyncBlankScreenMessage = {
+	type: "blank-screen";
+	mode: "black" | "off";
 };
 
 export type SyncPresenceMessage =
@@ -59,6 +73,8 @@ export type SyncMessage =
 	| SyncNavigateMessage
 	| SyncRequestMessage
 	| SyncResponseMessage
+	| SyncColorModeMessage
+	| SyncBlankScreenMessage
 	| SyncPresenceMessage;
 
 export type UseSyncOptions = {
@@ -70,6 +86,12 @@ export type UseSyncOptions = {
 	currentSlide?: number;
 	/** Current 0-based step index (required when `isPresenter: true`). */
 	currentStep?: number;
+	/** Current configured color mode, broadcast by presenter when supplied. */
+	currentColorMode?: ColorMode;
+	/** Called by audience windows when presenter color mode changes. */
+	onSetColorMode?: (mode: ColorMode) => void;
+	/** Called by audience windows when presenter toggles blank screen. */
+	onBlankScreen?: (mode: "black" | "off") => void;
 };
 
 type PresenterRoute = {
@@ -89,14 +111,28 @@ export function createSyncRequestMessage(): SyncRequestMessage {
 
 export function createSyncResponseMessage(
 	route: PresenterRoute,
+	colorMode?: ColorMode,
 ): SyncResponseMessage {
 	return {
 		type: "sync-response",
 		slide: route.slide,
 		step: route.step,
+		...(colorMode ? { colorMode } : {}),
 	};
 }
 
+export function createSyncColorModeMessage(
+	colorMode: ColorMode,
+): SyncColorModeMessage {
+	return { type: "color-mode", colorMode };
+}
+
+export function createSyncBlankScreenMessage(
+	mode: "black" | "off",
+): SyncBlankScreenMessage {
+	return { type: "blank-screen", mode };
+}
+
 export function resolveAudienceRouteFromSyncMessage(
 	currentRoute: Route,
 	message: SyncNavigateMessage | SyncResponseMessage,
@@ -110,6 +146,14 @@ export function resolveAudienceRouteFromSyncMessage(
 	};
 }
 
+function isColorModeValue(value: unknown): value is { colorMode: ColorMode } {
+	if (typeof value !== "object" || value === null) return false;
+	const colorMode = (value as { colorMode?: unknown }).colorMode;
+	return (
+		colorMode === "system" || colorMode === "light" || colorMode === "dark"
+	);
+}
+
 function isSyncMessage(value: unknown): value is SyncMessage {
 	if (typeof value !== "object" || value === null) return false;
 	if (!("type" in value)) return false;
@@ -118,17 +162,32 @@ function isSyncMessage(value: unknown): value is SyncMessage {
 	if (type === "sync-request") return true;
 	if (type === "presenter-connected") return true;
 	if (type === "presenter-disconnected") return true;
+	if (type === "color-mode") return isColorModeValue(value);
+	if (type === "blank-screen") return isBlankScreenValue(value);
 
 	if (type !== "navigate" && type !== "sync-response") return false;
 
 	const slide = (value as { slide?: unknown }).slide;
 	const step = (value as { step?: unknown }).step;
-	return (
-		typeof slide === "number" &&
-		Number.isFinite(slide) &&
-		typeof step === "number" &&
-		Number.isFinite(step)
-	);
+	if (
+		typeof slide !== "number" ||
+		!Number.isFinite(slide) ||
+		typeof step !== "number" ||
+		!Number.isFinite(step)
+	) {
+		return false;
+	}
+
+	const colorMode = (value as { colorMode?: unknown }).colorMode;
+	return colorMode === undefined || isColorModeValue({ colorMode });
+}
+
+function isBlankScreenValue(
+	value: unknown,
+): value is { mode: "black" | "off" } {
+	if (typeof value !== "object" || value === null) return false;
+	const mode = (value as { mode?: unknown }).mode;
+	return mode === "black" || mode === "off";
 }
 
 function isRouteSyncMessage(
@@ -137,6 +196,18 @@ function isRouteSyncMessage(
 	return message.type === "navigate" || message.type === "sync-response";
 }
 
+function isColorModeSyncMessage(
+	message: SyncMessage,
+): message is SyncColorModeMessage {
+	return message.type === "color-mode";
+}
+
+function isBlankScreenSyncMessage(
+	message: SyncMessage,
+): message is SyncBlankScreenMessage {
+	return message.type === "blank-screen";
+}
+
 // ---------------------------------------------------------------------------
 // Hook
 // ---------------------------------------------------------------------------
@@ -144,21 +215,31 @@ function isRouteSyncMessage(
 /**
  * Bidirectional sync hook.
  *
- * @returns `{ presenterConnected }` — true when an audience window has
- * detected that a presenter window is open on the same channel.
+ * @returns `{ presenterConnected, broadcastBlankScreen }` — presenterConnected is
+ * true when an audience window has detected that a presenter window is open on
+ * the same channel. broadcastBlankScreen sends a blank-screen command.
  */
 export function useSync({
 	enabled = true,
 	isPresenter,
 	currentSlide,
 	currentStep,
-}: UseSyncOptions): { presenterConnected: boolean } {
+	currentColorMode,
+	onSetColorMode,
+	onBlankScreen,
+}: UseSyncOptions): {
+	presenterConnected: boolean;
+	broadcastBlankScreen: (mode: "black" | "off") => void;
+} {
 	const [presenterConnected, setPresenterConnected] = useState(false);
 	const channelRef = useRef<BroadcastChannel | null>(null);
 	const presenterRouteRef = useRef<PresenterRoute>({
 		slide: currentSlide ?? 1,
 		step: currentStep ?? 0,
 	});
+	const presenterColorModeRef = useRef<ColorMode | undefined>(currentColorMode);
+	const onBlankScreenRef = useRef(onBlankScreen);
+	onBlankScreenRef.current = onBlankScreen;
 
 	useEffect(() => {
 		if (!isPresenter) return;
@@ -170,6 +251,11 @@ export function useSync({
 		};
 	}, [currentSlide, currentStep, isPresenter]);
 
+	useEffect(() => {
+		if (!isPresenter) return;
+		presenterColorModeRef.current = currentColorMode;
+	}, [currentColorMode, isPresenter]);
+
 	// ── Channel lifecycle ───────────────────────────────────────────────────
 
 	useEffect(() => {
@@ -199,6 +285,7 @@ export function useSync({
 					channel.postMessage(
 						createSyncResponseMessage(
 							presenterRouteRef.current,
+							presenterColorModeRef.current,
 						) satisfies SyncMessage,
 					);
 				}
@@ -207,6 +294,7 @@ export function useSync({
 
 			if (msg.type === "presenter-disconnected") {
 				setPresenterConnected(false);
+				onBlankScreenRef.current?.("off");
 				return;
 			}
 
@@ -215,8 +303,23 @@ export function useSync({
 				return;
 			}
 
+			if (isColorModeSyncMessage(msg)) {
+				setPresenterConnected(true);
+				onSetColorMode?.(msg.colorMode);
+				return;
+			}
+
+			if (isBlankScreenSyncMessage(msg)) {
+				setPresenterConnected(true);
+				onBlankScreenRef.current?.(msg.mode);
+				return;
+			}
+
 			if (isRouteSyncMessage(msg)) {
 				setPresenterConnected(true);
+				if (msg.type === "sync-response" && msg.colorMode) {
+					onSetColorMode?.(msg.colorMode);
+				}
 				const currentRoute = parseHash(location.hash);
 				const nextRoute = resolveAudienceRouteFromSyncMessage(
 					currentRoute,
@@ -241,7 +344,7 @@ export function useSync({
 			channel.close();
 			channelRef.current = null;
 		};
-	}, [enabled, isPresenter]);
+	}, [enabled, isPresenter, onSetColorMode]);
 
 	// ── Presenter: broadcast navigation changes ─────────────────────────────
 
@@ -263,5 +366,20 @@ export function useSync({
 		} satisfies SyncMessage);
 	}, [enabled, isPresenter, currentSlide, currentStep]);
 
-	return { presenterConnected };
+	useEffect(() => {
+		if (!enabled || !isPresenter || !currentColorMode) return;
+
+		presenterColorModeRef.current = currentColorMode;
+		channelRef.current?.postMessage(
+			createSyncColorModeMessage(currentColorMode) satisfies SyncMessage,
+		);
+	}, [enabled, isPresenter, currentColorMode]);
+
+	const broadcastBlankScreen = useCallback((mode: "black" | "off") => {
+		channelRef.current?.postMessage(
+			createSyncBlankScreenMessage(mode) satisfies SyncMessage,
+		);
+	}, []);
+
+	return { presenterConnected, broadcastBlankScreen };
 }

package/src/runtime/views/PresenterCastButton.tsx

@@ -1,5 +1,8 @@
 import { CastIcon, StopCircleIcon } from "lucide-react";
 
+const UNSUPPORTED_HINT =
+	"Presentation casting is not supported in this browser";
+
 export function PresenterCastButton({
 	supported,
 	isCasting,
@@ -12,20 +15,25 @@ export function PresenterCastButton({
 	onStopCasting: () => void;
 }) {
 	const label = isCasting ? "Stop casting" : "Cast audience view";
-	const unsupportedHint =
-		"Presentation casting is not supported in this browser";
+	const title = supported ? label : UNSUPPORTED_HINT;
+
+	function handleClick() {
+		if (!supported) return;
+		if (isCasting) onStopCasting();
+		else void onStartCasting();
+	}
 
 	return (
 		<button
 			type="button"
-			onClick={isCasting ? onStopCasting : onStartCasting}
-			disabled={!supported}
-			title={supported ? label : unsupportedHint}
-			aria-label={supported ? label : unsupportedHint}
-			className={`px-3 py-1 rounded border border-white/20 text-white/80 text-sm font-[inherit] inline-flex items-center gap-1.5 ${
+			onClick={handleClick}
+			title={title}
+			aria-label={title}
+			aria-disabled={!supported}
+			className={`px-3 py-1 rounded border text-sm font-[inherit] inline-flex items-center gap-1.5 transition-[background,color,border-color,opacity] ${
 				supported
-					? "bg-white/6"
-					: "bg-white/4 text-white/30 border-white/10 cursor-not-allowed"
+					? "border-white/20 bg-white/6 text-white/80 hover:bg-white/10"
+					: "border-white/10 bg-white/3 text-white/25 opacity-60 grayscale cursor-not-allowed"
 			}`}
 		>
 			{label}

package/src/runtime/views/PresenterView.tsx

@@ -11,7 +11,7 @@
  *   │  │    (large)           │  ├──────────┤  │
  *   │  │                      │  │  Notes   │  │
  *   │  └──────────────────────┘  └──────────┘  │
- *   │  Slide 3/12 · Step 2/4    12:34   [Open] │
+ *   │  Slide 3/12 · Step 2/4  12:34  Timer 1:23 [Open] │
  *   └──────────────────────────────────────────┘
  *
  * ### Notes collection
@@ -35,6 +35,11 @@ import {
 	ChevronRightIcon,
 	ChevronUpIcon,
 	ExternalLinkIcon,
+	MonitorOffIcon,
+	PauseIcon,
+	PlayIcon,
+	RotateCcwIcon,
+	XIcon,
 } from "lucide-react";
 import {
 	type ReactNode,
@@ -44,8 +49,14 @@ import {
 	useRef,
 	useState,
 } from "react";
+import {
+	type ColorMode,
+	ColorModeCycleButton,
+} from "../components/ColorModeCycleButton.tsx";
 import { NotesContext } from "../components/Notes.tsx";
 import {
+	getSlideRouteFromRoute,
+	navigateTo,
 	nextSlide,
 	nextStep,
 	openUrlInNewTab,
@@ -65,6 +76,7 @@ import { useSwipeNav } from "../useSwipeNav.ts";
 import { PresenterCastButton } from "./PresenterCastButton.tsx";
 import { PresenterNotesPanel } from "./PresenterNotesPanel.tsx";
 import { getPresenterNextPreview } from "./presenterPreview.ts";
+import { formatPresenterElapsedTime } from "./presenterTime.ts";
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -163,14 +175,27 @@ function usePresenterMobile(): boolean {
 // Component
 // ---------------------------------------------------------------------------
 
-export function PresenterView() {
+type PresenterViewProps = {
+	colorMode: ColorMode;
+	onSetColorMode: (mode: ColorMode) => void;
+};
+
+export function PresenterView({
+	colorMode,
+	onSetColorMode,
+}: PresenterViewProps) {
 	const route = useRoute();
 	const totalSlides = slideData.length;
 	const slide = Math.max(1, Math.min(route.slide, totalSlides || 1));
 	const step = Math.max(0, route.step);
 
 	const [clock, setClock] = useState(() => new Date().toLocaleTimeString());
+	const [timerState, setTimerState] = useState<"idle" | "running" | "paused">(
+		"idle",
+	);
+	const [elapsedSeconds, setElapsedSeconds] = useState(0);
 	const [notes, setNotes] = useState<ReactNode>(null);
+	const [isBlankScreen, setIsBlankScreen] = useState(false);
 	const notesContextValue = useMemo(() => ({ setNotes }), []);
 	const isMobile = usePresenterMobile();
 
@@ -186,18 +211,27 @@ export function PresenterView() {
 		audienceUrl: getPresentationAudienceUrl({ view: "slide", slide, step }),
 		currentSlide: slide,
 		currentStep: step,
+		currentColorMode: colorMode,
 	});
+	const sendCastMessage = presentationCast.sendMessage;
+	const elapsedTime = formatPresenterElapsedTime(elapsedSeconds * 1000);
 
-	// ── Wall clock ─────────────────────────────────────────────────────────
+	// ── Wall clock + elapsed timer ─────────────────────────────────────────
 	useEffect(() => {
 		const timer = setInterval(() => {
 			setClock(new Date().toLocaleTimeString());
+			if (timerState === "running") setElapsedSeconds((value) => value + 1);
 		}, 1000);
 		return () => clearInterval(timer);
-	}, []);
+	}, [timerState]);
 
 	// ── BroadcastChannel: this window IS the presenter (controller) ─────────
-	useSync({ isPresenter: true, currentSlide: slide, currentStep: step });
+	const { broadcastBlankScreen } = useSync({
+		isPresenter: true,
+		currentSlide: slide,
+		currentStep: step,
+		currentColorMode: colorMode,
+	});
 
 	// ── Keyboard navigation ─────────────────────────────────────────────────
 	const getStepCount = useCallback(
@@ -211,6 +245,60 @@ export function PresenterView() {
 	});
 	useSwipeNav({ enabled: isMobile });
 
+	// ── Presenter exit + blank screen shortcuts ─────────────────────────────
+	const closePresenter = useCallback(() => {
+		navigateTo(getSlideRouteFromRoute({ view: "presenter", slide, step }));
+	}, [slide, step]);
+
+	const toggleBlankScreen = useCallback(() => {
+		const next = !isBlankScreen;
+		setIsBlankScreen(next);
+		const mode = next ? "black" : "off";
+		broadcastBlankScreen(mode);
+		sendCastMessage({ type: "blank-screen", mode });
+	}, [isBlankScreen, broadcastBlankScreen, sendCastMessage]);
+
+	useEffect(() => {
+		function handlePresenterKeys(event: KeyboardEvent) {
+			if (event.key === "p" || event.key === "Escape") {
+				event.preventDefault();
+				closePresenter();
+				return;
+			}
+
+			if (event.key === "b" || event.key === "B") {
+				event.preventDefault();
+				toggleBlankScreen();
+			}
+		}
+
+		window.addEventListener("keydown", handlePresenterKeys);
+		return () => window.removeEventListener("keydown", handlePresenterKeys);
+	}, [closePresenter, toggleBlankScreen]);
+
+	// ── Timer controls ──────────────────────────────────────────────────────
+	function startTimer() {
+		setTimerState("running");
+	}
+
+	function pauseTimer() {
+		setTimerState("paused");
+	}
+
+	function continueTimer() {
+		setTimerState("running");
+	}
+
+	function restartTimer() {
+		setElapsedSeconds(0);
+		setTimerState("running");
+	}
+
+	function closeTimer() {
+		setElapsedSeconds(0);
+		setTimerState("idle");
+	}
+
 	// ── Open audience window ────────────────────────────────────────────────
 	function openAudienceView() {
 		const url = getPresentationAudienceUrl({ view: "slide", slide, step });
@@ -246,6 +334,13 @@ export function PresenterView() {
 
 	return (
 		<div className="fixed inset-0 bg-black text-white font-sans grid grid-rows-[1fr_auto_auto] grid-cols-1 overflow-hidden select-none">
+			{/* ── Blank screen indicator overlay ────────────────────────────── */}
+			{isBlankScreen && (
+				<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 px-4 py-2 rounded-md bg-red-600/90 text-white text-sm font-semibold tracking-wide uppercase">
+					Screen blanked (b)
+				</div>
+			)}
+
 			{/* ── Top section: current slide plus desktop next/notes column ─── */}
 			<div
 				className={
@@ -284,33 +379,152 @@ export function PresenterView() {
 				/>
 			)}
 
-			{/* ── Bottom bar: counter · fixed nav buttons · clock/actions ───── */}
-			<div className="grid grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3 sm:px-5 py-2.5 border-t border-white/8 bg-black/30 gap-x-3 sm:gap-x-4 gap-y-2">
-				{/* Counter */}
-				<div className="min-w-0 text-md text-white/60 tabular-nums truncate">
-					Slide {slide}/{totalSlides}
-					{currentStepCount > 0 && ` · Step ${step}/${currentStepCount}`}
+			{/* ── Bottom bar: counter · mobile nav buttons · timer/actions ──── */}
+			<div
+				className={
+					isMobile
+						? "grid grid-cols-[minmax(0,1fr)_auto] items-center px-3 py-2.5 border-t border-white/8 bg-black/30 gap-x-3 gap-y-2"
+						: "grid grid-cols-[minmax(0,1fr)_auto] items-center px-5 py-2.5 border-t border-white/8 bg-black/30 gap-x-4 gap-y-2"
+				}
+			>
+				{/* Counter + timer */}
+				<div className="min-w-0 flex flex-wrap items-center gap-3 text-md text-white/60 tabular-nums">
+					<span className="truncate">
+						Slide {slide}/{totalSlides}
+						{currentStepCount > 0 && ` · Step ${step}/${currentStepCount}`}
+					</span>
+					{timerState === "idle" && (
+						<button
+							type="button"
+							onClick={startTimer}
+							title="Start timer"
+							className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-white/6 text-white/50 hover:text-white/80 text-sm"
+						>
+							<PlayIcon aria-hidden="true" size={14} />
+							Start timer
+						</button>
+					)}
+					{timerState === "running" && (
+						<>
+							<button
+								type="button"
+								onClick={pauseTimer}
+								title="Pause timer"
+								className="text-lg font-semibold text-white tabular-nums bg-white/10 px-2.5 py-0.5 rounded"
+							>
+								⏱ {elapsedTime}
+							</button>
+							<button
+								type="button"
+								onClick={pauseTimer}
+								title="Pause timer"
+								aria-label="Pause timer"
+								className="text-white/50 hover:text-white/80 inline-flex"
+							>
+								<PauseIcon aria-hidden="true" size={16} />
+							</button>
+						</>
+					)}
+					{timerState === "paused" && (
+						<>
+							<span className="text-lg font-semibold text-white/60 tabular-nums bg-white/6 px-2.5 py-0.5 rounded">
+								⏱ {elapsedTime}
+							</span>
+							<button
+								type="button"
+								onClick={continueTimer}
+								title="Continue timer"
+								aria-label="Continue timer"
+								className="text-white/50 hover:text-white/80 inline-flex"
+							>
+								<PlayIcon aria-hidden="true" size={16} />
+							</button>
+							<button
+								type="button"
+								onClick={restartTimer}
+								title="Restart timer from zero"
+								aria-label="Restart timer from zero"
+								className="text-white/30 hover:text-white/60 inline-flex"
+							>
+								<RotateCcwIcon aria-hidden="true" size={15} />
+							</button>
+							<button
+								type="button"
+								onClick={closeTimer}
+								title="Close timer"
+								aria-label="Close timer"
+								className="text-white/30 hover:text-white/60 inline-flex"
+							>
+								<XIcon aria-hidden="true" size={16} />
+							</button>
+						</>
+					)}
 				</div>
 
-				{/* Nav buttons */}
-				<div className="flex gap-2 items-center justify-self-end sm:justify-self-center">
-					<NavButton onClick={goPrevSlide} title="Previous slide (↑)">
-						<ChevronUpIcon aria-hidden="true" size={18} />
-					</NavButton>
-					<NavButton onClick={goPrev} title="Previous step (←)">
-						<ChevronLeftIcon aria-hidden="true" size={18} />
-					</NavButton>
-					<NavButton onClick={goNext} title="Next step (→)">
-						<ChevronRightIcon aria-hidden="true" size={18} />
-					</NavButton>
-					<NavButton onClick={goNextSlide} title="Next slide (↓)">
-						<ChevronDownIcon aria-hidden="true" size={18} />
-					</NavButton>
-				</div>
+				{/* Nav buttons are mobile-only; desktop uses keyboard shortcuts. */}
+				{isMobile && (
+					<div className="order-last col-span-2 flex w-full gap-2 items-center justify-center">
+						<NavButton
+							onClick={goPrev}
+							title="Previous step (←)"
+							className="h-12 w-16"
+						>
+							<ChevronLeftIcon aria-hidden="true" className="h-6 w-6" />
+						</NavButton>
+						<NavButton
+							onClick={goPrevSlide}
+							title="Previous slide (↑)"
+							className="h-12 w-16"
+						>
+							<ChevronUpIcon aria-hidden="true" className="h-6 w-6" />
+						</NavButton>
+						<NavButton
+							onClick={goNextSlide}
+							title="Next slide (↓)"
+							className="h-12 w-16"
+						>
+							<ChevronDownIcon aria-hidden="true" className="h-6 w-6" />
+						</NavButton>
+						<NavButton
+							onClick={goNext}
+							title="Next step (→)"
+							className="h-12 w-16"
+						>
+							<ChevronRightIcon aria-hidden="true" className="h-6 w-6" />
+						</NavButton>
+					</div>
+				)}
 
-				{/* Clock + open button */}
-				<div className="col-span-2 sm:col-span-1 sm:col-start-3 flex flex-wrap gap-3 items-center justify-self-start sm:justify-self-end">
-					<span className="text-md tabular-nums text-white/60">{clock}</span>
+				{/* Clock + mode/open/cast buttons */}
+				<div
+					className={
+						isMobile
+							? "col-span-2 flex flex-wrap gap-3 items-center justify-self-start"
+							: "flex flex-wrap gap-3 items-center justify-self-end"
+					}
+				>
+					<span
+						className="text-md tabular-nums text-white/60"
+						title="Wall clock"
+					>
+						{clock}
+					</span>
+					<ColorModeCycleButton
+						colorMode={colorMode}
+						onSetColorMode={onSetColorMode}
+						iconSize={14}
+						className="w-8 h-8 rounded border border-white/20 bg-white/6 text-white/80 inline-flex items-center justify-center"
+					/>
+					<NavButton
+						onClick={toggleBlankScreen}
+						title={isBlankScreen ? "Unblank screen (b)" : "Blank screen (b)"}
+					>
+						<MonitorOffIcon
+							aria-hidden="true"
+							size={16}
+							className={isBlankScreen ? "text-red-400" : ""}
+						/>
+					</NavButton>
 					<button
 						type="button"
 						onClick={openAudienceView}
@@ -338,10 +552,12 @@ export function PresenterView() {
 function NavButton({
 	onClick,
 	title,
+	className,
 	children,
 }: {
 	onClick: () => void;
 	title?: string;
+	className?: string;
 	children: ReactNode;
 }) {
 	return (
@@ -349,7 +565,8 @@ function NavButton({
 			type="button"
 			onClick={onClick}
 			title={title}
-			className="w-9 h-9 rounded border border-white/15 bg-white/6 text-white/75 text-md flex items-center justify-center font-[inherit]"
+			aria-label={title}
+			className={`w-9 h-9 rounded border border-white/15 bg-white/6 text-white/75 text-md flex items-center justify-center font-[inherit] ${className ?? ""}`}
 		>
 			{children}
 		</button>

package/src/runtime/views/SPEC.md

@@ -10,6 +10,11 @@
 - Navigation controls button
 - Direct URL: `/#/presenter/1/0`
 
+### Deactivation
+
+- Keyboard shortcut `p` exits presenter mode back to audience slide view at the same slide/step.
+- Keyboard shortcut `Escape` exits presenter mode back to audience slide view at the same slide/step.
+
 ### UI Layout
 
 ```txt
@@ -25,7 +30,7 @@
 │  - Remember to demo the sparkle button   │
 │  - Mention PDF export                    │
 │                                          │
-│  Slide 3/12 · Step 2/4    12:34  [Open]  │
+│  Slide 3/12 · Step 2/4  12:34  Timer 1:23  [Open] │
 └──────────────────────────────────────────┘
 ```
 
@@ -35,9 +40,12 @@ Includes:
 - Speaker notes for current slide, with Markdown formatting from `<Notes>` rendered as compact presenter prose
 - Slide/step counter
 - Clock (wall clock)
+- Elapsed presentation timer sits next to the slide/step counter on the left side of the bottom bar and has idle/running/paused states. Idle shows a start action. Running shows a prominent elapsed display plus pause action. Paused shows elapsed time plus continue, restart-from-zero, and close/reset actions.
 - Button to open audience view in new tab, preserving the current slide/step and deck base path
-- Button to cast the audience view to a secondary display when the Presentation API is supported; unsupported browsers show a disabled hint and active casting can be stopped from the same control
-- Presenter navigation buttons provide previous/next timeline-step navigation and previous/next slide navigation. Timeline keyboard shortcuts (`→`/`←`/`↓`/`↑`, `d`/`a`/`s`/`w`) update the presenter route and keep the window in presenter mode.
+- Color mode cycle button (system → light → dark → system). Presenter color mode changes also sync to BroadcastChannel audience views and Presentation API cast receivers.
+- Blank screen toggle button and `b` keyboard shortcut. While blanked, the presenter sees a `Screen blanked (b)` indicator and audience/cast views see a black screen.
+- Button to cast the audience view to a secondary display when the Presentation API is supported. Unsupported browsers keep a visibly disabled-looking control in the action row; it does not render extra inline feedback, and its hover title/accessible label explains that Presentation API casting is unavailable. Active casting can be stopped from the same control.
+- Presenter navigation buttons provide previous/next timeline-step navigation and previous/next slide navigation on mobile presenter layouts. Desktop presenter layouts do not show navigation buttons. On mobile, the timeline-step buttons sit on the outside edges of the button group (previous step, previous slide, next slide, next step), because step navigation is the primary/default action. Timeline keyboard shortcuts (`→`/`←`/`↓`/`↑`, `d`/`a`/`s`/`w`) update the presenter route and keep the window in presenter mode.
 - Presenter navigation uses the shared Honeydeck navigation command abstraction so button, keyboard, and touch inputs share the same semantics as audience view.
 - Presenter notes are scroll-owned regions: wheel, trackpad, touch scroll, and swipe gestures that start in notes scroll notes and never navigate slides, even at scroll boundaries.
 - On mobile presenter layouts, the Current preview may use tap zones and swipe navigation; speaker notes remain scroll-only. Pinch-to-zoom and pinch-to-overview are not required in presenter mode.
@@ -47,7 +55,22 @@ Includes:
 
 ### Presenter Responsiveness
 
-Presenter mode uses a two-column preview area (`Current` larger, `Next` smaller), a notes panel, and a bottom status/action bar on desktop. On narrow/mobile screens it switches to a single-column layout and hides the Next preview.
+Presenter mode uses a two-column preview area (`Current` larger, `Next` smaller), a notes panel, and a bottom status/action bar on desktop. On narrow/mobile screens it switches to a single-column layout and hides the Next preview. The navigation button group is the bottom-most element on mobile and uses larger touch targets than desktop.
+
+### Presentation Timer
+
+- Idle state shows a `Start timer` button.
+- Starting changes to running state, displaying elapsed time as `MM:SS` or `H:MM:SS`.
+- In running state, clicking the elapsed time or pause action pauses the timer.
+- In paused state, controls let the presenter continue, restart from zero, or close/reset the timer back to idle.
+
+### Blank Screen
+
+- Pressing `b` toggles the audience screen to black; pressing `b` again restores the normal view.
+- A blank screen button in the bottom action bar provides the same toggle.
+- While blanked, the presenter sees a `Screen blanked (b)` indicator overlay.
+- The blank-screen state is broadcast via both `BroadcastChannel` and the Presentation API cast connection as a `blank-screen` sync message with `mode: "black" | "off"`.
+- When the presenter disconnects, audience windows automatically unblank.
 
 ### Audience Sync
 
@@ -55,7 +78,7 @@ Presenter mode and audience view synchronize via `BroadcastChannel` and the Pres
 
 - Same browser/profile BroadcastChannel sync remains available when casting is unsupported or unavailable
 - Presenter mode is the controller
-- Audience view listens for navigation updates
+- Audience view listens for navigation updates, presenter color mode changes, and blank-screen commands
 - Late-opening audience tabs request the current presenter position via a `sync-request` / `sync-response` handshake as soon as a receiver connection is available, so they sync immediately instead of waiting for the next presenter move
 - Presence messages (`presenter-connected` / `presenter-disconnected`) are broadcast
 - When the Presentation API is supported, presenter mode can cast the audience view to a secondary display; the receiver asks for the current route when a connection becomes available and presenter replies with a `sync-response` so the cast audience resyncs even if it missed the first `navigate` message

package/src/runtime/views/presenterTime.ts

@@ -0,0 +1,15 @@
+export function formatPresenterElapsedTime(elapsedMs: number): string {
+	const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+	const seconds = totalSeconds % 60;
+	const totalMinutes = Math.floor(totalSeconds / 60);
+	const minutes = totalMinutes % 60;
+	const hours = Math.floor(totalMinutes / 60);
+
+	if (hours > 0) {
+		return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
+			.toString()
+			.padStart(2, "0")}`;
+	}
+
+	return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}