// Theme helpers, tokens, Tweaks panel, global state
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"bgTone": "warm-dark",
"accent": "orange",
"density": "roomy",
"heroVariant": "banner",
"typography": "editorial"
}/*EDITMODE-END*/;
const ACCENT_MAP = {
orange: { hue: 32, label: "Warm orange" },
amber: { hue: 55, label: "Amber" },
green: { hue: 145, label: "Phosphor green" },
cool: { hue: 220, label: "Cool blue" },
};
const BG_MAP = {
"pure-black": {
bg: "#000000",
panel: "#0a0a0a",
panel2: "#141414",
border: "rgba(255,255,255,0.08)",
borderStrong: "rgba(255,255,255,0.16)",
text: "#f4f1ec",
textDim: "rgba(244,241,236,0.62)",
textMute: "rgba(244,241,236,0.38)",
grid: "rgba(255,255,255,0.035)",
scheme: "dark",
},
"warm-dark": {
bg: "#12100e",
panel: "#1a1713",
panel2: "#211d17",
border: "rgba(244,216,180,0.10)",
borderStrong: "rgba(244,216,180,0.22)",
text: "#f4ede1",
textDim: "rgba(244,237,225,0.64)",
textMute: "rgba(244,237,225,0.40)",
grid: "rgba(244,216,180,0.04)",
scheme: "dark",
},
"off-white": {
bg: "#f4efe6",
panel: "#ede6d8",
panel2: "#e2dac8",
border: "rgba(40,32,20,0.14)",
borderStrong: "rgba(40,32,20,0.26)",
text: "#1a1510",
textDim: "rgba(26,21,16,0.66)",
textMute: "rgba(26,21,16,0.42)",
grid: "rgba(40,32,20,0.05)",
scheme: "light",
},
};
const DENSITY_MAP = {
packed: { section: 64, gap: 16, pad: 20, hero: 72 },
roomy: { section: 112, gap: 24, pad: 28, hero: 120 },
};
const TypeContext = createContext(null);
const ThemeContext = createContext(null);
function buildTheme(state) {
const bg = BG_MAP[state.bgTone] || BG_MAP["warm-dark"];
const ac = ACCENT_MAP[state.accent] || ACCENT_MAP.orange;
const accent = `oklch(0.74 0.16 ${ac.hue})`;
const accentSoft = `oklch(0.74 0.16 ${ac.hue} / 0.18)`;
const accentHair = `oklch(0.74 0.16 ${ac.hue} / 0.35)`;
const accentDeep = `oklch(0.52 0.14 ${ac.hue})`;
const accentGlow = `oklch(0.78 0.18 ${ac.hue} / 0.55)`;
const density = DENSITY_MAP[state.density] || DENSITY_MAP.roomy;
return { ...bg, accent, accentSoft, accentHair, accentDeep, accentGlow, hue: ac.hue, density, typography: state.typography, heroVariant: state.heroVariant };
}
function useTweakState() {
const [state, setState] = useState(() => {
try {
const saved = localStorage.getItem("evalyn-tweaks");
if (saved) return { ...TWEAK_DEFAULTS, ...JSON.parse(saved) };
} catch {}
return TWEAK_DEFAULTS;
});
useEffect(() => {
try { localStorage.setItem("evalyn-tweaks", JSON.stringify(state)); } catch {}
}, [state]);
const update = useCallback((patch) => {
setState(prev => {
const next = { ...prev, ...patch };
try {
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
} catch {}
return next;
});
}, []);
return [state, update];
}
function useEditModeHost(onActivate, onDeactivate) {
useEffect(() => {
const handler = (e) => {
if (!e.data || typeof e.data !== 'object') return;
if (e.data.type === '__activate_edit_mode') onActivate();
if (e.data.type === '__deactivate_edit_mode') onDeactivate();
};
window.addEventListener('message', handler);
try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
return () => window.removeEventListener('message', handler);
}, [onActivate, onDeactivate]);
}
// Intersection observer hook for scroll reveals
function useReveal(options = {}) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setVisible(true); io.disconnect(); }
}, { threshold: 0.15, ...options });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return [ref, visible];
}
// Tiny icons rendered as characters/svg
const Icon = {
arrow: (p = {}) => (
),
dot: (p = {}) => ,
check: (p = {}) => (
),
x: (p = {}) => (
),
github: (p = {}) => (
),
};
// Copy-to-clipboard helper
function useCopy() {
const [copied, setCopied] = useState(false);
const copy = useCallback((text) => {
try {
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 1400);
} catch {}
}, []);
return [copied, copy];
}
Object.assign(window, {
TWEAK_DEFAULTS, ACCENT_MAP, BG_MAP, DENSITY_MAP,
TypeContext, ThemeContext,
buildTheme, useTweakState, useEditModeHost, useReveal, useCopy,
Icon,
});