// Generic, data-driven CategoryPage. Renders any of the four categories from
// window.CATEGORY_PAGES (pages-data.jsx) using one shared tabular layout — the
// architecture page's system, generalized. Shared atoms (LockIcon, SRLogo,
// CategoryIcon, A_Footer) come from direction-a.jsx via window, so this file
// must load AFTER direction-a.jsx.
const CP_RULE = 'var(--rule)', CP_INK = 'var(--ink)', CP_INK2 = 'var(--ink-2)',
CP_INK3 = 'var(--ink-3)', CP_PAPER = 'var(--paper)', CP_PAPER2 = 'var(--paper-2)';
function statusColor(status) {
return (window.ACTIVE_STATUSES || []).indexOf(status) !== -1
? 'oklch(60% 0.14 70)' : CP_INK;
}
// Display only the bare 4-digit year a project was completed/done. Any
// qualifiers ('~', 'est.', 'concept', etc.) are stripped; rows with no year
// render as a single faint placeholder dash (their state shows in Status).
function yearOf(raw) {
const m = String(raw == null ? '' : raw).match(/\d{4}/);
return m ? m[0] : '';
}
// Shared year-cell renderer used by both the desktop matrix and the mobile card.
function YearCell({ raw, style }) {
const year = yearOf(raw);
if (!year)
return –;
return {year};
}
// Sortable-column support for the matrix table. Returns a comparable value for
// a row in a given column: years parse to a number (so '2024–25' sorts by
// 2024, and undated rows like 'ongoing'/'—' fall to the end ascending);
// link cells sort by their label; everything else compares as lowercased text.
function sortValue(col, row) {
if (col.kind === 'link') {
const v = row[col.key];
return ((v && v.label) || '').toLowerCase();
}
const raw = row[col.key];
if (col.kind === 'tnum') {
const m = String(raw == null ? '' : raw).match(/\d{4}/);
return m ? parseInt(m[0], 10) : Infinity;
}
return String(raw == null ? '' : raw).toLowerCase();
}
// Year-sort ranking with special handling for undated rows. A dated row ranks by
// its year. An undated row normally "sinks" to the very bottom of the list in
// EITHER sort direction (sink: true). The one exception: an undated project whose
// status is 'in progress' is current work, so it ranks just above the most
// recently completed project (maxYear + 0.5) instead of sinking.
function yearRank(col, row, maxYear) {
const m = String(row[col.key] == null ? '' : row[col.key]).match(/\d{4}/);
if (m) return { sink: false, val: parseInt(m[0], 10) };
if (String(row.status || '').toLowerCase() === 'in progress')
return { sink: false, val: maxYear + 0.5 };
return { sink: true, val: 0 };
}
// Tiny sort indicator in each column header. Faint ↕ when inactive (signals the
// column is sortable), solid ▲/▼ when it's the active sort key.
function SortCaret({ active, dir }) {
return (
{active ? (dir === 'desc' ? '▼' : '▲') : '↕'}
);
}
// Breadcrumb / nav bar shared by category + subcategory pages.
function CrumbBar({ trail, section, navigate }) {
const Logo = window.SRLogo;
const mobile = window.useIsMobile();
return (
{/* No public gate UI. The unlock lives only at the hidden access slug.
Once unlocked, a quiet indicator lets the owner re-lock this device. */}
{cfg.gate && unlocked && (
✓{cfg.gate.unlockedLabel}
{cfg.gate.unlockedSub}
)}
);
}
function CP_Cell({ col, row, open }) {
const v = row[col.key];
if (col.kind === 'tnum')
return ;
if (col.kind === 'title')
return (
);
}
function CP_Detail({ cfg, row, open }) {
const facts = cfg.facts(row).filter(([, val]) => val);
const imgs = cfg.images(row);
const mobile = window.useIsMobile();
const unlocked = window.usePhotoGate ? window.usePhotoGate() : true;
const gated = window.PhotoGate ? window.PhotoGate.isGated(row) : false;
const locked = gated && !unlocked;
// Only real stills/clips (and motion slots) show in the strip. A project with
// imagery still to come shows a ComingSoon panel in the image column instead
// of striped placeholders — so v1.0 reads as intentionally in-progress.
// While locked, the photo column is omitted entirely — no strip, no count, no
// placeholder — so a gated project is indistinguishable from one with no photos.
const realImgs = imgs.filter((f) => f.src || f.video || f.motion);
const showImages = !locked && realImgs.length > 0;
const showSoon = !locked && realImgs.length === 0 && imgs.length > 0;
const showRight = showImages || showSoon;
return (
Brief
{cfg.brief(row)}
{facts.map(([k, val]) => (
{k}{val}
))}
{row.related && (
)}
{showImages && (
Selected images · {realImgs.length}
{realImgs.map((f, i) => (
))}
)}
{showSoon && (
Imagery
{window.ComingSoon && }
)}
);
}
function CP_Row({ cfg, row, last, open, onToggle, rootRef }) {
const [h, setH] = React.useState(false);
const mobile = window.useIsMobile();
if (mobile) {
// Phone: the multi-column table can't fit, so each row becomes a stacked
// card — chevron + title + year on top, then the remaining columns as a
// compact wrapped meta line (reusing CP_Cell so status dots / links etc.
// render exactly as on desktop). Tap to expand the case-study detail.
const titleCol = cfg.columns.find((c) => c.kind === 'title');
const yearCol = cfg.columns.find((c) => c.kind === 'tnum');
const restCols = cfg.columns.filter((c) => c !== titleCol && c !== yearCol);
return (
);
}
// Index ⇄ gallery view switch for pages that opt in via cfg.gallery (architecture).
// Left: a live count of rows. Right: a segmented control matching the mono /
// sharp-cornered system vocabulary.
function CP_ViewToggle({ view, setView, count }) {
const mobile = window.useIsMobile();
const opts = [
{ id: 'index', glyph: '\u2630', label: 'index' },
{ id: 'gallery', glyph: '\u25A6', label: 'gallery' },
];
return (
);
}
window.CategoryPage = CategoryPage;
window.CP_statusColor = statusColor;
window.CrumbBar = CrumbBar;
// Exposed so SubcategoryPage can give the graphics index its own architecture-
// style index ⇄ gallery toggle, reusing the exact matrix row, view toggle,
// sort caret, and sort comparator without duplicating their logic.
window.CP_Row = CP_Row;
window.CP_ViewToggle = CP_ViewToggle;
window.CP_SortCaret = SortCaret;
window.CP_sortValue = sortValue;