; } // ─── SECTION HEAD ─────────────────────────────────────────────── function SectionHead({ numeral, eyebrow, title, sub, action }) { return (

{numeral && }

{eyebrow && {eyebrow}}

{title}

{sub &&

{sub}

}

{action &&

{action}

}

); } // ─── PAGE TRANSITION WRAPPER ──────────────────────────────────── // Uses a JS-driven opacity transition (not CSS keyframes) so it works // even when the host iframe throttles animation clocks. function PageFade({ routeKey, children }) { // Just a stable key wrapper. Subtle hover transitions live on cards; // page transitions kept off so screenshots and direct edits stay readable. return

{children}

; } // ─── NAV LINK (hash router) ───────────────────────────────────── function navTo(hash) { if (window.location.hash === hash) return; window.location.hash = hash; } function NavLink({ to, children, style, onClick }) { return ( {onClick && onClick(e);}} style={{ textDecoration: 'none', color: 'inherit', ...style }}> {children} ); } // ─── TOP BAR ──────────────────────────────────────────────────── function TopBar({ route, mode, onModeToggle, accent, onMobileMenu }) { const wordmarkVariant = mode === 'light' ? accent === 'moss' ? 'moss' : 'indigo' : 'reversed'; return (

{/* desktop nav */}

); } // ─── MOBILE MENU ──────────────────────────────────────────────── function MobileMenu({ open, onClose, route }) { if (!open) return null; return (

e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(88vw, 360px)', background: 'var(--bg-surface)', borderLeft: '1px solid var(--line-medium)', padding: '24px 24px 40px', display: 'flex', flexDirection: 'column', gap: 4, animation: 'kt-slide-in 320ms var(--ease-out)' }}>

{KT.nav.map((item) => { const active = route.id === item.id; return ( {item.label} {item.numeral} ); })}

); } // ─── FOOTER ───────────────────────────────────────────────────── // ─── ROMAN NUMERAL HELPER ──────────────────────────────────────── function toRoman(n) { const vals = [1000,900,500,400,100,90,50,40,10,9,5,4,1]; const syms = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I']; let result = ''; for (let i = 0; i < vals.length; i++) { while (n >= vals[i]) { result += syms[i]; n -= vals[i]; } } return result; } const KT_UX_START_YEAR = 2005; // MMV — update this if the start year ever changes function Footer({ mode, accent }) { const currentYear = new Date().getFullYear(); const yearsExp = currentYear - KT_UX_START_YEAR; const romanStart = toRoman(KT_UX_START_YEAR); // MMV const romanCurrent = toRoman(currentYear); // MMXXVI, MMXXVII, … const romanYears = toRoman(yearsExp); // XXI, XXII, … return ( ); } // ─── SUIT GLYPHS ──────────────────────────────────────────────── // Tiny tarot-suit marks for accenting category tags. // cups · swords · pentacles · wands function SuitGlyph({ suit = 'pentacles', size = 11, color = 'currentColor', style }) { const stroke = 1.6; const paths = { // Cup: chalice — small bowl on a stem with a base cups: , // Sword: vertical blade with crossguard swords: , // Pentacle: five-pointed star inside a circle pentacles: , // Wand: budding rod — vertical with two leaf strokes at the top wands: }; return ( ); } // ─── CELESTIAL GLYPHS ─────────────────────────────────────────── // A small ornamental family used as section marks, hover indicators, // and inline flourishes. All share a 24px box and currentColor stroke. function StarGlyph({ size = 14, color = 'currentColor', style }) { return ( ); } function EyeGlyph({ size = 16, color = 'currentColor', style }) { return ( ); } function KeyGlyph({ size = 16, color = 'currentColor', style }) { return ( ); } function HandGlyph({ size = 16, color = 'currentColor', style }) { // open palm with an eye in the center — a hamsa-style mark return ( ); } function SaturnGlyph({ size = 16, color = 'currentColor', style }) { // Saturn drawn in three layers using SVG masks: // 1. Ring behind planet — upper half only, hidden where it overlaps the planet disk // 2. Planet circle // 3. Ring in front — lower half only, overlaid on top // // mask: white = show, black = hide return ( ); } function SparkGlyph({ size = 14, color = 'currentColor', style }) { // the ✦ shape rendered cleanly as SVG, for inline use return ( ); } // ─── SMALL GLYPHS ────────────────────────────────────────────── function SunGlyph({ size = 16 }) { return ( ); } function MoonGlyph({ size = 16 }) { return ( ); } // ─── MOON PHASE (for journal entries) ─────────────────────────── function PhaseGlyph({ phase = 'waning-gibbous', size = 16, color = 'var(--moss)' }) { const r = size / 2; let face; switch (phase) { case 'new':face = ;break; case 'full':face = ;break; case 'first-quarter':face = <>;break; case 'last-quarter':face = <>;break; case 'waxing-gibbous':face = <>;break; case 'waning-gibbous':face = <>;break; default:face = ; } return ; } // ─── LIGHTBOX ──────────────────────────────────────────────────── // Full-screen image viewer with keyboard nav, zoom, and optional device frames. var ZOOM_STEPS = [1, 1.5, 2, 3]; function Lightbox({ images, startIndex = 0, onClose }) { const [idx, setIdx] = React.useState(startIndex); const [zoomIdx, setZoomIdx] = React.useState(0); const img = images[idx]; const total = images.length; const zoom = ZOOM_STEPS[zoomIdx]; // Detect mobile viewport — no device frames on mobile const isMobile = window.innerWidth < 768; // Reset zoom when image changes React.useEffect(() => { setZoomIdx(0); }, [idx]); function cycleZoom(e) { e.stopPropagation(); setZoomIdx(i => (i + 1) % ZOOM_STEPS.length); } // keyboard nav React.useEffect(() => { function onKey(e) { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft') setIdx(i => Math.max(0, i - 1)); if (e.key === 'ArrowRight') setIdx(i => Math.min(total - 1, i + 1)); } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [total, onClose]); // lock scroll on body (lightbox itself scrolls) React.useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []); // Touch swipe (only when not zoomed) const touchStartX = React.useRef(null); function onTouchStart(e) { touchStartX.current = e.touches[0].clientX; } function onTouchEnd(e) { if (touchStartX.current === null || zoom !== 1) return; const dx = e.changedTouches[0].clientX - touchStartX.current; if (Math.abs(dx) > 40) { if (dx < 0) setIdx(i => Math.min(total - 1, i + 1)); else setIdx(i => Math.max(0, i - 1)); } touchStartX.current = null; } // Device frame wrapper — suppressed entirely on mobile viewports function wrapDevice(imgEl, deviceType) { if (!isMobile && deviceType === 'desktop') { return (

{imgEl}

); } if (!isMobile && deviceType === 'phone') { return (

{imgEl}

); } return imgEl; } const isDevice = !isMobile && (img.deviceType === 'phone' || img.deviceType === 'desktop'); const imgEl = isDevice ? ( {img.alt

) : (

); return ReactDOM.createPortal( , document.body ); } // ─── IMAGE GALLERY ──────────────────────────────────────────────── // Thumbnail grid. Clicking opens the Lightbox. function ImageGallery({ images, label }) { const [lightboxIdx, setLightboxIdx] = React.useState(null); if (!images || images.length === 0) return null; return (

{label && ( {label} )}

{images.map((img, i) => ( ))}

{lightboxIdx !== null && ( setLightboxIdx(null)} /> )}

); } // ─── SPARKLE EFFECT ────────────────────────────────────────────── var SPARKLE_COLORS = ['#96A560', '#B8A86E', '#F0E4C0', '#96A560', '#C8B878']; function useSparkles() { const [sparkles, setSparkles] = React.useState([]); const lastFire = React.useRef(0); function fire(e) { const now = Date.now(); if (now - lastFire.current < 110) return; lastFire.current = now; const rect = e.currentTarget.getBoundingClientRect(); const cx = e.clientX - rect.left; const cy = e.clientY - rect.top; const batch = Array.from({ length: 3 }, () => ({ id: Math.random().toString(36).slice(2), x: cx + (Math.random() - 0.5) * 52, y: cy + (Math.random() - 0.5) * 52, size: Math.random() * 9 + 7, color: SPARKLE_COLORS[Math.floor(Math.random() * SPARKLE_COLORS.length)], })); setSparkles(s => [...s, ...batch]); setTimeout(() => { const ids = new Set(batch.map(b => b.id)); setSparkles(s => s.filter(sp => !ids.has(sp.id))); }, 720); } function clear() { setSparkles([]); } return { sparkles, fire, clear }; } function SparkleLayer({ sparkles }) { return sparkles.map(sp => (

)); } // expose Object.assign(window, { Grain, Wordmark, MarkIcon, Rune, AccentDot, Btn, Eyebrow, Tag, Rule, SectionHead, PageFade, NavLink, navTo, TopBar, MobileMenu, Footer, SunGlyph, MoonGlyph, PhaseGlyph, SuitGlyph, StarGlyph, EyeGlyph, KeyGlyph, HandGlyph, SparkGlyph, SaturnGlyph, Lightbox, ImageGallery, useSparkles, SparkleLayer, });