▸
$ stat --summary
live
{stats.map((s, i) => (
{String(i + 1).padStart(2, '0')} · {s[0]}
{s[2] || '↑'}
{s[1]}
{s[3] && {s[3]}}
{Array.from({ length: 16 }).map((_, j) => {
const seed = (i * 7 + j * 3) % 11;
const h = 4 + seed;
return
11 ? 'var(--brass)' : 'var(--rule-strong)' }} />;
})}
))}
);
// Tag pill
const Tag = ({ children, brass = false }) => (
{children}
);
const LabBadge = () =>
◉ lab;
// Section header with filepath + count
const SectionHead = ({ cmd, count, file }) => (
▸
{cmd}
{count != null && [{String(count).padStart(2, '0')}]}
{file && {file}}
);
// Site footer
const SiteFoot = () => (
);
// Code block with terminal-style chrome + copy button
const CodeBlock = ({ filename, language, code, style }) => {
const [copied, setCopied] = React.useState(false);
const codeStyle = style || 'traditional';
const highlight = (txt) => {
// naive python/shell highlight — good enough for demo
return txt
.replace(/(#[^\n]*)/g, '
$1')
.replace(/("[^"]*"|'[^']*')/g, '
$1')
.replace(/\b(from|import|def|return|class|if|else|for|in|await|async|with|as)\b/g, '
$1')
.replace(/\b(True|False|None)\b/g, '
$1');
};
const copy = () => { navigator.clipboard?.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1400); };
if (codeStyle === 'terminal') {
return (
{filename}
);
}
if (codeStyle === 'minimal') {
return (
);
}
// traditional
return (
{language}
{filename}
);
};
// Standard page shell — every page routes content through this.
// Top bar + nav are full-bleed; everything else is constrained to SITE_MAX.
const SITE_MAX = 1760;
const SITE_PAD_X = 48;
const PageShell = ({ topPath, topCurrent, nav, onNav, children, fullBleedChildren }) => (
{fullBleedChildren}
{children}
);
Object.assign(window, { BWM, Divider, TopBar, SiteNav, StatStrip, Tag, LabBadge, SectionHead, SiteFoot, CodeBlock, PageShell, SITE_MAX, SITE_PAD_X });