[malibio]

Decision (#2717)

Heading hierarchy is typographic. Header nodes keep the circle indicator (the square H-badge DESIGN.md described was never implemented and is dropped); level is carried by a restrained type scale plus the visible # syntax in edit mode.

Changes

• header-node.svelte / node-row.svelte (duplicated sizes for icon/chevron positioning): H1 2→1.5rem, H2 1.5→1.25rem, H3 1.25→1.125rem, H4–H6 → 1rem (H6 was 0.875rem, below body). Weight bold→600. H1–H3 line-height 1.3, H4–H6 1.4.
• DESIGN.md updated on nodespace-docs main (3bce7f9): badge claims removed, heading-4 (H4–H6) row added, ceiling rule extended to "no heading below body".

Notes

• Pre-existing flake unrelated to this change: pro-sync-settings-refresh.test.ts hook timeout (5000ms) under full-suite load; passes in isolation.
• Not visually verified in the running app.

🤖 Generated with Claude Code

[malibio]

Pragmatic Code Review — PR #3044

Review Type: Initial Review — CSS-only, 2 files (header-node.svelte, node-row.svelte), −57/+30

Requirements Check (#2717 decision)

• ✅ Circle indicator kept, no badges
• ✅ H1 1.5rem / lh 1.3 · H2 1.25rem / 1.3 · H3 1.125rem / 1.3
• ✅ H4–H6 1rem / lh 1.4 (grouped selectors in both files)
• ✅ Weight 600 throughout (was bold)
• ✅ No heading below body (H6 was 0.875rem)
• ✅ DESIGN.md (nodespace-docs 3bce7f9) matches the code exactly
• ⚠️ All hardcoded copies of the scale updated — not met, see 🟡 Set up Tauri + Svelte project structure #1

The two edited files agree on every font-size / line-height / --icon-vertical-position triple, and the icon-centering math (0.25rem + size × lh / 2) is recomputed correctly. No tests assert header font sizes.

Code Review Findings

🟡 Important: Third copy of the old heading scale left stale

📁 packages/desktop-app/src/lib/components/node-tree.svelte:235-270

.ns-node-tree :global(.header-h1..h6) still sets the old values (H1 2rem/1.2 … H6 0.875rem). Its comment claims it "matches HeaderNode wrapper classes". NodeTree appears to be dead code: its only reference is the re-export in src/lib/components/index.ts:8. Fix: delete the component + export (preferred per CLAUDE.md "delete unused code"), or at least sync the values.
Principle: single source of truth. Duplicated constants drift, and this PR updated 2 of 3 copies.

🟡 Important: Scale duplicated between header-node and node-row

📁 header-node.svelte:152-201 / node-row.svelte:292-316

Both files hardcode the same triples. That duplication is what let the NodeTree copy drift. It pre-dates this PR, and the PR reduces it. Suggest a follow-up: --heading-{1..4}-size/-lh tokens in app.css, consumed by both files, with icon position derived from them.
Principle: DRY for design tokens.

🟢 Suggestion: Empty-header min-height: 1.5rem is below the H1/H2 line box

📁 header-node.svelte:204-212

An empty H1 line box is 1.95rem and an empty H2 is 1.625rem, so the row grows slightly on the first keystroke. This pre-exists and is now smaller than before. Optional fix: min-height: calc(var(--font-size) * var(--line-height)).

🟢 Suggestion: H4–H6 icon offset vs. plain text

📁 header-node.svelte:193, node-row.svelte:315

H4–H6 compute to 0.95rem; text nodes use app.css:134 (0.25rem + size × 0.75 = 1.0rem). The ~0.8px difference is sub-pixel noise, and it's the same as the old H5.

🟢 Positive

The new comment explains intent rather than mechanics, grouping H4–H6 removes real duplication, and the docs and code are in sync.

Process note: this change is entirely visual and hasn't been verified in the app. A quick screenshot of H1–H6 next to a text node before merge would settle both nits.

Recommendation: COMMENT. Approve once the NodeTree copy is handled; the token refactor can be a follow-up.

[malibio]

Automated pragmatic-code-review: COMMENT — approve once the stale NodeTree heading-scale copy is handled. Full findings in the review comment above.

[malibio]

Review addressed (ee4ea2d)

• ✅ 🟡 Stale NodeTree copy: deleted node-tree.svelte and its barrel re-export. It was never imported anywhere, so the component was dead code.
• ✅ 🟢 Empty-header min-height: now calc(var(--font-size) * var(--line-height)), so an empty row matches its level's line height.
• ⏭️ 🟡 Shared heading tokens: out of scope for this PR; filed as Single-source the heading type scale as CSS tokens #3046.
• ⏭️ 🟢 H4–H6 icon offset: about 0.8px and unchanged from the old H5, so not worth a change.

desktop-app quality:fix is clean (0 errors), and the header/node-row tests pass (108/108).

Re-review: not needed. The changes delete unused code and make a one-line CSS change.