@karimsa/mdxserve 0.2.0 → 0.4.0

package/client/shell/AppShell.tsx

@@ -1,3 +1,4 @@
+import { DiagramPreferences } from "../diagrams/Preferences";
 import { AnimatePresence, motion, useSpring } from "framer-motion";
 import { useAtomValue } from "jotai";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
@@ -30,17 +31,26 @@ import { TocRail } from "./TocRail";
 import { TopBar } from "./TopBar";
 import { useContentWidth, useDocMaxWidth } from "./use-doc-width";
 import { DESKTOP_MEDIA } from "../platform";
-import { docWidthAtom, LISTING_MAX_WIDTH, LISTING_MIN_WIDTH, listingWidthAtom } from "../state";
+import {
+	contentLayoutAtom,
+	docWidthAtom,
+	LISTING_MAX_WIDTH,
+	LISTING_MIN_WIDTH,
+	listingWidthAtom,
+} from "../state";
 
-const SIDEBAR_STORAGE_KEY = "mdxserve-sidebar";
+function sidebarStorageKey(): string {
+	// Keep hosted navigation preferences separate from local reader defaults.
+	return shellInfo.immutableSite ? "mdxserve-site-sidebar" : "mdxserve-sidebar";
+}
 const SEARCH_DEBOUNCE_MS = 120;
 
 function readStoredSidebarOpen(): boolean {
 	try {
-		const value = localStorage.getItem(SIDEBAR_STORAGE_KEY);
-		return value === null ? true : value === "1";
+		const value = localStorage.getItem(sidebarStorageKey());
+		return value === null ? !shellInfo.immutableSite : value === "1";
 	} catch {
-		return true;
+		return !shellInfo.immutableSite;
 	}
 }
 
@@ -132,6 +142,7 @@ function useListingMaxWidth(contentWidth: number, stored: number | null) {
 }
 
 export function AppShell({ route, navigate }: { route: Route; navigate: (path: string) => void }) {
+	const [diagramPreferences, setDiagramPreferences] = useState(false);
 	const { theme, toggle } = useTheme();
 	const { roots } = useTree();
 
@@ -171,6 +182,7 @@ export function AppShell({ route, navigate }: { route: Route; navigate: (path: s
 	const [exporting, setExporting] = useState(false);
 	const listingWidth = useAtomValue(listingWidthAtom);
 	const docWidth = useAtomValue(docWidthAtom);
+	const fullWidth = useAtomValue(contentLayoutAtom) === "full-width";
 	const contentRef = useRef<HTMLDivElement>(null);
 	const contentWidth = useContentWidth(contentRef);
 	const listingMaxWidth = useListingMaxWidth(contentWidth, listingWidth);
@@ -203,7 +215,7 @@ export function AppShell({ route, navigate }: { route: Route; navigate: (path: s
 
 	useEffect(() => {
 		try {
-			localStorage.setItem(SIDEBAR_STORAGE_KEY, desktopOpen ? "1" : "0");
+			localStorage.setItem(sidebarStorageKey(), desktopOpen ? "1" : "0");
 		} catch {
 			// private mode / storage disabled: the choice just won't persist
 		}
@@ -301,13 +313,22 @@ export function AppShell({ route, navigate }: { route: Route; navigate: (path: s
 
 	return (
 		<div className="min-h-screen bg-surface-page">
+			<AnimatePresence>
+				{diagramPreferences && (
+					<DiagramPreferences
+						canEditDiagrams={shellInfo.sameMachine && shellInfo.permissions !== "restricted"}
+						onClose={() => setDiagramPreferences(false)}
+					/>
+				)}
+			</AnimatePresence>
 			<TopBar
+				onDiagramPreferences={() => setDiagramPreferences(true)}
 				homeHref="/"
 				hostLabel={location.host}
-				sidebar={{ open: showSidebar, onToggle: handleToggleSidebar }}
+				sidebar={{ open: showSidebar || mobileOpen, onToggle: handleToggleSidebar }}
 				search={{ onOpen: () => setSearchOpen(true) }}
 				exportDoc={
-					route.kind === "doc" && shellInfo.sameMachine
+					route.kind === "doc" && shellInfo.permissions !== "restricted" && shellInfo.sameMachine
 						? { pending: exporting, onExport: handleExport }
 						: undefined
 				}
@@ -324,7 +345,7 @@ export function AppShell({ route, navigate }: { route: Route; navigate: (path: s
 					mobileOpen={mobileOpen}
 					onCloseMobile={() => setMobileOpen(false)}
 				/>
-				<main className="flex flex-1 min-w-0 px-8 pt-10 pb-24">
+				<main className="flex flex-1 min-w-0 px-5 pt-6 pb-16 md:px-8 md:pt-10 md:pb-24">
 					{/* The resize handles clamp drags to this area, and the max-width
 					    springs track it, so content never runs under the toc rail. */}
 					<div ref={contentRef} data-content-area className="flex flex-1 min-w-0 justify-center">
@@ -336,16 +357,18 @@ export function AppShell({ route, navigate }: { route: Route; navigate: (path: s
 								animate="enter"
 								exit="exit"
 								className={
-									route.kind === "listing" || (route.kind === "doc" && docMaxWidth)
+									fullWidth || route.kind === "listing" || (route.kind === "doc" && docMaxWidth)
 										? "w-full"
 										: "w-full max-w-prose"
 								}
 								style={
-									route.kind === "listing"
-										? { maxWidth: listingMaxWidth }
-										: route.kind === "doc" && docMaxWidth
-											? { maxWidth: docMaxWidth }
-											: undefined
+									fullWidth
+										? { maxWidth: "100%" }
+										: route.kind === "listing"
+											? { maxWidth: listingMaxWidth }
+											: route.kind === "doc" && docMaxWidth
+												? { maxWidth: docMaxWidth }
+												: undefined
 								}
 							>
 								<Breadcrumb items={breadcrumbItems(route, rootCount)} />

package/client/shell/Sidebar.tsx

@@ -1,8 +1,9 @@
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useAtom } from "jotai";
 import { VARIANTS } from "../motion";
 import { Icon } from "../ui/Icon";
+import { IconButton } from "../ui/IconButton";
 import { ResizeHandle } from "../ui/ResizeHandle";
 import { ListingView } from "../ListingView";
 import { useFolderListing } from "../router";
@@ -95,6 +96,15 @@ export function Sidebar({
 	const [width, setWidth] = useAtom(sidebarWidthAtom);
 	const asideRef = useRef<HTMLDivElement>(null);
 
+	useEffect(() => {
+		if (!mobileOpen) return;
+		function onKeyDown(event: KeyboardEvent) {
+			if (event.key === "Escape") onCloseMobile();
+		}
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [mobileOpen, onCloseMobile]);
+
 	return (
 		<>
 			{/* Mobile overlay: fixed drawer + scrim, closed by default. */}
@@ -121,9 +131,17 @@ export function Sidebar({
 							if ((event.target as HTMLElement).closest("a[href]")) onCloseMobile();
 						}}
 						className={
-							"fixed inset-y-0 left-0 z-[var(--z-modal)] overflow-y-auto border-r border-border-subtle bg-surface-raised px-3 py-6 shadow-lg md:hidden w-sidebar"
+							"fixed inset-y-0 left-0 z-[var(--z-modal)] overflow-y-auto border-r border-border-subtle bg-surface-raised px-3 py-6 shadow-lg md:hidden w-sidebar max-w-[calc(100vw-3rem)]"
 						}
 					>
+						<div className="mb-3 flex justify-end">
+							<IconButton
+								icon="x"
+								label="Close navigation"
+								className="h-11 w-11"
+								onClick={onCloseMobile}
+							/>
+						</div>
 						<SidebarBody
 							rootDir={rootDir}
 							activePath={activePath}

package/client/shell/StandaloneShell.tsx

@@ -1,11 +1,12 @@
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useAtomValue } from "jotai";
 import { useCallback, useRef, useState } from "react";
+import { Settings } from "../Settings";
 import { DocView } from "../DocView";
 import { fadeRise } from "../motion";
 import { useTheme } from "../theme";
 import { docModuleCache } from "../doc-module-cache";
-import { docWidthAtom } from "../state";
+import { contentLayoutAtom, docWidthAtom } from "../state";
 import { Footer } from "./Footer";
 import { TocRail } from "./TocRail";
 import { TopBar } from "./TopBar";
@@ -20,8 +21,10 @@ import type { StandaloneMeta } from "../standalone-entry";
  */
 export function StandaloneShell({ meta }: { meta: StandaloneMeta }) {
 	const { theme, toggle } = useTheme();
+	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [tocVersion, setTocVersion] = useState(0);
 	const docWidth = useAtomValue(docWidthAtom);
+	const fullWidth = useAtomValue(contentLayoutAtom) === "full-width";
 	const contentRef = useRef<HTMLDivElement>(null);
 	const contentWidth = useContentWidth(contentRef);
 	const docMaxWidth = useDocMaxWidth(contentWidth, docWidth);
@@ -40,15 +43,25 @@ export function StandaloneShell({ meta }: { meta: StandaloneMeta }) {
 
 	return (
 		<div className="min-h-screen bg-surface-page">
-			<TopBar theme={theme} onToggleTheme={toggle} hostLabel={meta.label} />
-			<main className="flex flex-1 min-w-0 px-8 pt-10 pb-24">
+			<AnimatePresence>
+				{settingsOpen && <Settings onClose={() => setSettingsOpen(false)} />}
+			</AnimatePresence>
+			<TopBar
+				theme={theme}
+				onToggleTheme={toggle}
+				hostLabel={meta.label}
+				onDiagramPreferences={() => setSettingsOpen(true)}
+			/>
+			<main className="flex flex-1 min-w-0 px-5 pt-6 pb-16 md:px-8 md:pt-10 md:pb-24">
 				<div ref={contentRef} data-content-area className="flex flex-1 min-w-0 justify-center">
 					<motion.div
 						variants={fadeRise}
 						initial="initial"
 						animate="enter"
-						className={docMaxWidth ? "w-full" : "w-full max-w-prose"}
-						style={docMaxWidth ? { maxWidth: docMaxWidth } : undefined}
+						className={fullWidth || docMaxWidth ? "w-full" : "w-full max-w-prose"}
+						style={
+							fullWidth ? { maxWidth: "100%" } : docMaxWidth ? { maxWidth: docMaxWidth } : undefined
+						}
 					>
 						<DocView
 							path={meta.path}

package/client/shell/TocRail.tsx

@@ -1,8 +1,8 @@
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useRef } from "react";
 import { ResizeHandle } from "../ui/ResizeHandle";
 import { TocList } from "../ui/TocList";
-import { TOC_MAX_WIDTH, TOC_MIN_WIDTH, tocWidthAtom } from "../state";
+import { TOC_MAX_WIDTH, TOC_MIN_WIDTH, tocVisibleAtom, tocWidthAtom } from "../state";
 import { useToc } from "./useToc";
 
 function clampWidth(px: number): number {
@@ -13,9 +13,10 @@ function clampWidth(px: number): number {
 export function TocRail({ path, version }: { path: string; version: number }) {
 	const { items, activeId, setActiveId } = useToc(path, version);
 	const [width, setWidth] = useAtom(tocWidthAtom);
+	const visible = useAtomValue(tocVisibleAtom);
 	const railRef = useRef<HTMLDivElement>(null);
 	const hasH2 = items.some((item) => item.level === 2);
-	if (!hasH2) return null;
+	if (!visible || !hasH2) return null;
 
 	function handleSelect(id: string) {
 		setActiveId(id);

package/client/shell/TopBar.tsx

@@ -44,6 +44,7 @@ export function TopBar({
 	exportDoc,
 	theme,
 	onToggleTheme,
+	onDiagramPreferences,
 }: {
 	/** Wordmark's link target; undefined renders it as a plain (non-link) span. */
 	homeHref?: string;
@@ -57,13 +58,14 @@ export function TopBar({
 	exportDoc?: { pending: boolean; onExport: (format: ExportFormat) => void };
 	theme: Theme;
 	onToggleTheme: () => void;
+	onDiagramPreferences?: () => void;
 }) {
 	const mac = isApplePlatform();
 
 	return (
 		<header
 			data-print-hide
-			className="sticky top-0 z-10 flex h-topbar shrink-0 items-center gap-3 border-b border-border-subtle px-4"
+			className="sticky top-0 z-10 flex h-topbar shrink-0 items-center gap-1 border-b border-border-subtle px-2 md:gap-3 md:px-4 [&>button]:max-md:h-11 [&>button]:max-md:w-11 [&>button]:shrink-0"
 			style={{
 				background: "color-mix(in oklab, var(--surface-page) 82%, transparent)",
 				backdropFilter: "var(--blur-chrome)",
@@ -80,7 +82,10 @@ export function TopBar({
 			) : null}
 			<Wordmark href={homeHref} />
 			{hostLabel ? (
-				<span className="rounded-sm border border-border-default px-1.5 py-0.5 font-mono text-[length:var(--size-2xs)] text-text-subtle">
+				<span
+					title={hostLabel}
+					className="hidden min-w-0 max-w-48 truncate md:block rounded-sm border border-border-default px-1.5 py-0.5 font-mono text-[length:var(--size-2xs)] text-text-subtle"
+				>
 					{hostLabel}
 				</span>
 			) : null}
@@ -89,11 +94,15 @@ export function TopBar({
 				<button
 					type="button"
 					onClick={search.onOpen}
-					className="flex h-[30px] w-60 items-center gap-2 rounded-md border border-border-default bg-surface-card px-2.5 text-[13px] text-text-subtle shadow-xs cursor-pointer"
+					aria-label="Search docs"
+					title="Search docs"
+					className="flex h-11 w-11 shrink-0 justify-center md:h-[30px] md:w-60 md:justify-start items-center gap-2 rounded-md border border-border-default bg-surface-card px-2.5 text-[13px] text-text-subtle shadow-xs cursor-pointer"
 				>
 					<Icon name="search" size="sm" />
-					<span className="flex-1 text-left">Search docs</span>
-					<Kbd>{mac ? "⌘K" : "Ctrl K"}</Kbd>
+					<span className="hidden md:block flex-1 text-left">Search docs</span>
+					<span className="hidden md:contents">
+						<Kbd>{mac ? "⌘K" : "Ctrl K"}</Kbd>
+					</span>
 				</button>
 			) : null}
 			{exportDoc ? (
@@ -106,6 +115,9 @@ export function TopBar({
 					onChange={(format) => exportDoc.onExport(format as ExportFormat)}
 				/>
 			) : null}
+			{onDiagramPreferences && (
+				<IconButton icon="settings" label="Settings" size="sm" onClick={onDiagramPreferences} />
+			)}
 			<IconButton
 				icon={theme === "dark" ? "sun" : "moon"}
 				label={theme === "dark" ? "Light mode" : "Dark mode"}

package/client/state.ts

@@ -88,3 +88,17 @@ export const docWidthAtom = atomWithStorage<number | null>("mdxserve.doc.width",
  * back to read mode, discarding whatever it had open (see client/MdSection.tsx).
  */
 export const openSectionAtom = atom<string | null>(null);
+
+export type ContentLayout = "flexible" | "full-width";
+
+/** Content layout preference; saved widths are retained when full width is active. */
+export const contentLayoutAtom = atomWithStorage<ContentLayout>(
+	"mdxserve.content.layout",
+	"flexible",
+	undefined,
+	{ getOnInit: true },
+);
+
+export const tocVisibleAtom = atomWithStorage<boolean>("mdxserve.toc.visible", true, undefined, {
+	getOnInit: true,
+});

package/client/ui/ConfirmDeleteDialog.tsx

@@ -1,11 +1,8 @@
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "framer-motion";
 import { formatModified, formatSize } from "../format";
 import Button from "../builtins/Button";
 import type { ListingEntry } from "../router";
 import { Icon } from "./Icon";
-import { VARIANTS } from "../motion";
+import { Modal } from "./Modal";
 
 export function ConfirmDeleteDialog({
 	open,
@@ -21,93 +18,53 @@ export function ConfirmDeleteDialog({
 	onCancel: () => void;
 	onConfirm: () => void;
 }) {
-	// Document-level, not panel-level: while a delete is pending both buttons
-	// are disabled and the browser drops focus to <body>, so a panel onKeyDown
-	// would stop hearing Escape (e.g. after a failed request leaves the dialog
-	// open).
-	useEffect(() => {
-		if (!open) return;
-		function onKeyDown(event: KeyboardEvent) {
-			if (event.key === "Escape" && !pending) {
-				event.preventDefault();
-				onCancel();
-			}
-		}
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [open, pending, onCancel]);
-
-	// Portal to <body>: this renders inside the route wrapper, whose fadeRise
-	// transform would otherwise turn `fixed` into "fixed to the column" and let
-	// the scrim miss the top bar and sidebar.
-	return createPortal(
-		<AnimatePresence>
-			{open ? (
-				<motion.div
-					key="scrim"
-					onClick={pending ? undefined : onCancel}
-					{...VARIANTS.scrim}
-					className="fixed inset-0 z-[var(--z-modal)] flex justify-center bg-[var(--scrim)] pt-[10vh] backdrop-blur-sm"
-				>
-					<motion.div
-						onClick={(event) => event.stopPropagation()}
-						{...VARIANTS.pop}
-						role="alertdialog"
-						aria-modal="true"
-						aria-labelledby="confirm-delete-title"
-						className="w-[560px] max-w-[92vw] self-start overflow-hidden rounded-xl border border-border-default bg-surface-raised shadow-lg"
+	return (
+		<Modal
+			open={open}
+			onClose={onCancel}
+			dismissible={!pending}
+			placement="top"
+			role="alertdialog"
+			aria-labelledby="confirm-delete-title"
+			className="w-[560px] overflow-hidden"
+		>
+			<div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
+				<Icon name="trash-2" size="md" className="text-status-danger-fg" />
+				<div className="flex flex-col">
+					<span
+						id="confirm-delete-title"
+						className="font-sans font-semibold text-text-heading text-[length:var(--size-md)]"
 					>
-						<div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
-							<Icon name="trash-2" size="md" className="text-status-danger-fg" />
-							<div className="flex flex-col">
-								<span
-									id="confirm-delete-title"
-									className="font-sans font-semibold text-text-heading text-[length:var(--size-md)]"
-								>
-									Delete {files.length} {files.length === 1 ? "file" : "files"}?
-								</span>
-								<span className="font-sans text-[length:var(--size-sm)] text-text-muted">
-									They&rsquo;ll be moved to the system Trash — this can be undone from there.
-								</span>
-							</div>
-						</div>
-						<div className="max-h-72 overflow-y-auto p-2">
-							{files.map((file) => (
-								<div key={file.name} className="flex items-center gap-2 rounded-md px-2 py-1.5">
-									<Icon name="file-text" size="sm" className="shrink-0 text-text-subtle" />
-									<span className="truncate font-mono text-[length:var(--size-sm)]">
-										{file.name}
-									</span>
-									<span className="ml-auto flex shrink-0 gap-4 pl-4 font-mono text-[length:var(--size-xs)] text-text-subtle tabular-nums">
-										{typeof file.mtime === "number" ? (
-											<span>{formatModified(file.mtime)}</span>
-										) : null}
-										{typeof file.size === "number" ? (
-											<span className="w-16 text-right">{formatSize(file.size)}</span>
-										) : null}
-									</span>
-								</div>
-							))}
-						</div>
-						<div className="flex justify-end gap-2 border-t border-border-subtle px-4 py-3">
-							{/* Start keyboard focus on the safe action. */}
-							<Button variant="secondary" size="sm" autoFocus disabled={pending} onClick={onCancel}>
-								Cancel
-							</Button>
-							<Button
-								variant="danger"
-								size="sm"
-								icon="trash-2"
-								disabled={pending}
-								onClick={onConfirm}
-							>
-								{pending ? "Moving…" : "Move to Trash"}
-							</Button>
-						</div>
-					</motion.div>
-				</motion.div>
-			) : null}
-		</AnimatePresence>,
-		document.body,
+						Delete {files.length} {files.length === 1 ? "file" : "files"}?
+					</span>
+					<span className="font-sans text-[length:var(--size-sm)] text-text-muted">
+						They&rsquo;ll be moved to the system Trash — this can be undone from there.
+					</span>
+				</div>
+			</div>
+			<div className="max-h-72 overflow-y-auto p-2">
+				{files.map((file) => (
+					<div key={file.name} className="flex items-center gap-2 rounded-md px-2 py-1.5">
+						<Icon name="file-text" size="sm" className="shrink-0 text-text-subtle" />
+						<span className="truncate font-mono text-[length:var(--size-sm)]">{file.name}</span>
+						<span className="ml-auto flex shrink-0 gap-4 pl-4 font-mono text-[length:var(--size-xs)] text-text-subtle tabular-nums">
+							{typeof file.mtime === "number" ? <span>{formatModified(file.mtime)}</span> : null}
+							{typeof file.size === "number" ? (
+								<span className="w-16 text-right">{formatSize(file.size)}</span>
+							) : null}
+						</span>
+					</div>
+				))}
+			</div>
+			<div className="flex justify-end gap-2 border-t border-border-subtle px-4 py-3">
+				{/* Start keyboard focus on the safe action. */}
+				<Button variant="secondary" size="sm" autoFocus disabled={pending} onClick={onCancel}>
+					Cancel
+				</Button>
+				<Button variant="danger" size="sm" icon="trash-2" disabled={pending} onClick={onConfirm}>
+					{pending ? "Moving…" : "Move to Trash"}
+				</Button>
+			</div>
+		</Modal>
 	);
 }