// components.jsx — UI atoms and panels for the markdown editor // ── Icon set ──────────────────────────────────────────────────────────────── const Icon = ({ name, size = 16, ...rest }) => { const paths = { 'edit': <>, 'eye': <>, 'split': <>, 'sidebar': <>, 'sun': <>, 'moon': <>, 'maximize': <>, 'globe': <>, 'download': <>, 'file': <>, 'list': <>, 'plus': <>, 'search': <>, 'more': <>, 'pdf': <>PDF, 'html': <>, 'check': <>, 'x': <>, 'tweaks': <>, 'save': <>, 'trash': <>, 'rename': <>, 'duplicate': <>, 'chev-down': <>, 'circle': <>, 'pen': <>, }; return ( {paths[name] || null} ); }; // ── Brand mark ────────────────────────────────────────────────────────────── const BrandMark = () => (
I
); // ── Segmented mode toggle ─────────────────────────────────────────────────── function ModeToggle({ value, onChange, t }) { const ref = React.useRef(null); const [thumb, setThumb] = React.useState({ left: 2, width: 0 }); const opts = [ { value: 'edit', label: t.mode_edit, icon: 'edit' }, { value: 'split', label: t.mode_split, icon: 'split' }, { value: 'preview', label: t.mode_preview, icon: 'eye' }, ]; React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const idx = opts.findIndex(o => o.value === value); const btn = el.querySelectorAll('button')[idx]; if (btn) setThumb({ left: btn.offsetLeft, width: btn.offsetWidth }); }, [value]); return (
{opts.map(o => ( ))}
); } // ── Dropdown menu ─────────────────────────────────────────────────────────── function Menu({ anchor, items, onClose, align = 'right' }) { const ref = React.useRef(null); const [pos, setPos] = React.useState(null); React.useLayoutEffect(() => { if (!anchor || !ref.current) return; const r = anchor.getBoundingClientRect(); const mw = ref.current.offsetWidth; setPos({ top: r.bottom + 6, left: align === 'right' ? r.right - mw : r.left, }); }, [anchor]); React.useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target) && anchor && !anchor.contains(e.target)) { onClose(); } }; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [anchor, onClose]); return (
{items.map((it, i) => { if (it.divider) return
; if (it.section) return
{it.section}
; return (
{ it.onClick && it.onClick(); onClose(); }}> {it.icon && } {it.label} {it.shortcut && {it.shortcut}} {it.checked && }
); })}
); } // ── Sidebar ───────────────────────────────────────────────────────────────── function Sidebar({ docs, activeId, onSelect, onCreate, onRename, onDelete, onDuplicate, headings, activeHeading, onJumpHeading, t }) { const [tab, setTab] = React.useState('files'); const [q, setQ] = React.useState(''); const [renaming, setRenaming] = React.useState(null); const [renameVal, setRenameVal] = React.useState(''); const [menuAnchor, setMenuAnchor] = React.useState(null); const [menuDoc, setMenuDoc] = React.useState(null); const filtered = docs.filter(d => !q || d.name.toLowerCase().includes(q.toLowerCase()) || d.content.toLowerCase().includes(q.toLowerCase())); const startRename = (doc) => { setRenaming(doc.id); setRenameVal(doc.name); }; const finishRename = () => { if (renaming && renameVal.trim()) onRename(renaming, renameVal.trim()); setRenaming(null); }; return ( ); } // ── Status bar ────────────────────────────────────────────────────────────── function StatusBar({ stats, saveState, lastSaved, mode, onMode, onFocus, t, lang }) { return (
{saveState === 'saving' ? t.saving : t.saved} {lastSaved && saveState === 'saved' && · {lastSaved}} {t.words}: {stats.words.toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US')} {t.chars}: {stats.chars.toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US')} {t.reading_time}: {stats.reading} {t.min}
); } // ── PDF preview modal ─────────────────────────────────────────────────────── function PdfPreviewModal({ html, title, onClose, onPrint, t }) { // Auto-paginate by measuring content. For demo we show one long page that // visually mimics A4 and let the print dialog handle real pagination. return (
e.stopPropagation()}>
{t.pdf_title}
{title} · A4 · {t.pdf_subtitle}
— 1 —
{t.pdf_hint}
); } // ── Onboarding empty state ────────────────────────────────────────────────── function EmptyDoc({ onCreate, t }) { return (

{t.empty_title}

{t.empty_body}

); } Object.assign(window, { Icon, BrandMark, ModeToggle, Menu, Sidebar, StatusBar, PdfPreviewModal, EmptyDoc, });