@honeydeck/honeydeck 0.1.0

package/src/runtime/components/Keyboard.tsx

@@ -0,0 +1,87 @@
+import { Children, type ReactNode } from "react";
+
+export type KeyboardKey = ReactNode;
+
+export type KeyboardProps = {
+	/** Key label or ordered shortcut key labels. */
+	keys?: KeyboardKey | readonly KeyboardKey[];
+	/** Single key label when `keys` is omitted. */
+	children?: ReactNode;
+	/** Separator rendered between array entries. */
+	separator?: ReactNode;
+	/** Additional CSS class for the outer element. */
+	className?: string;
+};
+
+function cn(...classes: (string | undefined | false)[]): string | undefined {
+	const value = classes.filter(Boolean).join(" ");
+	return value || undefined;
+}
+
+function renderKey(key: KeyboardKey): ReactNode {
+	return (
+		<kbd className="honeydeck-keyboard-key inline-flex min-w-[1.6em] items-center justify-center rounded-[0.28em] border border-b-[0.14em] border-border bg-surface px-[0.42em] pt-[0.18em] pb-[0.14em] font-mono text-[1em] font-semibold leading-none text-surface-foreground">
+			{key}
+		</kbd>
+	);
+}
+
+/**
+ * Displays one keyboard key or an ordered keyboard shortcut in slide prose.
+ *
+ * Use `children` for a single inline key label. Use `keys` with an array for
+ * ordered shortcuts, and change `separator` when the default `+` is too noisy
+ * for the shortcut style.
+ *
+ * ```mdx
+ * import { Keyboard } from '@honeydeck/honeydeck'
+ *
+ * Press <Keyboard>Esc</Keyboard> to close overview.
+ *
+ * Open command palette with <Keyboard keys={["Ctrl", "Shift", "P"]} />.
+ *
+ * Advance with <Keyboard keys="Space" />.
+ * ```
+ */
+export function Keyboard({
+	keys,
+	children,
+	separator = "+",
+	className,
+}: KeyboardProps) {
+	const value = keys ?? children;
+
+	if (Array.isArray(value)) {
+		return (
+			<span
+				className={cn(
+					"honeydeck-keyboard inline-flex items-baseline whitespace-nowrap align-baseline text-[0.82em] leading-none",
+					className,
+				)}
+			>
+				{Children.map(value, (key, index) => (
+					<span className="honeydeck-keyboard-part inline-flex items-center">
+						{index > 0 && (
+							<span className="honeydeck-keyboard-separator mx-[0.25em] font-body font-semibold text-surface-foreground opacity-[0.72]">
+								{separator}
+							</span>
+						)}
+						{renderKey(key)}
+					</span>
+				))}
+			</span>
+		);
+	}
+
+	return (
+		<kbd
+			className={cn(
+				"honeydeck-keyboard inline-flex items-baseline whitespace-nowrap align-baseline text-[0.82em] leading-none",
+				"honeydeck-keyboard-key min-w-[1.6em] justify-center rounded-[0.28em] border border-b-[0.14em] border-border bg-surface px-[0.42em] pt-[0.18em] pb-[0.14em] font-mono text-[1em] font-semibold text-surface-foreground",
+				className,
+			)}
+		>
+			{value}
+		</kbd>
+	);
+}

package/src/runtime/components/ListStyle.tsx

@@ -0,0 +1,203 @@
+import {
+	Children,
+	type CSSProperties,
+	cloneElement,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+} from "react";
+
+export type ListBullet = ReactNode;
+
+export type ListBullets =
+	| false
+	| "none"
+	| null
+	| ListBullet
+	| readonly ListBullet[];
+
+export type ListStyleProps = {
+	/**
+	 * Custom bullet marker(s). Omit, `false`, `null`, or `"none"` to remove
+	 * markers. Pass one marker for every level or an array by nesting level.
+	 */
+	bullets?: ListBullets;
+	className?: string;
+	style?: CSSProperties;
+	children?: ReactNode;
+};
+
+type CommonElement = ReactElement<{
+	children?: ReactNode;
+	className?: string;
+}>;
+
+function cn(...classes: (string | undefined | false)[]): string | undefined {
+	const value = classes.filter(Boolean).join(" ");
+	return value || undefined;
+}
+
+function isCommonElement(node: ReactNode): node is CommonElement {
+	return isValidElement(node);
+}
+
+function isListItemElement(node: ReactNode): node is CommonElement {
+	return (
+		isCommonElement(node) && typeof node.type === "string" && node.type === "li"
+	);
+}
+
+function hasCustomBullets(bullets: ListBullets | undefined): boolean {
+	return !(
+		bullets === undefined ||
+		bullets === null ||
+		bullets === false ||
+		bullets === "none" ||
+		(Array.isArray(bullets) && bullets.length === 0)
+	);
+}
+
+function bulletForLevel(
+	bullets: ListBullets | undefined,
+	level: number,
+): ReactNode {
+	if (!hasCustomBullets(bullets)) return null;
+
+	if (Array.isArray(bullets)) {
+		const index = Math.min(level - 1, bullets.length - 1);
+		const bullet = bullets[index];
+		return bullet === undefined || bullet === false ? null : bullet;
+	}
+
+	return bullets;
+}
+
+function transformChildren(
+	children: ReactNode,
+	level: number,
+	bullets: ListBullets,
+): ReactNode {
+	return Children.map(children, (child) =>
+		transformNode(child, level, bullets),
+	);
+}
+
+function transformNode(
+	node: ReactNode,
+	level: number,
+	bullets: ListBullets,
+): ReactNode {
+	if (!isCommonElement(node)) return node;
+
+	const element = node;
+	if (
+		typeof element.type === "string" &&
+		(element.type === "ul" || element.type === "ol")
+	) {
+		return transformList(element, level, bullets);
+	}
+
+	if (element.props.children === undefined) return element;
+
+	return cloneElement(element, {
+		children: transformChildren(element.props.children, level, bullets),
+	});
+}
+
+function transformList(
+	list: CommonElement,
+	level: number,
+	bullets: ListBullets,
+): ReactNode {
+	return cloneElement(list, {
+		className: cn(list.props.className, "honeydeck-list-style-list"),
+		children: Children.map(list.props.children, (child) => {
+			if (!isListItemElement(child))
+				return transformNode(child, level + 1, bullets);
+			return transformListItem(child, level, bullets);
+		}),
+	});
+}
+
+function transformListItem(
+	item: CommonElement,
+	level: number,
+	bullets: ListBullets,
+): ReactNode {
+	const bullet = bulletForLevel(bullets, level);
+	const hasBullet = bullet !== null && bullet !== undefined && bullet !== false;
+	const marker = hasBullet ? (
+		<span
+			className="honeydeck-list-style-marker inline-flex h-[1.7em] w-[0.9em] flex-[0_0_0.9em] items-center justify-center text-accent font-bold leading-none [&>svg]:h-[0.9em] [&>svg]:w-[0.9em] [&>svg]:stroke-[3]"
+			aria-hidden="true"
+		>
+			{bullet}
+		</span>
+	) : null;
+
+	return cloneElement(item, {
+		className: cn(
+			item.props.className,
+			"honeydeck-list-style-item",
+			hasBullet &&
+				"honeydeck-list-style-item--with-marker flex items-start gap-[0.35em]",
+		),
+		children: hasBullet ? (
+			<>
+				{marker}
+				<div className="honeydeck-list-style-content min-w-0 flex-1">
+					{transformChildren(item.props.children, level + 1, bullets)}
+				</div>
+			</>
+		) : (
+			transformChildren(item.props.children, level + 1, bullets)
+		),
+	});
+}
+
+/**
+ * Wrap Markdown/HTML/JSX lists to remove native markers or render custom
+ * bullet markers per nesting level.
+ *
+ * Omit `bullets` to remove native markers while keeping list alignment. Pass
+ * one marker to reuse it for every nesting level, or an array to assign markers
+ * by level. Markers can be strings, icons, or any React node that fits inline.
+ *
+ * ```mdx
+ * import { ListStyle } from '@honeydeck/honeydeck'
+ *
+ * <ListStyle>
+ *   - No marker
+ *   - Still aligned
+ * </ListStyle>
+ *
+ * <ListStyle bullets={["01", "+"]}>
+ *   - First level
+ *     - Nested detail
+ *   - Aligned custom markers
+ * </ListStyle>
+ * ```
+ */
+export function ListStyle({
+	bullets,
+	className,
+	style,
+	children,
+}: ListStyleProps) {
+	const customBullets = hasCustomBullets(bullets);
+
+	return (
+		<div
+			className={cn(
+				"honeydeck-list-style [&_:is(ul,ol)]:list-none [&_:is(ul,ol)]:pl-0 [&_li>:is(ul,ol)]:mt-[0.35em] [&_li>:is(ul,ol)]:pl-[1.5em] [&_.honeydeck-list-style-content>:is(ul,ol)]:mt-[0.35em] [&_.honeydeck-list-style-content>:is(ul,ol)]:pl-[1.5em]",
+				customBullets
+					? "honeydeck-list-style--custom"
+					: "honeydeck-list-style--plain",
+				className,
+			)}
+			style={style}
+		>
+			{customBullets ? transformChildren(children, 1, bullets) : children}
+		</div>
+	);
+}

package/src/runtime/components/NavBar.tsx

@@ -0,0 +1,223 @@
+/**
+ * NavBar — floating navigation controls for Honeydeck.
+ *
+ * ### Visibility
+ * - **Desktop** (pointer: fine): hidden by default, fades in when the
+ *   cursor hovers near the bottom edge of the screen (within the hover zone).
+ * - **Touch/mobile** (pointer: coarse): always visible.
+ *
+ * ### Controls
+ * - Previous step (←)
+ * - Current slide number
+ * - Next step (→)
+ * - Overview grid toggle
+ * - Layouts reference
+ * - Docs website (opens new window)
+ * - Presenter mode (opens new window)
+ * - Fullscreen toggle
+ * - Mobile slide text selection toggle
+ * - Color mode cycle (system → light → dark → system)
+ */
+
+import {
+	BookOpenTextIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	ExternalLinkIcon,
+	LayoutGridIcon,
+	MaximizeIcon,
+	MinimizeIcon,
+	PresentationIcon,
+	RotateCcwIcon,
+	TextSelectIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+	getNextStepRoute,
+	getPreviousStepRoute,
+	nextStep,
+	openDocsWebsite,
+	openPresenter,
+	openReference,
+	previousStep,
+} from "../navigation.ts";
+import type { Route } from "../router.ts";
+import { slideData } from "../slideData.ts";
+import type { ColorMode } from "./ColorModeCycleButton.tsx";
+import { ColorModeCycleButton } from "./ColorModeCycleButton.tsx";
+import { NavBarButton, navBarButtonClass } from "./NavBarButton.tsx";
+import { NavBarDivider } from "./NavBarDivider.tsx";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type NavBarProps = {
+	route: Route;
+	isOverview: boolean;
+	colorMode: ColorMode;
+	onToggleOverview: () => void;
+	onSetColorMode: (mode: ColorMode) => void;
+	isZoomed?: boolean;
+	onResetZoom?: () => void;
+	showTextSelectionToggle?: boolean;
+	isTextSelectionEnabled?: boolean;
+	onToggleTextSelection?: () => void;
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function NavBar({
+	route,
+	isOverview,
+	colorMode,
+	onToggleOverview,
+	onSetColorMode,
+	isZoomed = false,
+	onResetZoom,
+	showTextSelectionToggle = false,
+	isTextSelectionEnabled = false,
+	onToggleTextSelection,
+}: NavBarProps) {
+	const navigationOptions = {
+		slideCount: slideData.length,
+		getStepCount: (slideIndex: number) => slideData[slideIndex]?.stepCount ?? 0,
+	};
+
+	// ISSUE-02: track fullscreen reactively via event listener
+	const [isFullscreen, setIsFullscreen] = useState(
+		!!document.fullscreenElement,
+	);
+	useEffect(() => {
+		function onFullscreenChange() {
+			setIsFullscreen(!!document.fullscreenElement);
+		}
+		document.addEventListener("fullscreenchange", onFullscreenChange);
+		return () =>
+			document.removeEventListener("fullscreenchange", onFullscreenChange);
+	}, []);
+
+	function goPrev() {
+		previousStep(route, navigationOptions);
+	}
+
+	function goNext() {
+		nextStep(route, navigationOptions);
+	}
+
+	function toggleFullscreen() {
+		if (document.fullscreenElement) {
+			document.exitFullscreen();
+		} else {
+			document.documentElement.requestFullscreen();
+		}
+	}
+
+	const canPrev = getPreviousStepRoute(route, navigationOptions) !== null;
+	const canNext = getNextStepRoute(route, navigationOptions) !== null;
+	const FullscreenIcon = isFullscreen ? MinimizeIcon : MaximizeIcon;
+
+	return (
+		// Hover zone — transparent, occupies the bottom strip
+		<div
+			className="honeydeck-nav-zone fixed bottom-0 left-0 right-0 h-20 z-50 flex items-end pointer-events-none"
+			data-honeydeck-no-swipe="true"
+		>
+			{/* Actual bar */}
+			<div className="honeydeck-nav-bar pointer-events-auto flex items-center gap-1 px-2 py-1.5 ml-6 mb-6 bg-black/70 backdrop-blur rounded-lg border border-white/10 shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
+				{/* Prev step */}
+				<NavBarButton
+					onClick={goPrev}
+					label="Previous step (←)"
+					disabled={!canPrev}
+				>
+					<ChevronLeftIcon aria-hidden="true" size={16} />
+				</NavBarButton>
+
+				{/* Slide number */}
+				<span className="min-w-6 px-1 text-center font-sans text-sm tabular-nums text-white/60">
+					{route.slide}
+				</span>
+
+				{/* Next step */}
+				<NavBarButton
+					onClick={goNext}
+					label="Next step (→)"
+					disabled={!canNext}
+				>
+					<ChevronRightIcon aria-hidden="true" size={16} />
+				</NavBarButton>
+
+				<NavBarDivider />
+
+				{/* Overview */}
+				<NavBarButton
+					onClick={onToggleOverview}
+					label="Overview (o)"
+					active={isOverview}
+				>
+					<LayoutGridIcon aria-hidden="true" size={14} />
+				</NavBarButton>
+
+				{/* Layouts reference */}
+				<NavBarButton
+					onClick={() => openReference(route)}
+					label="Layouts reference"
+				>
+					<BookOpenTextIcon aria-hidden="true" size={16} />
+				</NavBarButton>
+
+				{/* Docs website */}
+				<NavBarButton onClick={openDocsWebsite} label="Docs website">
+					<ExternalLinkIcon aria-hidden="true" size={15} />
+				</NavBarButton>
+
+				{/* Presenter mode */}
+				{route.view !== "presenter" && (
+					<NavBarButton
+						onClick={() => openPresenter(route)}
+						label="Presenter mode (p)"
+					>
+						<PresentationIcon aria-hidden="true" size={16} />
+					</NavBarButton>
+				)}
+
+				{/* Fullscreen */}
+				<NavBarButton onClick={toggleFullscreen} label="Fullscreen (f)">
+					<FullscreenIcon aria-hidden="true" size={16} />
+				</NavBarButton>
+
+				{showTextSelectionToggle && onToggleTextSelection && (
+					<NavBarButton
+						onClick={onToggleTextSelection}
+						label={
+							isTextSelectionEnabled
+								? "Disable slide text selection"
+								: "Enable slide text selection"
+						}
+						active={isTextSelectionEnabled}
+					>
+						<TextSelectIcon aria-hidden="true" size={16} />
+					</NavBarButton>
+				)}
+
+				<NavBarDivider />
+
+				{isZoomed && onResetZoom && (
+					<NavBarButton onClick={onResetZoom} label="Reset zoom">
+						<RotateCcwIcon aria-hidden="true" size={16} />
+					</NavBarButton>
+				)}
+
+				{/* Color mode */}
+				<ColorModeCycleButton
+					colorMode={colorMode}
+					onSetColorMode={onSetColorMode}
+					className={navBarButtonClass()}
+				/>
+			</div>
+		</div>
+	);
+}

package/src/runtime/components/NavBarButton.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+
+export function NavBarButton({
+	onClick,
+	title,
+	label,
+	"aria-label": ariaLabel,
+	disabled,
+	active,
+	children,
+}: {
+	onClick: () => void;
+	title?: string;
+	label?: string;
+	"aria-label"?: string;
+	disabled?: boolean;
+	active?: boolean;
+	children: ReactNode;
+}) {
+	const accessibleLabel = ariaLabel ?? label ?? title;
+	const buttonTitle = title ?? label ?? ariaLabel;
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			title={buttonTitle}
+			aria-label={accessibleLabel}
+			disabled={disabled}
+			className={navBarButtonClass({ active, disabled })}
+		>
+			{children}
+		</button>
+	);
+}
+
+export function navBarButtonClass({
+	active = false,
+	disabled = false,
+}: {
+	active?: boolean;
+	disabled?: boolean;
+} = {}) {
+	return `w-8 h-8 rounded border-none flex items-center justify-center shrink-0 transition-[background,color] duration-100 ease-out ${
+		active ? "bg-white/15" : "bg-transparent"
+	} ${disabled ? "text-white/20" : "text-white/80"}`;
+}

package/src/runtime/components/NavBarDivider.tsx

@@ -0,0 +1,3 @@
+export function NavBarDivider() {
+	return <div className="w-px h-5 bg-white/12 mx-0.5 shrink-0" />;
+}