The map's empty state and list sections draw §5's empty and stack, and .map-empty, .map-list leave the markup #4336

The map's empty state, "Ready now", "Blocked on" and "By pillar" now use §5 components, and no map-empty or map-list class is left in the page's HTML. The page tests and the design checks pass. bun x tsc --noEmit could not run: the sandbox has no @types/bun, so it stops at TS2688 with or without my change. It reported no errors in pages/map.ts or the map tests.

What changed (src/web/pages/map.ts)

• Empty state: it is empty() (.card.empty) with the map icon, a title and a note. drawMap takes empty?: MapEmpty ({ title, note, action? }) in place of the old emptyHtml. The studio's version keeps its "Say one" link to #tell as the single btn action.
• Lanes: I added one rule, #lanes details > .card.empty, so the lanes' <details> shows its border once.
• "Ready now" and "Blocked on": each is an <h2> and a card() of row()s in a ul.list.setting-list. Every row links to its issue and keeps the "#N · …" meta line. .setting-list makes long titles wrap instead of being cut off.
• "By pillar": the same card of rows, still id="map-pillars". Each pillar's name is a link (class .break) to its milestone or label list. The counts and the ask-to-live line with its slowest-issue link sit in the row's meta line. The "no pillar" row puts its #N issue links in the trail. Rows keep their data-pillar hooks.
• Layout: the sections are stack-tight, and the aside is stack, which replaces the old .map-list + .map-list spacing.

Tests

• Added: test/map.test.ts and test/pillars.test.ts now assert that the old class names are absent from class= attributes. Matching class= matters because the page inlines the stylesheet, which still names them. They also assert that the words, links, data-pillar and id="map-pillars" are present. A new drawMap test covers the empty card.
• Edited, and the old test was too tight: the "no pillar" assertion in test/pillars.test.ts no longer expects <b>no pillar</b>, because the name is now a row title. test/studio-words.test.ts now expects "No issues to map yet" without the final period, since that sentence is now the empty state's title.

Left out, as the issue says

• The stylesheet rules and docs/DESIGN.md are untouched; that is part two.
• .map-counts, .map-tools and .map-pillars stay for #4238, and so does .map-ask.

Known trade-off: a row's title and meta wrap (via .setting-list) rather than truncate, so the pillar rows are slightly taller than before. I could not check this visually because the sandbox has no browser.

To try it: open /<owner>/<repo>/map on the preview. An app with no issues shows the empty card. The aside shows "By pillar", "Ready now" and "Blocked on" as cards of rows.

Closes #4292

The map's empty state, "Ready now", "Blocked on" and "By pillar" now use §5 components, and no map-empty or map-list class is left in the page's HTML. The page tests and the design checks pass. bun x tsc --noEmit could not run: the sandbox has no @types/bun, so it stops at TS2688 with or without my change. It reported no errors in pages/map.ts or the map tests.

What changed (src/web/pages/map.ts)

• Empty state: it is empty() (.card.empty) with the map icon, a title and a note. drawMap takes empty?: MapEmpty ({ title, note, action? }) in place of the old emptyHtml. The studio's version keeps its "Say one" link to #tell as the single btn action.
• Lanes: I added one rule, #lanes details > .card.empty, so the lanes' <details> shows its border once.
• "Ready now" and "Blocked on": each is an <h2> and a card() of row()s in a ul.list.setting-list. Every row links to its issue and keeps the "#N · …" meta line. .setting-list makes long titles wrap instead of being cut off.
• "By pillar": the same card of rows, still id="map-pillars". Each pillar's name is a link (class .break) to its milestone or label list. The counts and the ask-to-live line with its slowest-issue link sit in the row's meta line. The "no pillar" row puts its #N issue links in the trail. Rows keep their data-pillar hooks.
• Layout: the sections are stack-tight, and the aside is stack, which replaces the old .map-list + .map-list spacing.

Tests

• Added: test/map.test.ts and test/pillars.test.ts now assert that the old class names are absent from class= attributes. Matching class= matters because the page inlines the stylesheet, which still names them. They also assert that the words, links, data-pillar and id="map-pillars" are present. A new drawMap test covers the empty card.
• Edited, and the old test was too tight: the "no pillar" assertion in test/pillars.test.ts no longer expects <b>no pillar</b>, because the name is now a row title. test/studio-words.test.ts now expects "No issues to map yet" without the final period, since that sentence is now the empty state's title.

Left out, as the issue says

• The stylesheet rules and docs/DESIGN.md are untouched; that is part two.
• .map-counts, .map-tools and .map-pillars stay for #4238, and so does .map-ask.

Known trade-off: a row's title and meta wrap (via .setting-list) rather than truncate, so the pillar rows are slightly taller than before. I could not check this visually because the sandbox has no browser.

To try it: open /<owner>/<repo>/map on the preview. An app with no issues shows the empty card. The aside shows "By pillar", "Ready now" and "Blocked on" as cards of rows.

The map's empty state and its list sections now use §5 components, and .map-empty and .map-list no longer appear in the page's HTML. The earlier check failure was a type error in my new empty-state test. It passed action: undefined, which exactOptionalPropertyTypes rejects, and I dropped that property. tsc --noEmit is clean now and test/map.test.ts passes. I did not re-run bun test on the other map and pillar test files after that one-line fix, and I have not seen the forge's check on the new push.

• Empty state: it is empty() (.card.empty) with the map icon, a title and a note. The studio's version keeps its "Say one" link to #tell as the single btn action. The lanes' <details> shows its border once, through one added #lanes details > .card.empty rule.
• "Ready now" and "Blocked on": each is an <h2> over a card() of row()s in a ul.list.setting-list. Every row links to its issue and keeps its "#N · …" meta line. .setting-list makes long titles wrap rather than truncate, so rows can be slightly taller than before.
• "By pillar": the same card of rows, still id="map-pillars" with data-pillar on each row. Each pillar name is a .break link to its milestone or label list. The counts and the ask-to-live line sit in the row's meta line. The "no pillar" row keeps its issue links in the row's trail.
• Tests:

- test/map.test.ts and test/pillars.test.ts assert the old class names are absent from class= attributes, and that the words, links, data-pillar and id="map-pillars" are present. - A new test covers the empty card. - Two existing assertions changed because the markup changed. test/pillars.test.ts no longer expects <b>no pillar</b>, since the name is now a row title. test/studio-words.test.ts now expects "No issues to map yet" without the final period, since the sentence became the card's title.

• Left out, as the issue says:

- The stylesheet rules and docs/DESIGN.md are untouched; that is part two. - .map-counts, .map-tools and .map-pillars stay for #4238, and so does .map-ask.

To try it, open /<owner>/<repo>/map on the preview. An app with no issues shows the empty card. An app with issues shows the three cards beside the drawing.

The By pillar rows now keep the standard .list look. I removed the .map-pillars ul rule, so the grid gap and the 14px font no longer apply to the card's row list. tsc, bun scripts/design-lint.ts and the pillars, map and design tests pass; I didn't re-run the rest of the suite, and I haven't seen the forge's check on this push.

• .map-ask: it is now display: inline instead of block, so the ask-to-live line stays on the row's one meta line instead of breaking onto its own.
• .map-pillars: the section still wears this class, and the design check fails if no rule defines it. I left it a harmless min-width: 0 for part two to delete along with the docs entry.
• Test: test/pillars.test.ts now fails if a .map-pillars ul rule comes back, or if .map-ask stops being inline.

The .map-pillars ul change is a small step past the issue's "leave the stylesheet to part two". I did it because that rule was restyling the new markup.

I merged main into the branch, resolved the two conflicts, and pushed. bun x tsc --noEmit is clean and test/pillars.test.ts and test/map.test.ts pass (26 tests). bun scripts/design-lint.ts is clean once I removed .map-pillars from docs/DESIGN.md §5d. I did not run the full suite; the forge's check does that on the push.

• src/web/pages/map.ts: main (#4330) took the class off the pillar section and drew each row's counts as §5's badge in the row's trail. This branch had wrapped the section in card. I kept the card and the id="map-pillars" hook, and took the badge trail. The section is now <section class="stack-tight" id="map-pillars">, with no .map-pillars rules left. The ask-to-live line stays inline on the row's meta line.
• test/pillars.test.ts: I kept this branch's assertions that no .map-list or .map-empty class is left in the markup. I added main's checks for the "no pillar" row title and the badge text, "3 open · 2 ready · 1 blocked".
• docs/DESIGN.md: I struck .map-pillars from the pages/map.ts class list, which the design lint asked for.