Density
Proves all four density entry points stay in lockstep across runtimes. Each tree's readout pairs the model's resolved itemHeight and density factor with the live getComputedStyle values of --trees-item-height and --trees-density-override on the host. Mismatches turn red.
Keyword presets — vanilla SSR + hydrate
vanilla / compact
Hydrated from preloadFileTree({ density: 'compact' }). Expected itemHeight 24px, factor 0.8.
vanilla / default
Hydrated from preloadFileTree({ density: 'default' }). Expected itemHeight 30px, factor 1.
vanilla / relaxed
Hydrated from preloadFileTree({ density: 'relaxed' }). Expected itemHeight 36px, factor 1.2.
Keyword presets — React CSR (no SSR payload)
react / compact
useFileTree({ density: 'compact' }) with no preloadedData. Expected itemHeight 24px, factor 0.8.
react / default
useFileTree({ density: 'default' }) with no preloadedData. Expected itemHeight 30px, factor 1.
react / relaxed
useFileTree({ density: 'relaxed' }) with no preloadedData. Expected itemHeight 36px, factor 1.2.
Custom densities — vanilla SSR + hydrate
numeric / 0.65
density: 0.65 (no itemHeight). Resolves to the default 30px row height with a custom spacing factor.
relaxed / itemHeight 44px
density: 'relaxed' with itemHeight: 44. Explicit itemHeight wins over the preset row height; factor stays at the preset value.
Custom densities — React CSR with live controls
useFileTree({ density, itemHeight })
Drag the sliders to dial any factor and any row height. The tree remounts on each change so the model picks up the new options; the readout below should always match the slider values.