// Brutalist · Component Library
// --------------------------------------------------------------------
// Composable primitives for scenes & pages. Consumes CSS variables
// declared in brutalist/tokens.css — change tokens there, not here.
//
// Catalogue:
// Layout BRoot · BSection · BSectionHeader · BHeader · BFooter
// Type BDisplay · BHeading · BCaption · BTag · BItalic
// Controls BButton · BLink
// Modules BStat · BImagePlate · BQuote · BManifestoRow ·
// BMarqueeRow · BHazardBand · BPlacard · BBadge ·
// BListRow · BTicker · BRegMarks
//
// Conventions:
// • Components ship with sensible defaults; override via `style` /
// inline props.
// • Sizes are token names: 'xxl' | 'xl' | 'l' | 'm' | 's'.
// • Tone props use 'fg' | 'accent' | 'invert' | 'panel'.
// --------------------------------------------------------------------
const _displaySize = {
xxl: 'var(--b-t-display-xxl)',
xl: 'var(--b-t-display-xl)',
l: 'var(--b-t-display-l)',
m: 'var(--b-t-display-m)',
s: 'var(--b-t-display-s)',
};
const _headingSize = {
l: 'var(--b-t-heading-l)',
m: 'var(--b-t-heading-m)',
s: 'var(--b-t-heading-s)',
};
// ─── BRoot ──────────────────────────────────────────────────────────
// Wrap every page in this. Sets bg/fg/font defaults and box-sizing.
function BRoot({ children, style }) {
return (
{children}
);
}
// ─── BSection — full-width band with hairline above/below ─────────
function BSection({ children, divide = true, pad = '40px 56px', style }) {
return (
);
}
// ─── BSectionHeader — numbered title row (used in long pages) ─────
function BSectionHeader({ n, title, kicker, style }) {
return (
§ {n}
{title}
{kicker && {kicker}}
);
}
// ─── BHeader — page nav bar ────────────────────────────────────────
function BHeader({ brand = 'RUBENS', tagline = 'Strength Coach', nav = ['Training', 'Athletes', 'Programs', 'Journal'], cta = 'Book a session →' }) {
return (
{brand} / {tagline}
{cta && {cta}}
);
}
// ─── BFooter — bottom ticker strip ─────────────────────────────────
function BFooter({ left, middle, right }) {
return (
);
}
// ─── Type ─────────────────────────────────────────────────────────
function BDisplay({ size = 'l', tone = 'fg', italic, as: Tag = 'h1', children, style }) {
const color = tone === 'accent' ? 'var(--b-accent)' : tone === 'dim' ? 'var(--b-dim)' : 'inherit';
return (
{children}
);
}
function BHeading({ size = 'm', children, style }) {
return (
{children}
);
}
function BCaption({ tone = 'dim', children, style }) {
return (
{children}
);
}
function BTag({ tone = 'accent', children, style }) {
const isAccent = tone === 'accent';
return (
{children}
);
}
function BItalic({ size = 24, children, style }) {
return (
{children}
);
}
// ─── Controls ─────────────────────────────────────────────────────
function BButton({ variant = 'primary', children, style, as: Tag = 'a' }) {
const v = {
primary: { background: 'var(--b-accent)', color: 'var(--b-bg)', border: 0 },
outline: { background: 'transparent', color: 'var(--b-fg)', border: '1px solid var(--b-rule)' },
invert: { background: 'var(--b-fg)', color: 'var(--b-bg)', border: 0 },
}[variant];
return (
{children}
);
}
function BLink({ children, accent, style }) {
return (
{children}
);
}
// ─── Modules ──────────────────────────────────────────────────────
function BStat({ number, label, size = 'l', style }) {
const fs = size === 'xl' ? 56 : size === 'l' ? 36 : 28;
return (
);
}
// Stat strip — N tiles divided by hairlines. Pass [{number, label}, ...]
function BStatStrip({ stats, style }) {
return (
{stats.map((s, i) => (
))}
{index && (
{index}
)}
[ {caption} ]
“{children}”
{attribution && (
— {attribution}
)}
);
}
function BManifestoRow({ n, rule, note, divide = true }) {
return (
{String(n).padStart(2, '0')}.
{rule}
{note && {note}}
);
}
function BMarqueeRow({ accent, italic, big, children }) {
return (
{children}
);
}
function BHazardBand({ height = 32, style }) {
return ;
}
// Placard — small flat card with number, headline, tone variant
function BPlacard({ n, label = 'Placard', headline, tone = 'panel' }) {
const t = {
panel: { bg: 'var(--b-panel)', fg: 'var(--b-fg)', border: 'var(--b-hair)', dim: 'var(--b-dim)' },
invert: { bg: 'var(--b-fg)', fg: 'var(--b-bg)', border: 'none', dim: 'var(--b-bg)' },
accent: { bg: 'var(--b-accent)', fg: 'var(--b-bg)', border: 'none', dim: 'var(--b-bg)' },
}[tone];
return (
);
}
// Badge — corner stamp / sticker
function BBadge({ children, rotate = 4, tone = 'accent', style }) {
const t = tone === 'accent'
? { background: 'var(--b-accent)', color: 'var(--b-bg)' }
: { background: 'var(--b-fg)', color: 'var(--b-bg)' };
return (
{children}
);
}
// List row — start-list / roster pattern. Cols by ratio array.
function BListRow({ cells, accent, divide = true, cols = ['90px', '1.4fr', '1fr', '0.8fr'] }) {
return (
{cells.map((cell, i) => {
if (i === 0) return {cell};
if (i === 1) return {cell};
return {cell};
})}
);
}
// Ticker — three-up bottom strip (alias for BFooter, semantically different)
function BTicker(props) { return ; }
// Registration marks — corner brackets that frame a hero/poster
function BRegMarks({ inset = 24, color = 'var(--b-accent)' }) {
const arm = 18;
const w = '2px';
const s = (extra) => ({
position: 'absolute', width: arm, height: arm, ...extra,
});
return (
<>
);
}
Object.assign(window, {
BRoot, BSection, BSectionHeader, BHeader, BFooter, BTicker,
BDisplay, BHeading, BCaption, BTag, BItalic,
BButton, BLink,
BStat, BStatStrip, BImagePlate, BQuote, BManifestoRow, BMarqueeRow,
BHazardBand, BPlacard, BBadge, BListRow, BRegMarks,
});