Edward Langley
301a74821a
`GridCache::row_labels`/`col_labels` were `Vec<String>` built by `GridLayout::row_label`, which slash-joins a multi-level tuple — the exact rendering `two_row_categories_produce_cross_product_labels` asserts must not appear. So the protocol carried a form of the labels the TUI itself considered wrong, and `improvise-wasm-client/src/render.rs` drew precisely that form: the browser showed `Food/Alice` where the TUI showed two header columns, with no groups and no collapse indicators (gotcha 44). Both fields become one `AxisFrame` per axis, carrying the five facts gotcha 44 enumerates: the categories (hence the header levels), the label *tuples* and the inline group headers, the group a position sits in, and each group's collapse state. `record_col` stays off — session-local, keys pending drill edits, correct to keep off. It is one type and not a `row_levels` beside `row_labels`, because two answers to "what are the labels" is the disease (improvise-edp). The rules that used to be written twice are methods on it and are now called from both front ends: `shows_level` (repeat suppression, improvise-jjx's fix), `group_of`, `body_from`, and `header_widths` — the row-header width rule, which existed twice already, inline in `render_grid` and again in `viewport::compute_row_header_width` (improvise-1125). `GridWidget` loses its `&View`: nothing in it reads the view any more. Evidence. `the_whole_frame_is_unchanged` — the exact-buffer characterization over a grid with row groups, column groups, a page axis, multi-level headers and a total row — passes byte for byte, so the TUI is unchanged. The new `tests/grid_frame_agreement.rs` drives the widget into a ratatui buffer and the browser client through a `Snapshot` of the *same* cache, and compares what each draws; re-introducing the slash-join on either side was injected and watched to fail before the test was kept. `tests/web_demo_model.rs::the_web_demo_has_one_category_per_visible_axis` is deleted: it guarded the gap this closes, and a consolidation that keeps its compatibility test is unfinished. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
175 lines
2.8 KiB
CSS
175 lines
2.8 KiB
CSS
/* Legibility only. Styling the browser client properly is not improvise-cr3. */
|
|
|
|
:root {
|
|
--bg: #fbfaf7;
|
|
--fg: #1c1b19;
|
|
--line: #d8d4cc;
|
|
--accent: #2f6f4f;
|
|
--selected: #e8e2d4;
|
|
--error: #a8322d;
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #17181a;
|
|
--fg: #e7e4de;
|
|
--line: #35373b;
|
|
--accent: #7fc4a0;
|
|
--selected: #2c2f33;
|
|
--error: #e2827c;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: baseline;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
#mode {
|
|
color: var(--accent);
|
|
}
|
|
|
|
#status {
|
|
margin-left: auto;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
}
|
|
|
|
#categories {
|
|
width: 15rem;
|
|
flex: none;
|
|
overflow: auto;
|
|
padding: 0.5rem;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
#categories ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#categories .item {
|
|
padding-left: 1.5rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
#categories .selected,
|
|
td.selected {
|
|
background: var(--selected);
|
|
outline: 1px solid var(--accent);
|
|
}
|
|
|
|
#hint {
|
|
opacity: 0.7;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* A keyboard edit in progress. Left-aligned even in a numeric column,
|
|
because what is drawn is the text being typed rather than a value. */
|
|
td.typing {
|
|
text-align: left;
|
|
outline: 2px solid var(--accent);
|
|
}
|
|
|
|
#grid {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid var(--line);
|
|
padding: 0.25rem 0.5rem;
|
|
min-width: 6rem;
|
|
height: 1.75rem;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
th {
|
|
background: color-mix(in srgb, var(--line) 35%, transparent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* A group header, on either axis. The TUI draws these green and bold; the
|
|
glyph is already in the text (`indicator` in app.js). */
|
|
th.group {
|
|
color: var(--accent, inherit);
|
|
font-weight: 700;
|
|
}
|
|
|
|
td.numeric {
|
|
text-align: right;
|
|
}
|
|
|
|
td.error {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* The only affordance that matters: a cell the server said is settable. */
|
|
td.editable {
|
|
cursor: text;
|
|
}
|
|
|
|
td:not(.editable) {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
td input {
|
|
width: 100%;
|
|
border: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
background: transparent;
|
|
}
|
|
|
|
/* The page cannot reach a server from a static host, and says so. */
|
|
#backend-notice {
|
|
margin: 0;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
#backend-notice code {
|
|
background: color-mix(in srgb, var(--line) 45%, transparent);
|
|
padding: 0 0.25rem;
|
|
}
|