Skip to main content

makeover_layout/
lib.rs

1//! The renderer-agnostic half of the make-family design system.
2//!
3//! <!-- wiki: makeover-layout -->
4//!
5//! `makeover` answers *what colour*, and varies by theme. `makeover-geometry`
6//! answers *how much space*, and varies by density and surface. This crate
7//! answers *what the thing is*, and varies by nothing.
8//!
9//! # The deferral rule
10//!
11//! A description names intents and relationships, never values. Say
12//! [`Fill::Raised`], never `#D9DDF4`. Say `Gap::Peer`, never `6px`. What is
13//! left once colour and spacing are deferred is **composition**: which edges
14//! are lit, what inverts on press, what nests in what.
15//!
16//! The constraint that shapes all of it: a renderer that can only paint
17//! rectangles has to be able to express the result. egui has no
18//! `box-shadow: inset` and one stroke per widget with no per-side control; a
19//! terminal has box-drawing characters and one cell of resolution, and cannot
20//! draw a two-tone lit edge at all. A description that assumes per-side edges
21//! is a CSS description wearing a neutral name. So this crate names the
22//! *intent* (this region is a well) and each renderer chooses an expression
23//! it can actually produce, including dropping half of one.
24//!
25//! # Scope
26//!
27//! - **Depth.** [`Bevel`], [`Edge`], [`Fill`], [`Depth`]: the bevel and the
28//!   surfaces it shapes. Fill and bevel are named together, so a raised bevel
29//!   over a recessed fill is unrepresentable.
30//! - **Components.** [`Token`] (badge against chip), [`Notice`] (toast against
31//!   banner), [`RowPart`], [`CellPart`], [`Heading`], [`Selector`],
32//!   [`Readiness`], [`Awaiting`], [`Meter`], [`Figure`], [`Track`],
33//!   and [`Tone`], the one intent family they share.
34//! - **Schemas.** [`Field`] for forms, [`Column`] for lists and tables,
35//!   [`Facet`] for the dimensions a set is narrowed by.
36//! - **Structure.** [`Region`] for the parts of a screen, [`Arrangement`] for
37//!   how a screen is put together, [`Showing`] for how many of a region's
38//!   children are visible at once.
39//! - **Adaptation.** [`Affordance`] for what exists at a given input class and
40//!   window size class, read against `makeover-geometry`'s `Density` and
41//!   `SizeClass`. The one part of the vocabulary that varies, and it varies
42//!   only by those two axes, which it borrows rather than defines.
43//!
44//! # What a member is admitted on
45//!
46//! A member is added when an app needs a fact the vocabulary cannot state, and
47//! refused when what it wants is presentation it should be asking a renderer
48//! for. Three tests, all of which have to pass:
49//!
50//! - **Generic against bespoke.** Is this furniture any app would have, or is
51//!   it this app's own? A rule that withholds a word until a second app has
52//!   duplicated the code guarantees the duplication. What the app owns
53//!   keeps [`Region::Handover`] and [`Region::Ceded`].
54//! - **Every host has an honest answer.** A member no renderer can express
55//!   without borrowing one host's idiom is not a description.
56//! - **It can be laid out before it is filled.** See *First paint is final
57//!   paint* below.
58//!
59//! Count the members a thing needs before refusing it. A refusal is only worth
60//! as much as the measurement under it.
61//!
62//! # What this crate cannot say
63//!
64//! - **An address.** What a control calls, and where a button goes. [`Act`]
65//!   names the act and holds no destination.
66//! - **A current value.** A webview reads it out of the DOM and an
67//!   immediate-mode renderer holds a `&mut` to the app's own field. A
68//!   description carrying it would be a form model.
69//! - **What has focus.** See below.
70//! - **A duration or a clock.** No estimate of time remaining, no autosave
71//!   interval, no animation length.
72//! - **A colour, a size or a position.** The deferral rule.
73//!
74//! # Reach, focus and the focus ring
75//!
76//! Three terms, and no others, for what sits outside the description.
77//! **Reach** is which things can take focus and in what order; a browser reads
78//! it off the document, a TUI derives it from draw order, egui from its own id
79//! stack. **Focus** is which reached thing has the keyboard right now: the
80//! renderer's, live, never described and never round-tripped through a
81//! description. The **focus ring** is the visible cue; the token (`focus-ring`,
82//! derived by `makeover` from the action colour) is the one shared artifact and
83//! the drawing is the renderer's. Retired as names for any of this: "focus
84//! stroke", "focus cue", "wants focus". "Caret" is a different thing, the text
85//! cursor inside a field, and keeps its name.
86//!
87//! # The three tones, and what a colour claims
88//!
89//! One rule for how colour says whether a thing can be
90//! used. Every renderer answers to it, and it is stated here because the
91//! description is what names the intents.
92//!
93//! | the thing | intent |
94//! |-----------|--------|
95//! | active, emphasised, the thing itself | `content` |
96//! | inactive but usable: it still answers a press | `content-secondary` |
97//! | inert: disabled, or not a control at all | `content-muted` |
98//!
99//! `content-muted` is the one with a claim in it. [`State::Disabled`] resolves
100//! to it, so a live control wearing it is telling the user it will not answer,
101//! and being wrong about that is worse than being quiet, because the user's
102//! response is to stop trying. A sortable column heading that was never sorted,
103//! and every unchosen option in a radio group, read as dead lists if they wear
104//! it. What is legitimately muted is a caption, a hint, a placeholder, a meter's reading, an axis label: text that
105//! was never going to answer anything.
106//!
107//! The three are one ramp and not three colours. `makeover`'s `Emphasis` derives
108//! the quieter two from the ink, so "one step back" means the same distance in
109//! every theme and a renderer cannot land between them by picking its own.
110//!
111//! # First paint is final paint
112//!
113//! Nothing may change size or position after it is
114//! first drawn, and nothing may stand in for content that has not arrived yet.
115//! Both halves are absolute.
116//!
117//! It is stated here, rather than left to each renderer, because a renderer can
118//! only reserve space the description gave it enough to size. A member whose
119//! size depends on its content therefore owes whatever makes it sizeable while
120//! the content is still absent, and that is the second admission test for a new
121//! member: not only does it compose something this crate already names, it can
122//! be laid out before it is filled.
123//!
124//! The mechanism is a reservation, and [`Sort`]'s caret is the worked example.
125//! The caret is drawn into a box its own width whether or not the column is
126//! sorted, so pressing a heading cannot reflow the row it sits in. The box names
127//! no magnitude, which is what keeps it out of `makeover-geometry`'s territory.
128//! Reserve from what is known; never discover geometry from what has not
129//! arrived.
130//!
131//! The trap is an `Option` that means "not yet". [`Readiness::Pending`] is the
132//! honest way to say a region is still waiting. An optional *measurement* is
133//! not: a count that shows up later widens the text that prints it and moves
134//! everything beside it, which is the reflow this rule exists to forbid. So an
135//! `Option` on a measurement means the host will never know it, a property of
136//! the query, fixed for the life of the screen, and a renderer sizes for the
137//! answer it was handed rather than for the one it hopes is coming.
138//!
139//! # Any width, one answer
140//!
141//! The sibling of the rule above. That one is
142//! independence from *when*; this one is independence from *how you got here*.
143//!
144//! A rendering is a pure function of the description and the viewport. The same
145//! description at the same width is the same output, whatever widths came
146//! before it. No renderer may carry geometry across frames, and none may narrow
147//! by counting.
148//!
149//! The failure this forbids is ordinary enough to be the default everywhere
150//! else: a page that hides its sidebar below some width, remembers that it hid
151//! it, and does not bring it back the same way. Layout there is a function of
152//! `(width, history)`, so dragging a window to 900 wide is a different screen
153//! depending on whether you came from 1400 or from 600. Nobody chose that; it
154//! is what measuring and remembering produce.
155//!
156//! The mechanism is [`Width`] for what grows and [`Priority`] for what drops.
157//! Both are declared, both are read off the description, and neither needs a
158//! measurement. A renderer narrows by raising a cutoff over a total order,
159//! never by counting what fits and stopping, `makeover-tui`'s table states
160//! that as its own rule and tests it, and `makeover-webview` reaches the same
161//! place with `@media` and `display: none`, which is path-independent by
162//! construction because CSS has nowhere to keep the previous width.
163//!
164//! Two things follow for anything new. A member that would need last frame's
165//! size to lay out this frame is refused, the same way a member that cannot be
166//! sized before it is filled is refused. And a fact about what disappears
167//! belongs in the description, because a host that has to infer it can only
168//! infer it from a measurement.
169//!
170//! # Where the description stops
171//!
172//! A member is added when an app needs a fact the vocabulary cannot state, and
173//! refused when what it wants is presentation it should be asking a renderer
174//! for. It is not a quota, and the goal is every screen described.
175//!
176//! A timeline is describable. What it needs and could not previously get is two
177//! integers, where a thing starts and how long it lasts, which is [`Track`].
178//! Slot heights, gridline colour, how overlapping things stack and which hour
179//! scrolls into view stay the renderer's, and `Track` carries none of them.
180//!
181//! A kanban board is describable, and the member is [`Region::Columns`]. Every
182//! card fact is already sayable through `Row`'s parts; what nothing else could
183//! say is that the columns are *peers*, since [`Arrangement`] offers only
184//! list-detail and sidebar-content and a board described as either is a lie
185//! about the screen. Dragging a card between columns does not enter into it: a
186//! drop's effect is "set status", a discrete action `Row`'s menu already
187//! carries, and the drag itself is affordance.
188//!
189//! A calendar takes no members. The month grid's primacy in calendar apps is an
190//! artifact of paper: paper cannot be queried, so it has to show every day at
191//! once as a fallback index, and routes, search and ranking do that job better.
192//! Three jobs survive that reasoning, and only one of them needs a grid:
193//!
194//! 1. **Spans across days**, a stretch of leave, a trip, a sprint. You cannot
195//!    see "away the 3rd to the 17th" in a list without diffing dates. This is
196//!    [`Track`] with [`Unit::Days`], and [`Track::days`] is it.
197//! 2. **Density at a glance**, which weeks were heavy. That is a heatmap, and a
198//!    heatmap describes as a list.
199//! 3. **Weekday periodicity**, "every other Tuesday", "the 15th is a Saturday".
200//!    This is the only job that needs the seven-column wrap, because alignment
201//!    is the whole of what makes it visible.
202//!
203//! Job 3 is the only open question, and nothing in the tree asks for it. A
204//! month grid otherwise renders as a [`Table`](crate::Column): seven weekday
205//! columns, weeks as rows, blanks for the offset. If a screen wants one,
206//! measure the members it needs before adding any.
207//!
208//! [`Region::Handover`] and [`Region::Ceded`] remain for the genuinely
209//! app-owned. The description
210//! names the *place* and the app owns the contents, so a screen containing a
211//! timeline is still a whole screen and still routable. Without it, the screens
212//! that make an app worth using would need a second, undescribed path beside
213//! the router, and two paths is how a vocabulary drifts from its app.
214//!
215//! [`Region::Widget`] sits between that limit and the primitives, and it does
216//! not move the limit. A widget is an assembly of members this crate *already*
217//! has, under a name a renderer may or may not recognise. Anything that needs a
218//! member the vocabulary does not have is still a finding about the vocabulary
219//! or still bespoke; naming an assembly buys no new expressive power, which is
220//! why it is safe to let the set grow outside this crate.
221
222#![forbid(unsafe_code)]
223
224/// A colour intent this crate refers to but never resolves.
225///
226/// The string is the token name `makeover` publishes, so a renderer can look
227/// it up without this crate knowing what colour came back.
228pub trait Intent {
229    /// The `makeover` intent token this resolves against.
230    fn token(self) -> &'static str;
231}
232
233mod act;
234mod affordance;
235mod choice;
236mod column;
237mod component;
238mod depth;
239mod facet;
240mod facts;
241mod field;
242mod figure;
243mod readiness;
244mod region;
245mod text;
246mod theme_choice;
247mod track;
248
249/// A tag tree as a facet, from tagtree's outline, selection and rollup. Behind
250/// the `tagtree` feature.
251#[cfg(feature = "tagtree")]
252pub mod tag_facet;
253
254// The crate's entire API is these names at the root. Named rather than glob so
255// a member added to a module and left out here fails at the first call site
256// outside the crate instead of quietly leaving the root API.
257pub use act::Act;
258pub use affordance::{Affordance, AffordanceAxis};
259pub use choice::{Candidate, Choice, Curve};
260pub use column::{
261    Budget, CellPart, Column, ColumnKind, Fallback, MIN_CEILING, Priority, Sizing, Sort, Width,
262    budget, cutoff_for,
263};
264pub use component::{Flow, Heading, Nesting, Notice, RowPart, Selector, Token, Tone};
265pub use depth::{Bevel, Depth, Edge, Fill, State};
266pub use facet::{Facet, FacetValue, Selecting, Standing};
267pub use facts::Fact;
268pub use field::{Accepted, DATE_FORMAT, DATETIME_FORMAT, Family, Field, FieldKind, Value};
269pub use figure::{Bar, Chart, Extent, Figure, Fit, Meter};
270pub use readiness::{Awaiting, Loading, Readiness};
271pub use region::{Arrangement, Measure, PageKind, Paging, Region, Share, Showing, Strip, Window};
272pub use text::{Change, Syntax};
273pub use theme_choice::{Contrast, ThemeChoice, ThemeVariant};
274pub use track::{Placement, Span, Track, Unit};
275
276#[cfg(test)]
277mod tests;