/* shell.jsx — shared chrome for the live 咔嗒Lab site.
Exports: KataPage, KataNav, KataFooter, KataTweaks, Backdrop, Reveal,
Avatar, useKataTheme, 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 useKataTheme() {
const read = () => { try { return JSON.parse(localStorage.getItem('kata.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('kata.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 KataCtx = React.createContext({ t: {}, setTweak: () => {} });
function useKata() { return React.useContext(KataCtx); }
/* ---- nav ---- */
function AccountMenu() {
const db = useKataDB();
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 KataFooter() {
return (
);
}
function KataTweaks({ 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}
);
}
/* ---- sitewide tech constellation network (all pages)
Match Hero v16: sparse floating dots + soft ambient links,
with stronger random-looking connections near the cursor. ---- */
function TechNetBG() {
const wrapRef = React.useRef(null);
const cvRef = React.useRef(null);
React.useEffect(() => {
const wrap = wrapRef.current, cv = cvRef.current;
if (!wrap || !cv) return;
const ctx = cv.getContext('2d');
let W = 0, H = 0, dpr = 1, pts = [], raf = 0, running = true;
let colors = ['#2f6df0', '#8b5cf6', '#0ea5e9'];
const mouse = { x: -9999, y: -9999 };
/* Hero-like sparse field (NOT dense lattice) */
const N_BASE = 78, LINK = 118, MLINK = 210;
function readColors() {
const ACC = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#2f6df0';
const dark = document.documentElement.getAttribute('data-theme') === 'dark';
colors = dark
? [ACC, '#a78bfa', '#38bdf8']
: [ACC, '#8b5cf6', '#0ea5e9'];
return colors;
}
function resize() {
dpr = Math.min(window.devicePixelRatio || 1, 2);
W = window.innerWidth; H = window.innerHeight;
cv.width = Math.max(1, Math.floor(W * dpr));
cv.height = Math.max(1, Math.floor(H * dpr));
cv.style.width = W + 'px'; cv.style.height = H + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const palette = readColors();
/* keep density similar across viewports, but never dense */
const dens = Math.min(W / 1280, 1.15) * Math.min(H / 900, 1.05);
const n = Math.max(48, Math.round(N_BASE * dens));
pts = Array.from({ length: n }, () => ({
x: Math.random() * W, y: Math.random() * H,
vx: (Math.random() - .5) * .26, vy: (Math.random() - .5) * .26,
r: 1.15 + Math.random() * 1.55,
c: palette[Math.random() * 3 | 0],
tw: Math.random() * Math.PI * 2
}));
}
resize();
const onResize = () => resize();
window.addEventListener('resize', onResize);
const mo = new MutationObserver(() => {
const palette = readColors();
pts.forEach((p) => { p.c = palette[Math.random() * 3 | 0]; });
});
mo.observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'data-theme'] });
const onMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; };
const onLeave = () => { mouse.x = mouse.y = -9999; };
window.addEventListener('pointermove', onMove, { passive: true });
document.addEventListener('mouseleave', onLeave);
const darkNow = () => document.documentElement.getAttribute('data-theme') === 'dark';
function drawStatic() {
ctx.clearRect(0, 0, W, H);
/* very soft ambient dots only; links appear with cursor motion */
for (const p of pts) {
ctx.globalAlpha = darkNow() ? .28 : .18;
ctx.fillStyle = p.c;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill();
}
ctx.globalAlpha = 1;
}
function frame(t) {
if (!running) return;
ctx.clearRect(0, 0, W, H);
const isDark = darkNow();
/* ambient baseline is intentionally faint; cursor creates random-looking links */
const baseLink = isDark ? .16 : .11;
const nodeA0 = isDark ? .30 : .22;
const nodeA1 = isDark ? .22 : .18;
for (let i = 0; i < pts.length; i++) {
const p = pts[i];
p.x += p.vx; p.y += p.vy;
if (p.x < -10) p.x = W + 10; if (p.x > W + 10) p.x = -10;
if (p.y < -10) p.y = H + 10; if (p.y > H + 10) p.y = -10;
/* soft twinkle dots */
const a = nodeA0 + nodeA1 * (0.5 + 0.5 * Math.sin(t / 900 + p.tw));
ctx.globalAlpha = a * .22; ctx.fillStyle = p.c;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r * 3.1, 0, 7); ctx.fill();
ctx.globalAlpha = a; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill();
for (let k = i + 1; k < pts.length; k++) {
const q = pts[k];
const d = Math.hypot(p.x - q.x, p.y - q.y);
if (d < LINK) {
const mx = (p.x + q.x) / 2, my = (p.y + q.y) / 2;
const near = Math.hypot(mx - mouse.x, my - mouse.y);
/* only a soft ambient web + stronger near-cursor links */
const boost = near < MLINK + LINK ? (1 - near / (MLINK + LINK)) * .52 : 0;
const alpha = (1 - d / LINK) * (baseLink + boost);
if (alpha < 0.02) continue;
ctx.globalAlpha = alpha;
ctx.strokeStyle = p.c; ctx.lineWidth = 1.0 + boost * .55;
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke();
}
}
/* particle ↔ cursor spokes (the "random lines follow cursor" feel) */
const dm = Math.hypot(p.x - mouse.x, p.y - mouse.y);
if (dm < MLINK) {
ctx.globalAlpha = (1 - dm / MLINK) * (isDark ? .58 : .48);
ctx.strokeStyle = p.c; ctx.lineWidth = 1.15;
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
}
}
ctx.globalAlpha = 1;
raf = requestAnimationFrame(frame);
}
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
drawStatic();
} else {
frame(performance.now());
}
return () => {
running = false;
cancelAnimationFrame(raf);
mo.disconnect();
window.removeEventListener('resize', onResize);
window.removeEventListener('pointermove', onMove);
document.removeEventListener('mouseleave', onLeave);
};
}, []);
return (
);
}
/* ---- sitewide aurora atmosphere blobs ---- */
function AuroraBG() {
return (
);
}
/* ---- 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 KataPage({ active, children, atmos = true }) {
const [t, setTweak] = useKataTheme();
const kids = React.Children.map(children, (ch) => React.isValidElement(ch) ? React.cloneElement(ch, { kt: t }) : ch);
return (
{atmos &&
}
{atmos &&
}
setTweak('dark', !t.dark)} />
{kids}