// Shared UI primitives + helpers used across feature-group files. // // Lives between the data modules (which provide window.useGuides etc.) and // the feature-group files (note-screen.jsx, guide-screens.jsx, ...) so its // exports are available everywhere downstream via window.* lookup. // // Rule for what goes here: used by 2+ consumers (multiple feature groups, // or one feature group + the app.jsx shell). Single-consumer helpers stay // with their consumer. See CLAUDE.md "File layout" for the full split. // // IIFE-wrapped so module-local declarations don't pollute Babel's shared // script scope. Explicit Object.assign(window, { ... }) at the bottom is // what makes these reachable from other files. (function () { // ─── Tiny hash router ────────────────────────────────────────────────────── function parseHash() { const h = window.location.hash; return h.startsWith('#') ? (h.slice(1) || '/') : '/'; } function navigate(p) { if (window.location.hash !== '#' + p) window.location.hash = p; } function useRoute() { const [path, setPath] = React.useState(parseHash()); React.useEffect(() => { const on = () => setPath(parseHash()); window.addEventListener('hashchange', on); if (!window.location.hash) navigate('/'); return () => window.removeEventListener('hashchange', on); }, []); return path; } function match(pat, path) { const pp = pat.split('/').filter(Boolean); const ap = path.split('/').filter(Boolean); if (pp.length !== ap.length) return null; const params = {}; for (let i = 0; i < pp.length; i++) { if (pp[i].startsWith(':')) params[pp[i].slice(1)] = decodeURIComponent(ap[i]); else if (pp[i] !== ap[i]) return null; } return params; } // ─── Skeleton gate ───────────────────────────────────────────────────────── // Skeleton gate. Returns true (show skeleton) when EITHER the cache isn't // loaded yet OR the per-mount minimum-display window hasn't elapsed. // _kickLoaders warms every cache at sign-in, so by the time the user navigates // to a screen via the in-app router `loaded` is already true and the bare // `!loaded` check never trips. The min-window gives every screen mount a // perceptible loading hint without lying about an actual fetch. function useSkeletonGate(loaded, minMs = 320) { const [pastMin, setPastMin] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setPastMin(true), minMs); return () => clearTimeout(t); }, []); return !pastMin || !loaded; } // ─── Formatters ──────────────────────────────────────────────────────────── function relativeTime(iso) { if (!iso) return ''; const sec = Math.floor((Date.now() - new Date(iso).getTime()) / 1000); if (sec < 60) return 'just now'; if (sec < 3600) return Math.floor(sec / 60) + 'm ago'; if (sec < 86400) return Math.floor(sec / 3600) + 'h ago'; return Math.floor(sec / 86400) + 'd ago'; } function formatChars(n) { if (n < 1000) return n + ' chars'; if (n < 1000000) return (n / 1000).toFixed(1) + 'k chars'; return (n / 1000000).toFixed(2) + 'M chars'; } function formatBytes(b) { if (b < 1024) return b + ' B'; if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB'; return (b / 1024 / 1024).toFixed(1) + ' MB'; } // ─── AI branding glyph ──────────────────────────────────────────────────── // Tiny "AI" branding glyph — a frosted-glass icon in /icons. Drop in next to // every label or button that's about the in-app AI features so the brand mark // reads consistently across the dashboard, note + guide AI panels, AI-edit // dialogs, and smart-extract checkboxes. Sized like an inline glyph so it // behaves like a one-character prefix. function AiGlyph({ size = 14, style }) { return ( ); } // ─── Nav icons ──────────────────────────────────────────────────────────── // SVG icon set used in the sidebar nav. Inlined so they pick up currentColor. const NAV_ICONS = { dashboard: , library: , calendar: , notes: , community: , search: , chevDown: , chevLeft: , }; // ─── Page chrome ────────────────────────────────────────────────────────── // Page renders Sidebar, DashboardDoodles, and doodleGroupForPath via bare // identifiers — those still live in app.jsx (Sidebar) or Wave 7's // dashboard.jsx (DashboardDoodles, doodleGroupForPath). They resolve via // window at render time because those files declare them with `function` // at top level (non-IIFE). If Wave 7 moves DashboardDoodles into an IIFE // without Object.assign-ing it, Page will start rendering without doodles // until that's fixed. function Topbar({ crumbs, actions, leadingActions }) { // Show only the last crumb as the lead, with parent crumbs as clickable links // separated by " / ". Matches the comp's simplified topbar. const items = crumbs || []; return (
{leadingActions && {leadingActions}} {items.map((c, i) => { const isLast = i === items.length - 1; const label = typeof c === 'object' ? c.label : c; const to = typeof c === 'object' ? c.to : null; return ( {i > 0 && /} {isLast || !to ? {label} : navigate(to)}>{label}} ); })}
{actions}
); } function Page({ children, crumbs, actions, leadingActions, hideChrome }) { if (hideChrome) { return
{children}
; } const path = useRoute(); return (
{children}
); } // ─── Calendar math ──────────────────────────────────────────────────────── function monthCells(y, m) { const first = new Date(y, m, 1); const startDay = first.getDay(); const out = []; for (let i = startDay - 1; i >= 0; i--) { const d = new Date(y, m, -i); out.push({ day: d.getDate(), month: d.getMonth(), date: dateISO(d) }); } const last = new Date(y, m + 1, 0).getDate(); for (let d = 1; d <= last; d++) { const dt = new Date(y, m, d); out.push({ day: d, month: m, date: dateISO(dt) }); } while (out.length % 7 !== 0) { const dt = new Date(out[out.length - 1].date + 'T00:00:00'); dt.setDate(dt.getDate() + 1); out.push({ day: dt.getDate(), month: dt.getMonth(), date: dateISO(dt) }); } return out; } function dateISO(d) { const y = d.getFullYear(), m = String(d.getMonth() + 1).padStart(2, '0'), day = String(d.getDate()).padStart(2, '0'); return `${y}-${m}-${day}`; } function monthOffset({ y, m }, n) { const d = new Date(y, m + n, 1); return { y: d.getFullYear(), m: d.getMonth() }; } // ─── Modal primitives ───────────────────────────────────────────────────── function ModalShell({ children, width = 420, onClose }) { return (
e.stopPropagation()} style={{ width, maxWidth: '95vw', maxHeight: '90vh', background: 'var(--page)', borderRadius: 'var(--r-lg)', border: '1px solid var(--hairline-bold)', boxShadow: '0 20px 60px -10px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.08)', padding: 22, display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden', }}> {children}
); } function ModalHead({ title, sub, onClose }) { return (

{title}

{sub &&
{sub}
}
); } // ─── Reusable confirm dialog ────────────────────────────────────────────── function ConfirmDialog({ title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', tone = 'default', onConfirm, onCancel }) { const [busy, setBusy] = React.useState(false); const submit = async () => { setBusy(true); try { await onConfirm(); } finally { setBusy(false); } }; return ( {message && (
{message}
)}
); } // ─── Exports ─────────────────────────────────────────────────────────────── Object.assign(window, { parseHash, navigate, useRoute, match, useSkeletonGate, relativeTime, formatChars, formatBytes, AiGlyph, NAV_ICONS, Topbar, Page, monthCells, dateISO, monthOffset, ModalShell, ModalHead, ConfirmDialog, }); })();