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