ltk: introduce viewport-relative Length so any size, padding, spacing or font height can scale with the surface instead of being frozen at a px constant, fix text::preferred_size to honour the font-declared line gap, and add a responsive typographic scale

The motivating bug was a lockscreen in a downstream app (eydos-loginmanager) where the clock at 87 px overlapped the date at 24 px on a Pinephone but not on a winit dev screen. The root cause split in two: the layout was wired with a single `f32` spacing constant that worked at the dev resolution and broke at the smaller one, and `text::Text::preferred_size` was returning `ascent - descent` for the line height — fontdue's terminology for "the minimum bounding box of an unaccented line", which deliberately drops the `line_gap` that every typographic renderer (Pango, CoreText, DirectWrite) reserves between adjacent rows. At Sora's 200/em line gap, an 87 px row was visually 17 px taller than the rect the column allocated for it; stacked tight against the row above, the descenders bled into the row below. This commit fixes both halves at the toolkit level so every consumer benefits without bolting on a per-screen `Sizing` helper in their own view code.
`types::Length` (with the `LengthBase` enum behind it) is the new currency for any "how big" or "how far apart" parameter. Six variants — `Px`, `Vw`, `Vh`, `Vmin`, `Vmax`, `Em` — cover the cases a real UI hits: absolute pixels for fixed-chrome decisions, viewport-relative percentages for sizes that have to survive a portrait/landscape rotation, and root-font-size multiples for typographic hierarchy. Optional `min_px` / `max_px` bounds attach to the same `Length` value via `.clamp( lo, hi )` (both ends), `.at_least( lo )` and `.at_most( hi )` (one-sided); the names are intentionally divergent from `f32::min`/`f32::max` to avoid being read with the opposite semantics (`x.min(24)` in std means "the smaller of x and 24", which is the inverse of what a min bound expresses). The bounds are stored as raw `f32` rather than nested `Length` values, which keeps `Length` `Copy` and avoids a `Box` allocation per widget per frame — the bounded-by-relative case (`Vmin(20).clamp(Vmin(10), Vmin(40))`) is rare enough that the trade is the right one. `From<f32>`, `From<i32>` and `From<u32>` are implemented so every legacy `.size( 24.0 )` / `.padding( 8.0 )` / `.spacing( 4.0 )` call keeps compiling unchanged; the migration is opt-in per call site. The `EM_BASE_DEFAULT = 16.0` constant matches `theme::typography::BODY` so `Length::em( 2.0 )` resolves consistently with the body-text default; a future change can thread a theme-supplied em base through without breaking the resolver shape.
The resolver — `Length::resolve( viewport: ( f32, f32 ), em_base: f32 ) -> f32` — runs at layout time against a viewport supplied by the renderer. `Canvas::viewport_logical()` is the new helper that exposes that viewport: it divides the canvas's physical size by `dpi_scale` and falls back to physical size when `dpi_scale <= 0.0`, guarding the misconfigured-canvas path so a Vmin call doesn't poison every downstream measurement with `NaN` or `inf`. The viewport is in **logical** pixels — matching what every wayland `xdg_toplevel.configure` event already hands the client — so `Length::vmin( 18.0 )` on a 360×720-logical Librem 5 portrait surface resolves to 64.8 px and the same expression on a 1600×900 dev screen resolves to 162 px, automatically.
Every widget setter that took an `f32` size, padding, spacing, max-width, or fixed dimension now takes `impl Into<Length>` and stores the value as `Length`:
- `widget::text::Text::size( impl Into<Length> )`; the `size` field is now `Length`. `Text::resolved_size( &Canvas )` is the internal accessor that every measurement / drawing path routes through, so the field can stay `Length` without churning the call sites. `preferred_size` and `draw` now read `new_line_size = ascent - descent + line_gap` from fontdue's `LineMetrics` (the fix for the original bug) — the baseline placement is unchanged, only the row height grows by the font's declared leading, which is what every stacked layout was implicitly relying on.
- `layout::Spacer::height( impl Into<Length> )` / `.width( impl Into<Length> )`; `fixed_height` / `fixed_width` are now `Option<Length>`. New `resolved_height( &Canvas )` / `resolved_width( &Canvas )` helpers replace the direct `s.fixed_height.unwrap_or( 0.0 )` reads in `layout::column`, `layout::row` and `layout::stack`. `Spacer::preferred_size` grows a `&Canvas` parameter for the same reason; `Element::preferred_size` passes the canvas through.
- `layout::Column::spacing` / `.padding` / `.max_width`, `layout::Row::spacing` / `.padding` — all take `impl Into<Length>` and store `Length`. Internal `resolved_spacing( &Canvas )`, `resolved_padding( &Canvas )`, `resolved_max_width( &Canvas )` helpers funnel every read, so the layout code paths stay readable. The column's `inner_w` private helper picks up a `&Canvas` argument; the test that used it directly is updated.
`theme::typography` keeps its historic `f32` constants (`H0`…`BODY_XS`, plus `LINE_HEIGHT`) so the migration is gradual, and adds a parallel responsive scale exposed as functions returning `Length`: `h0()`, `h1()`, `h2()`, `h3()`, `body()`, `body_s()`, `body_xs()`. Each is a `Length::vmin( pct ).clamp( min_px, max_px )` whose percentage is calibrated against a 1000-px smaller side reproducing the legacy px constant exactly, and whose px clamps protect both ends of the spectrum — a 360-px Pinephone hits the lower clamp on the larger headings, a 4K desktop hits the upper one. The tests in `theme::typography` exercise all three regimes (narrow phone, calibration point, large display) so future drift in the percentages or clamps is caught immediately.
`Canvas::viewport_logical` is the only render-surface API touched. None of the existing per-frame paths (`draw_text`, `measure_text`, `font_line_metrics`) change shape, so backends and external embedders aren't disturbed. The `dpi_scale` accessor already existed; this commit only adds the convenience that ratios it against the surface size to return the unit layout actually wants.
Test coverage rounds out the addition rather than just smoke-testing the happy path: 22 new tests, broken down as `types::length_tests` (7 — every variant, clamp with relative value, clamp with swapped bounds, `From<f32>`), `render::viewport_tests` (3 — scale 1, scale 2, scale 0 fallback), `theme::typography::tests` (3 — phone-clamped, calibrated, 4K-clamped), `layout::spacer::tests` (4 — px height, vmin height, vw width, flex spacer reports `None`), `layout::column::tests` (3 new — vmin spacing accumulates, vmin padding, vmin max-width caps inner-w), `layout::row::tests` (2 new — vmin padding, vmin spacing produces correct visible gap between non-flex children regardless of the row's centering anchor), and `widget::text::tests` (3 updated/new — defaults compare against `Length::px(16.0)`, `.size( f32 )` and `.size( Length )` both verified). The existing integration test in `tests/layout_stack_spacer.rs` is updated to call `Spacer::preferred_size( &canvas )` and compare `fixed_height` / `fixed_width` against `Some( Length::px( n ) )`.
Documentation is updated end-to-end so the new API is discoverable from `cargo doc` without grepping the source: `lib.rs` gets a new entry for `Length` under the **Types** section and a new **Designing for multiple resolutions** section that lists the three patterns (relative `Length` for sizing, responsive typography for hierarchy, `view()`-level branching on surface dimensions only when the structure itself must change). `Canvas::viewport_logical` ships with a runnable `assert_eq!` example covering the scale-2 case. The module-level docstrings for `Spacer`, `Column` and `Row` now show both an `f32` example (legacy, still valid) and a `Length::vmin( ... ).clamp( ... )` example for the responsive variant — `cargo doc` renders both side by side so the upgrade path is obvious.
Out of scope for this commit, deliberate: `WrapGrid::spacing_x` / `spacing_y` / `padding`, `widget::text_edit::TextEdit::font_size`, and `widget::image::Image::size` still take `f32`. None of them are on a critical responsive path right now, the `From<f32>` shim means migrating later is a one-line setter signature change per widget, and keeping this commit focused on the widgets the lockscreen actually uses keeps the diff reviewable. The line-gap fix in `text::preferred_size` already benefits `TextEdit` indirectly because its caret/row math reads from the same metrics helpers.

src/layout/row.rs

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: LGPL-2.1-only
 // Copyright (C) 2026 Liberux Labs, S. L. <info@liberux.net>
 
-use crate::types::Rect;
+use crate::types::{ Length, Rect };
 use crate::render::Canvas;
 use crate::widget::Element;
 
@@ -23,11 +23,29 @@ use crate::widget::Element;
 /// .into()
 /// # }
 /// ```
+///
+/// `spacing` and `padding` accept any [`crate::Length`]:
+///
+/// ```rust,no_run
+/// # use std::sync::Arc;
+/// # use ltk::{ icon_button, row, Length, Element };
+/// # #[ derive( Clone ) ] enum Msg { A, B }
+/// # fn _ex( a_rgba: Arc<Vec<u8>>, b_rgba: Arc<Vec<u8>>, w: u32, h: u32 ) -> Element<Msg> {
+/// row()
+///     // 2 % of the viewport's smaller side, never below 8 px.
+///     .spacing( Length::vmin( 2.0 ).at_least( 8.0 ) )
+///     .push( icon_button( a_rgba, w, h ).on_press( Msg::A ) )
+///     .push( icon_button( b_rgba, w, h ).on_press( Msg::B ) )
+/// .into()
+/// # }
+/// ```
 pub struct Row<Msg: Clone>
 {
 	pub children:    Vec<Element<Msg>>,
-	pub spacing:     f32,
-	pub padding:     f32,
+	/// Horizontal gap between children. [`Length`]; default `8.0` px.
+	pub spacing:     Length,
+	/// Padding on all sides. [`Length`]; default `0.0` px.
+	pub padding:     Length,
 	pub align_right: bool,
 }
 
@@ -35,7 +53,13 @@ impl<Msg: Clone> Row<Msg>
 {
 	pub fn new() -> Self
 	{
-		Self { children: Vec::new(), spacing: 8.0, padding: 0.0, align_right: false }
+		Self
+		{
+			children:    Vec::new(),
+			spacing:     Length::px( 8.0 ),
+			padding:     Length::px( 0.0 ),
+			align_right: false,
+		}
 	}
 
 	/// Append a child widget or layout.
@@ -45,20 +69,34 @@ impl<Msg: Clone> Row<Msg>
 		self
 	}
 
-	/// Set the horizontal gap between children in pixels. Default: `8.0`.
-	pub fn spacing( mut self, s: f32 ) -> Self
+	/// Set the horizontal gap between children. Default: `8.0` px. Accepts
+	/// any [`Length`] so the gap can scale with the viewport.
+	pub fn spacing( mut self, s: impl Into<Length> ) -> Self
 	{
-		self.spacing = s;
+		self.spacing = s.into();
 		self
 	}
 
-	/// Set the padding (all sides) in pixels. Default: `0.0`.
-	pub fn padding( mut self, p: f32 ) -> Self
+	/// Set the padding (all sides). Default: `0.0` px. Accepts any
+	/// [`Length`].
+	pub fn padding( mut self, p: impl Into<Length> ) -> Self
 	{
-		self.padding = p;
+		self.padding = p.into();
 		self
 	}
 
+	#[ inline ]
+	fn resolved_spacing( &self, canvas: &Canvas ) -> f32
+	{
+		self.spacing.resolve( canvas.viewport_logical(), Length::EM_BASE_DEFAULT )
+	}
+
+	#[ inline ]
+	fn resolved_padding( &self, canvas: &Canvas ) -> f32
+	{
+		self.padding.resolve( canvas.viewport_logical(), Length::EM_BASE_DEFAULT )
+	}
+
 	/// Push the content block to the right edge of the available width.
 	pub fn align_right( mut self ) -> Self
 	{
@@ -69,16 +107,18 @@ impl<Msg: Clone> Row<Msg>
 	/// Return the preferred `(width, height)` given available `max_width`.
 	pub fn preferred_size( &self, max_width: f32, canvas: &Canvas ) -> (f32, f32)
 	{
+		let pad     = self.resolved_padding( canvas );
+		let spacing = self.resolved_spacing( canvas );
 		// Width contribution of every fixed (non-flex, non-flex-spacer) child.
 		// Used to compute the residual width that wrap-style children will
 		// actually render in, so their reported height matches the layout.
-		let inner_w = ( max_width - self.padding * 2.0 ).max( 0.0 );
-		let gaps    = self.spacing * self.children.len().saturating_sub( 1 ) as f32;
+		let inner_w = ( max_width - pad * 2.0 ).max( 0.0 );
+		let gaps    = spacing * self.children.len().saturating_sub( 1 ) as f32;
 		let fixed_w: f32 = self.children.iter()
 			.filter( |c| match c
 			{
 				Element::Flex( _ )   => false,
-				Element::Spacer( s ) => s.fixed_width.is_some(),
+				Element::Spacer( s ) => s.resolved_width( canvas ).is_some(),
 				_                    => true,
 			} )
 			.map( |c| c.preferred_size( max_width, canvas ).0 )
@@ -103,7 +143,7 @@ impl<Msg: Clone> Row<Msg>
 		let has_flex = self.children.iter().any( |c| match c
 		{
 			Element::Flex( _ )   => true,
-			Element::Spacer( s ) => s.fixed_width.is_none(),
+			Element::Spacer( s ) => s.resolved_width( canvas ).is_none(),
 			_                    => false,
 		} );
 
@@ -115,11 +155,11 @@ impl<Msg: Clone> Row<Msg>
 				.map( |c| c.preferred_size( max_width, canvas ).0 )
 				.sum::<f32>()
 				+ gaps
-				+ self.padding * 2.0;
+				+ pad * 2.0;
 			total_w.min( max_width )
 		};
 
-		( w, max_h + self.padding * 2.0 )
+		( w, max_h + pad * 2.0 )
 	}
 
 	pub fn draw( &self, _canvas: &mut Canvas, _rect: Rect, _focused: bool ) {}
@@ -134,7 +174,9 @@ impl<Msg: Clone> Row<Msg>
 	/// [`Row::align_right`]).
 	pub fn layout( &self, rect: Rect, canvas: &Canvas ) -> Vec<(Rect, usize)>
 	{
-		let inner_h = rect.height - self.padding * 2.0;
+		let pad     = self.resolved_padding( canvas );
+		let spacing = self.resolved_spacing( canvas );
+		let inner_h = rect.height - pad * 2.0;
 
 		// Spacers and `Flex` wrappers report 0 width here; their real width
 		// comes from the flex distribution below.
@@ -142,7 +184,7 @@ impl<Msg: Clone> Row<Msg>
 			.map( |c| c.preferred_size( rect.width, canvas ) )
 			.collect();
 
-		let gaps = self.spacing * self.children.len().saturating_sub( 1 ) as f32;
+		let gaps = spacing * self.children.len().saturating_sub( 1 ) as f32;
 		let fixed_w: f32 = self.children.iter().zip( sizes.iter() )
 			.filter( |( c, _ )| match c
 			{
@@ -151,7 +193,7 @@ impl<Msg: Clone> Row<Msg>
 				// `Spacer::width(...)`-pinned spacers, contributes to the
 				// fixed-width tally.
 				Element::Flex( _ )   => false,
-				Element::Spacer( s ) => s.fixed_width.is_some(),
+				Element::Spacer( s ) => s.resolved_width( canvas ).is_some(),
 				_                    => true,
 			} )
 			.map( |( _, ( w, _ ) )| *w )
@@ -159,13 +201,13 @@ impl<Msg: Clone> Row<Msg>
 
 		let total_weight: u32 = self.children.iter()
 			.filter_map( |c| match c {
-				Element::Spacer( s ) if s.fixed_width.is_none() => Some( s.weight ),
+				Element::Spacer( s ) if s.resolved_width( canvas ).is_none() => Some( s.weight ),
 				Element::Flex( f )   => Some( f.weight ),
 				_                    => None,
 			} )
 			.sum();
 
-		let inner_w     = ( rect.width - self.padding * 2.0 ).max( 0.0 );
+		let inner_w     = ( rect.width - pad * 2.0 ).max( 0.0 );
 		let leftover    = ( inner_w - fixed_w - gaps ).max( 0.0 );
 		let has_spacers = total_weight > 0;
 
@@ -173,15 +215,15 @@ impl<Msg: Clone> Row<Msg>
 		{
 			// Spacers and `Flex` wrappers claim the leftover; the cluster
 			// sits flush to the left edge of the inner rect.
-			( rect.x + self.padding, leftover / total_weight as f32 )
+			( rect.x + pad, leftover / total_weight as f32 )
 		}
 		else if self.align_right
 		{
-			( rect.x + rect.width - (fixed_w + gaps) - self.padding, 0.0 )
+			( rect.x + rect.width - ( fixed_w + gaps ) - pad, 0.0 )
 		}
 		else
 		{
-			( rect.x + (rect.width - fixed_w - gaps) / 2.0, 0.0 )
+			( rect.x + ( rect.width - fixed_w - gaps ) / 2.0, 0.0 )
 		};
 
 		let mut x = start_x;
@@ -190,7 +232,7 @@ impl<Msg: Clone> Row<Msg>
 		{
 			let width = match child
 			{
-				Element::Spacer( s ) => match s.fixed_width
+				Element::Spacer( s ) => match s.resolved_width( canvas )
 				{
 					Some( fw ) => fw,
 					None       => flex_unit * s.weight as f32,
@@ -198,9 +240,9 @@ impl<Msg: Clone> Row<Msg>
 				Element::Flex( f )   => flex_unit * f.weight as f32,
 				_                    => w,
 			};
-			let y = rect.y + self.padding + (inner_h - h) / 2.0;
+			let y = rect.y + pad + ( inner_h - h ) / 2.0;
 			result.push( ( Rect { x, y, width, height: h }, i ) );
-			x += width + self.spacing;
+			x += width + spacing;
 		}
 		result
 	}
@@ -296,4 +338,37 @@ mod tests
 		let rect   = Rect { x: 0., y: 0., width: 400., height: 48. };
 		assert!( r.layout( rect, &canvas ).is_empty() );
 	}
+
+	#[ test ]
+	fn vmin_padding_doubles_around_content()
+	{
+		// 800x600 canvas → vmin = 600. 4 % = 24 px each side → 48 px height.
+		let canvas = make_canvas();
+		let r      = row::<()>().padding( Length::vmin( 4.0 ) );
+		let ( _, h ) = r.preferred_size( 500.0, &canvas );
+		assert_eq!( h, 48.0 );
+	}
+
+	#[ test ]
+	fn vmin_spacing_pins_visible_layout_gap()
+	{
+		// Two fixed-width spacers separated by a vmin spacing of 5 %.
+		// Canvas vmin = 600 → 30 px between the inner edges. With both
+		// spacers 10 px wide, the second one's `x` minus the first one's
+		// `x + width` must equal the gap regardless of where the row chose
+		// to anchor the cluster (centered, since there are no flex spacers).
+		let canvas = make_canvas();
+		let r = row::<()>()
+			.padding( 0.0 )
+			.spacing( Length::vmin( 5.0 ) )
+			.push( crate::spacer().width( 10.0 ) )
+			.push( crate::spacer().width( 10.0 ) );
+		let rect = Rect { x: 0., y: 0., width: 200., height: 48. };
+		let placed = r.layout( rect, &canvas );
+		assert_eq!( placed.len(), 2 );
+		let ( first_rect, _ )  = placed[ 0 ];
+		let ( second_rect, _ ) = placed[ 1 ];
+		let gap = second_rect.x - ( first_rect.x + first_rect.width );
+		assert!( ( gap - 30.0 ).abs() < 1e-3, "expected ~30 px gap, got {gap}" );
+	}
 }