);
}
// ───────────────────────────────────────────────────────────── PageHeader
// Canonical screen header used across every top-level page (Catalog, Directory,
// Issues, Audience, Settings, etc). Brutalist treatment: mono eyebrow segs,
// big display title with one highlight word boxed in accent yellow + period,
// optional sub paragraph, optional right-side actions or meta line.
//
// Filter+ New}/>
//
// `eyebrow` may be a string, a node, or an array of segments (joined with " · ").
// `highlight` is the substring inside `title` to wrap in the yellow box + period.
// If `highlight` is omitted, the title renders as plain display type.
// `meta` (right side, alt to actions) is for date-range / status text.
function PageHeader({ eyebrow, title, highlight, sub, actions, meta, children }) {
// Eyebrow rendering — array → join with " · " and keep each segment unbreakable.
const ribbon = Array.isArray(eyebrow)
? eyebrow.map((s, i) => (
{i > 0 && ' · '}
{s}
))
: eyebrow;
// Title rendering — plain display type. `highlight` prop ignored.
const titleNode = (typeof title === 'string' && highlight) ? title + '.' : title;
return (