@@ -145,10 +184,16 @@ function OrgPanel({ org, manifest, macro }: { org: string; manifest: Manifest; m
{/* A section that could not load leaves a named gap rather than blanking
the tab — the rest of the page is still worth reading. */}
{unavailable.length > 0 && (
-
- Could not load {unavailable.length === 1 ? 'this section' : 'these sections'}:{' '}
- {unavailable.join(', ')}. Everything else on this tab is unaffected — reload to try again.
-
+
+
+
+ Could not load {unavailable.length === 1 ? 'this section' : 'these sections'}:{' '}
+ {unavailable.join(', ')}.
+
+
+ Everything else on this tab is unaffected — reload to try again.
+
+
)}
{settled ? : }
@@ -158,70 +203,44 @@ function OrgPanel({ org, manifest, macro }: { org: string; manifest: Manifest; m
/** Human-readable fatal error: retry button up front, raw cause tucked away. */
function FatalError({ message, onRetry }: { message: string; onRetry: () => void }) {
return (
-
-
- Failed to load the dashboard data. This is usually temporary — try again in a moment.
-
-
-
- Error details
-
{message}
-
-
+
+
+ Failed to load the dashboard data.
+
+
This is usually temporary — try again in a moment.
+
+
+
+
+
+
+
{message}
+
+
+
+
);
}
-/** Everything that depends on a loaded manifest — tabs, org filter, panels, footer. */
+/** The active tab, for the org selected in the header. */
function Dashboard({
manifest,
- macro,
- setMacro,
- org,
- setOrg,
+ nav,
+ onToc,
}: {
manifest: Manifest;
- macro: string;
- setMacro: (value: string) => void;
- org: string;
- setOrg: (value: string) => void;
+ nav: NavModel;
+ onToc: (entries: TocEntry[]) => void;
}) {
- const orgs = Object.keys(manifest.orgs);
- const derived = [
- ...new Set(
- Object.values(manifest.orgs).flatMap((entry) => [
- ...(entry.sections ?? []).map((section) => section.macro),
- ...(entry.chart_sections ?? []).map((section) => section.macro),
- ...(entry.views ?? []).map((view) => view.macro),
- ]),
- ),
- ];
- // The manifest's family order wins where it knows the macro; anything it
- // doesn't list (older manifest, ad-hoc macro) keeps its derived position.
- const declared = (manifest.macro_order ?? []).filter((name) => derived.includes(name));
- const macros = [...declared, ...derived.filter((name) => !declared.includes(name))];
- const activeMacro = macros.includes(macro) ? macro : macros[0];
- // Umbrella tabs: a macro with a parent renders as a sub-tab of that parent.
- // The top bar shows one entry per umbrella (in content order); a second tab
- // row appears for the active umbrella's members. The hash keeps storing the
- // actual macro, so old links keep working.
- const parents = manifest.macro_parents ?? {};
- const topOf = (name: string) => parents[name] ?? name;
- const topTabs = [...new Set(macros.map(topOf))];
- const activeTop = topOf(activeMacro);
- const subTabs = macros.filter((name) => parents[name] === activeTop);
- // The org filter is global: it lists every org and the selection sticks as
- // tabs change. A tab the selected org has no content for renders a short
- // explanation (from the manifest) instead of a blank page, so absence reads
- // as a property of the data rather than a bug.
- const shownOrg = orgs.includes(org) ? org : orgs[0];
- const shownEntry = manifest.orgs[shownOrg];
- const orgHasMacro =
- (shownEntry.sections ?? []).some((section) => section.macro === activeMacro) ||
- (shownEntry.chart_sections ?? []).some((section) => section.macro === activeMacro) ||
- (shownEntry.views ?? []).some((view) => view.macro === activeMacro);
+ const narrowHeader = useMediaQuery(NARROW_HEADER);
+ const { activeMacro, shownOrg, orgHasMacro } = nav;
const glossary = orgHasMacro ? manifest.macro_glossaries?.[activeMacro] : undefined;
+ const dataAsOf = manifest.provenance.data_as_of;
return (
@@ -232,39 +251,57 @@ function Dashboard({
Generated {stamp(manifest.generated_at)} UTC. Periods and filters are stated beside each
table or chart.
-
- Generated {stamp(manifest.generated_at)} UTC · every table filters and sorts · click a chart
- to enlarge.
-
- {/* The org filter is the outermost scope — everything below it is "this
- org's view" — so it sits above the content tabs. */}
- {orgs.length > 1 && }
- setMacro(macros.find((candidate) => topOf(candidate) === name) ?? name)}
- kind="macro"
- />
- {subTabs.length > 0 && (
-
- )}
+
+ {manifest.macro_summaries?.[activeMacro] ??
+ 'Explore activity and insights across the Hiero ecosystem.'}
+
+ {narrowHeader && dataAsOf && (
+
+
+
+ )}
+
{/* Every macro ships its own explainer, listing only what that tab
shows. It may be absent when a cached bundle meets an older manifest
— degrade to no glossary, never a crash. */}
{glossary && }
+
{orgHasMacro ? (
-
+
+
+
) : (
+ // Sized to read as information rather than an error.
<>
-
- {manifest.macro_absent_notes?.[activeMacro] ??
- `No ${activeMacro} data for ${shownOrg}.`}
-
+
+
+
+ No {activeMacro} data for {shownOrg}
+
+ {manifest.macro_absent_notes?.[activeMacro] && (
+ {manifest.macro_absent_notes[activeMacro]}
+ )}
+
+
)}
{/* One footer bar: WIP notice left, provenance right — same rule, same baseline. */}
-
+
{manifest.wip !== false && }
@@ -300,33 +337,49 @@ export default function App() {
setReloadKey((key) => key + 1);
};
+ const nav = manifest ? navModel(manifest, macro, org) : null;
+ const [toc, setToc] = useState([]);
+
return (
+ // The header renders in every state; only the content beneath it changes shape.
-
-
Hiero — analytics dashboard
- {/* The header renders in every state below; only the content beneath it
- changes shape — chrome never pops in after the fact. */}
- {error ? (
-
- ) : !manifest ? (
- <>
-
Loading…
-
- Incomplete document: dashboard data is still loading. Close print preview and wait for
- the dashboard to finish loading.
-
+
+ {/* min-w-0: otherwise a wide table or nowrap stamp widens the page sideways. */}
+
+
+ {error ? (
+
+ ) : !manifest || !nav ? (
+ <>
+
+ Incomplete document: dashboard data is still loading. Close print preview and
+ wait for the dashboard to finish loading.
+
+
+
+ ) : (
+
+ )}
+
+
+
+
);
}
diff --git a/web/src/api.ts b/web/src/api.ts
index e3021e275..3588e49b9 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -12,7 +12,16 @@
* compile-time error here and a test failure on the Python side.
*/
export type ColumnFormat =
- 'hip' | 'date' | 'link' | 'evidence' | 'status' | 'flag' | 'presence' | 'number' | 'staleness';
+ | 'hip'
+ | 'date'
+ | 'link'
+ | 'evidence'
+ | 'status'
+ | 'flag'
+ | 'presence'
+ | 'number'
+ | 'percent'
+ | 'staleness';
export interface ColumnSpec {
key: string;
@@ -41,13 +50,151 @@ export interface SectionRef {
absorbed_by?: string;
}
+/** One drawn series; `color` is a hex value or a `var(--token)` reference. */
+export interface ChartSeries {
+ key: string;
+ label: string;
+ color: string;
+}
+
+/** A value shown beside the series in the tooltip and table, never drawn. */
+export interface ChartDetail {
+ key: string;
+ label: string;
+ format: 'number' | 'decimal' | 'percent';
+}
+
+/** Fields every interactive chart document shares (see export/chart_data.py). */
+export interface ChartDocumentMeta {
+ schema_version: 1;
+ id: string;
+ org: string;
+ source: string;
+ metric: string;
+ unit: string;
+ /** Who is counted and how; always shown, independently of the chart note. */
+ population: string;
+ /** What the rows can be sliced by; the UI offers nothing else. */
+ dimensions: string[];
+ note?: string;
+ methodology?: string[];
+ generated_at?: string;
+ stale?: boolean;
+}
+
+/** `trailing`: the `days` before `end`; `all`: every event; `snapshot`: the state at `end`. */
+export interface ChartWindow {
+ kind: 'snapshot' | 'all' | 'trailing';
+ days: number | null;
+ end: string | null;
+}
+
+/** Bars, lines and areas over periods or categories. */
+interface ChartDocumentBase extends ChartDocumentMeta {
+ /** `meter` (statuses, headline first) and `funnel` (stages in order) are single-series. */
+ mark: 'bar' | 'line' | 'area' | 'meter' | 'funnel';
+ stacked: boolean;
+ /** Draw each row as shares of its visible total; the table keeps counts. */
+ normalize: boolean;
+ orientation: 'vertical' | 'horizontal';
+ value_format: 'integer' | 'decimal';
+ /** Re-rank rows by the series on show, rather than keeping the source order. */
+ rank: boolean;
+ /** Rows charted before "Show all"; the data view always lists every row. */
+ top_n: number | null;
+ reference: { value: number; label: string } | null;
+ /** A bounded scale's ceiling (e.g. 10 for a 0–10 score). */
+ value_max?: number | null;
+ category: { key: string; label: string };
+ series: ChartSeries[];
+ details: ChartDetail[];
+}
+
+export interface TimeseriesDocument extends ChartDocumentBase {
+ kind: 'timeseries';
+ mark: 'bar' | 'line' | 'area';
+ /** `snapshot`: point-in-time measurements on the listed dates, never gap-filled. */
+ frequency: 'year' | 'month' | 'week' | 'day' | 'snapshot';
+ timezone: 'UTC';
+ /** The last complete bucket and the one before it; null when no fair pair exists. */
+ comparison: { current: string; previous: string } | null;
+ group: null;
+ window: { kind: 'calendar'; first: string | null; last: string | null };
+ rows: (Row & { bucket: string; partial: boolean })[];
+}
+
+export interface CategoriesDocument extends ChartDocumentBase {
+ kind: 'categories';
+ /** Rows split by a reader-selected value (e.g. a funnel cohort); never combined. */
+ group: { key: string; label: string; default: string; values: string[] } | null;
+ window: ChartWindow;
+ rows: Row[];
+}
+
+/** A heatmap: one row per entity, one value per column, on an explicit linear scale. */
+export interface MatrixDocument extends ChartDocumentMeta {
+ kind: 'matrix';
+ row: { key: string; label: string };
+ sublabel: { key: string; label: string } | null;
+ /** A per-row summary (e.g. the six-month score), shown but never coloured. */
+ total: { key: string; label: string } | null;
+ columns: { key: string; label: string }[];
+ value_label: string;
+ /** Linear from `min` to `max`, drawn in `steps` equal shades. */
+ scale: { min: number; max: number; steps: number };
+ /** What a null cell means (e.g. "Not scored"); null when every cell has a value. */
+ missing: string | null;
+ /** Row keys are GitHub logins: show avatars and profile links. */
+ avatars: boolean;
+ top_n: number | null;
+ value_format: 'integer' | 'decimal';
+ window: ChartWindow;
+ rows: Row[];
+}
+
+export interface NetworkNode {
+ id: string;
+ /** Members active in the repository recently: the bubble size. */
+ active: number;
+ total: number;
+ category: string;
+ /** Precomputed layout position (y up). */
+ x: number;
+ y: number;
+}
+
+/** Repositories linked by shared members, with a precomputed layout. */
+export interface NetworkDocument extends ChartDocumentMeta {
+ kind: 'network';
+ member_label: string;
+ categories: ChartSeries[];
+ window: ChartWindow;
+ nodes: NetworkNode[];
+ edges: { source: string; target: string; shared: number }[];
+}
+
+/** Individual timestamped events (releases) in a trailing window. */
+export interface EventsDocument extends ChartDocumentMeta {
+ kind: 'events';
+ category: { key: string; label: string };
+ label: { key: string; label: string };
+ types: ChartSeries[];
+ /** Row order for the timeline: busiest first. */
+ categories: string[];
+ window: ChartWindow;
+ /** Each has the category key, `time` (ISO UTC), the label key, and `type`. */
+ rows: Row[];
+}
+
+export type SeriesDocument = TimeseriesDocument | CategoriesDocument;
+export type ChartDocument = SeriesDocument | MatrixDocument | NetworkDocument | EventsDocument;
+
export interface ChartVariant {
+ interactive?: { kind: ChartDocument['kind']; path: string };
label: string;
+ /** The variant's PNG, which always exists (v1 lists no variant without one). The
+ * dashboard keys the variant by it and draws from `interactive` instead. */
file: string;
- /** Intrinsic pixel size, when the emitter could read it — lets the browser
- * reserve the image's box so loading charts don't shift the page. */
- width?: number;
- height?: number;
/**
* This tab's own "how to read this" and derivation steps. A chart's tabs show
* different populations (maintainers / committers) or different spans, so the
@@ -210,6 +357,8 @@ export interface Manifest {
macro_order?: string[];
/** Why a tab may be empty for an org — shown in place of a blank tab. */
macro_absent_notes?: Record;
+ /** Each tab's one-line purpose, shown under its title. */
+ macro_summaries?: Record;
/** Macro name -> ordered section-group names; each tab renders as this sequence. */
group_order?: Record;
/** Display labels for rolling periods ("30d" -> "30 days"). */
@@ -267,10 +416,9 @@ export interface SectionDoc {
variants?: SectionVariant[];
}
-/** Deploy-relative roots: the app, the API, and the chart PNGs ship together. */
+/** Deploy-relative roots: the app and the API ship together. */
const BASE = import.meta.env.BASE_URL;
export const API_ROOT = `${BASE}data/api/v1`;
-export const chartUrl = (file: string): string => `${BASE}${file}`;
async function getJson(url: string): Promise {
const response = await fetch(url);
diff --git a/web/src/app.css b/web/src/app.css
index 026790cd7..65387f947 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,70 +1,92 @@
/*
- * The dashboard stylesheet: Tailwind v4 utilities on top of the design the
- * generated dashboard established.
- *
- * - Tailwind's preflight reset is deliberately NOT imported: the layout was
- * built against browser defaults, and the reset would subtly change it.
- * - The semantic palette below is the single source of colors. Dark mode is
- * one token flip, not per-rule overrides. New components: compose Tailwind
- * utilities from these tokens (bg-surface, text-muted, border-edge, …) and
- * never introduce raw hex values.
- * - The component classes further down are the pre-Tailwind vocabulary,
- * kept verbatim (values unchanged) and migrated to utilities opportunistically.
+ * Tailwind v4 plus shadcn/ui. The semantic palette below is the single source
+ * of colour; dark mode is one token flip. shadcn's names are mapped onto it in
+ * `@theme inline` — never paste shadcn's default palette (two names collide in
+ * meaning). A forced theme is `data-theme` on , else the OS preference.
*/
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/utilities.css' layer(utilities);
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+/* Fonts are self-hosted: the CSP allows fonts from 'self' only. */
+@import '@fontsource-variable/public-sans';
+/* Display face for navigation and headings; the opsz build serves both sizes. */
+@import '@fontsource-variable/bricolage-grotesque/opsz.css';
+
+/* Dark = OS dark without an explicit light choice, or an explicit dark choice.
+ `:root` itself is matched too, so the palette's dark values can use it.
+ Screen only: paper always prints the light palette (see print.css). */
+@custom-variant dark {
+ @media screen and (prefers-color-scheme: dark) {
+ &:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *) {
+ @slot;
+ }
+ }
+ @media screen {
+ &:where([data-theme='dark'], [data-theme='dark'] *) {
+ @slot;
+ }
+ }
+}
/* ---- Semantic palette ---------------------------------------------------- */
:root {
color-scheme: light dark;
+}
+:root[data-theme='light'] {
+ color-scheme: light;
+}
+:root[data-theme='dark'] {
+ color-scheme: dark;
+}
- --page: #fafafa; /* page background */
- --ink: #1b1b1b; /* primary text */
- --muted: #666; /* secondary text */
- --soft: #888; /* tertiary text (badges, counts, labels) */
- --surface: #fff; /* cards, buttons, inputs */
- --raise: #f3f3f3; /* hovered surface */
- --edge: #e6e6e6; /* card & divider borders */
- --edge-input: #ddd; /* input & pill borders */
- --edge-strong: #ccc; /* small-button borders */
- --edge-faint: #eee; /* table wrap & image borders */
- --row-line: #f0f0f0; /* table row separators */
- --accent: #1b1b1b; /* active pill background */
- --on-accent: #fff; /* text on the active pill */
+:root {
+ /* Every text role is ≥ 4.5:1 (WCAG AA) on Paper and Sheet in both themes. */
+ --header-h: 72px;
+ --brand: #a7184e;
+ --brand-soft: #faedf2;
+ --sidebar-surface: #f8f9fb;
+ --page: #f3f5f8; /* Paper: page ground */
+ --surface: #fff; /* Sheet: cards, inputs, popovers */
+ --ink: #15181c; /* Ink: primary text; also the active fill (--accent) */
+ --muted: #59616c; /* Graphite: secondary text (5.9:1 on Paper) */
+ --edge: #e2e5e9; /* Rule: card & divider borders */
+ --link: #1d64c2; /* Signal: links, focus ring, the figure strip's rule (5.4:1) */
+
+ --soft: #69717c; /* tertiary text: counts, captions (4.6:1 on Paper, 4.9:1 on Sheet) */
+ --raise: #eef0f3; /* hovered / secondary surface */
+ --edge-input: #d5d9df; /* input & control borders */
+ --edge-strong: #c3c8cf; /* emphasised borders (dashed empty cells) */
+ --edge-faint: #e8ebee; /* scroll-box & chart-mat borders */
+ --row-line: #eef0f3; /* table row separators */
+ --accent: #15181c; /* active fill (shadcn: primary) */
+ --on-accent: #fff; /* text on the active fill */
/* Semantic colors: one slot per meaning, dark values in the flip below. */
- --link: #2a78d6; /* links and link-styled cells */
- --link-ink: #255e9e; /* link-colored text that must read as text */
+ --link-ink: #1b58a8; /* link-colored text that must read as text */
--ok: #0ca30c; /* positive dot/marker */
--ok-ink: #0a6b0a; /* positive text */
--warn: #fab219; /* warning dot/marker */
--warn-ink: #8a6200; /* warning text */
--neg: #b3261e; /* error text */
- /* Shape & motion: shared control geometry, one hover timing everywhere. */
- --r-card: 12px;
- --r-control: 6px;
- --r-frame: 8px; /* inputs, scroll boxes, and framed chart media */
- --r-pill: 999px;
- --dur: 120ms;
- --jump-h: 58px; /* sticky jump bar height + small scroll buffer */
-
- /* Deliberately outside the light/dark flip below.
- --chart-ground: chart PNGs carry a baked-in light background, so their
- container must match it in either scheme or the image floats on a slab of
- the wrong colour. It stops being a constant when the charts themselves
- become theme-aware (see the chart legibility issue).
- --lb-*: the lightbox is always dark on purpose, so its greys are scoped to
- it rather than themed — three roles instead of the six one-off values
- these replaced. */
- --chart-ground: #fff;
- --lb-title: #fff;
- --lb-text: #e2e2e2;
- --lb-dim: #bbb;
- --lb-bright: #eee;
+ /* shadcn derives its radius scale from this (lg = 8px). */
+ --radius: 0.5rem;
+ /* Scroll offset for jump targets: the sticky header plus a buffer (plus the
+ group strip on phones, below). */
+ --jump-h: 88px;
+
+ --chart-general: #64748b;
+ --chart-triage: #b77913;
+ --chart-committer: #168575;
+ --chart-maintainer: #3975dc;
+ /* Fallback series colours (export/chart_data.py FALLBACK_COLORS). */
+ --chart-1: #c2570c;
+ --chart-2: #0f7f86;
+ --chart-3: #6d4fc2;
+ --chart-4: #9a6a00;
+ --chart-5: #b3334d;
/* HIP coverage-matrix heat ramp: more merged PRs = more ink. Mirrors
HIP_EVIDENCE_RAMP (config/charts.py), which the same values reach the
@@ -81,24 +103,44 @@
--heat-open-edge: #9ec5f4;
--flash: #fff3d6; /* row highlight when the board jumps to a HIP */
}
-
-@media screen and (prefers-color-scheme: dark) {
+@media (max-width: 767px) {
:root {
- --page: #0f0f0f;
- --ink: #e6e6e6;
- --muted: #999;
- --soft: #888;
- --surface: #1a1a1a;
- --raise: #262626;
- --edge: #2a2a2a;
- --edge-input: #333;
- --edge-strong: #333;
- --edge-faint: #333;
- --row-line: #222;
- --accent: #e6e6e6;
- --on-accent: #0f0f0f;
+ --jump-h: 124px;
+ }
+}
+
+/* The dark flip, written once: the `dark` variant emits it for both the OS
+ preference and an explicit choice, so the two cannot drift apart. */
+:root {
+ @variant dark {
+ --chart-general: #94a3b8;
+ --chart-triage: #e9b44c;
+ --chart-committer: #3dc5ad;
+ --chart-maintainer: #79a8fa;
+ --chart-1: #f5945a;
+ --chart-2: #4cc4cc;
+ --chart-3: #a891f2;
+ --chart-4: #e0b54a;
+ --chart-5: #f07a92;
+ --brand: #f18ab4;
+ --brand-soft: #321d2b;
+ --sidebar-surface: #11151b;
+ --page: #0d1117;
+ --surface: #15181c;
+ --ink: #e3e6ea;
+ --muted: #9ba4af; /* 7.6:1 on Paper */
+ --edge: #262a31;
+ --link: #72a8ea; /* 7.8:1 on Paper */
+
+ --soft: #858e99; /* 5.4:1 on Sheet */
+ --raise: #1e2228;
+ --edge-input: #313640;
+ --edge-strong: #3a404a;
+ --edge-faint: #2a2f36;
+ --row-line: #1c2026;
+ --accent: #e3e6ea;
+ --on-accent: #0d0f12;
- --link: #6ba3e8;
--link-ink: #8ab4e8;
--ok: #34b334;
--ok-ink: #7fd08a;
@@ -123,10 +165,53 @@
}
}
+/* shadcn names map onto our tokens by meaning, not name: shadcn `muted` and
+ `accent` are backgrounds (our --raise); `muted-foreground` is our --muted and
+ `primary` our --accent. In markup: text-muted-foreground, bg-primary. */
@theme inline {
+ --color-brand: var(--brand);
+ --color-brand-soft: var(--brand-soft);
+ --color-background: var(--page);
+ --color-foreground: var(--ink);
+ --color-card: var(--surface);
+ --color-card-foreground: var(--ink);
+ --color-popover: var(--surface);
+ --color-popover-foreground: var(--ink);
+ --color-primary: var(--accent);
+ --color-primary-foreground: var(--on-accent);
+ --color-secondary: var(--raise);
+ --color-secondary-foreground: var(--ink);
+ --color-muted: var(--raise);
+ --color-muted-foreground: var(--muted);
+ --color-accent: var(--raise);
+ --color-accent-foreground: var(--ink);
+ --color-destructive: var(--neg);
+ --color-border: var(--edge);
+ --color-input: var(--edge-input);
+ --color-ring: var(--link);
+ --color-sidebar: var(--sidebar-surface);
+ --color-sidebar-foreground: var(--ink);
+ --color-sidebar-primary: var(--accent);
+ --color-sidebar-primary-foreground: var(--on-accent);
+ --color-sidebar-accent: var(--raise);
+ --color-sidebar-accent-foreground: var(--ink);
+ --color-sidebar-border: var(--edge);
+ --color-sidebar-ring: var(--link);
+
+ /* Public Sans for content; `font-display` for the sidebar and titles. */
+ --font-sans: 'Public Sans Variable', ui-sans-serif, system-ui, sans-serif;
+ --font-display: 'Bricolage Grotesque Variable', 'Public Sans Variable', ui-sans-serif, sans-serif;
+
+ --radius-sm: calc(var(--radius) * 0.6);
+ --radius-md: calc(var(--radius) * 0.8);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) * 1.4);
+ --radius-2xl: calc(var(--radius) * 1.8);
+ --radius-3xl: calc(var(--radius) * 2.2);
+ --radius-4xl: calc(var(--radius) * 2.6);
+
--color-page: var(--page);
--color-ink: var(--ink);
- --color-muted: var(--muted);
--color-soft: var(--soft);
--color-surface: var(--surface);
--color-raise: var(--raise);
@@ -135,8 +220,6 @@
--color-edge-strong: var(--edge-strong);
--color-edge-faint: var(--edge-faint);
--color-row-line: var(--row-line);
- --color-accent: var(--accent);
- --color-on-accent: var(--on-accent);
--color-link: var(--link);
--color-link-ink: var(--link-ink);
--color-ok: var(--ok);
@@ -146,75 +229,25 @@
--color-neg: var(--neg);
}
-/* ---- Page & element defaults --------------------------------------------- */
+/* ---- Base ---------------------------------------------------------------- */
@layer base {
- body {
- font-family:
- system-ui,
- -apple-system,
- 'Segoe UI',
- Roboto,
- sans-serif;
- max-width: 1100px;
- margin: 0 auto;
- padding: 24px;
- color: var(--ink);
- background: var(--page);
- }
- h1 {
- font-size: 26px;
- font-weight: 650;
- letter-spacing: -0.01em;
- margin: 0 0 4px;
- }
- h3 {
- font-size: 14px;
- font-weight: 600;
- margin: 0;
- }
- table {
- border-collapse: collapse;
- width: 100%;
- font-size: 13px;
- }
- th {
- position: sticky;
- top: 0;
- background: var(--raise);
- text-align: center;
- padding: 8px 10px;
+ /* shadcn's base rule: preflight leaves border colour at currentColor. */
+ *,
+ ::before,
+ ::after {
+ border-color: var(--color-border);
+ }
+ /* Preflight resets buttons to cursor: default (same as shadcn init --pointer). */
+ button:not(:disabled),
+ [role='button']:not(:disabled) {
cursor: pointer;
- white-space: nowrap;
- border-bottom: 1px solid var(--edge);
- font-weight: 600;
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: var(--muted);
- transition: color var(--dur);
}
- th:hover {
+ body {
color: var(--ink);
+ background: var(--page);
}
- td {
- padding: 6px 10px;
- border-bottom: 1px solid var(--row-line);
- white-space: nowrap;
- text-align: center;
- }
- td:first-child {
- font-weight: 500;
- }
- /* Cells centre by default (see `th`/`td`). Numeric columns additionally use
- tabular figures so digits keep a constant width and columns of numbers
- still line up under a centred heading. */
- td.num {
- font-variant-numeric: tabular-nums;
- }
- tr:hover td {
- background: var(--raise);
- }
+ /* Motion is decoration, never information: honour reduced motion everywhere. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
@@ -224,741 +257,20 @@
scroll-behavior: auto !important;
}
}
-
- /* ---- Responsive layout ---------------------------------------------------
- Breakpoint convention (the first in this file — set here as the precedent
- future contributors follow):
-
- tablet max-width: 767px tablets in portrait
- phone max-width: 599px phones in portrait
- narrow-phone max-width: 479px component-level re-flow only (shead
- stacking, jump bar, glossary, card
- padding — see @layer components below)
-
- Plain `@media` queries throughout — consistent with `prefers-color-scheme`
- and `prefers-reduced-motion` above. No CSS custom-media (needs PostCSS)
- and no Tailwind `sm:`/`md:` variants here; those belong to TSX components
- that already use the Tailwind vocabulary (MetricTiles, PeriodTabs, …).
- Component-class overrides live in the matching block at the end of
- `@layer components` below. */
-
- /* Tablet: recover breathing room without disturbing desktop layout. */
- @media (max-width: 767px) {
- body {
- padding: 16px;
- }
- }
-
- /* Phone: tighten further and scale the hero heading down so it leaves more
- room for the subtitle and tab bar beneath it. */
- @media (max-width: 599px) {
- body {
- padding: 12px;
- }
- h1 {
- font-size: 22px;
- }
- }
}
-/* ---- Component vocabulary ------------------------------------------------ */
+/* ---- Bespoke views -----------------------------------------------------------
+ The two HIP views no component expresses: the coverage matrix (.hipmx*, a
+ heat map, not a data table) and the governance board lanes (.hipboard*). */
@layer components {
- /* Shared control behaviour: one timing, one focus ring, everywhere. */
- .macro,
- .tab,
- .jbtn,
- .dl,
- .snav,
- .ctab,
- .chip {
- transition:
- background var(--dur),
- border-color var(--dur),
- color var(--dur);
- }
-
- /* One bordered-surface button. The variants below differ only in size and
- shape — before this they were four near-identical rule blocks that drifted
- apart on hover behaviour and colour. Add a variant by setting the two
- custom properties, not by restating the whole treatment. */
- .dl,
- .snav,
- .ctab,
- .jbtn {
- font: inherit;
- font-size: var(--btn-size, 13px);
- padding: var(--btn-pad, 5px 12px);
- border: 1px solid var(--edge-strong);
- border-radius: var(--r-control);
- background: var(--surface);
- color: var(--ink);
- cursor: pointer;
- text-decoration: none;
- }
- .dl:hover,
- .snav:hover,
- .ctab:hover:not(.active),
- .jbtn:hover {
- background: var(--raise);
- }
- :is(.macro, .tab, .jbtn, .dl, .snav, .ctab, .thbtn, .search, .lbclose):focus-visible {
- outline: 2px solid var(--link);
- outline-offset: 2px;
- }
-
- .sub {
- color: var(--muted);
- font-size: 14px;
- margin: 0 0 20px;
- }
-
- /* A tab the selected org has no content for: the "why" note in place of
- the panel, sized to read as information rather than an error. */
- .empty {
- color: var(--muted);
- font-size: 15px;
- max-width: 640px;
- margin: 48px auto;
- text-align: center;
- line-height: 1.6;
- }
-
- /* Macro (top-level) tabs */
- .macrobar {
- display: flex;
- gap: 8px;
- margin-bottom: 16px;
- flex-wrap: wrap;
- }
- .macro {
- padding: 9px 18px;
- border: 1px solid var(--edge-input);
- background: var(--surface);
- border-radius: var(--r-pill);
- cursor: pointer;
- font-size: 14px;
- font-weight: 600;
- color: var(--ink);
- text-decoration: none;
- display: inline-block;
- }
- .macro.active {
- background: var(--accent);
- color: var(--on-accent);
- border-color: var(--accent);
- }
- .macro:hover:not(.active) {
- border-color: var(--soft);
- background: var(--raise);
- }
-
- /* Org tabs */
- .tabbar {
- display: flex;
- gap: 6px;
- margin-bottom: 18px;
- border-bottom: 1px solid var(--edge);
- flex-wrap: wrap;
- }
- .tab {
- padding: 8px 16px;
- border: none;
- background: none;
- cursor: pointer;
- font-size: 14px;
- color: var(--muted);
- border-bottom: 2px solid transparent;
- margin-bottom: -1px;
- }
- .tab.active {
- color: var(--ink);
- border-bottom-color: var(--ink);
- font-weight: 600;
- }
- .tab:hover {
- color: var(--ink);
- }
-
- /* Cards & section chrome */
- .card {
- background: var(--surface);
- border: 1px solid var(--edge);
- border-radius: var(--r-card);
- padding: 16px 18px;
- margin-bottom: 20px;
- scroll-margin-top: var(--jump-h);
- }
- .card.flash {
- background: var(--flash);
- }
- .card h2 {
- font-size: 16px;
- font-weight: 600;
- margin: 0 0 2px;
- }
- .shead {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- gap: 8px 16px;
- }
- .sactions {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- gap: 6px;
- flex: none;
- }
- .sactions .actionrow {
- display: flex;
- gap: 6px;
- }
- .dl {
- --btn-size: 12px;
- --btn-pad: 5px 11px;
- flex: none;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- }
- .dl svg {
- width: 13px;
- height: 13px;
- flex: none;
- }
- .desc {
- color: var(--muted);
- font-size: 13px;
- margin: 0 0 12px;
- }
- .count {
- color: var(--soft);
- font-size: 12px;
- margin: 8px 0 0;
- }
-
- /* Glossary (arrives as pre-built HTML from the data API) */
- .glossary {
- margin: 0 0 18px;
- border: 1px solid var(--edge);
- border-radius: var(--r-card);
- background: var(--surface);
- padding: 0 14px;
- }
- .glossary summary {
- cursor: pointer;
- padding: 12px 0;
- font-weight: 600;
- font-size: 14px;
- }
- .glossary dl {
- margin: 0 0 10px;
- font-size: 13px;
- display: grid;
- grid-template-columns: 150px 1fr;
- gap: 5px 14px;
- }
- .glossary dt {
- font-weight: 600;
- color: var(--ink);
- }
- .glossary dd {
- margin: 0;
- color: var(--muted);
- }
- .gnote {
- font-size: 12px;
- color: var(--soft);
- margin: 6px 0 12px;
- }
-
- /* Table sections */
- .search {
- width: 100%;
- box-sizing: border-box;
- padding: 8px 10px;
- border: 1px solid var(--edge-input);
- border-radius: var(--r-frame);
- font-size: 14px;
- margin-bottom: 12px;
- background: var(--surface);
- color: var(--ink);
- }
- /* Three-level cascade keeps the scroll box viewport-relative across the
- browser matrix: 520 px for browsers without `min()` support, then
- `min(520px, 60vh)` for those with `min()` but without `dvh`, and finally
- `min(520px, 60dvh)` for full support. `dvh` (dynamic viewport height)
- accounts for collapsible browser chrome; `60dvh` leaves at least 40 % of
- the screen for content above and below the table so the page-scroll
- gesture cannot be trapped. */
- .tablewrap {
- overflow: auto;
- max-height: 520px; /* no min() support: fixed cap */
- max-height: min(520px, 60vh); /* min() + vh, no dvh: viewport-relative */
- max-height: min(520px, 60dvh); /* full support: dvh accounts for browser chrome */
- border: 1px solid var(--edge-faint);
- border-radius: var(--r-frame);
- }
- details.tsec {
- padding-top: 14px;
- padding-bottom: 14px;
- }
- .tsum {
- display: flex;
- align-items: center;
- gap: 10px;
- list-style: none;
- cursor: pointer;
- }
- .tsum::-webkit-details-marker {
- display: none;
- }
- .tsum::before {
- content: '\25B8';
- color: var(--soft);
- font-size: 13px;
- transition: transform 0.15s ease;
- }
- details[open] .tsum::before {
- transform: rotate(90deg);
- }
- .tsum h2 {
- margin: 0;
- font-size: 16px;
- font-weight: 600;
- flex: 1;
- }
- .sbadge {
- font-size: 12px;
- font-weight: 500;
- font-variant-numeric: tabular-nums;
- color: var(--soft);
- background: var(--raise);
- border-radius: var(--r-pill);
- padding: 2px 10px;
- white-space: nowrap;
- }
- .sbody {
- margin-top: 14px;
- }
- .sbody > .dl {
- float: right;
- margin-bottom: 8px;
- }
- .sbody > .search {
- clear: both;
- }
-
- /* Freshness stamps: "data as of" (stale = older than the scheduled refresh). */
- .asof {
- display: inline-block;
- font-size: 0.78rem;
- color: var(--soft);
- margin: 0;
- white-space: nowrap;
- }
- .asof.stale {
- color: var(--warn-ink);
- font-weight: 600;
- }
-
- /* Charts */
- .gallery {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
- gap: 16px;
- }
- .chart {
- margin: 0;
- }
- /* Framed chart media: the same border/radius/ground wherever a chart PNG
- is shown, so a change lands once instead of in three places. */
- .chart img,
- .chartscroll,
- .slide img {
- border: 1px solid var(--edge-faint);
- border-radius: var(--r-frame);
- background: var(--chart-ground);
- }
- .chart img {
- width: 100%;
- height: auto;
- cursor: zoom-in;
- }
- .chart img:hover {
- border-color: var(--edge-strong);
- }
- .chart figcaption {
- font-size: 12px;
- color: var(--muted);
- margin-top: 6px;
- text-align: center;
- }
- .chart.wide {
- grid-column: 1 / -1;
- }
- .chartscroll {
- overflow-x: auto;
- overflow-y: hidden;
- }
- .chartscroll img {
- width: auto;
- max-width: none;
- height: 460px;
- border: 0;
- border-radius: 0;
- display: block;
- cursor: zoom-in;
- }
- .chartnote {
- margin: 6px 0 0;
- font-size: 12px;
- color: var(--muted);
- line-height: 1.45;
- text-align: left;
- }
- .charttabs {
- display: flex;
- gap: 6px;
- margin-bottom: 8px;
- }
- .ctab {
- --btn-size: 12px;
- --btn-pad: 3px 11px;
- color: var(--muted);
- }
- .ctab.active {
- background: var(--accent);
- color: var(--on-accent);
- border-color: var(--accent);
- font-weight: 500;
- }
-
- /* Slideshow */
- .slidenav {
- display: flex;
- align-items: center;
- gap: 14px;
- margin-bottom: 10px;
- }
- .snav {
- --btn-pad: 6px 14px;
- }
- .scount {
- font-size: 13px;
- color: var(--muted);
- }
- .slide img {
- width: 100%;
- height: auto;
- cursor: zoom-in;
- }
- .slide figcaption {
- font-size: 13px;
- color: var(--muted);
- margin-top: 8px;
- text-align: center;
- font-weight: 600;
- }
-
- /* Lightbox — always dark, on purpose; no tokens */
- .lightbox {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.82);
- backdrop-filter: blur(4px);
- display: none;
- flex-direction: column;
- align-items: center;
- /* Not centered via justify-content: the auto margins below centre content
- that fits and top-align content that overflows, so a tall heatmap
- scrolls at readable size instead of shrinking to fit. */
- overflow-y: auto;
- gap: 14px;
- z-index: 1000;
- cursor: zoom-out;
- padding: 24px;
- box-sizing: border-box;
- }
- .lightbox img {
- margin-top: auto;
- max-width: 96vw;
- border-radius: var(--r-frame);
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
- background: var(--chart-ground);
- }
- .lightbox .hint {
- position: fixed;
- top: 20px;
- right: 64px;
- color: var(--lb-dim);
- font-size: 13px;
- line-height: 28px;
- }
- .lbclose {
- position: fixed;
- top: 16px;
- right: 20px;
- width: 32px;
- height: 32px;
- border-radius: var(--r-pill);
- border: 1px solid rgba(255, 255, 255, 0.25);
- background: rgba(255, 255, 255, 0.08);
- color: var(--lb-bright);
- font-size: 16px;
- line-height: 1;
- cursor: pointer;
- transition: background var(--dur);
- }
- .lbclose:hover {
- background: rgba(255, 255, 255, 0.2);
- }
- .lbtitle {
- color: var(--lb-title);
- font-size: 18px;
- font-weight: 600;
- margin: 0;
- text-align: center;
- }
- .lbcap {
- max-width: 760px;
- margin: 0 0 auto;
- color: var(--lb-text);
- font-size: 14px;
- line-height: 1.5;
- text-align: center;
- padding: 0 16px;
- max-height: 26vh;
- overflow-y: auto;
- }
- .lbcap:empty {
- display: none;
- }
- .lbcap .chartnote {
- color: var(--lb-text);
- margin: 0;
- text-align: center;
- }
- .lbmethod {
- margin-top: 10px;
- text-align: left;
- }
- .lbmethod summary {
- cursor: pointer;
- color: var(--lb-dim);
- font-size: 13px;
- text-align: center;
- list-style-position: inside;
- }
- .lbmethod summary:hover {
- color: var(--lb-text);
- }
- .lbmethod ol {
- margin: 10px auto 0;
- padding-left: 20px;
- color: var(--lb-text);
- font-size: 13px;
- max-width: 680px;
- }
- .lbmethod li {
- margin: 5px 0;
- }
-
- /* Jump bar & groups */
- .jump {
- position: sticky;
- top: 0;
- z-index: 50;
- display: flex;
- gap: 8px;
- flex-wrap: nowrap;
- overflow-x: auto;
- overflow-y: hidden;
- align-items: center;
- background: var(--page);
- padding: 10px 0;
- margin: 0 0 6px;
- border-bottom: 1px solid var(--edge);
- }
- .group {
- scroll-margin-top: var(--jump-h);
- }
- .jlabel {
- font-size: 12px;
- color: var(--soft);
- font-weight: 600;
- margin-right: 2px;
- }
- /* The pill variant: same button, rounded and with a lighter resting edge. */
- .jbtn {
- border-radius: var(--r-pill);
- border-color: var(--edge-input);
- }
- .jbtn:hover {
- border-color: var(--soft);
- }
- .grouphdr {
- font-size: 12px;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--soft);
- margin: 24px 0 12px;
- padding-bottom: 6px;
- border-bottom: 1px solid var(--edge);
- }
- summary.grouphdr {
- cursor: pointer;
- list-style: none;
- }
- summary.grouphdr::-webkit-details-marker {
- display: none;
- }
- summary.grouphdr::before {
- content: '\25be';
- display: inline-block;
- width: 1.1em;
- color: var(--soft);
- transition: transform 0.15s;
- }
- .group:not([open]) > summary.grouphdr::before {
- transform: rotate(-90deg);
- }
- .group:not([open]) > summary.grouphdr {
- color: var(--edge-strong);
- }
-
- /* App extras (no legacy counterpart) */
- .error {
- color: var(--neg);
- font-size: 14px;
- }
- .footrow {
- display: flex;
- align-items: baseline;
- justify-content: space-between;
- gap: 16px;
- flex-wrap: wrap;
- margin-top: 36px;
- padding-top: 14px;
- border-top: 1px solid var(--edge);
- }
- .provenance {
- color: var(--soft);
- font-size: 12px;
- text-align: right;
- margin: 0 0 0 auto;
- }
-
- /* Formatted table cells (chips, HIP badges, links). */
- .chip {
- display: inline-flex;
- align-items: center;
- gap: 5px;
- font-size: 11.5px;
- font-weight: 600;
- border-radius: var(--r-pill);
- padding: 1px 9px;
- border: 1px solid var(--edge);
- background: var(--surface);
- }
- .chip::before {
- content: '';
- width: 7px;
- height: 7px;
- border-radius: 50%;
- background: var(--dot, var(--soft));
- }
- .chip-merged {
- --dot: var(--ok);
- color: var(--ok-ink);
- }
- .chip-open {
- --dot: var(--warn);
- color: var(--warn-ink);
- }
- .chip-none {
- --dot: var(--edge-strong);
- color: var(--soft);
- }
- .chip-overdue {
- --dot: var(--neg);
- color: var(--neg);
- }
- .chip-watch {
- --dot: var(--warn);
- color: var(--warn-ink);
- }
- .chip-spec {
- --dot: var(--link);
- color: var(--link-ink);
- }
- .cell-hip {
- font-weight: 600;
- font-variant-numeric: tabular-nums;
- white-space: nowrap;
- }
-
- /* Sortable column headers: a real button, with the sort mark's slot
- reserved so toggling never shifts the column. */
- .thbtn {
- all: unset;
- display: inline-flex;
- align-items: center;
- gap: 4px;
- cursor: pointer;
- font: inherit;
- color: inherit;
- text-transform: inherit;
- letter-spacing: inherit;
- }
- .sortmark {
- display: inline-block;
- width: 1em;
- color: var(--soft);
- text-transform: none;
- }
- .cell-link {
- font-size: 12px;
- color: var(--link);
- text-decoration: none;
- }
- .cell-link:hover {
- text-decoration: underline;
- }
-
- /* (The former dark-mode leftovers block is gone: every rule it patched now
- reads from the semantic tokens, whose dark values live in the single
- token flip at the top of this file.) */
-
- /* Chart PNGs bake a light ground (config/charts.py), so in dark mode the
- gallery was a wall of white slabs. Inverting with a hue rotation keeps the
- series hues recognisable while the ground goes dark — the pragmatic fix
- for the PNG era; client-rendered charts will retire it. The lightbox is
- exempt: it is always dark, and readers zoom in for a faithful look. */
- @media (prefers-color-scheme: dark) {
- .chart img,
- .chartscroll img,
- .slide img {
- filter: invert(0.9) hue-rotate(180deg);
- }
- }
-
- /* ---- HIP views (coverage matrix, governance board, evidence panel) ----
- Expressed through the semantic tokens like the rest of the stylesheet, so
- the HIPs tab follows the light/dark flip instead of staying light-styled
- on a dark page. The heat buckets read from --heat-*, which inverts for
- dark mode (see the palette); the matrix legend renders the same classes,
- so cells and legend cannot drift. */
- /* Same three-level cascade as .tablewrap above (560 px / 60vh / 60dvh). */
.hipmx-wrap {
overflow: auto;
max-height: 560px; /* no min() support: fixed cap */
max-height: min(560px, 60vh); /* min() + vh, no dvh: viewport-relative */
max-height: min(560px, 60dvh); /* full support: dvh accounts for browser chrome */
border: 1px solid var(--edge-faint);
- border-radius: var(--r-frame);
+ border-radius: var(--radius);
padding: 0 6px 6px 0;
}
.hipmx {
@@ -976,6 +288,7 @@
font-size: 11px;
}
.hipmx th {
+ white-space: nowrap;
border-bottom: none;
cursor: default;
padding: 3px 8px;
@@ -987,9 +300,7 @@
}
.hipmx thead .hipmx-grp th {
border-bottom: 1px solid var(--edge-strong);
- font-size: 10px;
- letter-spacing: 0.06em;
- text-transform: uppercase;
+ font-size: 11px;
color: var(--soft);
}
.hipmx tbody th {
@@ -1125,133 +436,6 @@
.hipmx tr.flash td.hipmx-gaps {
background: var(--flash) !important;
}
- .hipmx-filters {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-bottom: 12px;
- }
- .hipmx-filters .search {
- margin-bottom: 0;
- }
- .hipmx-fbar {
- display: flex;
- align-items: center;
- gap: 6px;
- flex-wrap: wrap;
- font-size: 12px;
- color: var(--soft);
- }
- .hipmx-fbtn {
- padding: 3px 11px;
- border: 1px solid var(--edge-input);
- background: var(--surface);
- border-radius: var(--r-pill);
- cursor: pointer;
- font-size: 12px;
- color: var(--ink);
- }
- .hipmx-fbtn:hover {
- border-color: var(--soft);
- }
- .hipmx-fbtn.active {
- background: var(--accent);
- color: var(--on-accent);
- border-color: var(--accent);
- }
- .hipev {
- margin-top: 12px;
- border: 1px solid var(--edge);
- border-radius: var(--r-frame);
- padding: 12px 14px;
- }
- .hipev-head {
- display: flex;
- align-items: baseline;
- gap: 10px;
- margin-bottom: 6px;
- }
- .hipev-head h3 {
- font-size: 13.5px;
- margin: 0;
- font-weight: 600;
- }
- .hipev-head .n {
- color: var(--soft);
- font-size: 12px;
- }
- .hipev-head button {
- margin-left: auto;
- }
- .hipev ol {
- list-style: none;
- margin: 0;
- padding: 0;
- max-height: 300px;
- overflow-y: auto;
- }
- .hipev li {
- padding: 6px 0;
- border-bottom: 1px solid var(--row-line);
- font-size: 12.5px;
- }
- .hipev li:last-child {
- border-bottom: 0;
- }
- .hipev .l1 {
- display: flex;
- gap: 10px;
- align-items: baseline;
- flex-wrap: wrap;
- }
- .hipev .l1 a {
- font-weight: 600;
- font-variant-numeric: tabular-nums;
- color: var(--link);
- text-decoration: none;
- }
- .hipev .l1 a:hover {
- text-decoration: underline;
- }
- .hipev .t {
- color: var(--muted);
- }
- .hipev .meta {
- color: var(--soft);
- font-size: 11.5px;
- white-space: nowrap;
- }
- .hipev .cue {
- color: var(--warn-ink);
- font-size: 11.5px;
- font-weight: 600;
- }
- .hipev .snip {
- color: var(--soft);
- font-size: 11px;
- margin-top: 2px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
- }
- .hipabout {
- margin: 0;
- padding-left: 18px;
- font-size: 13px;
- color: var(--muted);
- display: flex;
- flex-direction: column;
- gap: 8px;
- max-width: 85ch;
- }
- .hipabout strong {
- color: var(--ink);
- }
- .glossary .hipabout {
- margin: 0 0 12px;
- padding-left: 16px;
- }
.hipboard {
display: flex;
gap: 10px;
@@ -1260,10 +444,10 @@
padding-bottom: 4px;
}
.hipboard-col {
- flex: 0 0 172px;
+ flex: 0 0 194px; /* border-box: 172px content + padding + border */
background: var(--raise);
border: 1px solid var(--edge);
- border-radius: var(--r-frame);
+ border-radius: var(--radius);
padding: 10px 10px 12px;
}
.hipboard-col h3 {
@@ -1291,96 +475,4 @@
color: var(--soft);
font-size: 12px;
}
- .hipchip {
- padding: 2px 8px;
- border: 1px solid var(--edge-input);
- background: var(--surface);
- border-radius: var(--r-control);
- cursor: pointer;
- font-size: 11.5px;
- font-weight: 600;
- color: var(--link-ink);
- font-variant-numeric: tabular-nums;
- }
- .hipchip:hover {
- border-color: var(--link);
- }
- .hipchip.active {
- border-color: var(--ink);
- color: var(--ink);
- background: var(--raise);
- }
- .hipboard-info {
- display: flex;
- align-items: center;
- gap: 10px;
- flex-wrap: wrap;
- margin-top: 10px;
- padding: 9px 12px;
- border: 1px solid var(--edge);
- border-radius: var(--r-frame);
- font-size: 13px;
- }
- .hipboard-info strong {
- font-variant-numeric: tabular-nums;
- }
- .hipboard-info .t {
- color: var(--muted);
- }
- .hipboard-info button {
- margin-left: auto;
- }
-
- /* ---- Responsive layout (component layer) ---------------------------------
- Builds on the tablet/phone breakpoints from @layer base above, plus the
- narrow-phone breakpoint (≤479 px) introduced here for component-level
- re-flow. All three are documented in the convention table in @layer base. */
-
- /* ---- Narrow-phone breakpoint (≤479 px) -----------------------------------
- Finer-grained adjustments that the 599 px phone breakpoint alone cannot
- provide: the section header, jump bar label, glossary column, and card
- padding all need more room than padding alone gives them at this width. */
-
- /* Below 480 px the description + action-button row becomes too cramped.
- Stack them: description first, then the action group below it.
- .sactions originally has `align-items: flex-end` (right-aligns its
- children within the column); override to left-align when stacked. */
- @media (max-width: 479px) {
- .shead {
- flex-direction: column;
- }
- .sactions {
- align-items: flex-start; /* left-align when stacked, not right */
- }
-
- /* The jump bar scrolls horizontally (flex-wrap: nowrap; overflow-x: auto).
- The label is visually hidden (not display:none) so it stays in the
- accessibility tree: screen readers still read "Jump to" before the
- button list, giving group context without consuming horizontal space.
- `position: absolute` removes it from the flex layout entirely. */
- .jlabel {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
- }
-
- /* Glossary: the fixed 150 px definition column consumes more than half a
- ~280 px card body at this width. minmax(0, 120px) caps it at 120 px
- and lets it shrink as needed to share space fairly with the value
- column (the 0 is the floor — it can compress all the way if forced). */
- .glossary dl {
- grid-template-columns: minmax(0, 120px) 1fr;
- }
-
- /* Cards: recover 8 px on each side so the content columns have more room. */
- .card {
- padding: 12px 14px;
- }
- }
}
diff --git a/web/src/chartData.ts b/web/src/chartData.ts
new file mode 100644
index 000000000..e4a54403a
--- /dev/null
+++ b/web/src/chartData.ts
@@ -0,0 +1,227 @@
+import {
+ API_ROOT,
+ type ChartDocument,
+ type EventsDocument,
+ type MatrixDocument,
+ type NetworkDocument,
+ type Row,
+ type SeriesDocument,
+} from './api';
+
+const cache = new Map>();
+const FREQUENCIES = ['year', 'month', 'week', 'day', 'snapshot'];
+/** Hex or a design token: the only colours the exporter emits. */
+const COLOR = /^(#[0-9a-f]{3,8}|var\(--[\w-]+\))$/i;
+
+const finite = (value: unknown) => typeof value === 'number' && Number.isFinite(value);
+const text = (value: unknown) => typeof value === 'string';
+
+function validRows(data: SeriesDocument): boolean {
+ const integer = data.value_format === 'integer';
+ const numeric = (row: Row) =>
+ data.series.every(({ key }) =>
+ integer ? Number.isSafeInteger(row[key]) && Number(row[key]) >= 0 : finite(row[key]),
+ ) && data.details.every(({ key }) => finite(row[key]));
+ if (!data.rows.every(numeric)) return false;
+ if (data.kind === 'timeseries') {
+ const buckets = new Set(data.rows.map((row) => row.bucket));
+ const comparison = data.comparison ?? null;
+ return (
+ (comparison === null ||
+ (buckets.has(comparison.current) && buckets.has(comparison.previous))) &&
+ FREQUENCIES.includes(data.frequency) &&
+ data.rows.every(
+ (row, index) =>
+ text(row.bucket) &&
+ typeof row.partial === 'boolean' &&
+ (index === 0 || data.rows[index - 1].bucket < row.bucket),
+ )
+ );
+ }
+ const group = data.group;
+ if (
+ group !== null &&
+ !(
+ text(group.key) &&
+ Array.isArray(group.values) &&
+ group.values.every(text) &&
+ group.values.includes(group.default)
+ )
+ ) {
+ return false;
+ }
+ const keys = data.rows.map((row) => {
+ const category = row[data.category.key];
+ const cohort = group ? row[group.key] : '';
+ if (!text(category) || (group && !group.values.includes(cohort as string))) return null;
+ return `${String(cohort)}\u0000${String(category)}`;
+ });
+ return !keys.includes(null) && new Set(keys).size === keys.length;
+}
+
+const unique = (values: unknown[]) => new Set(values).size === values.length;
+const keyed = (value: unknown) =>
+ !!value && text((value as { key: unknown }).key) && text((value as { label: unknown }).label);
+const colored = (items: unknown) =>
+ Array.isArray(items) &&
+ items.every((item) => keyed(item) && COLOR.test(String((item as { color: unknown }).color)));
+
+function validMatrix(data: MatrixDocument): boolean {
+ const { scale } = data;
+ const integer = data.value_format === 'integer';
+ const cell = (value: unknown) =>
+ value === null ||
+ (finite(value) && (!integer || (Number.isSafeInteger(value) && Number(value) >= 0)));
+ return (
+ keyed(data.row) &&
+ (data.sublabel === null || keyed(data.sublabel)) &&
+ (data.total === null || keyed(data.total)) &&
+ Array.isArray(data.columns) &&
+ data.columns.length > 0 &&
+ data.columns.every(keyed) &&
+ unique(data.columns.map((column) => column.key)) &&
+ text(data.value_label) &&
+ !!scale &&
+ finite(scale.min) &&
+ finite(scale.max) &&
+ scale.max > scale.min &&
+ Number.isSafeInteger(scale.steps) &&
+ scale.steps > 0 &&
+ (data.missing === null || text(data.missing)) &&
+ typeof data.avatars === 'boolean' &&
+ (data.top_n === null || (Number.isSafeInteger(data.top_n) && data.top_n > 0)) &&
+ Array.isArray(data.rows) &&
+ data.rows.every(
+ (row) =>
+ text(row[data.row.key]) &&
+ data.columns.every((column) => cell(row[column.key])) &&
+ (data.total === null || finite(row[data.total.key])),
+ ) &&
+ unique(data.rows.map((row) => row[data.row.key]))
+ );
+}
+
+function validNetwork(data: NetworkDocument): boolean {
+ const count = (value: unknown) => Number.isSafeInteger(value) && Number(value) >= 0;
+ if (!(text(data.member_label) && colored(data.categories) && Array.isArray(data.nodes))) {
+ return false;
+ }
+ const categories = new Set(data.categories.map((category) => category.key));
+ const ids = data.nodes.map((node) => node.id);
+ const known = new Set(ids);
+ return (
+ data.nodes.every(
+ (node) =>
+ text(node.id) &&
+ count(node.active) &&
+ count(node.total) &&
+ categories.has(node.category) &&
+ finite(node.x) &&
+ finite(node.y),
+ ) &&
+ unique(ids) &&
+ Array.isArray(data.edges) &&
+ data.edges.every(
+ (edge) =>
+ known.has(edge.source) &&
+ known.has(edge.target) &&
+ edge.source !== edge.target &&
+ count(edge.shared),
+ ) &&
+ unique(data.edges.map((edge) => [edge.source, edge.target].sort().join('\u0000')))
+ );
+}
+
+function validEvents(data: EventsDocument): boolean {
+ if (!(keyed(data.category) && keyed(data.label) && colored(data.types))) return false;
+ const types = new Set(data.types.map((type) => type.key));
+ const categories = new Set(data.categories);
+ return (
+ Array.isArray(data.categories) &&
+ data.categories.every(text) &&
+ unique(data.categories) &&
+ Array.isArray(data.rows) &&
+ data.rows.every(
+ (row) =>
+ categories.has(row[data.category.key] as string) &&
+ text(row.time) &&
+ !Number.isNaN(Date.parse(String(row.time))) &&
+ text(row[data.label.key]) &&
+ types.has(row.type as string),
+ )
+ );
+}
+
+/** Marks every series kind draws, plus the single-series forms only categories take. */
+const MARKS = ['bar', 'line', 'area'];
+const CATEGORY_MARKS = ['meter', 'funnel'];
+
+function validSeries(data: SeriesDocument): boolean {
+ const categoryMark = CATEGORY_MARKS.includes(data.mark);
+ return (
+ (MARKS.includes(data.mark) ||
+ (categoryMark && data.kind === 'categories' && data.series?.length === 1)) &&
+ ['vertical', 'horizontal'].includes(data.orientation) &&
+ ['integer', 'decimal'].includes(data.value_format) &&
+ typeof data.stacked === 'boolean' &&
+ typeof data.normalize === 'boolean' &&
+ typeof data.rank === 'boolean' &&
+ (data.top_n === null || (Number.isSafeInteger(data.top_n) && data.top_n > 0)) &&
+ (data.reference === null || (finite(data.reference?.value) && text(data.reference.label))) &&
+ (data.value_max == null || (finite(data.value_max) && data.value_max > 0)) &&
+ !!data.category &&
+ text(data.category.key) &&
+ text(data.category.label) &&
+ Array.isArray(data.series) &&
+ data.series.length > 0 &&
+ data.series.every((s) => text(s.key) && text(s.label) && COLOR.test(String(s.color))) &&
+ new Set(data.series.map((s) => s.key)).size === data.series.length &&
+ Array.isArray(data.details) &&
+ data.details.every((d) => text(d.key) && ['number', 'decimal', 'percent'].includes(d.format)) &&
+ Array.isArray(data.rows) &&
+ validRows(data)
+ );
+}
+
+/** Reject malformed documents instead of quietly rendering misleading charts. */
+export function validateChartDocument(value: unknown): ChartDocument {
+ const data = value as ChartDocument;
+ const meta =
+ !!data &&
+ data.schema_version === 1 &&
+ text(data.unit) &&
+ text(data.population) &&
+ (data.note === undefined || text(data.note)) &&
+ Array.isArray(data.dimensions) &&
+ !!data.window;
+ const valid =
+ meta &&
+ (data.kind === 'matrix'
+ ? validMatrix(data)
+ : data.kind === 'network'
+ ? validNetwork(data)
+ : data.kind === 'events'
+ ? validEvents(data)
+ : (data.kind === 'timeseries' || data.kind === 'categories') && validSeries(data));
+ if (!valid) {
+ throw new Error('The chart dataset is invalid.');
+ }
+ return data;
+}
+
+/** Share requests between cards; failed requests are evicted so Retry really retries. */
+export function fetchChartDocument(path: string): Promise {
+ const cached = cache.get(path);
+ if (cached) return cached;
+ const request = fetch(`${API_ROOT}/${path}`)
+ .then(async (response) => {
+ if (!response.ok) throw new Error(`Chart data: HTTP ${response.status}`);
+ return validateChartDocument(await response.json());
+ })
+ .catch((error: unknown) => {
+ cache.delete(path);
+ throw error;
+ });
+ cache.set(path, request);
+ return request;
+}
diff --git a/web/src/components/AppHeader.tsx b/web/src/components/AppHeader.tsx
new file mode 100644
index 000000000..826125600
--- /dev/null
+++ b/web/src/components/AppHeader.tsx
@@ -0,0 +1,161 @@
+/**
+ * Sticky header: brand, scope (the organisation, plus the page once its title
+ * has scrolled under the header), data freshness, search and theme.
+ */
+import { useState } from 'react';
+import { ChevronRightIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { SidebarTrigger, useSidebar } from '@/components/ui/sidebar';
+import { stamp } from '../format';
+import { useHeaderScroll } from '../hooks/use-header-scroll';
+import { NARROW_HEADER, useMediaQuery } from '../hooks/use-media-query';
+import type { NavModel } from '../nav';
+import type { TocEntry } from '../toc';
+import { ThemeToggle } from './ThemeToggle';
+import { HieroBrand } from './HieroBrand';
+import { NavigationSearch } from './NavigationSearch';
+import { OrgAvatar, OrgSwitcher } from './OrgSwitcher';
+
+function Freshness({ dataAsOf, className }: { dataAsOf: string; className?: string }) {
+ return (
+
+ Data as of
+
+ );
+}
+
+/** Mirrors STALE_AFTER in export/data_api.py: the weekly refresh plus 1.5 days of slack. */
+const STALE_AFTER_HOURS = 132;
+const relative = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+
+/** How old the data is, in words: the words carry the stale state, never the dot alone. */
+export function FreshnessStatus({ dataAsOf, now }: { dataAsOf: string; now?: number }) {
+ // Read once: the age is a summary, not a ticking clock.
+ const [mounted] = useState(() => Date.now());
+ const hours = Math.max(0, ((now ?? mounted) - Date.parse(dataAsOf)) / 3_600_000);
+ const stale = hours > STALE_AFTER_HOURS;
+ const days = Math.round(hours / 24);
+ const summary = stale
+ ? `${days} days old, refresh overdue`
+ : `Updated ${hours < 36 ? relative.format(-Math.round(hours), 'hour') : relative.format(-days, 'day')}`;
+ return (
+
- );
-}
diff --git a/web/src/components/ChartSectionCard.tsx b/web/src/components/ChartSectionCard.tsx
index 5f7cb046c..4e6c5b611 100644
--- a/web/src/components/ChartSectionCard.tsx
+++ b/web/src/components/ChartSectionCard.tsx
@@ -1,105 +1,76 @@
/**
- * One chart section as its own card, mirroring the legacy dashboard: a title
- * and description, then each chart as a figure with variant tabs (All /
- * Active…), optional slideshow navigation, horizontal scroll for wide charts,
- * and a lightbox that reveals the "how to read this" note and step-by-step
- * methodology. The PNGs carry their provenance footer in the image itself.
- *
- * Charts that offer the *same* set of variant labels share one axis, owned by
- * the card: the Organisation-diversity card has three Maintainers/Committers
- * charts, and per-figure tabs let a reader end up comparing a maintainer donut
- * with a committer repo mix while the description promised the tabs switch the
- * view. Charts with any other label set (the period-tabbed cards elsewhere)
- * keep their own tabs, so nothing else changes.
+ * Chart section cards. Charts offering the same variant labels share one card-level
+ * tab row; every selection lives in the URL.
*/
-import { useEffect, useRef, useState } from 'react';
-import { chartUrl, fetchApiText, type ChartSection, type ChartSpec, type Manifest } from '../api';
+import { lazy, Suspense } from 'react';
+import { parseIndex, useUrlIndex, useUrlList } from '../urlState';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { Button } from '@/components/ui/button';
+import { fetchApiText, type ChartSection, type ChartSpec, type Manifest } from '../api';
import { downloadCsvText } from '../csv';
import { usePrintMode } from '../printContext';
-import { ChartLightbox, type LightboxContent } from './ChartLightbox';
import { CopyLinkButton } from './CopyLinkButton';
+import { DownloadButton } from './CsvDownloadButton';
+import { SectionCard } from './SectionCard';
import { VariantTabs } from './VariantTabs';
-/**
- * A chart's variant axis, identified by its ordered label set. Serialised
- * rather than joined so no separator can be confused with a label.
- */
+const InteractiveChart = lazy(() => import('./InteractiveChart'));
+
+/** Hand-flagged charts and wide kinds (heatmaps, networks, timelines) take a full row. */
+const WIDE_KINDS = ['matrix', 'network', 'events'];
+const needsFullRow = (chart: ChartSpec, variant: number) =>
+ Boolean(
+ chart.wide ||
+ chart.full_row ||
+ WIDE_KINDS.includes(chart.variants[variant]?.interactive?.kind ?? ''),
+ );
+
+/** A chart's variant axis: its ordered label set, serialised so no separator can clash. */
const axisOf = (chart: ChartSpec) => JSON.stringify(chart.variants.map((variant) => variant.label));
function Figure({
chart,
- onZoom,
+ stateKey,
slide = false,
stretch = false,
+ lead = false,
axis,
+ provenance,
hidden = false,
}: {
chart: ChartSpec;
- onZoom: (chart: ChartSpec, variant: number) => void;
+ /** URL key for this figure's own tab, so a shared link opens the same variant. */
+ stateKey: string;
+ provenance: Manifest['provenance'];
slide?: boolean;
/** Span the full row even though the chart itself is half-width shaped. */
stretch?: boolean;
+ /** The gallery's lead chart: two rows tall, with the shorter charts stacked beside it. */
+ lead?: boolean;
/** Set when the card owns this chart's axis: it renders one tab row for all
* the charts that share it, so this figure shows none of its own. */
axis?: { index: number; onSelect: (index: number) => void };
+ /** A slideshow's off-screen slide: mounted, so its variant and loaded data survive. */
hidden?: boolean;
}) {
- const printing = usePrintMode();
- const [own, setOwn] = useState(0);
+ const [own, setOwn] = useUrlIndex(stateKey);
const variant = Math.min(axis ? axis.index : own, chart.variants.length - 1);
const active = chart.variants[variant];
- const src = chartUrl(active.file);
- const imageRef = useRef(null);
- const [imageState, setImageState] = useState<{
- src: string;
- status: 'ready' | 'error';
- } | null>(null);
- // Readiness belongs to the selected source: switching variants must never
- // reuse the success or failure of the previous image.
- const imageStatus = imageState?.src === src ? imageState.status : 'loading';
- useEffect(() => {
- if (imageRef.current?.complete && imageRef.current.naturalWidth > 0) {
- setImageState({ src, status: 'ready' });
- }
- }, [src]);
- // A tall/square chart (a heatmap) in a ~340px gallery cell is illegible, but
- // the `wide` scroll-box treatment would shrink it to the box height instead.
- // It gets the full row with natural page flow: the dimensions ship with the
- // variant, so the shape decides — nobody hand-flags heatmaps.
- const tall = Boolean(active.width && active.height && active.width / active.height <= 1.05);
- // Full row without the scroll box: wide-aspect charts with few bars scale to
- // fit; only hand-flagged `wide` charts (many bars) get horizontal scrolling.
- const fullRow = chart.wide || chart.full_row || tall || stretch;
- const img = (
- setImageState({ src, status: 'ready' })}
- onError={() => setImageState({ src, status: 'error' })}
- onClick={() => onZoom(chart, variant)}
- />
- );
+ const fullRow = stretch || needsFullRow(chart, variant);
return (
- {!axis && (
+ {/* Interactive charts render their tabs in their own toolbar. */}
+ {!axis && !active.interactive && (
option.label)}
active={variant}
@@ -107,28 +78,65 @@ function Figure({
ariaLabel={`${chart.title} view`}
/>
)}
- {chart.wide ? (
-
- Chart still loading: {chart.title} ({active.label}). Wait for it to load, then print
- again.
-
+ {/* An interactive chart names itself in its header; the placeholder does not. */}
+ {!active.interactive && (
+
+ {chart.title}
+
)}
-
- {chart.title}
- {printing && ` — ${active.label}`}
-
);
}
@@ -141,22 +149,12 @@ export function ChartSectionCard({
provenance: Manifest['provenance'];
}) {
const printing = usePrintMode();
- const [slide, setSlide] = useState(0);
- const [zoom, setZoom] = useState(null);
- // One selection per shared axis, keyed by its label set.
- const [shared, setShared] = useState>({});
+ // In the URL so Copy link reproduces the view; shared axes as `.tab=,`.
+ const [rawSlide, setSlide] = useUrlIndex(`${section.id}.slide`);
+ const [rawShared, setRawShared] = useUrlList(`${section.id}.tab`);
- const onZoom = (chart: ChartSpec, variant: number) =>
- setZoom({
- src: chartUrl(chart.variants[variant].file),
- alt: chart.title,
- // The tab's own text where it has one: on a role-tabbed chart the
- // chart-level note describes maintainers, and showing it on the
- // Committers tab misdescribes the population the reader is looking at.
- note: chart.variants[variant].note ?? chart.note,
- methodology: chart.variants[variant].methodology ?? chart.methodology,
- });
const count = section.charts.length;
+ const slide = Math.min(rawSlide, count - 1);
// An axis belongs to the card once two charts offer the same labels; a lone
// multi-variant chart keeps its own tabs where they sit, under its caption.
@@ -171,6 +169,18 @@ export function ChartSectionCard({
.filter((chart) => chart.variants.length > 1 && (axisCounts.get(axisOf(chart)) ?? 0) > 1)
.map((chart) => ({ key: axisOf(chart), labels: chart.variants.map((v) => v.label) }))
.filter((axis, index, all) => all.findIndex((other) => other.key === axis.key) === index);
+ const shared: Record = Object.fromEntries(
+ sharedAxes.map((axis, i) => [
+ axis.key,
+ Math.min(parseIndex(rawShared[i]), axis.labels.length - 1),
+ ]),
+ );
+ const setShared = (next: Record) =>
+ setRawShared(
+ sharedAxes.every((axis) => !next[axis.key])
+ ? []
+ : sharedAxes.map((axis) => String(next[axis.key] ?? 0)),
+ );
const axisFor = (chart: ChartSpec) =>
sharedAxes.some((axis) => axis.key === axisOf(chart))
? {
@@ -186,13 +196,14 @@ export function ChartSectionCard({
// stay half — a trailing odd one out at half width reads better than one
// chart rendering huge next to its same-shaped siblings. Variant 0's shape
// decides, keeping the grid stable while variant tabs switch.
- const isFullRow = (chart: ChartSpec) => {
- const first = chart.variants[0];
- const tall = Boolean(first.width && first.height && first.width / first.height <= 1.05);
- return Boolean(chart.wide || chart.full_row || tall);
- };
- const halfCount = section.charts.filter((chart) => !isFullRow(chart)).length;
- const stretched = section.charts.map((chart) => isFullRow(chart) || halfCount === 1);
+ const halfCount = section.charts.filter((chart) => !needsFullRow(chart, 0)).length;
+ const stretched = section.charts.map((chart) => needsFullRow(chart, 0) || halfCount === 1);
+ // An odd count (3+) of half-width charts would strand the last one, so the
+ // first (usually the tallest) spans two rows and the others stack beside it.
+ const leadIndex =
+ halfCount >= 3 && halfCount % 2 === 1
+ ? section.charts.findIndex((chart) => !needsFullRow(chart, 0))
+ : -1;
// A card whose tabs show different populations declares a companion CSV per
// tab; offering one for the whole card would hand a reader on the Committers
@@ -206,36 +217,31 @@ export function ChartSectionCard({
: undefined
: section.download;
return (
-
-
{section.title}
-
-
{section.description}
-
-
-
- {download && (
-
- )}
-
-
-
+ }
+ actions={
+ download && (
+
+ // The chart's companion table, stamped with the provenance
+ // preamble like every other browser download.
+ fetchApiText(download.path).then((text) =>
+ downloadCsvText(
+ download.name,
+ section.title,
+ text,
+ provenance,
+ download.generated_at,
+ ),
+ )
+ }
+ />
+ )
+ }
+ >
{/* One row per shared axis, above the gallery: the card's charts switch
together, so the control belongs to the card and not to each figure. */}
{sharedAxes.map((axis) => (
@@ -248,46 +254,55 @@ export function ChartSectionCard({
/>
))}
{section.slideshow && count > 1 ? (
-
-
-
-
+
+
+
+
{slide + 1} / {count}
-
+
- {/* Keep figures mounted so their chosen variants survive changing
- slides and entering/leaving print mode. All selected chart
- sources load eagerly, including the currently hidden slides. */}
+ {/* Every slide stays mounted, so each keeps its chosen variant across
+ slide changes and print; paper prints them all, in order. */}
{section.charts.map((chart, index) => (
))}
) : (
-
+ // Two columns at most for legibility; items-start stops a short chart
+ // stretching beside a tall neighbour.
+
{section.charts.map((chart, index) => (
))}
)}
- {zoom && setZoom(null)} />}
-
+
);
}
diff --git a/web/src/components/ContributorCell.tsx b/web/src/components/ContributorCell.tsx
new file mode 100644
index 000000000..80c455ee4
--- /dev/null
+++ b/web/src/components/ContributorCell.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+/** A GitHub login with its avatar; initials stand in when the image fails. */
+export function ContributorCell({ login }: { login: string }) {
+ const [failed, setFailed] = useState(false);
+ if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{0,38}(\[bot\])?$/.test(login)) return <>{login};
+ return (
+
+
+ {login.slice(0, 2).toUpperCase()}
+ {!failed && (
+ setFailed(true)}
+ />
+ )}
+
+
+ {login}
+
+
+ );
+}
diff --git a/web/src/components/CopyLinkButton.tsx b/web/src/components/CopyLinkButton.tsx
index e0b1d7acc..b4c6d39f2 100644
--- a/web/src/components/CopyLinkButton.tsx
+++ b/web/src/components/CopyLinkButton.tsx
@@ -4,6 +4,8 @@
* so the click always shows feedback whether successful or not.
*/
import { useEffect, useRef, useState } from 'react';
+import { CheckIcon, LinkIcon, XIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
import { copyText, shareUrl } from '../share';
const TRANSIENT_MS = 1600;
@@ -16,7 +18,16 @@ const LABELS: Record = {
failed: "Couldn't copy",
};
-export function CopyLinkButton({ sectionId }: { sectionId: string }) {
+const ICONS = { idle: LinkIcon, copied: CheckIcon, failed: XIcon } as const;
+
+export function CopyLinkButton({
+ sectionId,
+ quiet = false,
+}: {
+ sectionId: string;
+ /** A ghost button for a card header, where an outlined one competes with the title. */
+ quiet?: boolean;
+}) {
const [status, setStatus] = useState('idle');
const timer = useRef(undefined);
const clickId = useRef(0);
@@ -34,27 +45,21 @@ export function CopyLinkButton({ sectionId }: { sectionId: string }) {
timer.current = window.setTimeout(() => setStatus('idle'), TRANSIENT_MS);
};
+ const Icon = ICONS[status];
return (
-
+
);
}
diff --git a/web/src/components/CoverageMatrix.tsx b/web/src/components/CoverageMatrix.tsx
index d4ca8c8d1..a3898a65b 100644
--- a/web/src/components/CoverageMatrix.tsx
+++ b/web/src/components/CoverageMatrix.tsx
@@ -10,6 +10,8 @@
*/
import { useEffect, useMemo, useRef, useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import type { MatrixRow, MatrixView } from '../api';
import { PRINT_ROW_LIMIT, usePrintMode } from '../printContext';
import type { EvidenceItem } from './EvidencePanel';
@@ -102,27 +104,9 @@ export function CoverageMatrix({
matrix on the dashboard for the complete data.
)}
-
+ {/* Paper can't fit the 14 heat columns, so it gets a four-column table that
+ states each component's merged/open counts. The screen matrix stays
+ mounted (hidden) so its scroll offsets and selection survive. */}
{printing && (
Component PR counts are merged/open; 0/0 means no reference found.
@@ -163,6 +147,32 @@ export function CoverageMatrix({
)}
+
+ setQuery(event.target.value)}
+ />
+
+ Governance:
+ {/* Clicking the active status again reports "", clearing the filter. */}
+
+ {view.filters.map((option) => (
+
+ {option}
+
+ ))}
+
+
+
@@ -247,16 +257,18 @@ export function CoverageMatrix({
-
- fewer
- {/* Keyed off the ramp's *length*, not its colours: the swatches wear the
- same m1–m5 classes as the cells, so both follow the theme together.
- Painting the shipped hex here left the legend light in dark mode. */}
- {view.ramp.map((_shade, index) => (
-
- ))}
- more merged PRs · ○ open PRs only · — no
- reference found
+
+
+ fewer
+ {/* Keyed off the ramp's *length*, not its colours: the swatches share
+ the cells' m1–m5 classes, so both follow the theme. */}
+ {view.ramp.map((_shade, index) => (
+
+ ))}
+ more merged PRs
+
+ ○ open PRs only
+ — no reference found
}
);
}
diff --git a/web/src/components/CsvDownloadButton.tsx b/web/src/components/CsvDownloadButton.tsx
index 2cdfea9d5..5d50841df 100644
--- a/web/src/components/CsvDownloadButton.tsx
+++ b/web/src/components/CsvDownloadButton.tsx
@@ -1,28 +1,42 @@
-/** The "Download CSV" button — builds its payload lazily on click. */
+/** The "Download CSV" button — builds (or fetches) its payload lazily on click. */
+import { DownloadIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
import type { Manifest } from '../api';
import { downloadCsv, type CsvExport } from '../csv';
+/** The button itself, for callers whose download is not a CsvExport (a chart's companion file). */
+export function DownloadButton({
+ onClick,
+ compact = false,
+}: {
+ onClick: () => void;
+ /** Icon-only below the enclosing `@container`'s `lg` width (a narrow chart card). */
+ compact?: boolean;
+}) {
+ return (
+
+ );
+}
+
export function CsvDownloadButton({
payload,
provenance,
+ compact,
}: {
payload: () => CsvExport;
provenance: Manifest['provenance'];
+ compact?: boolean;
}) {
- return (
-
- );
+ return downloadCsv(payload(), provenance)} />;
}
diff --git a/web/src/components/DataTable.tsx b/web/src/components/DataTable.tsx
index 4e3398e1d..ba4b42a3c 100644
--- a/web/src/components/DataTable.tsx
+++ b/web/src/components/DataTable.tsx
@@ -13,27 +13,56 @@
* purely about what reaches the DOM.
*/
-import { useRef } from 'react';
+import { useRef, type ReactNode } from 'react';
import { flexRender } from '@tanstack/react-table';
import { useVirtualizer } from '@tanstack/react-virtual';
-import type { DataTableInstance } from '../useDataTable';
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, SearchIcon, XIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/table';
import { PRINT_ROW_LIMIT, usePrintMode } from '../printContext';
+import type { DataTableInstance } from '../useDataTable';
// Typical rendered height of one row; the virtualiser corrects itself from
// real measurements as rows mount, so this only has to be close.
-const ROW_HEIGHT = 27;
+const ROW_HEIGHT = 49;
+
+/** Text reads left, numbers right in tabular figures so their digits line up. */
+const align = (numeric?: boolean) => (numeric ? 'text-right tabular-nums' : undefined);
+/** On narrow screens the first column stays in view; its cells need an opaque background. */
+const STICKY_FIRST = 'max-md:sticky max-md:left-0 max-md:z-10';
const OVERSCAN = 12;
/** Below this, a table renders whole — the DOM cost is already negligible. */
export const VIRTUALIZE_ABOVE = 100;
-export function DataTable({ table }: { table: DataTableInstance }) {
+export function DataTable({
+ table,
+ controls,
+ actions,
+}: {
+ table: DataTableInstance;
+ /** Beside the search: the switches that choose which rows (a time range). */
+ controls?: ReactNode;
+ /** At the toolbar's end: what a reader does with the rows (download, an external link). */
+ actions?: ReactNode;
+}) {
const printing = usePrintMode();
const scrollRef = useRef(null);
const rows = table.getRowModel().rows;
const globalFilter = (table.state.globalFilter as string) ?? '';
+ // Paper gets real rows, never a virtual window.
const virtualized = !printing && rows.length > VIRTUALIZE_ABOVE;
const virtualizer = useVirtualizer({
- // Pause observation during printing, retaining the measured screen rows and offset.
+ // Observation pauses while printing, keeping the screen measurements and
+ // offset: restoring against the shorter printed table would lose them.
count: rows.length > VIRTUALIZE_ABOVE ? rows.length : 0,
getScrollElement: () => (printing ? null : scrollRef.current),
estimateSize: () => ROW_HEIGHT,
@@ -45,10 +74,10 @@ export function DataTable({ table }: { table: DataTableInstance }) {
virtualized && virtualRows.length
? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
: 0;
- const renderedRows = printing
+ const visibleRows = printing
? [
...rows.slice(0, PRINT_ROW_LIMIT),
- // Retain the screen viewport beyond the cap so its focused links survive printing.
+ // The screen viewport beyond the cap stays mounted (hidden) so its focused links survive.
...virtualRows
.filter((item) => item.index >= PRINT_ROW_LIMIT)
.map((item) => rows[item.index]),
@@ -57,129 +86,193 @@ export function DataTable({ table }: { table: DataTableInstance }) {
? virtualRows.map((item) => rows[item.index])
: rows;
const columnCount = table.getVisibleFlatColumns().length;
+ const total = table.getCoreRowModel().rows.length;
+ const count = (n: number) => n.toLocaleString('en-US');
return (
<>
{printing && globalFilter && (
- Filter: “{globalFilter}”. {rows.length} of {table.options.data.length} rows match; rows
- outside this filter are not printed.
+ Filter: “{globalFilter}”. {count(rows.length)} of {count(total)} rows match; rows outside
+ this filter are not printed.
- Showing {PRINT_ROW_LIMIT} of {rows.length} rows in the current order.{' '}
- {rows.length - PRINT_ROW_LIMIT} rows are not printed. Download CSV from this table on the
- dashboard for the complete selection.
+ Showing {count(PRINT_ROW_LIMIT)} of {count(rows.length)} rows in the current order.{' '}
+ {count(rows.length - PRINT_ROW_LIMIT)} rows are not printed. Download CSV from this table
+ on the dashboard for the complete selection.
);
}
diff --git a/web/src/components/ErrorBoundary.tsx b/web/src/components/ErrorBoundary.tsx
new file mode 100644
index 000000000..3778a3bb1
--- /dev/null
+++ b/web/src/components/ErrorBoundary.tsx
@@ -0,0 +1,103 @@
+/**
+ * Render-error containment. A section that throws — most often from view state in
+ * a hand-edited share link — collapses to a named notice instead of unmounting the
+ * whole app; the root boundary is the last resort for anything outside a section.
+ */
+
+import { Component, type ReactNode } from 'react';
+import { CircleAlertIcon, RotateCwIcon } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { clearParams } from '../urlState';
+
+type Props = {
+ children: ReactNode;
+ /** Renders in place of the children once they throw; `reset` re-renders them. */
+ fallback: (reset: () => void) => ReactNode;
+};
+
+export class ErrorBoundary extends Component {
+ state = { failed: false };
+
+ static getDerivedStateFromError() {
+ return { failed: true };
+ }
+
+ reset = () => this.setState({ failed: false });
+
+ render() {
+ return this.state.failed ? this.props.fallback(this.reset) : this.props.children;
+ }
+}
+
+/** One section's boundary; resetting drops the section's view state from the URL first. */
+export function SectionBoundary({
+ id,
+ title,
+ children,
+}: {
+ id: string;
+ title: string;
+ children: ReactNode;
+}) {
+ return (
+ (
+
+
+ Could not display {title}.
+
+
+ The view saved in this link may be out of date. The rest of the page is unaffected.
+
+
+
+
+ )}
+ >
+ {children}
+
+ );
+}
+
+/** The app-wide boundary: a reload is the only generic recovery left at this level. */
+export function RootBoundary({ children }: { children: ReactNode }) {
+ return (
+ (
+
+
+
+ Something went wrong displaying the dashboard.
+
+
Reloading without the view saved in the link usually fixes it.
+
+
+
+
+ )}
+ >
+ {children}
+
+ );
+}
diff --git a/web/src/components/EvidencePanel.tsx b/web/src/components/EvidencePanel.tsx
index ca69306f5..87d91a4fc 100644
--- a/web/src/components/EvidencePanel.tsx
+++ b/web/src/components/EvidencePanel.tsx
@@ -5,6 +5,9 @@
*/
import { useEffect } from 'react';
+import { XIcon } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
import { usePrintMode } from '../printContext';
import { safeUrl } from '../safety';
@@ -31,6 +34,8 @@ export function EvidencePanel({
onClose: () => void;
}) {
const printing = usePrintMode();
+ // Stays mounted but hidden while printing, and ignores Escape meanwhile, so
+ // an open panel is still open after print/cancel.
useEffect(() => {
if (printing) return;
const onKey = (event: KeyboardEvent) => {
@@ -41,39 +46,49 @@ export function EvidencePanel({
}, [onClose, printing]);
return (
-
);
})}
diff --git a/web/src/components/ExplanationDialog.tsx b/web/src/components/ExplanationDialog.tsx
new file mode 100644
index 000000000..4f4a99901
--- /dev/null
+++ b/web/src/components/ExplanationDialog.tsx
@@ -0,0 +1,67 @@
+/** The explanation behind a headline figure: its "how to read this" note and full methodology. */
+
+import { useRef } from 'react';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { emphasized } from '../markup';
+
+export interface Explanation {
+ title: string;
+ note?: string;
+ methodology?: string[];
+}
+
+export function ExplanationDialog({
+ content,
+ onClose,
+}: {
+ content: Explanation;
+ onClose: () => void;
+}) {
+ const steps = content.methodology ?? [];
+ // Opened from state, not a DialogTrigger, so Radix has nowhere to return focus;
+ // remember the opener ourselves.
+ const returnFocus = useRef(null);
+ return (
+
+ );
+}
diff --git a/web/src/components/FocusBar.tsx b/web/src/components/FocusBar.tsx
new file mode 100644
index 000000000..3c6dbe2be
--- /dev/null
+++ b/web/src/components/FocusBar.tsx
@@ -0,0 +1,34 @@
+/**
+ * States the dashboard focus and how to clear it. Sticky under the header on
+ * wide screens only: on phones the group strip already holds that place.
+ */
+
+import { CrosshairIcon, XIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { DIMENSION_LABELS, useFocus } from '../focus';
+
+export function FocusBar() {
+ const [focus, setFocus] = useFocus();
+ if (!focus) return null;
+ const noun = DIMENSION_LABELS[focus.dimension];
+ return (
+
+
+
+ Focused on {noun} {focus.value}
+
+
+ Tables with a {noun} column are filtered and charts with a {noun} breakdown highlight it;
+ everything else still shows the whole organisation.
+
+
+
+ );
+}
diff --git a/web/src/components/FormattedCell.tsx b/web/src/components/FormattedCell.tsx
index 044cdf74a..93b0af088 100644
--- a/web/src/components/FormattedCell.tsx
+++ b/web/src/components/FormattedCell.tsx
@@ -5,6 +5,7 @@
* switches.
*/
+import { Badge } from '@/components/ui/badge';
import type { ColumnFormat } from '../api';
import { dateStamp } from '../format';
import { safeUrl } from '../safety';
@@ -13,9 +14,16 @@ import { safeUrl } from '../safety';
// keeps snapshots and tests stable across viewer locales.
const NUMBER_FORMAT = new Intl.NumberFormat('en-US');
+type Tone = 'ok' | 'warn' | 'neg' | 'info' | 'neutral';
+
export function FormattedCell({ value, format }: { value: unknown; format?: ColumnFormat }) {
if (value === null || value === undefined || value === '') {
- return null;
+ // An explicit "none", so an empty cell never reads as a rendering fault.
+ return (
+
+ —
+
+ );
}
const text = String(value);
switch (format) {
@@ -25,8 +33,25 @@ export function FormattedCell({ value, format }: { value: unknown; format?: Colu
const numeric = typeof value === 'number' ? value : Number(text);
return <>{Number.isFinite(numeric) ? NUMBER_FORMAT.format(numeric) : text};
}
+ case 'percent': {
+ // A 0–100 share; the bar (fixed 0–100 track) is decoration, the figure carries the value.
+ const numeric = typeof value === 'number' ? value : Number(text);
+ if (!Number.isFinite(numeric)) return <>{text};
+ const width = Math.min(100, Math.max(0, numeric));
+ return (
+
+
+
+
+ {NUMBER_FORMAT.format(numeric)}%
+
+ );
+ }
case 'hip':
- return HIP-{text};
+ return HIP-{text};
case 'date':
// UTC-converted date, full raw timestamp on hover. Conversion, not
// truncation: slicing an offset-bearing value can misreport the day.
@@ -36,7 +61,12 @@ export function FormattedCell({ value, format }: { value: unknown; format?: Colu
// text rather than a clickable link.
const href = safeUrl(text);
return href ? (
-
+
open ↗
) : (
@@ -44,20 +74,19 @@ export function FormattedCell({ value, format }: { value: unknown; format?: Colu
);
}
case 'evidence': {
- const tone =
- text === 'merged' ? 'chip-merged' : text === 'open_only' ? 'chip-open' : 'chip-none';
- return {text.replace('_', ' ')};
+ const tone = text === 'merged' ? 'ok' : text === 'open_only' ? 'warn' : 'neutral';
+ return {text.replace('_', ' ')};
}
case 'status':
- return {text};
+ return {text};
case 'staleness': {
// Matches analysis/releases.py's staleness_bucket values exactly.
- const tone: Record = {
- never_released: 'chip-none',
- overdue: 'chip-overdue',
- watch: 'chip-watch',
- on_pace: 'chip-merged',
- insufficient_history: 'chip-none',
+ const tone: Record = {
+ never_released: 'neutral',
+ overdue: 'neg',
+ watch: 'warn',
+ on_pace: 'ok',
+ insufficient_history: 'neutral',
};
const label: Record = {
never_released: 'never released',
@@ -66,7 +95,7 @@ export function FormattedCell({ value, format }: { value: unknown; format?: Colu
on_pace: 'on pace',
insufficient_history: 'not enough history',
};
- return {label[text] ?? text};
+ return {label[text] ?? text};
}
case 'flag':
return <>{text === 'true' || text === 'True' ? '✓' : '—'};
@@ -74,11 +103,7 @@ export function FormattedCell({ value, format }: { value: unknown; format?: Colu
// A yes/no column: a labelled chip reads at a glance where a bare tick
// leaves the reader decoding an empty-looking cell.
const present = text === 'true' || text === 'True';
- return (
-
- {present ? 'present' : 'missing'}
-
- );
+ return {present ? 'present' : 'missing'};
}
default:
return <>{text};
diff --git a/web/src/components/Glossary.tsx b/web/src/components/Glossary.tsx
index c9a7883c1..83d47261e 100644
--- a/web/src/components/Glossary.tsx
+++ b/web/src/components/Glossary.tsx
@@ -1,42 +1,67 @@
/**
- * The shared "how to read this" column glossary, rendered from the manifest's
- * term/definition data. Definitions may mark emphasis with *asterisks* — the
- * only inline markup the glossary contract allows.
+ * The tab's "how to read this" explainer, folded by default. Definitions may
+ * mark emphasis with *asterisks* — the only inline markup the contract allows.
*/
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
+import { ChevronRightIcon } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import type { Glossary as GlossaryData } from '../api';
import { emphasized } from '../markup';
+import { usePrintMode } from '../printContext';
export function Glossary({ glossary }: { glossary: GlossaryData }) {
- if (glossary.layout === 'notes') {
- // Interpretation notes (e.g. the HIPs tab's HIP-1 reading rules): bolded
- // lead-ins with prose, not the term/definition grid.
- return (
-
- {glossary.title}
-
+ Could not load chart data: {title} ({variant.label}).
+
+
+
+ );
+ return (
+
+
+
+ );
+}
diff --git a/web/src/components/MetricTiles.tsx b/web/src/components/MetricTiles.tsx
index 40f1981ad..5a4fa2566 100644
--- a/web/src/components/MetricTiles.tsx
+++ b/web/src/components/MetricTiles.tsx
@@ -1,53 +1,108 @@
/**
- * The macro's headline tiles.
- *
- * A tile is a single number with no axis and no rows behind it, so it is the
- * easiest figure here to misread. Each one is therefore clickable and opens
- * the same explanation panel a chart does — its "how to read this" note and
- * the steps that produced it.
+ * The tab's headline figures as stat tiles. Shares ("72%") and parts ("26 of 44") also
+ * draw a meter; a tile with an explanation is a button that opens it. The label comes
+ * first in the DOM and is capitalised only by CSS, so the accessible name stays as written.
*/
import { Fragment, useState } from 'react';
+import { InfoIcon } from 'lucide-react';
+import { cn } from 'cn';
import type { MetricTile } from '../api';
+import { readFigure, type Figure } from '../metricFigure';
import { usePrintMode } from '../printContext';
-import { ChartLightbox, type LightboxContent } from './ChartLightbox';
+import { ExplanationDialog, type Explanation } from './ExplanationDialog';
+
+/** "open PRs %" beside "72%" says the unit twice; the figure keeps it. */
+const labelFor = (label: string, figure: Figure) =>
+ figure.kind === 'share' ? label.replace(/\s*%$/, '') : label;
+
+function Value({ figure }: { figure: Figure }) {
+ return (
+ // Proportional figures: tabular digits look loose at display size.
+
+
+ {figure.kind === 'share' || figure.kind === 'part' ? (
+
+ ) : (
+ // The meter's room, kept empty, so every number in a row sits on one line.
+
+ )}
);
- const shell =
- 'metric-tile rounded-[10px] border border-solid border-edge bg-surface px-4 py-3.5 text-left ' +
- 'transition-[border-color,transform,box-shadow] duration-[120ms] motion-reduce:transition-none';
+ // Two columns on a phone: with an odd count the first tile spans the row.
+ const span = tiles.length % 2 === 1 && index === 0 && 'max-[599px]:col-span-2';
+ // Paper has no buttons: an explainable tile prints as a plain tile, and
+ // the button stays mounted (hidden) so focus survives print/cancel.
return explainable ? (
- {printing &&
- {/* Keep the scrolling board mounted so print/cancel preserves its
- scroll and focus, while paper gets an ordinary list per status. */}
+ {/* The scrolling board stays mounted (hidden) so print/cancel keeps its
+ scroll and focus; paper gets an ordinary list per status instead. */}
{printing &&
view.columns.map((column) => (
-
- {column.title} {column.items.length}
+
+ {column.title} {column.items.length}
{column.items.length === 0 &&
None
}
@@ -56,13 +62,24 @@ export function StatusBoard({ view, onJump }: { view: BoardView; onJump: (hip: n
)}
diff --git a/web/src/components/TabBar.tsx b/web/src/components/TabBar.tsx
deleted file mode 100644
index 0421b47b8..000000000
--- a/web/src/components/TabBar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * A row of exclusive tabs. `kind` selects the visual: "macro" is the pill row
- * for top-level sections, "tab" the underlined row for orgs. (Period tabs are
- * not this component — they carry an "All time" null state.)
- */
-
-export function TabBar({
- items,
- active,
- onSelect,
- kind,
-}: {
- items: string[];
- active: string;
- onSelect: (item: string) => void;
- kind: 'macro' | 'tab';
-}) {
- return (
-
- );
-}
diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx
new file mode 100644
index 000000000..bd6ab4f29
--- /dev/null
+++ b/web/src/components/ThemeToggle.tsx
@@ -0,0 +1,49 @@
+/**
+ * System / light / dark switch; theme.ts applies and persists the choice. A
+ * ToggleGroup rather than a dropdown, which would add about 10 kB gzipped.
+ */
+
+import { useState } from 'react';
+import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { applyTheme, readTheme, type ThemeChoice } from '../theme';
+
+const OPTIONS = [
+ { value: 'system', label: 'System', Icon: MonitorIcon },
+ { value: 'light', label: 'Light', Icon: SunIcon },
+ { value: 'dark', label: 'Dark', Icon: MoonIcon },
+] as const;
+
+export function ThemeToggle() {
+ const [choice, setChoice] = useState(readTheme);
+
+ return (
+ {
+ // Radix reports "" when the active item is clicked again; keep the choice.
+ if (!value) return;
+ applyTheme(value as ThemeChoice);
+ setChoice(value as ThemeChoice);
+ }}
+ >
+ {OPTIONS.map(({ value, label, Icon }) => (
+
+
+
+ ))}
+
+ );
+}
diff --git a/web/src/components/VariantTabs.tsx b/web/src/components/VariantTabs.tsx
index 8bd7fe4fc..75899af50 100644
--- a/web/src/components/VariantTabs.tsx
+++ b/web/src/components/VariantTabs.tsx
@@ -1,15 +1,12 @@
/**
- * A row of exclusive variant tabs, in the existing `.charttabs` / `.ctab`
- * vocabulary. Used for a chart's own tabs, for a card's shared role axis, and
- * for a table's role tabs — one component so the three cannot drift into three
- * tab styles.
- *
- * Deliberately *not* `PeriodTabs`: that carries an "All time" null state, which
- * a role axis has no equivalent of (there is no "all roles" table). Keeping the
- * two visually distinct is also what lets a reader tell the axes apart on a
- * table that has both.
+ * Exclusive variant switches for chart tabs, a card's shared role axis and table role tabs.
+ * A single-select ToggleGroup rather than Tabs: the choice swaps data inside one card.
+ * Separate from `PeriodTabs`, whose "All time" null state has no role-axis equivalent.
*/
+import type { ReactNode } from 'react';
+import { cn } from 'cn';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { usePrintMode } from '../printContext';
export function VariantTabs({
@@ -17,42 +14,83 @@ export function VariantTabs({
active,
onSelect,
ariaLabel,
+ appearance = 'outline',
+ icons,
+ className,
+ printSelection = true,
}: {
labels: string[];
active: number;
onSelect: (index: number) => void;
ariaLabel: string;
+ /** `outline` for card and table axes; `segmented` (one muted track) for chart toolbars. */
+ appearance?: 'outline' | 'segmented';
+ /** Draw these instead of labels; each label stays the accessible name and tooltip. */
+ icons?: ReactNode[];
+ className?: string;
+ /** State the choice in words on paper; off where the printed view shows it anyway. */
+ printSelection?: boolean;
}) {
const printing = usePrintMode();
if (labels.length < 2) {
return null;
}
+ // Paper states the selection in words; the control stays mounted (hidden) so
+ // focus and the choice survive print/cancel.
+ const selection = printing && printSelection && (
+
}?s=64`})
setFailed(true)}
+ />
+ )}
+ 
setImageState({ src, status: 'ready' })}
- onError={() => setImageState({ src, status: 'error' })}
- onClick={() => onZoom(chart, variant)}
- />
- );
+ const fullRow = stretch || needsFullRow(chart, variant);
return (
event.stopPropagation()} />
- ) : (
- 
+ 
+ {!compact && (
+
+ )}
+
+ );
+}
diff --git a/web/src/components/InteractiveChart.tsx b/web/src/components/InteractiveChart.tsx
new file mode 100644
index 000000000..daf298de9
--- /dev/null
+++ b/web/src/components/InteractiveChart.tsx
@@ -0,0 +1,126 @@
+/**
+ * Loads one exported `ChartDocument` (export/chart_data.py) and renders the view
+ * for its kind. A failed load offers Retry; chart images are never substituted.
+ */
+
+import { useEffect, useState } from 'react';
+import { RotateCwIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ChartDocument, ChartVariant, Manifest } from '../api';
+import { fetchChartDocument } from '../chartData';
+import { EventsView } from './charts/EventsView';
+import { MatrixView } from './charts/MatrixView';
+import { NetworkView } from './charts/NetworkView';
+import { SeriesView } from './charts/SeriesView';
+import { ChartLeading } from './charts/leading';
+
+function View({
+ data,
+ ...props
+}: {
+ data: ChartDocument;
+ title: string;
+ period: string;
+ provenance: Manifest['provenance'];
+ roomy?: boolean;
+}) {
+ switch (data.kind) {
+ case 'matrix':
+ return