// HyperBook — Desktop layout
// Persistent left sidebar TOC with inline summary unfold; wide reading column.
const { useState: useStateD, useEffect: useEffectD, useMemo: useMemoD, useRef: useRefD } = React;
const TWEAKS_D = /*EDITMODE-BEGIN*/{
"transition": "unfold",
"paperTone": "cream",
"typeSize": 18,
"lampMode": false,
"showPullQuote": true,
"sidebarWidth": 360
}/*EDITMODE-END*/;
// ─────────────────────────────────────────────────────────────────────────
// Desktop reading column — wider margins, larger type
// ─────────────────────────────────────────────────────────────────────────
function DesktopReadingColumn({ chapter, all, onNavigate, lampMode, typeSize, showPullQuote }) {
const idx = all.findIndex((c) => c.n === chapter.n);
const prev = idx > 0 ? all[idx - 1] : null;
const next = idx < all.length - 1 ? all[idx + 1] : null;
const fg = lampMode ? 'var(--paper)' : 'var(--ink)';
const fg2 = lampMode ? 'rgba(246,241,229,0.82)' : 'var(--ink-soft)';
const fg3 = lampMode ? 'rgba(246,241,229,0.5)' : 'var(--ink-mute)';
const accent = lampMode ? '#E89260' : 'var(--flame)';
const border = lampMode ? 'rgba(246,241,229,0.25)' : 'var(--ink)';
return (
{/* eyebrow */}
{`Part ${chapter.partRoman} · ${chapter.partTitle}`}
{`${chapter.readMin} min read · p. ${chapter.page}`}
{/* chapter number */}
{`Chapter ${chapter.n}`}
{/* chapter title — bigger on desktop but still editorial */}
{chapter.title}
{/* body — markdown-rendered. */}
{(() => {
const md = Array.isArray(chapter.body) ? chapter.body.join('\n\n') : chapter.body;
const theme = buildTheme({
lampMode, typeSize, accent, fg, fg2, fg3, scale: 'desktop',
});
const pqEl = showPullQuote && chapter.pullQuote
?
§
{/* prev / next */}
{prev ? onNavigate(prev.n)} lampMode={lampMode} /> :
}
{next ? onNavigate(next.n)} lampMode={lampMode} /> :
}
);
}
function DesktopPullQuote({ text, lampMode, accent, fg }) {
const border = lampMode ? 'rgba(246,241,229,0.4)' : 'var(--ink)';
return (
);
}
function DesktopChapterLink({ dir, chapter, onClick, lampMode }) {
const isPrev = dir === 'prev';
const fg = lampMode ? 'var(--paper)' : 'var(--ink)';
const fg3 = lampMode ? 'rgba(246,241,229,0.5)' : 'var(--ink-mute)';
const border = lampMode ? 'rgba(246,241,229,0.35)' : 'var(--ink)';
return (
e.currentTarget.style.transform = 'translate(1px,1px)'}
onMouseUp={(e) => e.currentTarget.style.transform = ''}
onMouseLeave={(e) => e.currentTarget.style.transform = ''}>
{isPrev ? `← ch. ${chapter.n} · previous` : `next · ch. ${chapter.n} →`}
{chapter.title}
);
}
// ─────────────────────────────────────────────────────────────────────────
// Desktop sidebar — persistent left rail with TOC + inline summary unfold
// ─────────────────────────────────────────────────────────────────────────
function DesktopSidebar({ book, expandedN, setExpandedN, currentN, transition, lampMode, onReadChapter, onHome, width }) {
const fg = lampMode ? 'var(--paper)' : 'var(--ink)';
const fg2 = lampMode ? 'rgba(246,241,229,0.82)' : 'var(--ink-soft)';
const fg3 = lampMode ? 'rgba(246,241,229,0.5)' : 'var(--ink-mute)';
const accent = lampMode ? '#E89260' : 'var(--flame)';
const bg = lampMode ? '#1A1614' : 'var(--surface-2)';
const border = lampMode ? 'rgba(246,241,229,0.18)' : 'var(--ink)';
return (
{/* sidebar chrome top */}
Contents
{`${flattenChapters(book).length} lessons · ${book.parts.length} parts`}
{/* book masthead */}
{ if (onHome && (e.key === 'Enter' || e.key === ' ')) onHome(); }}
style={{
padding: '22px 20px 18px',
borderBottom: `1px solid ${border}`,
background: lampMode ? '#15110F' : 'var(--paper)',
cursor: onHome ? 'pointer' : 'default',
}}>
field guide · 2025 · first ed.
{book.title}
{book.subtitle}
{`${book.author} · ${book.publisher}`}
tap a chapter to unfold its summary.
{/* TOC list */}
{book.parts.map((part) => (
))}
· end ·
hyperbook v0.1
side b press
);
}
// ─────────────────────────────────────────────────────────────────────────
// Desktop reading-area header — running chapter chrome
// ─────────────────────────────────────────────────────────────────────────
function DesktopRunningHeader({ chapter, totalPages, lampMode, progress }) {
const fg = lampMode ? 'var(--paper)' : 'var(--ink)';
const fg3 = lampMode ? 'rgba(246,241,229,0.5)' : 'var(--ink-mute)';
const accent = lampMode ? '#E89260' : 'var(--flame)';
const bg = lampMode ? '#15110F' : 'var(--paper)';
const border = lampMode ? 'rgba(246,241,229,0.2)' : 'var(--ink)';
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// Desktop app
// ─────────────────────────────────────────────────────────────────────────
function HyperBookDesktop() {
const [t, setTweak] = useTweaks(TWEAKS_D);
const flat = useMemoD(() => flattenChapters(window.BOOK), []);
const [readingN, setReadingN] = useStateD('02');
const [expandedN, setExpandedN] = useStateD('10'); // ch 10 (SFT) shows markdown headings/lists in summary preview area
const readingChapter = flat.find((c) => c.n === readingN) || flat[0];
const scrollRef = useRefD(null);
const [progress, setProgress] = useStateD(0);
useEffectD(() => {
const el = scrollRef.current;
if (!el) return;
const onScroll = () => {
const max = el.scrollHeight - el.clientHeight;
setProgress(max > 0 ? Math.min(1, el.scrollTop / max) : 0);
};
onScroll();
el.addEventListener('scroll', onScroll, { passive: true });
return () => el.removeEventListener('scroll', onScroll);
}, [readingN]);
const readChapter = (n) => {
setReadingN(n);
setExpandedN(n);
requestAnimationFrame(() => {
if (scrollRef.current) scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
});
};
const paperVar = {
cream: { '--paper': '#F6F1E5', '--surface': '#FBF7EC', '--surface-2': '#F1EAD7' },
bone: { '--paper': '#EFE9DA', '--surface': '#F5F0E0', '--surface-2': '#E8E1CE' },
warm: { '--paper': '#E8DEC9', '--surface': '#EFE6D2', '--surface-2': '#DFD3BA' },
}[t.paperTone] || {};
const lamp = t.lampMode;
const bg = lamp ? '#15110F' : 'var(--paper)';
// Frame inner size (browser content area)
const FRAME_W = 1280, FRAME_H = 880;
const innerH = FRAME_H - 44 /* chrome */ - 40 /* toolbar */;
return (
{/* sidebar */}
setTweak('transition', v)}
/>
setTweak('paperTone', v)}
/>
setTweak('lampMode', v)}
/>
setTweak('typeSize', v)}
/>
setTweak('sidebarWidth', v)}
/>
setTweak('showPullQuote', v)}
/>
);
}
function DesktopDesignNotes() {
return (
hyperbook · prototype 01 · desktop · may 2026
The contents thinks out loud — beside you, as you read.
On desktop the table of contents lives permanently on the left. Tap a
chapter and its summary unfolds in place, beside whatever you're
reading — no drawer to open, no page to lose.
← mobile version
);
}
function DesktopCaption({ transition }) {
return (
fig. 02 · 1280 × 880 desktop
{`transition: ${transition}`}
);
}
Object.assign(window, {
HyperBookDesktop,
DesktopReadingColumn,
DesktopSidebar,
DesktopRunningHeader,
});