/* shell.jsx — shared chrome for the live 咔嗒Lab site.
Exports: KadaPage, KadaNav, KadaFooter, KadaTweaks, Backdrop, Reveal,
Avatar, useKadaTheme, plus small icons.
Requires: components.jsx (KSITE, Logo, ThemeToggle, Arrow), tweaks-panel.jsx */
const SOFT_MAP_S = { '柔和': 0.62, '适中': 1.0, '立体': 1.5 };
const ACCENTS_S = ['#2f6df0', '#1f9cf0', '#0fb5c4', '#6366f1'];
/* ---- icons ---- */
const IcSearch = (p) => ;
const IcHeart = (p) => ;
const IcChat = (p) => ;
const IcPlay = (p) => ;
const IcStar = (p) => ;
const IcUp = (p) => ;
const IcMenu = (p) => ;
const IcEye = (p) => ;
Object.assign(window, { IcSearch, IcHeart, IcChat, IcPlay, IcStar, IcUp, IcMenu, IcEye });
/* ---- theme ---- */
function useKadaTheme() {
const read = () => { try { return JSON.parse(localStorage.getItem('kada.theme') || 'null'); } catch { return null; } };
const init = Object.assign({ dark: false, accent: '#2f6df0', soft: '适中', intro: '关键词高亮', titleAnim: '拼合' }, read() || {});
const [t, setTweak] = useTweaks(init);
const soft = SOFT_MAP_S[t.soft] ?? 1;
React.useEffect(() => {
const r = document.documentElement;
r.setAttribute('data-theme', t.dark ? 'dark' : 'light');
r.style.setProperty('--accent', t.accent);
r.style.setProperty('--soft', String(soft));
document.body.classList.add('ka-body');
try { localStorage.setItem('kada.theme', JSON.stringify({ dark: t.dark, accent: t.accent, soft: t.soft, intro: t.intro, titleAnim: t.titleAnim })); } catch {}
}, [t.dark, t.accent, soft, t.intro, t.titleAnim]);
return [t, setTweak];
}
/* theme context so any page can read tweak values */
const KadaCtx = React.createContext({ t: {}, setTweak: () => {} });
function useKada() { return React.useContext(KadaCtx); }
/* ---- nav ---- */
function AccountMenu() {
const db = useKadaDB();
const me = db.currentUser();
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
if (!open) return;
const close = () => setOpen(false);
window.addEventListener('click', close);
return () => window.removeEventListener('click', close);
}, [open]);
if (!me) {
return 加入社区;
}
return (
e.stopPropagation()}>
{open && (
我的社区
发布帖子
)}
{open && (
)}
);
}
function KadaFooter() {
return (
);
}
function KadaTweaks({ t, setTweak }) {
return (
setTweak('dark', v)} />
setTweak('accent', v)} />
setTweak('soft', v)} />
);
}
/* ---- animated backdrop (orbs + dot grid + particles + parallax) ---- */
function Backdrop({ particles = 6 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
const onMove = (e) => {
const w = window.innerWidth, h = window.innerHeight;
tx = (e.clientX / w - 0.5) * 2; ty = (e.clientY / h - 0.5) * 2;
if (!raf) raf = requestAnimationFrame(tick);
};
const tick = () => {
cx += (tx - cx) * 0.06; cy += (ty - cy) * 0.06;
el.style.setProperty('--mx', cx.toFixed(3));
el.style.setProperty('--my', cy.toFixed(3));
raf = (Math.abs(tx - cx) > 0.002 || Math.abs(ty - cy) > 0.002) ? requestAnimationFrame(tick) : 0;
};
window.addEventListener('pointermove', onMove, { passive: true });
return () => { window.removeEventListener('pointermove', onMove); cancelAnimationFrame(raf); };
}, []);
const pts = Array.from({ length: particles }, (_, i) => {
const left = 8 + (i * 83) % 84;
const dur = 11 + (i % 4) * 3.5;
const delay = -(i * 2.3);
const size = 3 + (i % 3) * 1.5;
return ;
});
return (
{pts}
);
}
/* ---- reveal on scroll ---- */
function Reveal({ children, delay = 0, className = '', tag = 'div', style = {} }) {
const ref = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
io.observe(el); return () => io.disconnect();
}, []);
const T = tag;
return {children};
}
function Avatar({ name, hue = 222, size = 44, className = 'ava-c' }) {
const ch = (name || '?').trim().charAt(0).toUpperCase();
return {ch};
}
/* ---- page wrapper ---- */
function KadaPage({ active, children }) {
const [t, setTweak] = useKadaTheme();
const kids = React.Children.map(children, (ch) => React.isValidElement(ch) ? React.cloneElement(ch, { kt: t }) : ch);
return (
setTweak('dark', !t.dark)} />
{kids}
);
}
Object.assign(window, { useKadaTheme, useKada, KadaCtx, KadaNav, KadaFooter, KadaTweaks, Backdrop, Reveal, Avatar, KadaPage });