Files
404-Layers/src/ui/RulesPanel.module.css
ncode 6d1f219e8a Phase 2: Find and Rules
Both tabs were rendering Explore. They now take the whole screen, as the
reference does by hiding the unit on each: a list or a page of prose
wants the room more than the panel does. Picking a search result jumps
to Explore with that combo lit, which is the reference's data-go.

The rules text is extracted verbatim rather than retyped or reworded.
Two bugs on the way there, both worth recording:

- RULES is a template literal that itself contains template literals
  inside a ${} interpolation, so the bracket scanner used for the combo
  table stops at the first inner backtick. The nine title and body pairs
  are matched out of the source instead, with a count assertion so drift
  fails loudly rather than silently dropping a rule.
- PADMAP was read with g() but never added to the list of declarations
  evaluated into the vm, so it was simply not in scope.

The extractor now asserts 9 rules and 4 pad-map rows alongside the 159
combos.

141 tests, typecheck clean. Both tabs verified by rendering them, Find
with a seeded query since headless Firefox cannot type.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-17 10:49:50 +03:00

89 lines
1.3 KiB
CSS

/* Takes the space the panel would use, and scrolls. */
.rules {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 4px;
}
.map {
background: var(--card);
border: var(--outline);
box-shadow: var(--shadow-sm);
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mapHead {
margin: 0;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.12em;
color: var(--muted);
}
.mapRow {
display: flex;
flex-direction: column;
gap: 3px;
}
.mapLabel {
margin: 0;
font-family: var(--mono);
font-size: 8.5px;
letter-spacing: 0.06em;
color: var(--muted);
}
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
}
.cell {
background: var(--page);
border: 1px solid var(--rule);
padding: 4px 5px;
font-size: 9.5px;
line-height: 1.15;
min-width: 0;
overflow: hidden;
}
.cellNum {
display: block;
font-family: var(--mono);
font-size: 11px;
color: var(--accent);
}
.rule {
background: var(--card);
border: var(--outline);
box-shadow: var(--shadow-sm);
padding: 8px 10px;
}
.title {
margin: 0 0 3px;
font-size: 13.5px;
font-weight: 700;
line-height: 1.15;
}
.body {
margin: 0;
font-size: 12px;
line-height: 1.35;
color: var(--muted);
text-wrap: pretty;
}