//! Nodes to markup.
//!
//! Every function here takes a piece of [`quasi_router`]'s screen tree and
//! pushes markup onto a buffer. Nothing returns a `Result`: a description that
//! exists is renderable by construction, which is the property the owned mirror
//! in `quasi-router` was built to have.
//!
//! # Where the htmx goes in
//!
//! In exactly one function, [`action_attrs`]. An [`Action`] is a method, a path
//! and some params, and turning that into `hx-get` / `hx-post` / `hx-vals` is
//! the whole of what "htmx is the transport" means in code. Nothing else in
//! this file knows the word htmx, so decision 13's claim that the transport is
//! replaceable is a claim about one function rather than about the crate.
//!
//! `hx-target` is emitted for one case and only one: [`Action::replaces`], set
//! when a control calls a route the description layer does not serve. Decision 7
//! puts the target on the response, where `quasi-http` sets `HX-Retarget` from
//! [`Response::Fragment`](quasi_router::Response::Fragment), because the router
//! is the only party that knows what it just changed, and a control that also
//! named a target would be a second party deciding one thing. That reasoning
//! assumes the responder is described. A plain API route is not, cannot name a
//! region, and leaves the answer to land wherever the transport defaults, which
//! for htmx is inside the pressed button. See `Action::replaces` for the whole
//! of it.

use std::collections::HashMap;
use std::fmt::Write as _;

use makeover_layout as layout;
// `Tone::token` is the trait method, and `data-tone` is spelled from it rather
// than from a match here, so a tone added upstream cannot be named two ways.
use makeover_layout::Intent as _;
use makeover_webview::chart::chart_html_into;
use makeover_webview::figure::figure_html_into;
use makeover_webview::form::{Filling, Markup, Value, escape_into, field_html_into};
// `class`, `option_class` and the two part-class mappings below are makeover's,
// not copies of it. They were copies until makeover-webview 0.27.0 made them
// public: the prefix helper was byte-identical, and the row and cell part names
// were a second spelling of a list whose own doc comment carries an obligation
// to be grepped on upgrade. A second spelling is a second place to forget, and
// the selector names had already drifted.
use makeover_webview::{Emit, class, fallback_class, option_class};
// `Cell` is a name both crates use: makeover's is the emitted table cell, ours
// is the described one. Aliased rather than qualified at the call site, so the
// two never read as the same type.
use makeover_webview::list::{
    Cell as Emitted, cell_part_class, cells_html_into, flow_class, part_class, push_column_classes,
};
use makeover_webview::meter::meter_html_into;
use makeover_webview::placeholder::placeholder_html_into;
use quasi_router::screen::{
    Act, Bar, Cell, Clock, Destination, Field, Node, Repeat, Rest, Row, Slot, Tag,
};
use quasi_router::{Action, Candidate, Method, Params, Replaces, Richness, Trust};

/// The facts about the document being written that no [`Node`] carries.
///
/// Threaded beside [`Emit`] rather than folded into it: `Emit` is the host's
/// standing configuration and is the same for every answer, while this is about
/// the one answer being written. Two members and both of them are the screen's:
/// what a bespoke region was handed, and where the caret starts.
///
/// A struct rather than two more parameters. The walk is deep and every level
/// passes it along untouched, so the third document-level fact would otherwise
/// be a third edit to every signature between here and the leaf.
pub(crate) struct Doc<'a> {
    /// The markup a host drew for a region the description ceded, by
    /// [`Slot::id`](quasi_router::Slot).
    pub(crate) fills: &'a HashMap<String, String>,
    /// The [`Field::name`] the caret starts in, when this answer is a whole
    /// document and the screen named one.
    ///
    /// `None` on every fragment, which is the whole of the accessibility
    /// argument: a swap that moves the caret takes it out of whatever the
    /// reader was typing into, and a browser answers most interactions with a
    /// fragment. See [`Screen::opens_at`](quasi_router::Screen::opens_at).
    pub(crate) opens_at: Option<&'a str>,
}

/// The empty fill map, for the answers that cede no region.
///
/// One allocation for the process rather than one per call. Every site reaching
/// for it is on a path that cannot hold a bespoke region at all, so the map is
/// empty by construction rather than by luck.
static NO_FILLS: std::sync::LazyLock<HashMap<String, String>> =
    std::sync::LazyLock::new(HashMap::new);

impl Doc<'static> {
    /// No fills and no caret, for the fragments and the run-level walks.
    pub(crate) fn bare() -> Self {
        Self {
            fills: &NO_FILLS,
            opens_at: None,
        }
    }
}

impl<'a> Doc<'a> {
    /// What a host drew, and no caret.
    ///
    /// Everything but a whole document: a fragment, an overlay, the chrome and
    /// the frame. See [`opens_at`](Self::opens_at).
    pub(crate) fn caretless(fills: &'a HashMap<String, String>) -> Self {
        Self {
            fills,
            opens_at: None,
        }
    }

    /// What a host drew, and where the caret starts.
    pub(crate) fn opening(fills: &'a HashMap<String, String>, opens_at: Option<&'a str>) -> Self {
        Self { fills, opens_at }
    }

    /// Whether this field is the one the caret starts in.
    fn opens(&self, name: &str) -> bool {
        self.opens_at == Some(name)
    }
}

/// Write one prefixed class name onto a buffer the caller already has.
///
/// The two halves are escaped separately rather than joined and escaped once.
/// That is the same bytes, since escaping is per character and has no context to
/// carry across the seam, and none of the allocations.
///
/// Escaped at all because a prefix is host configuration reaching an attribute
/// value. It is a `&'static str` and every real one is identity under this, so
/// the cost is a scan; what it buys is that the one string here that did not
/// come from this crate cannot end the attribute.
pub(crate) fn class_into(name: &str, opts: &Emit, out: &mut String) {
    escape_into(opts.class_prefix, out);
    escape_into(name, out);
}

/// Write a `class="..."` attribute, prefixed.
fn class_attr(names: &[&str], opts: &Emit, out: &mut String) {
    out.push_str(" class=\"");
    for (i, name) in names.iter().enumerate() {
        if i > 0 {
            out.push(' ');
        }
        class_into(name, opts, out);
    }
    out.push('"');
}

/// Write the attribute naming a tone, if the tone is worth naming.
///
/// [`Tone::Neutral`] writes nothing: ordinary content is the default, and an
/// attribute meaning "nothing unusual" is an attribute on every element in the
/// document.
///
/// An attribute and not a class, which is the correction. This emitted
/// `tone-info`, `tone-success`, `tone-warning` and `tone-danger` as classes, and
/// makeover has never defined one of them: its whole vocabulary keys tone off
/// `data-tone`, from `.badge[data-tone="danger"]` to the progress fill to a
/// figure's value. So every toned thing a description produced arrived with a
/// class no stylesheet in the tree had heard of, which is why the SSH-keys tab's
/// Remove button came out the same colour as everything else.
fn tone_attr(tone: layout::Tone, out: &mut String) {
    if matches!(tone, layout::Tone::Neutral) {
        return;
    }
    out.push_str(" data-tone=\"");
    out.push_str(tone.token());
    out.push('"');
}

/// How much of its row a control asked for, where it is not the default.
///
/// `tone_attr`'s shape and its reason. An attribute rather than a class because
/// this is a fact the description carried, not a styling hook this renderer
/// invented -- the same division `data-selector` and `data-tone` are on the
/// right side of. `Fill` is the default and is what a control did before the
/// member existed, so saying it would be a hook that changes nothing.
fn width_attr(width: layout::Width, out: &mut String) {
    let said = match width {
        layout::Width::Content => "content",
        layout::Width::Fixed => "fixed",
        // `Fill` is the default, and a member added upstream since this
        // renderer learned the vocabulary is one it does not draw.
        _ => return,
    };
    out.push_str(" data-width=\"");
    out.push_str(said);
    out.push('"');
}

/// How a picture sits in its box, where it is not the default.
///
/// `tone_attr`'s shape and for its reason: `Natural` is what an `<img>` does
/// with no rule at all, so saying it would be a stylesheet hook that changes
/// nothing. The two that need a rule get one.
fn fit_attr(fit: layout::Fit, out: &mut String) {
    let value = match fit {
        layout::Fit::Natural => return,
        layout::Fit::Cover => "cover",
        layout::Fit::Contain => "contain",
        // `Fit` is `#[non_exhaustive]`, so a member added upstream lands here
        // rather than failing the build. Drawing it as natural is the safe
        // read: the picture is whole and its own shape, which is wrong about
        // the box and never wrong about the content.
        _ => return,
    };
    out.push_str(" data-fit=\"");
    out.push_str(value);
    out.push('"');
}

/// What goes back in the box, for a form being offered again after a refusal.
///
/// The description carries the value as a string, because that is what came
/// off the wire; the kind is what says how to read it. A checkbox is carried
/// by presence the way HTML submits one, so any value means ticked and nothing
/// means not.
///
/// A [`layout::FieldKind::Secret`] is emitted empty whatever it holds. That is
/// the third refusal of the same thing and none of the three is redundant:
/// `Field::value` will not store one, `makeover_webview::form` will not write
/// one into an `<input type="password">`, and this one stands between them
/// because `Field::value` is a public field that a struct literal reaches past.
fn refill(field: &Field) -> Value<'_> {
    if field.kind == layout::FieldKind::Secret {
        return Value::Absent;
    }
    // An interval came back under two names, so it goes back into two boxes.
    // Either end absent is an answer rather than a half-filled form -- "over
    // 120 BPM" -- so this is not gated on both being present.
    if field.kind == layout::FieldKind::Interval {
        return Value::Between {
            lower: field.value.as_deref().unwrap_or_default(),
            upper: field.upper_value.as_deref().unwrap_or_default(),
        };
    }
    match field.value.as_deref() {
        None => Value::Absent,
        Some(_) if field.kind == layout::FieldKind::Checkbox => Value::On(true),
        Some(value) => Value::Text(value),
    }
}

/// Whether the reader reaches this control's value by typing characters into
/// it.
///
/// What `keyup` can hear, which is the question the two consult triggers turn
/// on: a `<select>`, a radio, a checkbox, a slider and a date picker all
/// change without a key ever being released over them, so a question hung on
/// `keyup` is one they never ask.
///
/// Not [`layout::FieldKind::offers_options`] and its two companions, which the
/// three renderers already share for a different question -- whether a value is
/// complete the moment it changes. The sets nearly agree and the reasons do
/// not: a range is built up by dragging, so it is incomplete on the way and is
/// still not typed into.
///
/// `false` for a kind this renderer has not met. [`layout::FieldKind`] is
/// `#[non_exhaustive]` and `input` is the wider event of the two -- it fires
/// for typing as well -- so an unknown kind is heard rather than missed.
const fn typed_into(kind: layout::FieldKind) -> bool {
    matches!(
        kind,
        layout::FieldKind::Text
            | layout::FieldKind::Secret
            | layout::FieldKind::Number
            | layout::FieldKind::Interval
            | layout::FieldKind::Email
            | layout::FieldKind::Url
            | layout::FieldKind::Tel
            | layout::FieldKind::Textarea
            | layout::FieldKind::Rich
    )
}

/// How a field's question is raised: on the keystroke, or on the value moving.
///
/// [`Field::consults`] and [`Slot::consults`] are one idea at two scopes, and
/// only the region's heard a discrete control -- because a region's dials were
/// never all typed into and a field's were assumed to be. They are not: a
/// folder select that re-asks for a list of mail is the same question a search
/// box asks, and it is the majority shape rather than the exception.
///
/// The event is this renderer's and the wait is the description's, which is why
/// only the first half is decided here. A discrete control's description says
/// [`Consult::after`] of zero, which is a real number for it rather than a
/// meaningless one -- [`Slot::consults`] already applies its wait to a radio
/// group deliberately.
///
/// [`Field::consults`]: quasi_router::Field::consults
/// [`Slot::consults`]: quasi_router::Slot::consults
/// [`Consult::after`]: quasi_router::Consult::after
fn asking(kind: layout::FieldKind, consult: &quasi_router::Consult) -> Fires<'static> {
    let after = consult.after;
    let at_least = consult.at_least;
    if typed_into(kind) {
        Fires::Typing { after, at_least }
    } else {
        Fires::Working { after, at_least }
    }
}

/// One field, with whatever `1c4a66a4` and `14612ed8` added around it.
///
/// The field's own markup is makeover-webview's, unchanged. A second field
/// emitter here is the divergence phase A existed to end, and it would be the
/// same anatomy with a different escaping story.
///
/// A [`Field::writes`] is a wrapper rather than attributes on the control,
/// because the control is emitted by makeover-webview and there is no seam to
/// put them through. That turns out to be the better shape anyway: the `change`
/// event bubbles, so one element around the group catches it whichever of the
/// input, select or textarea forms the field took, and `hx-include` finds the
/// control back without this having to know which it was.
fn field_group_html(field: &Field, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    // A question that only sometimes applies is drawn inside a box carrying the
    // condition, so the reveal script settles it exactly as it settles a
    // region, and the control stays inside the form and still submits.
    // `8fdb814c`.
    if let Some(reveal) = &field.revealed_by {
        out.push_str("<div");
        class_attr(&["field-reveal"], opts, out);
        reveal_attrs(reveal, out);
        out.push('>');
        let mut inner = Field::clone(field);
        inner.revealed_by = None;
        field_group_html(&inner, opts, doc, out);
        out.push_str("</div>");
        return;
    }

    // A question answered N times is N slots and two controls, and each slot is
    // an ordinary field of this same emitter. `60d1753c`.
    if let Some(repeat) = &field.repeats {
        repeat_html(field, repeat, opts, doc, out);
        return;
    }
    let mut filling = Filling::of(refill(field));
    let writes = field.writes.as_ref();

    // A field that owns a suggestion list is a combobox, and all three parts of
    // one hang off the field's own name: the box's id is the name, the list's
    // id is `suggestions_id` of it, and nothing is authored anywhere. That is
    // what ownership buys over two elements pointed at each other by hand.
    //
    // Gated on the name being a handle, for `hyperscript::handle`'s reason: the
    // programs below address both elements by id inside a selector inside an
    // attribute. A name that is not a plain handle draws the field it drew
    // before this existed, which is a fallback rather than a break.
    let suggests = field
        .suggests
        .as_ref()
        .zip(crate::hyperscript::handle(&field.name));
    let wiring = suggests.map(|(consult, name)| {
        let list = suggestions_id(name);
        (consult, name.to_owned(), combobox_attrs(&list), list)
    });
    let listbox = wiring
        .as_ref()
        .map(|(_, _, _, list)| listbox_html(field, list, opts));
    if let Some(markup) = listbox.as_ref() {
        filling.trailing = Some(Markup(markup));
    }

    // Everything this renderer knows about the control element that no
    // description layer carries, gathered before it is handed over: there is
    // one `control_attrs` slot and two things that want it. `a135f898` is the
    // second, and it arrived after the combobox had taken the slot.
    let mut control_attrs = String::new();
    if let Some((_, _, attrs, _)) = wiring.as_ref() {
        control_attrs.push_str(attrs);
    }
    // What is in this box is the reader's, so a swap that redraws it must not
    // take it away. `hx-preserve` is htmx's word for exactly that, and it works
    // off the `id` makeover already writes from the field's name.
    //
    // The one host where this has to be said: a terminal keeps its own buffer
    // and egui keeps widget state by id, so both were already right, and a
    // browser replaces the element and takes what was typed with it.
    if field.keeps_value {
        if !control_attrs.is_empty() {
            control_attrs.push(' ');
        }
        preserve_attr(&mut control_attrs);
    }
    // Where the caret starts, when the screen said so and this answer is a
    // whole document. `Doc::opens_at` is `None` on every fragment, which is the
    // whole of the guard: a swap that moves the caret takes it out of whatever
    // the reader was typing into, and a browser answers most interactions with
    // a fragment.
    //
    // Nothing counts the emissions. Two fields under one name is an app
    // disagreeing with itself, and HTML already rules on it -- the first
    // `autofocus` in tree order is the one a browser honours -- so a counter
    // here would only be a second, quieter answer to a question the platform
    // has settled.
    if doc.opens(&field.name) {
        if !control_attrs.is_empty() {
            control_attrs.push(' ');
        }
        control_attrs.push_str("autofocus");
    }
    if !control_attrs.is_empty() {
        filling.control_attrs = Some(Markup(&control_attrs));
    }

    // Outside the consult wrappers below, for their own reason one turn further
    // out: htmx takes one verb and one address per element, and the question a
    // field owns is a different question from the ones it merely asks.
    if let Some((consult, _, _, list)) = wiring.as_ref() {
        out.push_str("<div");
        class_attr(&["field-suggests"], opts, out);
        let sends = sends_selector(&consult.sends);
        // The answer lands in the list the field owns, always. An
        // `Action::replacing` on a suggestion source is a description arguing
        // with itself -- it says the candidates go somewhere other than the
        // control they are candidates for -- so it is overwritten here rather
        // than honoured, and the combobox wiring cannot come apart from the
        // element it names.
        let mut action = consult.action.clone();
        action.replaces = Some(Replaces::Region(list.clone()));
        action_attrs(
            &action,
            asking(field.kind, consult),
            None,
            sends.as_deref(),
            false,
            out,
        );
        out.push('>');
    }

    // A consult is a second wrapper outside the first rather than more
    // attributes on it. Two routes cannot share one element: htmx takes one
    // verb and one address per element, and a field that both writes when it
    // settles and asks about itself while it is being typed names two. Outside
    // rather than inside so the width and the tick-gathering stay on the
    // element that already carries them.
    //
    // One wrapper each where there are several. A box asking two routes at two
    // rates is MNW's discover search, and the two questions cannot share an
    // element for the reason a consult cannot share one with a write.
    for consult in &field.consults {
        out.push_str("<div");
        class_attr(&["field-consults"], opts, out);
        // What rides along, named by field name and turned into a selector
        // here. The names are the description's — they are what a submit sends
        // each value under — and reducing them to a document selector is this
        // renderer's job, which is the whole reason the vocabulary does not
        // carry the `.discover-filter` class the shipped markup groups by.
        let sends = sends_selector(&consult.sends);
        action_attrs(
            &consult.action,
            asking(field.kind, consult),
            None,
            sends.as_deref(),
            false,
            out,
        );
        out.push('>');
    }

    // The width sits on the wrapper, because what `field_html_into` emits is
    // makeover's and this is quasi's fact about it. A field that writes already
    // has a wrapper for the same reason; one that only asks for room gets the
    // same box with nothing else on it.
    let asked = !matches!(field.width, layout::Width::Fill);
    if writes.is_none() && asked {
        out.push_str("<div");
        class_attr(&["field-writes"], opts, out);
        width_attr(field.width, out);
        out.push('>');
    }

    if let Some(action) = writes {
        out.push_str("<div");
        class_attr(&["field-writes"], opts, out);
        width_attr(field.width, out);
        action_attrs(action, Fires::ChangeInside, None, None, false, out);
        out.push('>');
    }

    // A field's members are its options: `option` places one, and `chosen`
    // settles the one it places. Told where each landed rather than looking for
    // it, since two options with the same label are the same bytes.
    let mut marked = crate::stage::Cursor::open(&field.marks);
    if marked.watching() {
        let mut placed = Vec::new();
        field.with_layout(|borrowed| {
            makeover_webview::form::field_html_placed(&borrowed, &filling, opts, out, &mut placed);
        });
        for block in &placed {
            marked.wrote(block.start, block.end);
        }
        marked.close(&field.marks);
    } else {
        field.with_layout(|borrowed| {
            field_html_into(&borrowed, &filling, opts, out);
        });
    }

    if writes.is_some() || asked {
        out.push_str("</div>");
    }
    for _ in &field.consults {
        out.push_str("</div>");
    }
    if wiring.is_some() {
        out.push_str("</div>");
    }
}

/// A question answered zero or more times: the slots, and the controls that add
/// and remove one.
///
/// A `fieldset` because that is what a group of controls answering one
/// question is in HTML, and the legend is the question. Each slot is
/// [`Field::instance`] put back through [`field_group_html`], so a slot is
/// drawn by everything this renderer already does to a field rather than by a
/// second emitter.
///
/// # What the reader does here costs no round trip
///
/// Adding a slot clones the blank one out of the `template` and removing one
/// takes the slot out of the document, both in `repeat.js`. A description that
/// had to ask a route for another empty box would re-render a form the reader
/// is midway through, which is `a135f898` and is the same objection that put
/// the reveal condition in a script.
///
/// The hooks the script reads are `data-` attributes rather than classes, for
/// `data-reveal`'s reason: a class is prefixed by host configuration and a
/// script shipped by this crate cannot know the prefix.
///
/// # A page served without the script
///
/// Every slot the description offered is there, fillable and submittable, and
/// the two controls do nothing. That is the direction the rest of this renderer
/// degrades in: what the handler said, without what the reader could have added
/// to it.
fn repeat_html(field: &Field, repeat: &Repeat, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    let standing = repeat.standing();
    out.push_str("<fieldset");
    class_attr(&["field-repeat"], opts, out);
    out.push_str(" data-repeat=\"");
    escape_into(&field.name, out);
    // The question's own label, so the script can renumber the slots it
    // renames. `Repeat::ordinal` is what wrote them in the first place, and the
    // two spellings are the same string in the same order.
    out.push_str("\" data-repeat-label=\"");
    escape_into(&field.label, out);
    let _ = write!(out, "\" data-repeat-least=\"{}\"", repeat.least);
    if let Some(from) = repeat.add.from() {
        out.push_str(" data-repeat-add-from=\"");
        escape_into(from, out);
        out.push('"');
    }
    if let Some(most) = repeat.most {
        let _ = write!(out, " data-repeat-most=\"{most}\"");
    }
    out.push('>');

    out.push_str("<legend");
    class_attr(&["field-repeat-legend"], opts, out);
    out.push('>');
    escape_into(&field.label, out);
    out.push_str("</legend>");

    // What is wrong with the *set*, which is the fact a per-slot message cannot
    // carry: "at most eight reminders" is about none of them in particular. A
    // slot's own error rides on the slot, through `Field::error` as every other
    // field's does.
    if let Some(error) = &field.error {
        out.push_str("<div");
        class_attr(&["form-error"], opts, out);
        out.push_str(" role=\"alert\">");
        escape_into(error, out);
        out.push_str("</div>");
    }

    out.push_str("<div");
    class_attr(&["field-repeat-slots"], opts, out);
    // The hook the script appends into. A container of its own rather than the
    // fieldset, so a slot cloned into a group with none standing lands above
    // the add control rather than under it.
    out.push_str(" data-repeat-slots>");
    for at in 0..standing {
        repeat_slot_html(field, repeat, at, standing, opts, doc, out);
    }
    out.push_str("</div>");

    // The blank the add control clones. Inert markup until a script takes it
    // out, which is what a `template` is for, and it carries the next index so
    // that pressing add once with no script running is the only thing that ever
    // needed renumbering.
    out.push_str("<template");
    class_attr(&["field-repeat-blank"], opts, out);
    out.push('>');
    // The question itself, at an index past the last standing slot. `instance`
    // and `instance_part` both answer blank there, which is what the template
    // needs, and a grouped question keeps its parts this way where a cleared
    // `repeats` would have left the template with no questions to draw.
    repeat_slot_html(field, repeat, standing, standing + 1, opts, doc, out);
    out.push_str("</template>");

    // A question whose slots come from another control offers no add control
    // of its own: there is no blank a reader could fill. The script is told
    // which control makes them, on the group, so it needs no second address.
    if let Some(label) = repeat.add.label() {
        out.push_str("<button type=\"button\"");
        class_attr(&["button", "field-repeat-add"], opts, out);
        out.push_str(" data-repeat-add");
        if !repeat.more(standing) {
            out.push_str(" disabled");
        }
        out.push('>');
        escape_into(label, out);
        out.push_str("</button>");
    }
    out.push_str("</fieldset>");
}

/// One slot: the question under its indexed name, and the control that takes it
/// away.
///
/// `standing` is how many slots there are, which is what decides whether this
/// one may be removed. The script recomputes the same answer after every change
/// from `data-repeat-least`, so the first paint and every one after it agree.
fn repeat_slot_html(
    field: &Field,
    repeat: &Repeat,
    at: usize,
    standing: usize,
    opts: &Emit,
    doc: &Doc<'_>,
    out: &mut String,
) {
    let slot = repeat.instances.get(at);
    let progress = slot.map_or(&quasi_router::Progress::Idle, |slot| &slot.progress);
    out.push_str("<div");
    class_attr(&["field-repeat-slot"], opts, out);
    let _ = write!(out, " data-repeat-at=\"{at}\"");
    // The slot is named by what is in it rather than by where it is, so the
    // script must not rewrite the ordinal over the top of it.
    if slot.is_some_and(|slot| slot.named.is_some()) {
        out.push_str(" data-repeat-named");
    }
    // Stated rather than inferred from the markup inside, so the script and the
    // stylesheet read the slot's state from one place and a slot mid-flight is
    // the same string on every host.
    match progress {
        quasi_router::Progress::Idle => {}
        quasi_router::Progress::Working(_) => out.push_str(" data-repeat-progress=\"working\""),
        quasi_router::Progress::Done => out.push_str(" data-repeat-progress=\"done\""),
        quasi_router::Progress::Failed => out.push_str(" data-repeat-progress=\"failed\""),
    }
    out.push('>');
    for slot in field.instance_fields(at) {
        field_group_html(&slot, opts, doc, out);
    }
    // What is wrong with the slot as a whole, which a part's own error cannot
    // carry: the upload that failed, not the name that was too long.
    if let Some(error) = slot.and_then(|slot| slot.error.as_deref()) {
        out.push_str("<div");
        class_attr(&["form-error"], opts, out);
        out.push_str(" role=\"alert\">");
        escape_into(error, out);
        out.push_str("</div>");
    }
    // makeover's own meter, not a second spelling of one: how far a slot has
    // got is the proportion this renderer already knows how to draw.
    if let quasi_router::Progress::Working(Some(meter)) = progress {
        meter_html_into(&meter.as_layout(), opts, out);
    }
    out.push_str("<button type=\"button\"");
    class_attr(&["button", "field-repeat-remove"], opts, out);
    out.push_str(" data-repeat-remove");
    // A slot the work has not finished with is one the reader may not pull out
    // from under it, which is the floor's reason one state further along.
    if !repeat.fewer(standing) || progress.busy() {
        out.push_str(" disabled");
    }
    out.push('>');
    escape_into(&repeat.remove, out);
    out.push_str("</button></div>");
}

/// The document id of the list a field owns, from the field's own name.
///
/// Derived and never authored, which is the difference between a list a field
/// owns and two elements a description has to keep pointing at each other. The
/// box's own id is the name, so the two cannot collide.
///
/// The name is a [`handle`](crate::hyperscript::handle) at every call site, so
/// the result is one too and can be addressed from a program.
pub(crate) fn suggestions_id(name: &str) -> String {
    format!("{name}-suggestions")
}

/// The id of the popover container belonging to an anchorable thing.
///
/// [`suggestions_id`]'s sibling and derived the same way: a container the
/// description never names, minted from the name the description does carry,
/// so nothing has to point two elements at each other.
///
/// The handle is a region's [`Slot::id`](quasi_router::Slot::id) or a control's
/// [`Act::id`](quasi_router::Act::id). A screen's selection has neither and
/// needs neither -- see [`SELECTION_ANCHOR_ID`].
pub(crate) fn anchored_id(handle: &str) -> String {
    format!("{handle}-anchored")
}

/// The id of the popover container for the screen's selection.
///
/// Fixed rather than derived, because a screen holds one selection
/// ([`Screen::selection`](quasi_router::Screen::selection)) and
/// [`Anchor::Selection`](quasi_router::Anchor::Selection) therefore carries no
/// name to derive one from. It becomes derived on the day that field becomes a
/// map, which is the same day [`Act::over`](quasi_router::Act::over) starts
/// choosing between sets.
pub(crate) const SELECTION_ANCHOR_ID: &str = "quasi-selection-anchored";

/// An empty container for an anchored screen to land in.
///
/// Emitted beside the thing it belongs to and left empty until a route answers
/// with an [`Outcome::Anchored`](quasi_router::Outcome::Anchored), which is
/// exactly how a row's menu is emitted: a menu is a container the host opens its
/// own way, and this is that container for the things that are not rows.
///
/// `hidden` for the same reason a row's menu carries it. An empty container is
/// invisible either way; saying so is what keeps it out of the accessible tree
/// until there is something in it.
pub(crate) fn anchor_container_html(id: &str, opts: &Emit, out: &mut String) {
    out.push_str("<div");
    class_attr(&["anchored"], opts, out);
    out.push_str(" id=\"");
    escape_into(id, out);
    // Named rather than found by class, so a host's own menu code binds to
    // something a `class_prefix` cannot move. `data-menu="anchored"` and not
    // `"row"`: both are menus and only one of them belongs to a row.
    out.push_str("\" data-menu=\"anchored\" hidden></div>");
}

/// The combobox attributes that go on the control itself.
///
/// Through `makeover-webview`'s `Filling::control_attrs`, which exists for this:
/// what makes a box a combobox is the list it owns, and no description layer
/// carries one. `aria-expanded` starts false because a field is drawn before it
/// has been typed into, and the list's own program is what moves it.
///
/// `autocomplete="off"` because the browser's own list would sit on top of this
/// one, offering what it remembers being typed here instead of what the route
/// just answered.
fn combobox_attrs(list: &str) -> String {
    let mut attrs = format!(
        "role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"false\" \
         aria-controls=\"{list}\" autocomplete=\"off\""
    );
    crate::hyperscript::combobox(list, &mut attrs);
    attrs
}

/// The list a field owns, empty until the route answers.
///
/// Emitted with the field rather than by the answer, so the box has something
/// to point `aria-controls` at from the first draw. A reader told about a list
/// that is not in the document yet is told about nothing.
fn listbox_html(field: &Field, list: &str, opts: &Emit) -> String {
    let mut out = String::new();
    out.push_str("<div");
    class_attr(&["form-suggestions"], opts, &mut out);
    out.push_str(" id=\"");
    escape_into(list, &mut out);
    // Named by the field it belongs to. A listbox with no accessible name is
    // announced as a list of nothing in particular, and the box's own label is
    // what a reader has just heard.
    out.push_str("\" role=\"listbox\" aria-label=\"");
    escape_into(&field.label, &mut out);
    out.push('"');
    crate::hyperscript::suggestion_list(&field.name, list, &mut out);
    out.push_str("></div>");
    out
}

/// One candidate, as the answer to the question a field owns.
///
/// [`Outcome::Suggestions`](quasi_router::Outcome::Suggestions) rendered: the
/// inside of the list, and nothing else. What each entry carries is the pair
/// [`Choice`] carries — the value is what the box is set to and the label is
/// what is read — plus its index, which is how the keyboard finds the next one
/// without counting the ones before it.
///
/// A candidate that cannot be picked is announced and not offered:
/// `aria-disabled` says so, the reason is drawn beside it, and it carries
/// neither a value nor a program, so neither Enter nor a click can take it.
pub(crate) fn suggestions_html(name: &str, options: &[Candidate], opts: &Emit) -> String {
    let Some(name) = crate::hyperscript::handle(name) else {
        // The field this answers drew no list, for the same gate's reason, so
        // there is nothing here to put candidates into.
        return String::new();
    };
    let list = suggestions_id(name);
    let mut out = String::new();
    for (at, choice) in options.iter().enumerate() {
        // A row whose pick replaces the whole document is an anchor, because an
        // anchor is what a browser navigates. `action_attrs` writes the `href`
        // and no transport for such a pick (`00ee7af5`), and an `href` on a
        // `div` is an attribute nothing reads: the row would close the list and
        // stay where it was. Every other row is a `div`, since what picking it
        // does is htmx's or the box's and neither wants a link.
        let (open, close) = match &choice.picks {
            Some(action) if action.navigates => ("<a", "</a>"),
            _ => ("<div", "</div>"),
        };
        out.push_str(open);
        class_attr(&["form-suggestion"], opts, &mut out);
        // `aria-selected="false"` on every entry from the first draw, so the
        // keyboard's program moves a value that is already there rather than
        // introducing an attribute halfway through a list.
        let _ = write!(
            out,
            " id=\"{list}-{at}\" data-at=\"{at}\" role=\"option\" aria-selected=\"false\""
        );
        // What picking does. `ed1fa86f`: local by default, so a candidate that
        // says nothing writes its value into the box exactly as before. One
        // that carries an action has htmx call it, and nothing is written --
        // the search box's case, where a pick navigates and the typed value is
        // discarded.
        match &choice.picks {
            Some(action) => {
                action_attrs(action, Fires::Click, None, None, false, &mut out);
                crate::hyperscript::suggestion_acting(name, &list, &mut out);
            }
            None => {
                out.push_str(" data-value=\"");
                escape_into(&choice.value, &mut out);
                out.push('"');
                crate::hyperscript::suggestion(name, &list, &mut out);
            }
        }
        out.push('>');
        escape_into(&choice.label, &mut out);
        // The second line, and the whole of why a candidate is not a `Choice`
        // (`1fcf2e9b`). Its own element rather than folded into the label: it
        // is styled apart, and it is not part of what the typed value matches.
        if let Some(detail) = &choice.detail {
            out.push_str("<span");
            class_attr(&["form-suggestion-detail"], opts, &mut out);
            out.push('>');
            escape_into(detail, &mut out);
            out.push_str("</span>");
        }
        out.push_str(close);
    }
    out
}

/// The controls a [`Consult::sends`] names, as one selector.
///
/// By `name`, which is what the description carries and what the route reads
/// each value back under. A field named here that is not on the screen
/// contributes a selector that matches nothing, which is the miss handled the
/// way every other address miss is: visible, and not worth refusing to draw a
/// screen over.
///
/// `None` for the common field, which sends its own value and nothing else.
///
/// [`Consult::sends`]: quasi_router::Consult::sends
fn sends_selector(names: &[String]) -> Option<String> {
    if names.is_empty() {
        return None;
    }
    let mut out = String::new();
    for name in names {
        if !out.is_empty() {
            out.push_str(", ");
        }
        out.push_str("[name='");
        // The selector is written into an attribute, so the quoting has to
        // survive both. A name carrying an apostrophe would otherwise end the
        // selector's string early and change what is gathered.
        out.push_str(&name.replace('\\', "\\\\").replace('\'', "\\'"));
        out.push_str("']");
    }
    Some(out)
}

/// Markdown source into markup, for [`Node::Rich`], composed from the node's
/// two axes rather than picked from a preset.
///
/// docengine's presets are named points on a diagonal: `strict` turns tables,
/// footnotes and task lists **off** at the same time as it turns `nofollow`,
/// raw-HTML stripping and scheme filtering **on**. Those are two questions, and
/// reading them off one name is what made a page nofollow its own links -- the
/// only way to have prose with a followed link in it was to ask for the
/// permissive treatment of raw HTML as well.
///
/// So this composes `docengine::Renderer` from [`Richness`] and [`Trust`]
/// independently. The four cells all mean something:
///
/// ```text
/// Sentence + Untrusted   a forum post                (was `strict`)
/// Sentence + Trusted     a page's own sentence        (new, and the fix)
/// Document + Untrusted   a creator's long description (no preset had this)
/// Document + Trusted     the app's own long-form      (was `permissive`)
/// ```
///
/// **`Sentence + Untrusted` is `Renderer::strict()` field for field**, deliberately:
/// it is what `Node::rich` meant before the axes existed, and every call site
/// written against the old member keeps exactly what it had.
///
/// Unconditional. This sat behind a default-on `rich` feature until markdown was
/// made standard, and turning the feature off did not remove a cost so much as
/// produce a renderer that draws `**bold**` at the user. Markdown is what these
/// descriptions are made of, so rendering it is part of being a renderer rather
/// than an extra somebody opts into.
fn rich_html(source: &str, richness: Richness, trust: Trust) -> String {
    let full = matches!(richness, Richness::Document);
    let untrusted = matches!(trust, Trust::Untrusted);

    docengine::Renderer::permissive()
        // Richness: what the format may express.
        .with_tables(full)
        .with_footnotes(full)
        .with_tasklists(full)
        .with_strikethrough(full)
        .with_smart_punctuation(full)
        .with_strip_images(!full)
        // Strictness: what the app is willing to take from this author. Raw
        // markup and fetchable schemes are the author's reach into the
        // document, so both turn on exactly when the author is a stranger.
        .with_strip_raw_html(untrusted)
        .with_dangerous_scheme_filter(untrusted)
        .with_sanitize(if untrusted {
            docengine::SanitizePreset::Strict
        } else {
            docengine::SanitizePreset::Permissive
        })
        .render(source)
}

/// JSON-encode a string into an attribute value, both rules in one pass.
///
/// Small enough to own. Pulling in a JSON crate to write object literals of
/// strings would be the larger decision, and the encoder a renderer needs is
/// this: the six characters JSON requires escaped, plus a `\u00XX` form for the
/// rest of the C0 range.
///
/// The HTML escaping is applied here rather than by the caller, which is what
/// lets the payload go straight into `out`. Building the object and then
/// escaping the whole of it allocated a `String` for each, per action, and
/// there was nothing in between to look at.
///
/// The two rules compose in this order and only this order. JSON runs first, so
/// a quote in the text becomes `\"` and then `\&quot;`; the backslash JSON adds
/// is not a character HTML encodes, and the quote HTML encodes is not one JSON
/// would look at twice. The structural quotes the object needs are written as
/// `&quot;` directly, because they are markup rather than content.
fn json_string_attr(text: &str, out: &mut String) {
    out.push_str("&quot;");
    for ch in text.chars() {
        match ch {
            // JSON first, then the HTML form of what it produced.
            '"' => out.push_str("\\&quot;"),
            '\\' => out.push_str("\\\\"),
            '\n' => out.push_str("\\n"),
            '\r' => out.push_str("\\r"),
            '\t' => out.push_str("\\t"),
            c if (c as u32) < 0x20 => {
                let _ = write!(out, "\\u{:04x}", c as u32);
            }
            // The rest of what an attribute value cannot carry. JSON has no
            // opinion on any of these, so this arm is HTML's alone and matches
            // `escape_into` character for character.
            '&' => out.push_str("&amp;"),
            '<' => out.push_str("&lt;"),
            '>' => out.push_str("&gt;"),
            '\'' => out.push_str("&#39;"),
            c => out.push(c),
        }
    }
    out.push_str("&quot;");
}

/// The params as an `hx-vals` object, written into the attribute they land in.
fn json_object_attr(params: &Params, out: &mut String) {
    json_pairs_attr(params.iter(), out);
}

/// Values as a JSON array inside an attribute value.
///
/// The values a region watches for, which are app text: a licence key, a
/// timezone kind, whatever a select offers. Same escaper as the object form, so
/// there is one place where JSON and HTML compose and not two.
/// The three attributes a conditional thing carries: which control it watches,
/// what that control has to hold, and the values that satisfy it.
///
/// Written from one place for a region and for a single question inside a
/// form, because `reveal.js` reads the marks rather than the element: a `div`
/// and a field group answer the same script, and two emitters writing the same
/// three names is how they come apart.
fn reveal_attrs(reveal: &quasi_router::Reveal, out: &mut String) {
    out.push_str(" data-reveal=\"");
    escape_into(&reveal.control, out);
    out.push('"');
    match &reveal.when {
        quasi_router::Held::Anything => out.push_str(" data-reveal-when=\"any\""),
        quasi_router::Held::Nothing => out.push_str(" data-reveal-when=\"none\""),
        quasi_router::Held::Value(value) => {
            out.push_str(" data-reveal-when=\"value\" data-reveal-values=\"");
            json_values_attr(std::slice::from_ref(value), out);
            out.push('"');
        }
        quasi_router::Held::OneOf(values) => {
            out.push_str(" data-reveal-when=\"value\" data-reveal-values=\"");
            json_values_attr(values, out);
            out.push('"');
        }
    }
}

fn json_values_attr(values: &[String], out: &mut String) {
    out.push('[');
    for (i, value) in values.iter().enumerate() {
        if i > 0 {
            out.push(',');
        }
        json_string_attr(value, out);
    }
    out.push(']');
}

/// Name/value pairs as a JSON object inside an attribute value.
///
/// Shared with the shell, which writes the headers a document sends into
/// `hx-headers`. One escaper for both, since the two attributes have the same
/// shape and a second implementation is a second thing to get wrong.
pub(crate) fn json_pairs_attr<'a, I>(pairs: I, out: &mut String)
where
    I: IntoIterator<Item = (&'a str, &'a str)>,
{
    out.push('{');
    for (i, (name, value)) in pairs.into_iter().enumerate() {
        if i > 0 {
            out.push(',');
        }
        json_string_attr(name, out);
        out.push(':');
        json_string_attr(value, out);
    }
    out.push('}');
}

/// What makes a control call its action.
///
/// Here rather than at the call sites because every `hx-` attribute this crate
/// emits has to come out of one function, which is decision 13's claim that the
/// transport is replaceable and is asserted by a test.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub(crate) enum Fires<'a> {
    /// The user activating the control. htmx's default for a button or a link.
    Click,
    /// The user pressing a tab whose panel is a route.
    ///
    /// A gesture like [`Click`](Self::Click), and the second member that
    /// suppresses the `href` below, for a different reason than
    /// [`Load`](Self::Load): a tab strip's control *is* somewhere to go, and the
    /// place it goes is a fragment. An `href` to one is a link that middle-click,
    /// copy-link and a crawler would all follow to a shell-less scrap of a page,
    /// which is exactly the lying control `control_tag` exists to prevent --
    /// pointing the other way. So the strip keeps the `<button>` it has always
    /// emitted and the address stays on `hx-get` alone.
    ClickInStrip,
    /// The form being submitted. htmx's own default for a `<form>`, so no
    /// `hx-trigger` is emitted for it either.
    ///
    /// Distinguished from [`Click`](Self::Click) for one reason, and it is
    /// [`guards`](Self::guards): a waiting form cannot lock itself. `disabled`
    /// is not an attribute a `<form>` has and it does not reach descendants the
    /// way `<fieldset disabled>` does, so the guard has to name the button.
    Submit,
    /// The element existing. What a region fed by a call uses, so the screen
    /// paints its stand-in and the slow part arrives behind it.
    ///
    /// The only member that is not a gesture, which is why it is the only one
    /// that suppresses the `href` below: a region is not somewhere to go.
    Load,
    /// The element existing, and then every [`CADENCE`](crate::CADENCE)
    /// afterwards.
    ///
    /// [`Slot::live`](quasi_router::Slot::live) on a region that also names a
    /// call. `load` is kept beside the interval rather than replaced by it,
    /// because htmx's `every` waits out the first period before its first
    /// request and a region that painted its stand-in and then sat empty for
    /// ten seconds is a slower screen than the one this replaces.
    ///
    /// Not a gesture either, and suppresses the `href` for
    /// [`Load`](Self::Load)'s reason.
    Live,
    /// The control's own value changing. What a checkbox that is itself the
    /// write does.
    Change,
    /// The value of a control *inside* this element changing.
    ///
    /// A field group, whose control is emitted by makeover-webview and has no
    /// seam to hang attributes on. The `change` event bubbles, so the wrapper
    /// catches it whichever of input, select or textarea the field turned out to
    /// be, and the value is found back rather than assumed.
    ChangeInside,
    /// A key pressed anywhere in the document.
    ///
    /// What a [`Chrome`](quasi_router::Chrome) binding is: it belongs to no
    /// element, so it listens on the body rather than on itself. The string is
    /// the filter over `KeyboardEvent`, built by `crate::chrome` because
    /// reading a key name is the host's job.
    Key(&'a str),
    /// The user clicking the element, but not a control inside it.
    ///
    /// A table row carries its `activate` on the row itself, unlike a list
    /// row, which hangs it on the primary text and so has never had this
    /// problem. Once a cell can hold a control, a click on that control
    /// bubbles to the row and htmx fires both: pressing Remove would delete
    /// the key and open it. The filter is on the row rather than a
    /// `stopPropagation` on the button because the row is the element making
    /// the wrong assumption, and a button that swallows events breaks anything
    /// else listening above it.
    ClickBeside,
    /// The value of a control inside this element being typed into, once it has
    /// stood still for the given wait.
    ///
    /// A [`Field::consults`] on a control the reader types into, which is what
    /// [`typed_into`] decides. `keyup changed` rather than `change`, because
    /// the question is about the value being written and `change` does not fire
    /// until the box is left. The delay is the description's, not this
    /// renderer's: the four sites this replaces each spelled `delay:500ms` by
    /// hand, and a number picked here is a number the terminal renderer would
    /// have had to guess at separately.
    ///
    /// Every other control on a field's consult takes
    /// [`Working`](Self::Working) instead, `aeb44860`: `keyup` never hears a
    /// select move.
    ///
    /// [`Field::consults`]: quasi_router::Field::consults
    Typing {
        /// How long the value stands still first.
        after: std::time::Duration,
        /// How many characters it must carry before the question is asked at
        /// all. `0` asks whatever is there.
        at_least: usize,
    },
    /// Any control inside this element moving, once it has stood still for the
    /// given wait.
    ///
    /// [`Slot::consults`], and a [`Field::consults`] on anything
    /// [`typed_into`] refuses. The `input` event and not
    /// [`Typing`](Self::Typing)'s
    /// `keyup`, because these dials are not all typed into: MNW's fee
    /// calculator has four number boxes and a radio group, and `keyup` never
    /// hears the radio. `input` is what the shipped markup already reaches for
    /// on the four boxes, it fires for a radio, a checkbox and a select as
    /// well, and it does not fire on blur -- which `change` does, so the pair
    /// `keyup, change` would ask the same question twice for every box the
    /// reader typed in and then left.
    ///
    /// The wait applies to the radio as much as to the boxes. That is a
    /// difference from the hand-written markup, which delays the boxes and
    /// fires the radio at once, and it is the description's number rather than
    /// this renderer's: a description that wanted the two to differ would say
    /// so with two consults. A field's discrete consult says zero and means it.
    ///
    /// [`Field::consults`]: quasi_router::Field::consults
    /// [`Slot::consults`]: quasi_router::Slot::consults
    Working {
        /// How long the value that moved stands still first.
        after: std::time::Duration,
        /// How many characters that value must carry before the question is
        /// asked at all. `0` asks whatever is there.
        at_least: usize,
    },
}

impl<'a> Fires<'a> {
    /// The key filter, when the gesture is a keystroke.
    ///
    /// One caller: the destination that goes back, which is the one this
    /// renderer performs itself rather than handing to htmx. Every other
    /// destination gets its gesture written as an `hx-trigger` and never has to
    /// ask what the gesture was.
    const fn key(self) -> Option<&'a str> {
        match self {
            Self::Key(filter) => Some(filter),
            _ => None,
        }
    }

    /// The selector this trigger needs gathered, beyond anything the caller
    /// asked for.
    ///
    /// Only one kind has one: a field group's control is inside it rather than
    /// being it, so the value has to be found back. Returned rather than
    /// written so it can be joined with the screen's ticks — two `hx-include`
    /// attributes on one element is markup a parser drops half of.
    const fn include(self) -> Option<&'static str> {
        match self {
            Self::ChangeInside | Self::Typing { .. } | Self::Working { .. } => {
                Some("find input, find select, find textarea")
            }
            Self::Click
            | Self::ClickInStrip
            | Self::Submit
            | Self::Change
            | Self::Key(_)
            | Self::ClickBeside
            | Self::Load
            | Self::Live => None,
        }
    }

    /// What an [`Action::awaiting`] on this trigger locks while it waits.
    ///
    /// Everything that fires on a gesture is the element the gesture landed
    /// on, so `this` locks the thing that was pressed. A form is the exception
    /// and the reason this exists: htmx sets `disabled` on whatever the
    /// selector resolves to, a `<form>` has no such attribute, and it does not
    /// cascade. `hx-disable="this"` on a form is therefore a double-submit
    /// guard that permits a double submit — worse than none, because a
    /// consumer deletes a working hand-rolled guard to adopt it.
    ///
    /// The button rather than every control inside: it is what has to stop
    /// answering, and locking the fields as well would take the text away from
    /// a reader still correcting it.
    const fn guards(self) -> &'static str {
        match self {
            Self::Submit => "find button[type='submit']",
            Self::Click
            | Self::ClickInStrip
            | Self::Change
            | Self::Key(_)
            | Self::ClickBeside
            | Self::Load
            | Self::Live
            | Self::ChangeInside
            | Self::Typing { .. }
            | Self::Working { .. } => "this",
        }
    }
}

/// The transport attributes for one action.
///
/// # The two bags land in two places, and that is the point
///
/// An action carries what the control sends (`params`) and the view it was
/// offered under (`carried`), and htmx has a slot for each: the address takes
/// the view, `hx-vals` takes the payload. So a write to a filtered list emits
/// `hx-post="/problems/{id}/status?status=Open"` with
/// `hx-vals='{"status":"Dismissed"}'`, and the two `status` values never meet.
///
/// `hx-vals` is a JSON object literal, so two entries under one name emitted a
/// duplicate key and every parser kept the last — inverting
/// [`Params::get`]'s first-wins rule the moment a value crossed the wire, and
/// silently dropping every repeat that [`Params::get_all`] exists to carry.
/// Folding the view into the address fixes both: a query string repeats a name
/// happily, and it is the half that wanted to be in the URL anyway.
///
/// Nothing here concatenates a `?`. [`quasi_http::route_url`] does that, in one
/// place, with a real encoder, because hand-built query strings are where
/// escaping bugs live.
///
/// The separation is a write's. On a read htmx puts `hx-vals` in the query
/// string too, so the two bags land in one place either way, and htmx 4 deletes
/// an address parameter whose name a value repeats before appending it, where
/// 2.x appended both. So a GET naming one thing in both bags sends the payload
/// and not the view. Nothing in the tree does; a read that wanted both would
/// have to say which one it means, and this is where to look when it does.
pub(crate) fn action_attrs(
    action: &Action,
    fires: Fires,
    confirm: Option<&str>,
    gathers: Option<&str>,
    chooses: bool,
    out: &mut String,
) {
    // Neither way out of the app is htmx's business: nothing swaps, no route is
    // called, and the browser follows a normal link.
    //
    // The two differ in where the reader ends up, which is the description's
    // (`48a6e9e5`). `External` is a reference to come back from, so it is put
    // aside in a tab; `Leaving` is this document handing the reader on, so it
    // replaces the page, which is what a bare `href` already does.
    //
    // `rel` on both rather than only on the tab. It is `noopener` that needs
    // the argument and it needs it once: a new tab with `window.opener` intact
    // hands the other page a handle on this one, and while a same-tab
    // navigation gives it no live handle, it still sends `Referer`, which
    // `noreferrer` is what stops. Neither is a cost, and a branch here would be
    // a second thing to get right.
    if let Destination::External(url) | Destination::Leaving(url) = &action.destination {
        out.push_str(" href=\"");
        escape_into(url, out);
        out.push('"');
        if matches!(action.destination, Destination::External(_)) {
            out.push_str(" target=\"_blank\"");
        }
        out.push_str(" rel=\"noopener noreferrer\"");
        return;
    }

    // Nothing leaves the machine, so nothing htmx does applies: no verb, no
    // trigger, no `href`, and above all no address -- a local destination has
    // none, and `route_url` below would build `hx-get=""`, which htmx reads as
    // "ask the page you are on". That is the failure this branch exists to make
    // impossible, and it is why the branch is here rather than left to the
    // `matches!` further down.
    //
    // `210574ca`, ruled 2026-08-18. This crate is the one
    // `Renderer::Hybrid` renderer, so it is the one that has to be told.
    //
    // What it emits is the mark and not the behaviour, and that is unchanged by
    // the hyperscript pass of `0081563e`: what happens locally is named by the
    // member carrying the action, and no member names one yet, so there is no
    // program to write here. `crate::hyperscript` is where it goes when there
    // is, and the attribute is what makes every site findable meanwhile.
    // Wherever the reader came from. The browser is the host holding that
    // history, so the behaviour is emitted rather than marked: this is the one
    // destination a webview can perform on its own, and `crate::hyperscript`
    // carries why an attribute is allowed to hold the program.
    //
    // Before the `Local` branch and not folded into it: `is_local` is false
    // here, and the mark that branch writes says "no request at all", which is
    // not what going back is.
    if action.destination.is_back() {
        crate::hyperscript::back(fires.key(), out);
        return;
    }

    if action.destination.is_local() {
        out.push_str(" data-local");
        // The payload travels with it, for `by_host`'s reason: dropping it here
        // would be the description saying something the markup then did not
        // carry, and there is no other place to read it from.
        if !action.params.is_empty() {
            out.push_str(" data-vals=\"");
            json_object_attr(&action.params, out);
            out.push('"');
        }
        // Deliberately not `awaiting_attrs`. A wait is a fact about a call and
        // this is not one; a local action that says it waits is a description
        // bug, and drawing a spinner for it would hide that rather than show it.
        return;
    }

    // The address, built once. The `href` below and the verb further down are
    // the same string whenever both are emitted -- a read of a route names one
    // place -- and building it twice was a `String` per link on every screen
    // made mostly of links.
    let url = quasi_http::route_url(action.destination.as_str(), &action.carried);

    // The host makes this call, so the renderer hands it the address and emits
    // no transport at all: no verb, no trigger, no `href`. `a81384d4`, and the
    // same shape `saves` already has -- a named attribute the host acts on,
    // rather than a class plus positional arguments.
    //
    // `data-sends` and not `data-action`: what is named is where the thing goes,
    // which is the half the description knows. How it gets there is the host's
    // and is exactly what is not being described.
    if action.by_host {
        out.push_str(" data-sends=\"");
        escape_into(&url, out);
        out.push('"');
        // The payload travels with it. Dropping it here would be the
        // description saying something the markup then did not carry, and the
        // host has no other place to read it from.
        if !action.params.is_empty() {
            out.push_str(" data-vals=\"");
            json_object_attr(&action.params, out);
            out.push('"');
        }
        // The wait is still a fact about the call and the host is what draws it,
        // so the mark goes on. The `hx-disable` half does not: locking the
        // control is htmx's doing on a request htmx is making, and this is not
        // one.
        awaiting_attrs(action, out);
        return;
    }

    // The answer belongs in a mount of its own, and a mount here is a second
    // document. Opening one is the host's -- a webview cannot put up a window --
    // so this emits the address and no transport, exactly the shape `by_host`
    // has above. goingson `3fb2526a`.
    //
    // `data-mount` and not `data-sends`: the two say different things to the
    // host and a host that conflated them would post where it should open. What
    // is named is still only where the thing goes.
    //
    // Checked after `by_host` because a call the host performs is already the
    // host's to place; marking such a call `elsewhere` says nothing this
    // renderer can add.
    if action.elsewhere {
        out.push_str(" data-mount=\"");
        escape_into(&url, out);
        out.push('"');
        // The payload travels with it, for the reason it travels with the two
        // branches above: the description said it, and the host has nowhere
        // else to read it from.
        if !action.params.is_empty() {
            out.push_str(" data-vals=\"");
            json_object_attr(&action.params, out);
            out.push('"');
        }
        // No wait mark. Putting up a mount is not a call that resolves, so a
        // spinner on the control would be waiting for something that never
        // lands.
        return;
    }

    // The whole document is being replaced, so the browser is what replaces it.
    // The anchor goes on and nothing else does: no verb, no trigger, no swap.
    // An htmx request here would fetch a whole screen and morph it into the page
    // it was meant to leave, which is the failure `00ee7af5` was ruled on.
    //
    // A narrowing rather than an addition. The `href` below is emitted for every
    // read of a route already, for middle-click, copy-link, a crawler and the
    // page with JS off; this is the same anchor with the transport beside it
    // dropped.
    //
    // Guarded on the same three conditions that anchor is, so the mark never
    // turns a call into something it was not. A write marked this way is still
    // performed, because an anchor would ask where the description said to tell,
    // and a load or live trigger has no gesture to follow a link with.
    //
    // Named as the one gesture rather than as a list of exclusions, and that is
    // a correction. It read `!matches!(fires, Load | Live | ClickInStrip)`,
    // which let every gesture that is not a click through -- and the branch
    // *returns*, so a navigating read on a `Fires::ChangeInside` wrapper got an
    // `href` on a `<div>` and no transport at all. `Chrome::band`'s search box
    // is exactly that shape and did nothing. An `href` is only meaningful on
    // the element a browser follows, which is the anchor `control_tag` emits
    // for a click, so the guard says so.
    //
    // The last two guards are the attributes an anchor cannot carry the meaning
    // of. `hx-confirm` is htmx gating the request, so leaving htmx out would
    // drop a question the description asked before acting; `download` and
    // `data-saves` say the answer is a file, which is the opposite of replacing
    // the document. Either one and the transport is emitted as it was, since a
    // dropped prompt and a navigation to a file are both worse than a mark that
    // did nothing.
    if action.navigates
        && matches!(action.destination, Destination::Route(_))
        && !action.method.mutates()
        && matches!(fires, Fires::Click)
        && confirm.is_none()
        && action.saves.is_none()
    {
        out.push_str(" href=\"");
        escape_into(&url, out);
        out.push('"');
        return;
    }

    // A read of a route this app answers is a link, and it gets the address as
    // well as the transport. htmx uses `hx-get` and prevents the default, so
    // the `href` is what everything else uses: middle-click, copy-link, a
    // crawler, and the page with JS off. The parameters are folded into it
    // because a link to a filtered list that drops the filter is a different
    // place, and `hx-vals` below carries the same ones down htmx's path.
    if matches!(action.destination, Destination::Route(_))
        && !action.method.mutates()
        && matches!(fires, Fires::Click)
    {
        out.push_str(" href=\"");
        escape_into(&url, out);
        out.push('"');
    }

    // Everything the screen's selection has ticked, gathered by the selector
    // the caller built. `5f2b8753`: this is the whole of what the per-app JS
    // used to do, and it is declarative because a checkbox already submits its
    // own name and value -- all that was missing was something saying which
    // boxes belong together.
    //
    // Here rather than in `act_html` because it is htmx, and htmx entering this
    // crate anywhere else is what the architectural test forbids.
    //
    // One attribute, however many things are being gathered. A field writing
    // over a selection wants both its own control and the ticks, and `fires`
    // below carries the first as a selector of its own; two `hx-include`
    // attributes on one element is markup a parser drops half of, so they are
    // joined here rather than emitted in two places that cannot see each other.
    let include = match (gathers, fires.include()) {
        (None, None) => None,
        (Some(one), None) | (None, Some(one)) => Some(one.to_owned()),
        (Some(ticks), Some(own)) => Some(format!("{own}, {ticks}")),
    };
    if let Some(selector) = &include {
        out.push_str(" hx-include=\"");
        escape_into(selector, out);
        out.push('"');
    }

    // Where the answer goes, when the responder is not ours to ask. Emitted
    // before the verb so the attributes read in the order they are reasoned
    // about: where it lands, then what is sent.
    match &action.replaces {
        None => {}
        Some(Replaces::Region(region)) => {
            out.push_str(" hx-target=\"#");
            escape_into(region, out);
            out.push('"');
        }
        // `closest [data-row]` rather than a class, for `data-act`'s reason: an
        // attribute survives a host setting `Emit::class_prefix`, and this
        // function does not take `Emit` and so could not build the prefixed
        // selector anyway. One attribute across list rows and table rows, the
        // same choice `data-menu="row"` already made, so a screen mixing the
        // two needs one selector rather than two that look alike.
        //
        // `outerHTML` because "replaces the row I am in" means the row element
        // goes. The default swap would nest the answer inside the row it was
        // meant to replace.
        Some(Replaces::Enclosing) => {
            out.push_str(" hx-target=\"closest [data-row]\" hx-swap=\"outerHTML\"");
        }
        // A named hook the host acts on, in the same spirit as `data-saves` and
        // for the same reason: htmx has no request-side spelling for "what is
        // showing is now stale". The response header `HX-Refresh` is the
        // server's half, and these acts call routes that answer with a status.
        Some(Replaces::Everything) => {
            out.push_str(" data-replaces=\"everything\"");
        }
    }

    // The answer is a file the reader keeps, not a view. On a link the browser
    // does the whole job from the attribute, so nothing else is needed and the
    // control still works with JS off. On a write it cannot: a response has to
    // be performed before it can be saved, so this is a named hook the host
    // acts on, in the same spirit as `data-act` and for the same reason it is an
    // attribute rather than a class. The host handles one attribute instead of
    // a per-button behaviour named by a class and two positional arguments.
    if let Some(filename) = &action.saves {
        if is_link(action) {
            out.push_str(" download=\"");
        } else {
            out.push_str(" data-saves=\"");
        }
        escape_into(filename, out);
        out.push('"');
    }

    let verb = match action.method {
        Method::Get => " hx-get=\"",
        Method::Post => " hx-post=\"",
        Method::Delete => " hx-delete=\"",
        Method::Put => " hx-put=\"",
    };
    out.push_str(verb);
    escape_into(&url, out);
    out.push('"');

    if chooses {
        // `1894e95d`. A row of a live selection sends what the press *meant*
        // beside whatever the address already carries, and only the browser can
        // say what it meant, so the object is computed at click time rather than
        // written now. htmx allows one `hx-vals`, so the static half is folded
        // into the same literal rather than emitted twice.
        //
        // `metaKey` beside `ctrlKey` because a Mac browser reports command as
        // the former and every file manager on that platform toggles with it.
        // Shift wins, matching the desktop everywhere: a range is the bigger
        // statement, and holding both cannot mean the plain press.
        out.push_str(" hx-vals=\"js:{");
        for (name, value) in action.params.iter() {
            escape_into(&format!("&quot;{name}&quot;: &quot;{value}&quot;, "), out);
        }
        out.push_str("&quot;");
        escape_into(quasi_router::Node::CHOOSING, out);
        out.push_str("&quot;: event.shiftKey ? &quot;through&quot;              : ((event.ctrlKey || event.metaKey) ? &quot;also&quot; : &quot;only&quot;)}\"");
    } else if !action.params.is_empty() {
        out.push_str(" hx-vals=\"");
        json_object_attr(&action.params, out);
        out.push('"');
    }

    // Named even where it matches htmx's own default for the element, so the
    // markup says what it does rather than resting on a default holding.
    match fires {
        // htmx's default for the element in both cases: a click for a button or
        // a link, a submit for a form.
        Fires::Click | Fires::ClickInStrip | Fires::Submit => {}
        // `data-act` and not the class, so the filter does not depend on
        // `Emit::class_prefix` and does not break when a host sets one. Same
        // reasoning as `data-menu` on a row's menu.
        Fires::ClickBeside => out.push_str(concat!(
            " hx-trigger=\"click[!event.target.closest(",
            "&#39;[data-act]&#39;)]\""
        )),
        Fires::Change => out.push_str(" hx-trigger=\"change\""),
        // Once, when the element appears. `Slot::fed_by` is the whole of what
        // reaches this, and the region it sits on is `Readiness::Pending`
        // already, so the stand-in is on screen before the request leaves.
        Fires::Load => out.push_str(" hx-trigger=\"load\""),
        // `load` first, then the interval. htmx waits out a whole period before
        // an `every` fires, so the pair is what makes the first paint arrive at
        // the same time it did before the region became live.
        Fires::Live => {
            out.push_str(" hx-trigger=\"load, every ");
            out.push_str(&crate::CADENCE.as_secs().to_string());
            out.push_str("s\"");
        }
        Fires::Key(filter) => {
            // `from:body`, because the element is hidden and never focused: a
            // trigger on itself would wait for a keystroke it can never
            // receive.
            out.push_str(" hx-trigger=\"keydown[");
            escape_into(filter, out);
            out.push_str("] from:body\"");
        }
        // Its `hx-include` is emitted above with the ticks, if there are any.
        Fires::ChangeInside => out.push_str(" hx-trigger=\"change\""),
        // `changed` so that arrow keys and Tab do not ask the same question
        // again, and the delay so that a name is asked about once rather than
        // once per letter. Milliseconds because that is htmx's unit; the
        // description carries a `Duration` so the terminal renderer is not
        // handed a number in someone else's units.
        // The dials that are not typed into: `input` covers the radio and the
        // select `keyup` never hears, and does not fire on blur the way
        // `change` would. `Fires::Working` carries the argument.
        Fires::Working { after, at_least } => {
            out.push_str(" hx-trigger=\"input");
            if at_least > 0 {
                out.push_str("[event.target.value.length&gt;=");
                out.push_str(&at_least.to_string());
                out.push(']');
            }
            out.push_str(" changed delay:");
            out.push_str(&after.as_millis().to_string());
            out.push_str("ms\"");
        }
        Fires::Typing { after, at_least } => {
            out.push_str(" hx-trigger=\"keyup");
            // htmx takes the filter on the event and the modifiers after it, so
            // the floor goes here rather than beside the delay. `event.target`
            // and not `this`: the trigger sits on the wrapper and the value
            // being typed belongs to the control inside it, which is the same
            // reason `include` above has to find the control back.
            if at_least > 0 {
                out.push_str("[event.target.value.length&gt;=");
                out.push_str(&at_least.to_string());
                out.push(']');
            }
            out.push_str(" changed delay:");
            out.push_str(&after.as_millis().to_string());
            out.push_str("ms\"");
        }
    }

    // Asking before acting is transport here, same as the verb: htmx gates the
    // request on it. That is also why it lands in this function rather than
    // beside the label — every `hx-` attribute this crate emits comes from one
    // place, or swapping htmx for fixi stops being a one-function change.
    if let Some(prompt) = confirm {
        out.push_str(" hx-confirm=\"");
        escape_into(prompt, out);
        out.push('"');
    }

    // Decision 7's slack: a morph preserves focus, scroll and input state
    // through a swap, so a whole-Screen answer stops being destructive.
    //
    // Unconditional since the emitter moved to htmx 4, where `outerMorph` is a
    // swap style rather than a swap style an extension has to supply. Under 2.x
    // this was emitted only when the shell loaded idiomorph, because htmx fell
    // back to `innerHTML` in silence when it did not -- and silently
    // destructive is the outcome decision 7 exists to avoid. There is nothing
    // left to be missing. `outerMorph` and not `innerMorph`: what is replaced
    // is the target itself, which is what the extension's bare `morph` meant.
    out.push_str(" hx-swap=\"outerMorph\"");

    // The action says it waits on something that resolves once, so the control
    // stops answering until it does. `hx-disable` is the half of this
    // treatment the MNW server writes twice against 57 spinners, and it is the
    // half that guards a double-submitted purchase.
    //
    // `hx-disable` is htmx 4's name for what 2.x called `hx-disabled-elt`. The
    // name 2.x gave `hx-disable` -- skip processing this subtree -- is
    // `hx-ignore` in 4, and nothing here emits it.
    //
    // No `hx-indicator`: htmx already puts `htmx-request` on the element that
    // made the request, so naming it as its own indicator emits an attribute
    // that changes nothing. A screen wanting a spinner somewhere else is
    // pointing at an element no description names.
    //
    // No static `aria-busy` either. The control is not busy when the page is
    // painted, and an attribute that is true only between two events is the
    // binder's to set. What a reader gets in the meantime is the `disabled` htmx
    // applies, which is not silent.
    if action.awaiting.is_some() {
        // What gets locked is the trigger's to say, not always `this`: see
        // `Fires::guards`.
        out.push_str(" hx-disable=\"");
        out.push_str(fires.guards());
        out.push('"');
        awaiting_attrs(action, out);
    }
}

/// What a control says about the wait it is in, without saying who locks it.
///
/// `hx-disable` stayed at the call site because it needs the trigger, which is
/// the renderer's business either way.
fn awaiting_attrs(action: &Action, out: &mut String) {
    let Some(awaiting) = &action.awaiting else {
        return;
    };
    out.push_str(" data-awaiting=\"");
    out.push_str(if awaiting.is_determinate() {
        "determinate"
    } else {
        "indeterminate"
    });
    out.push('"');
    // The amount, when it was measured. Never a duration and never anything
    // derived into one: a bar drawn from this shows what is done over what
    // there is, and the time it has taken, and predicts nothing.
    if let Some(amount) = awaiting.amount {
        let _ = write!(out, " data-awaiting-amount=\"{amount}\"");
    }
}

/// Whether an action is somewhere to go rather than something to do.
///
/// Two ways to be a link. An external destination leaves. A read of a route
/// this app answers is also a link: it has an address, it can be visited
/// directly, and nothing changes because it was.
///
/// A write is never a link however it is spelled, which is the whole of the
/// other side. An anchor is something a browser may prefetch and a crawler will
/// follow, and neither is allowed to delete a task.
///
/// A local destination is neither way. There is nowhere to go, so an anchor
/// would carry no address and a middle-click would open a copy of the page the
/// reader is already on. It is a button, whatever its method says: the method
/// is meaningless once nothing is asked, the same way it is on a
/// [`Destination::External`].
const fn is_link(action: &Action) -> bool {
    if action.destination.is_local() {
        return false;
    }
    action.destination.is_external() || !action.method.mutates()
}

/// The element a control becomes.
///
/// A link is an anchor and a write is a button, and a button that navigates is
/// a button lying to everything that reads the page: middle-click, copy-link,
/// a crawler and a screen reader included. This keyed on external-or-not until
/// the read case was separated out, which made every internal navigation a
/// control that only worked by running JavaScript first.
///
/// Branching on the [`Destination`] variant and never on the shape of the
/// string is the rule `Destination`'s own docs set. "Starts with https" is how a
/// route named `/https-setup` ends up opening a browser.
const fn control_tag(action: &Action) -> (&'static str, &'static str) {
    if is_link(action) {
        ("<a", "</a>")
    } else {
        ("<button type=\"button\"", "</button>")
    }
}

/// A control that calls a route, with whatever it asks for first around it.
pub(crate) fn act_html(act: &Act, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    if act.asks.is_empty() {
        control_html(act, opts, out);
        anchor_slot(act, opts, out);
        return;
    }

    // `Act::asks`, the disclosure half. MNW's bulk bar presses "Set Price" and
    // reveals a box, an Apply and a hint, all of it hidden behind a `hidden`
    // class and 40 lines of JS toggling it. `details` is what a browser already
    // has for that: it opens on the press, closes on the second one, keeps its
    // own state across a swap of anything outside it, and needs no script.
    //
    // The summary carries the verb and the control inside carries it again,
    // rather than the inner one being called "Apply". A described act has one
    // label, and inventing a second word here would be this renderer writing
    // copy. The count the selection script appends lands on the inner control,
    // which is the one that fires.
    out.push_str("<details");
    class_attr(&["ask"], opts, out);
    out.push('>');
    out.push_str("<summary");
    class_attr(&["button", "ask-open"], opts, out);
    out.push('>');
    escape_into(&act.label, out);
    out.push_str("</summary><div");
    class_attr(&["ask-body"], opts, out);
    out.push('>');
    for field in &act.asks {
        // `as_asked`: a question here is answered by the control below it, so
        // the write members are dropped rather than honoured. A box that also
        // wrote on its own would send the value twice, once as it was typed and
        // once when the verb fired.
        field_group_html(&field.as_asked(), opts, doc, out);
    }
    control_html(act, opts, out);
    out.push_str("</div></details>");
    anchor_slot(act, opts, out);
}

/// The popover container belonging to a named control, if it is named.
///
/// After the control and outside it: an anchored screen is drawn *at* the
/// control, and a menu inside a `button` is markup a browser is entitled to
/// discard. That is the same placement a row's menu takes for the same reason.
fn anchor_slot(act: &Act, opts: &Emit, out: &mut String) {
    if let Some(id) = act.id.as_deref().and_then(crate::hyperscript::handle) {
        anchor_container_html(&anchored_id(id), opts, out);
    }
}

/// The control itself: the label, the address, and what it gathers.
fn control_html(act: &Act, opts: &Emit, out: &mut String) {
    // The commit control for a staged selection gathers every tick on the
    // screen. One selector rather than a name per box: a screen holds one set
    // (`Screen::selection`), so the class the ticks already carry is what they
    // have in common. Built here because it needs `Emit`, which the transport
    // function does not take -- a host setting `class_prefix` moves the class
    // and the selector together.
    //
    // Built inside the `map` and not before it: staged selections are rare and
    // every other control on the screen was paying for two `String`s it then
    // dropped. `class` rather than `class_into` because what is wanted here is
    // a value, and a selector is the one place this crate holds one.
    //
    // A control that asked for a value gathers that too, by the disclosure it
    // sits in. `closest details` rather than an id: nothing in this renderer
    // mints ids, and the boxes a press should send are exactly the ones inside
    // the `details` the press happened in.
    let mut selectors: Vec<String> = Vec::new();
    if act.over.is_some() {
        selectors.push(format!(".{}", class("row-select", opts)));
    }
    if !act.asks.is_empty() {
        selectors.push("closest details".to_owned());
    }
    let gathers = (!selectors.is_empty()).then(|| selectors.join(", "));
    let gathers = gathers.as_deref();
    // `button`, which is makeover's name for this and carries its whole
    // interactive set: the raised bevel, the hover fill, the pressed inset, the
    // focus ring and the disabled treatment. This emitted `act`, a second name
    // for the same thing that no stylesheet in the tree defined, so a described
    // control rendered as unstyled text. There was never a concept here that
    // `button` was not already the word for.
    let (open, close) = control_tag(&act.action);
    out.push_str(open);
    class_attr(&["button"], opts, out);
    tone_attr(act.tone, out);
    // Named rather than found by class, so anything binding to "this is a
    // control" survives a host setting `Emit::class_prefix`. `Fires::ClickBeside`
    // is the first reader; a table row uses it to tell its own click apart from
    // a press on a button sitting inside one of its cells.
    out.push_str(" data-act");

    // `ae8e8836`. The control's own name in the document, so the container
    // emitted beside it has something to be positioned against. Emitted only
    // when the description gave one: `Act::id` is `None` on nearly every
    // control, and a renderer minting ids for the rest would be inventing
    // addresses nothing asked for.
    if let Some(id) = &act.id {
        out.push_str(" id=\"");
        escape_into(id, out);
        out.push('"');
    }

    // The hook the selection script reads: this control acts on the set, so it
    // says how many are in it and goes inert when there are none. Named rather
    // than a class for `data-act`'s reason, and it carries the selection's name
    // even though nothing selects between sets yet -- `Act::over` explains why
    // that day is not this one, and an attribute that already holds the name
    // costs nothing to start reading.
    if let Some(over) = &act.over {
        out.push_str(" data-over=\"");
        escape_into(over, out);
        out.push('"');
    }

    // Where a chosen value goes, and what goes there. `f35aafee`. Two escaped
    // attributes rather than an emitted program: the value is app text -- a
    // media file's name arrives inside it -- and `crate::hyperscript`'s one
    // standing rule is that no program is built out of any. `crate::FILL_JS`
    // reads both.
    //
    // Emitted whatever the state is, unlike the transport below. A disabled
    // control performs nothing because it reports no click, so the guard is the
    // element rather than the absence of the attribute, and a control that is
    // re-enabled still knows where it deposits.
    if let Some(fill) = &act.fills {
        out.push_str(" data-fills=\"");
        escape_into(&fill.field, out);
        out.push_str("\" data-fill=\"");
        escape_into(&fill.value, out);
        out.push('"');
    }

    match act.state {
        Some(layout::State::Disabled) => {
            // Disabled and emitting no transport, rather than disabled and
            // still carrying the address. A control that stops answering input
            // should also stop being a request waiting to be re-enabled from
            // the console.
            //
            // An anchor has no `disabled`, and omitting the href is what
            // actually stops it: an `<a>` without one is not a link, so it
            // drops out of the tab order on its own. `aria-disabled` is what
            // says why, since a bare span-shaped anchor says nothing.
            if is_link(&act.action) {
                out.push_str(" aria-disabled=\"true\"");
            } else {
                out.push_str(" disabled");
            }
        }
        // No `autofocus` arm. A description does not state focus: the browser
        // owns reach and focus here, which is what `makeover-layout` 0.19.0
        // settled by removing the member this used to read.
        //
        // `State` is `#[non_exhaustive]`, so a member added upstream lands
        // here. Emitting the transport is the right default for anything that
        // is not a suppression: a state this renderer has not learned yet
        // should leave the control working, not silently inert.
        _ => action_attrs(
            &act.action,
            Fires::Click,
            act.confirm.as_deref(),
            gathers,
            false,
            out,
        ),
    }

    // The confirmation rides with the transport, in `action_attrs`. The key does
    // not: `accesskey` is plain HTML and no part of htmx. It is emitted even
    // though a browser makes little of it, because a key is the affordance in a
    // terminal and this is the nearest honest thing a page has.
    if let Some(key) = &act.key {
        out.push_str(" accesskey=\"");
        escape_into(key, out);
        out.push('"');
    }

    // `ca7b5200`. Standing help, as `title` *and* as `aria-description`. `title`
    // alone is the mistake the shipped templates made 90 times: it is a hover, so
    // a touch reader never sees it and several screen readers are configured not
    // to announce it. Both attributes say the same sentence to the two audiences
    // that read different ones.
    if let Some(hint) = &act.hint {
        out.push_str(" title=\"");
        escape_into(hint, out);
        out.push_str("\" aria-description=\"");
        escape_into(hint, out);
        out.push('"');
    }

    // `c3e145e0`. The value rides in an escaped attribute and `COPY_JS` reads
    // it, which is `FILL_JS`' arrangement and for its reason: the string is app
    // text -- a licence key, an embed snippet, a feed URL -- and no program in
    // this renderer is built out of text a user typed.
    //
    // The act's own action is emitted beside this and is a local one, so
    // nothing is asked and no transport attribute appears. A host that does not
    // serve the script gets a button that does nothing, which is why the
    // constant's docs say so.
    if let Some(value) = &act.copies {
        out.push_str(" data-copies=\"");
        escape_into(value, out);
        out.push('"');
    }

    out.push('>');
    // `db998898`. What the control shows, before what it says: a thumbnail with
    // its name under it is the shape both measured sites have, and the label
    // stays in the markup rather than moving to an `aria-label`, so the control
    // has accessible text whether or not the picture arrives.
    if let Some(picture) = &act.shows {
        img_tag(picture, opts, out);
    }
    escape_into(&act.label, out);
    out.push_str(close);
}

/// The `<img>` itself, without the `<figure>` a caption would want.
fn img_tag(picture: &quasi_router::screen::Image, opts: &Emit, out: &mut String) {
    out.push_str("<img");
    class_attr(&["picture-img"], opts, out);
    out.push_str(" src=\"");
    // Escaped as an attribute and otherwise untouched, the treatment every
    // app-supplied string gets here. No scheme guard: quoting is what stops an
    // attribute breaking out, and unlike `href` an `src` has no scheme that
    // executes -- `javascript:` in an `<img src>` is a broken picture, not a
    // script.
    escape_into(&picture.src, out);
    out.push_str("\" alt=\"");
    escape_into(&picture.alt, out);
    out.push('"');

    // The picture's own dimensions, which is how the browser holds its place.
    // With `height: auto` set by makeover, these two attributes give the box an
    // aspect ratio before a byte arrives, so the space is right at any width and
    // nothing below moves when the image lands. Omitted when the app does not
    // know them -- an invented size would reserve the wrong room, which is worse
    // than none.
    if let Some(e) = picture.intrinsic {
        let _ = write!(out, " width=\"{}\" height=\"{}\"", e.width, e.height);
    }

    // 0.21.0 wrote `loading="lazy"` for every picture and that was wrong for
    // anything on screen at first paint: deferring what is already needed saves
    // nothing and lands its arrival later, so the page moves more rather than
    // less. The description says which it is now, and eager is the default.
    if matches!(picture.loading, layout::Loading::Lazy) {
        out.push_str(" loading=\"lazy\"");
    }
    fit_attr(picture.fit, out);
    out.push('>');
}

/// One row of a list.
///
/// `folded` is [`quasi_router::folded`]'s answer for this row: whether a shut
/// branch above it is hiding it. The row is emitted regardless and marked
/// `hidden`, which is what lets `outline.js` open a branch without asking the
/// app for rows the document is already holding.
/// How a row is drawn: as a list item, or as a row of a declared table.
///
/// The 2026-09-05 collapse made a list row and a table row one type, and this
/// is what is genuinely left of the difference. It is not a preference: the
/// element, the class names and the gutter's wrapping are a contract with
/// makeover's stylesheet and with the hosts that bind to them, so the two looks
/// keep emitting exactly what they emitted before. What they no longer do is
/// keep two copies of the walk that decides it.
///
/// Which look a container takes is the container's, not the row's, and since
/// the 2026-09-06 collapse there is one container: it is whether the table
/// declared any columns. This doc predicted that a wave early and guessed the
/// test slightly wrong -- it is whether there are columns at all, not whether
/// they carry headings.
#[derive(Clone, Copy, PartialEq, Eq)]
enum RowLook {
    /// A list item. Flows its cells as spans on one wrapped line.
    List,
    /// A row of a declared table. Emits a cell per column, aligned by
    /// `display: table`.
    Table,
}

impl RowLook {
    /// The opening tag, without its attributes.
    const fn open_tag(self) -> &'static str {
        match self {
            Self::List => "<li",
            Self::Table => "<div role=\"row\"",
        }
    }

    /// The closing tag.
    const fn close_tag(self) -> &'static str {
        match self {
            Self::List => "</li>",
            Self::Table => "</div>",
        }
    }

    /// The class every row of this look carries.
    const fn base_class(self) -> &'static str {
        match self {
            Self::List => "row",
            Self::Table => "table-row",
        }
    }

    /// The class for the row the detail side is showing.
    const fn current_class(self) -> &'static str {
        match self {
            Self::List => "row-current",
            Self::Table => "table-row-current",
        }
    }

    /// The class for a row in a selection already in force.
    const fn chosen_class(self) -> &'static str {
        match self {
            Self::List => "row-chosen",
            Self::Table => "table-row-chosen",
        }
    }

    /// The class for a ticked row.
    const fn selected_class(self) -> &'static str {
        match self {
            Self::List => "row-selected",
            Self::Table => "table-row-selected",
        }
    }
}

/// The classes a row carries, in the order this emitter has always written
/// them.
///
/// Shared by both looks since 2026-09-05. `row-nested` and `row-branch` were
/// already spelled the same on both, which is the tell that the two functions
/// were one function.
fn row_classes(row: &Row, look: RowLook) -> Vec<&'static str> {
    let mut classes = vec![look.base_class()];
    if row.depth.is_nested() {
        classes.push("row-nested");
    }
    if row.open.is_some() {
        classes.push("row-branch");
    }
    if row.current {
        // `1894e95d`. A live selection, which is neither of the two below it:
        // not the app's pointer at one row and not a staged tick. Its own class
        // rather than reusing the tick's, because the tick's class is what a
        // commit control gathers by and these rows have nothing to commit.
        classes.push(look.current_class());
    }
    if row.chosen == Some(true) {
        classes.push(look.chosen_class());
    }
    if row.selected == Some(true) {
        classes.push(look.selected_class());
    }
    classes
}

/// The row's own attributes, from `data-row` to the `>` that closes the tag.
///
/// Shared by both looks. Every attribute here was written twice before
/// 2026-09-05, in two functions that had drifted: the table row emitted
/// `data-value` and `data-change` and the list row did not, which is recorded
/// as a finding on wave `f0dac2d6` rather than silently fixed here, because
/// changing what a served screen emits is not a refactor.
fn row_attrs_html(row: &Row, look: RowLook, folded: bool, out: &mut String) {
    // `Replaces::Enclosing`'s target.
    out.push_str(" data-row");
    if look == RowLook::Table {
        // What the app calls this row, unique within its table. A list row
        // carries the same fact and spends it on its checkbox's `value=`
        // instead; see the finding on wave `f0dac2d6`.
        if let Some(value) = &row.value {
            out.push_str(" data-value=\"");
            escape_into(value, out);
            out.push('"');
        }
    }
    // The address, which is the document's name for the row rather than the
    // app's, and so is the one that gets an `id`.
    if let Some(address) = &row.address {
        out.push_str(" id=\"");
        escape_into(address, out);
        out.push('"');
    }
    if look == RowLook::Table {
        // Which side of a change this line is on, when the table is a diff.
        // `19d7602d`. An attribute rather than a class, for `tone_attr`'s
        // reason: makeover keys every intent off a data attribute, so a host
        // that has never heard of a diff still gets the tones it styles.
        //
        // `None` writes nothing, which keeps every ordinary table from reading
        // as a diff whose lines are all context.
        if let Some(change) = row.change {
            out.push_str(" data-change=\"");
            out.push_str(match change {
                layout::Change::Added => "added",
                layout::Change::Removed => "removed",
                // Including a kind added to this `#[non_exhaustive]` axis that
                // this renderer has not learned: an unknown side reads as an
                // unchanged line, which draws the text and loses only the tint.
                _ => "context",
            });
            out.push_str("\" data-tone=\"");
            out.push_str(layout::Intent::token(change));
            out.push('"');
        }
    }
    if row.depth.is_nested() {
        let _ = write!(
            out,
            " data-depth=\"{depth}\" style=\"--row-depth:{depth}\" aria-level=\"{level}\"",
            depth = row.depth.level,
            level = row.depth.level + 1
        );
    }
    if folded {
        out.push_str(" hidden");
    }
    if row.current {
        out.push_str(" aria-current=\"true\"");
    }
    if let Some(chosen) = row.chosen {
        out.push_str(if chosen {
            " aria-selected=\"true\""
        } else {
            " aria-selected=\"false\""
        });
    }
}

fn row_html(row: &Row, folded: bool, opts: &Emit, out: &mut String) {
    let classes = row_classes(row, RowLook::List);
    out.push_str(RowLook::List.open_tag());
    class_attr(&classes, opts, out);
    row_attrs_html(row, RowLook::List, folded, out);
    out.push('>');

    // The disclosure, when the row is a branch. Before the tick and before the
    // run, because it is the affordance for the row's place in the outline
    // rather than for the row: a reader scanning down the chevrons is reading
    // the shape of the tree.
    //
    // **A separate hit target from the label**, which is `Row::open`'s
    // instruction and the shipped egui sidebar's own behaviour: pressing a tag
    // filters by it, pressing its chevron does not. A button rather than a span
    // for the tick's reason -- the browser already gives it the keyboard, the
    // space key and a name.
    //
    // No route, and no `hx-` anything. Folding a branch is the reader tidying
    // their own view; see `Row::open` for why that is not a write.
    if let Some(open) = row.open {
        out.push_str("<button type=\"button\"");
        class_attr(&["row-disclose"], opts, out);
        out.push_str(" data-disclose aria-expanded=\"");
        out.push_str(if open { "true" } else { "false" });
        // The words a reader hears. Not a label a description gave: the
        // vocabulary says a row has a disclosure and never says what to call
        // it, so this is the renderer naming its own affordance the way the
        // tick's "Select" is.
        out.push_str("\" aria-label=\"");
        out.push_str(if open { "Collapse" } else { "Expand" });
        out.push_str("\"></button>");
    }

    // The tick, when the row is selectable at all. A real checkbox rather than
    // a styled span: it is the one control here the browser already gets right,
    // including the label association, the space key and the mixed state a
    // screen reader announces.
    if let Some(ticked) = row.selected {
        out.push_str("<input type=\"checkbox\"");
        class_attr(&["row-select"], opts, out);
        if ticked {
            out.push_str(" checked");
        }
        // What the tick contributes to the screen's selection, under the one
        // name a handler reads it back by. `5f2b8753`: the app used to bind
        // this itself, gathering the checked boxes in JS, because nothing in
        // the description said what the ticks were for.
        //
        // Named rather than left to the browser's `on`, which is what a
        // checkbox with no value submits. `on` says a box was checked and not
        // which one.
        if let Some(value) = &row.value {
            out.push_str(" name=\"");
            escape_into(quasi_router::Node::TICKED, out);
            out.push_str("\" value=\"");
            escape_into(value, out);
            out.push('"');
        }
        // A tick with no route is local state until something submits it, which
        // is what a bulk checkbox is; the app binds those itself. A tick with
        // one is the write, which is `14612ed8`, and htmx's own default trigger
        // for an input is `change` — named anyway, so the markup says what it
        // does rather than relying on a default holding.
        if let Some(action) = &row.toggle {
            action_attrs(action, Fires::Change, None, None, false, out);
        }
        out.push_str(" aria-label=\"Select\">");
    }

    // A span per run of consecutive parts sharing a role, rather than a fixed
    // sequence of members. The old shape drew primary, secondary, meta, bar,
    // tokens, actions in that order however the description was built; the run
    // draws what it was given where it was put, and a row with a tag between
    // two facts now says so.
    //
    // Consecutive same-role parts share one wrapping span for the reason a
    // cell's tokens do: the part class carries the gap between siblings, so a
    // span each would space two badges as though they were unrelated.
    //
    // Flow joins the role in the grouping key, and has to: the span is what
    // carries the clamp, so two parts sharing a role and disagreeing about how
    // many lines they may take cannot share one. A row whose title is relaxed
    // and whose second title-role part is not gets two spans, which is the
    // right answer and is also the only one that can be drawn.
    let mut rest = row.cells.as_slice();
    while let Some(head) = rest.first() {
        let (key, flow) = (head.key.clone(), head.room());
        let taken = rest
            .iter()
            .take_while(|cell| cell.key == key && cell.room() == flow)
            .count();
        let (group, tail) = rest.split_at(taken);
        // A list draws over the default column set, so every cell in one is
        // keyed by role. A cell keyed to a declared column has reached a list
        // row, which is a description error rather than something to render:
        // the table constructors (`Row::cells`, `at`, `cell`) produce those
        // keys and a list row is built by `Row::new` and its siblings.
        //
        // Loud in debug and benign in release, which is the bargain
        // `Table::row`'s two assertions already strike here (`d41d00a`): a
        // panic in a description is worse than a row that draws its text under
        // the wrong style.
        debug_assert!(
            matches!(key, quasi_router::CellKey::Role(_)),
            "a cell keyed to a declared column reached a list row, which draws \
             over the default column set and has no column to style it from. \
             Key: {key:?}",
        );
        let role = match &key {
            quasi_router::CellKey::Role(role) => *role,
            _ => quasi_router::layout::RowPart::Primary,
        };
        row_part_html(row, role, flow, group, opts, out);
        rest = tail;
    }

    // After the run, because a menu is not on the line: it is the set of things
    // that can be done to the row, and it renders as a container the host opens
    // its own way. A webview hangs a context menu off it, a touch host an action
    // sheet, a terminal a key-driven list; all three read the same acts.
    if !row.menu.is_empty() {
        out.push_str("<div");
        class_attr(&["row-menu"], opts, out);
        // Named rather than hidden by class, so the host's own menu code has
        // something to bind to that does not depend on how it is styled.
        out.push_str(" data-menu=\"row\" hidden>");
        for act in &row.menu {
            act_html(act, opts, &Doc::bare(), out);
        }
        out.push_str("</div>");
    }

    out.push_str(RowLook::List.close_tag());
}

/// One run of consecutive row parts sharing a role.
fn row_part_html(
    row: &Row,
    role: layout::RowPart,
    flow: layout::Flow,
    group: &[quasi_router::Cell],
    opts: &Emit,
    out: &mut String,
) {
    // The primary is a control when selecting the row does something, and plain
    // text when it does not. Emitting a button either way would give a screen
    // reader an affordance that answers nothing. `activate` stayed a field
    // through the run migration, so this is still the row's own answer rather
    // than something recomputed from a part.
    let activates = role == layout::RowPart::Primary && row.activate.is_some();

    // `None` for a tight part, which is every part that has not asked
    // otherwise: one line is what the run already does and a class saying so
    // would be on every span in every row.
    let clamp = flow_class(flow);

    let close = if let (true, Some(action)) = (activates, row.activate.as_ref()) {
        let (open, close) = control_tag(action);
        out.push_str(open);
        // The activating primary is a control, and it is still the thing whose
        // lines are being counted. Clamping the span outside it would clip a
        // box the button had already overflowed.
        //
        // Two calls rather than a built-up vec, so the literal stays where the
        // vocabulary test's reader can see it. That test only knows the
        // `class_attr(&[..])` shape, and a name it cannot see is a name nobody
        // is checking against makeover's.
        match clamp {
            Some(relaxed) => class_attr(&["row-activate", relaxed], opts, out),
            None => class_attr(&["row-activate"], opts, out),
        }
        action_attrs(action, Fires::Click, None, None, row.chosen.is_some(), out);
        out.push('>');
        close
    } else {
        out.push_str("<span");
        match clamp {
            Some(relaxed) => class_attr(&[part_class(role), relaxed], opts, out),
            None => class_attr(&[part_class(role)], opts, out),
        }
        out.push('>');
        "</span>"
    };

    for cell in group {
        for node in &cell.content {
            row_inline_html(node, opts, out);
        }
    }

    out.push_str(close);
}

/// One leaf inside a row's run.
///
/// Markdown is the one place a run entry is not just `node_html`. A
/// [`Node::Rich`] standing on its own is a block and renders as one; inside a
/// row it goes through docengine's `phrase` preset instead, which is markdown
/// with no block structure at all and no links, keeping the inline emphasis. A
/// heading, a list and a quote each contribute their words without claiming a
/// block of a row that has no room for one, and not even a paragraph survives.
///
/// Links go because a row usually carries [`Row::activate`], so the row itself
/// is already a target and an anchor inside it is a second target inside the
/// first: ambiguous to click, worse to reach by keyboard, and pointing
/// somewhere a one-line summary cannot usefully send anyone. Their text stays.
///
/// This is the renderer deciding, which is the point of the description
/// carrying the kind rather than a flattened string. A terminal renderer facing
/// the same source can emit bold instead, and one that wants neither can call
/// `docengine::render_plain`. None of them has to be told by the screen author
/// which to do.
fn row_inline_html(node: &Node, opts: &Emit, out: &mut String) {
    match node {
        Node::Text { text, .. } => escape_into(text, out),
        // The inline path takes neither axis, and that is a containment
        // decision rather than an oversight: a run inside a cell is one line in
        // something usually already clickable, so blocks and links go whatever
        // the node declares. `Richness` says nothing about phrases for the same
        // reason -- see its doc.
        Node::Rich { source, .. } => out.push_str(&docengine::render_phrase(source)),
        Node::Token(tag) => tag_html(tag, opts, out),
        Node::Act(act) => act_html(act, opts, &Doc::bare(), out),
        Node::Meter(meter) => meter_html_into(&meter.as_layout(), opts, out),
        Node::Chart { axis, bars, .. } => chart_html_into(
            &axis.as_layout(),
            bars.iter().map(Bar::as_layout),
            opts,
            out,
        ),
        // Every other leaf the model admits into a run. A link in a row and a
        // figure in a row were the two gaps the enumeration left open and could
        // not close without a `RowPart` variant each; here they arrive by
        // already being leaves.
        //
        // No fills: a bespoke region is a block and cannot reach a run, which
        // is what the containment bound guarantees.
        other => node_html(other, opts, &Doc::bare(), out),
    }
}

/// One cell's inline run.
///
/// A part per inline rather than a part per cell, which is the half of the
/// containment model this crate had to learn. Before it, a cell was four
/// members and this function was a fixed sequence: the value or the link, then
/// the tokens strip, then the actions strip. The run says the order itself, so
/// a cell holding a tag between two words draws that way instead of hoisting
/// the tag to the end.
///
/// Consecutive tokens and consecutive acts still share one wrapping strip.
/// `cell-tokens` and `cell-actions` carry the gap between siblings, so a span
/// each would space them as though they were unrelated, and the common case --
/// a status column of three badges -- is exactly the consecutive one.
///
/// Writes into a buffer the caller owns rather than answering with one. The
/// caller is [`cells_row_html`], which needs every cell of a row to exist at
/// once because `cells_html` takes them together -- but needs that only within
/// the row, so the buffers are reused down the table and a fresh `String` per
/// cell per row was the emitter's largest remaining cost.
fn cell_run_html(cell: &Cell, opts: &Emit, out: &mut String) {
    // A cell that is one piece of text says so on the container through
    // `CellPart::Value`, so a wrapper span here would say nothing the container
    // has not. Anything else names its parts inside, or the content colour on
    // the cell reaches the tokens and the controls beside the text -- the drift
    // makeover-layout 0.14.0 named and makeover-webview 0.25.0 stopped
    // emitting.
    if let [Node::Text { text, .. }] = cell.content.as_slice() {
        escape_into(text, out);
        return;
    }

    let mut rest = cell.content.as_slice();
    while let Some((head, tail)) = rest.split_first() {
        match head {
            Node::Text { text, .. } => {
                out.push_str("<span");
                class_attr(&[cell_part_class(layout::CellPart::Value)], opts, out);
                out.push('>');
                escape_into(text, out);
                out.push_str("</span>");
                rest = tail;
            }
            // The row is a `div` and not an anchor even when it activates, so
            // this nests nothing: the href lands on the row element as an
            // attribute htmx reads, and the only `<a>` in the row is the one a
            // cell asked for.
            //
            // `data-act` for the same reason a button carries it. The row's
            // `ClickBeside` filter keys on that attribute, so without it a click
            // on the title would follow the link and open the row underneath.
            Node::Link { text, action } => {
                let (open, close) = control_tag(action);
                out.push_str(open);
                class_attr(&[cell_part_class(layout::CellPart::Link)], opts, out);
                out.push_str(" data-act");
                action_attrs(action, Fires::Click, None, None, false, out);
                out.push('>');
                escape_into(text, out);
                out.push_str(close);
                rest = tail;
            }
            Node::Token(_) => {
                let run = rest.iter().take_while(|p| matches!(p, Node::Token(_)));
                out.push_str("<span");
                class_attr(&[cell_part_class(layout::CellPart::Tokens)], opts, out);
                out.push('>');
                let mut taken = 0;
                for part in run {
                    if let Node::Token(tag) = part {
                        tag_html(tag, opts, out);
                    }
                    taken += 1;
                }
                out.push_str("</span>");
                rest = &rest[taken..];
            }
            // Deliberately not `row-actions`. That was a hover-reveal rule
            // until makeover-webview 0.23.0 retired it, and it is a list row's
            // class besides: `cell-actions` is the table's own, and it carries
            // no colour so a button here is not painted as text.
            Node::Act(_) => {
                let run = rest.iter().take_while(|p| matches!(p, Node::Act(_)));
                out.push_str("<span");
                class_attr(&[cell_part_class(layout::CellPart::Actions)], opts, out);
                out.push('>');
                let mut taken = 0;
                for part in run {
                    if let Node::Act(act) = part {
                        act_html(act, opts, &Doc::bare(), out);
                    }
                    taken += 1;
                }
                out.push_str("</span>");
                rest = &rest[taken..];
            }
            // Every other leaf the model now admits into a run. A meter and a
            // figure in a cell were the two gaps the enumeration left open and
            // could not close without a member each; here they arrive by
            // already being leaves.
            other => {
                // No fills: a bespoke region is a block and cannot reach a run,
                // which the containment bound is what guarantees.
                node_html(other, opts, &Doc::bare(), out);
                rest = tail;
            }
        }
    }
}

/// The buffers a table's rows take turns in.
///
/// `cells_html` takes a row's cells together, so the markup of every cell in one
/// row has to exist at once. Nothing says it has to be new: cleared and
/// refilled, these keep the capacity the first row bought, and a table's second
/// row onwards writes into memory that already exists.
///
/// [`Emitted`] is not here, because it borrows from `filled` and a struct
/// holding both would be self-referential. It is a `Vec` per row and stays one.
#[derive(Default)]
struct RowBuffers {
    /// One cell's markup each, in column order.
    filled: Vec<String>,
    /// Which cells are a single piece of text, which is what earns the
    /// container the part class.
    parts: Vec<Option<layout::CellPart>>,
}

/// One row of a table.
///
/// Takes the columns already borrowed rather than the described ones. They are
/// the same for every row of the table, and this built the borrowed list again
/// per row until the emitter's allocations were counted.
fn cells_row_html(
    cells: &Row,
    columns: &[layout::Column<'_>],
    folded: bool,
    buffers: &mut RowBuffers,
    opts: &Emit,
    out: &mut String,
) {
    let classes = row_classes(cells, RowLook::Table);
    out.push_str(RowLook::Table.open_tag());
    class_attr(&classes, opts, out);
    row_attrs_html(cells, RowLook::Table, folded, out);
    // The activate route, which only a table row carries in its opening tag: a
    // list row's is written by its run instead. Kept here rather than moved
    // into the shared attrs because the two really do differ.
    if let Some(action) = &cells.activate {
        let carries_control = cells.cells.iter().any(Cell::carries_control);
        let fires = if carries_control || cells.selected.is_some() {
            Fires::ClickBeside
        } else {
            Fires::Click
        };
        action_attrs(action, fires, None, None, cells.chosen.is_some(), out);
    }
    out.push('>');

    // The tick, in a cell of its own before the columns. A list row draws this
    // in its gutter and a table has no gutter, so the gutter is a cell -- the
    // head emits a matching one, because `display: table` aligns by position.
    //
    // The same `row-select` class a list row's tick carries, and deliberately:
    // it is the selector a commit control gathers by, so a screen mixing a list
    // and a table has one selection rather than two that look alike. A cell
    // class as well, for the width, since this one is not a column and takes no
    // `col-` class.
    // The disclosure, in a cell of its own before the tick, on the grounds the
    // tick takes its own: it is not a value in the grid, it does not narrow
    // with the columns and it does not sort. The head emits a matching cell,
    // because `display: table` aligns by position.
    if let Some(open) = cells.open {
        out.push_str("<div");
        class_attr(&["cell", "table-disclose"], opts, out);
        out.push_str("><button type=\"button\"");
        class_attr(&["row-disclose"], opts, out);
        out.push_str(" data-disclose aria-expanded=\"");
        out.push_str(if open { "true" } else { "false" });
        out.push_str("\" aria-label=\"");
        out.push_str(if open { "Collapse" } else { "Expand" });
        out.push_str("\"></button></div>");
    }

    if let Some(ticked) = cells.selected {
        // A `div` with no role, matching the cells makeover emits beside it.
        // The row says `role="row"` and its cells say nothing, which is
        // makeover's shape; a lone `role="cell"` here would be the one cell in
        // the table announcing itself differently from its neighbours.
        out.push_str("<div");
        class_attr(&["cell", "table-select"], opts, out);
        out.push_str("><input type=\"checkbox\"");
        class_attr(&["row-select"], opts, out);
        if ticked {
            out.push_str(" checked");
        }
        if let Some(value) = &cells.value {
            out.push_str(" name=\"");
            escape_into(quasi_router::Node::TICKED, out);
            out.push_str("\" value=\"");
            escape_into(value, out);
            out.push('"');
        }
        // No `toggle` counterpart, unlike a list row. A table row's tick is a
        // member of a set by construction (`Row::ticking` is the only way to
        // set it), where a list row's may be the write itself.
        out.push_str(" aria-label=\"Select\"></div>");
    }

    // The cell contents are escaped here and handed over as Markup, which is
    // makeover-webview's contract: it owns the structure, the caller owns what
    // goes in. Ours is text from a description plus, since `022f0c59`, whatever
    // controls the cell carries, and `cells_html` is what knows the column
    // classes and the narrowing.
    let RowBuffers { filled, parts } = buffers;
    filled.truncate(cells.cells.len());
    for (at, cell) in cells.cells.iter().enumerate() {
        match filled.get_mut(at) {
            Some(buffer) => buffer.clear(),
            None => filled.push(String::new()),
        }
        cell_run_html(cell, opts, &mut filled[at]);
    }
    // The container says what the cell is only when the cell is nothing but one
    // piece of text, which is the case where a wrapper span would say nothing
    // the container has not already said. Anything else names its parts inside
    // -- the anchor is a `cell-link`, the strips are `cell-tokens` and
    // `cell-actions` -- because a colour on the container would reach all of
    // them, and that is the drift makeover-layout 0.14.0 named.
    parts.clear();
    parts.extend(cells.cells.iter().map(|cell| {
        matches!(cell.content.as_slice(), [Node::Text { .. }]).then_some(layout::CellPart::Value)
    }));
    let emitted: Vec<Emitted<'_>> = columns
        .iter()
        .zip(filled.iter())
        .zip(parts.iter().copied())
        .map(|((column, value), part)| Emitted {
            column: column.name,
            part,
            content: Markup(value),
        })
        .collect();
    let mut marked = crate::stage::Cursor::open(&cells.marks);
    if marked.watching() {
        // Told where each block went rather than looking for it. A cell that
        // renders to nothing cannot be searched for, and a cell whose markup
        // repeats in the same row would be found twice.
        let mut placed = Vec::new();
        makeover_webview::list::cells_html_placed(columns, &emitted, opts, out, &mut placed);
        for (at, one) in placed.iter().enumerate() {
            // `parts` is what makes the column write `cell-value`, and it is
            // read off the cell. So where it is set, the block's own class
            // depends on the cell being there.
            let steers = parts.get(at).copied().flatten().is_some();
            marked.wrote_within(
                (one.block.start, one.block.end),
                (one.content.start, one.content.end),
                steers,
            );
        }
    } else {
        cells_html_into(columns, &emitted, opts, out);
    }

    // After the cells, and outside the grid: a menu is not a value in the row,
    // so it takes no column and the head emits nothing to match it. That is the
    // one way it differs from the tick above, which is a cell because it is
    // drawn in line with them.
    //
    // `data-menu="row"` is the list row's own attribute, deliberately: it is what
    // the host's menu code binds to, and a second name for "this row's menu"
    // would make a screen mixing a list and a table need two bindings for one
    // gesture. The class is `table-row-menu`, matching how `table-row-current`
    // shadows `row-current` -- that half is styling, and a table row's menu is
    // positioned against a grid rather than against a line.
    //
    // `hidden` keeps it out of the accessibility tree, which is also what makes
    // it legal here: a `role="row"` whose visible children are all cells stays
    // well-formed, and a `display: none` child takes no track in either a table
    // or a grid, so the columns above line up unchanged.
    if !cells.menu.is_empty() {
        out.push_str("<div");
        class_attr(&["table-row-menu"], opts, out);
        out.push_str(" data-menu=\"row\" hidden>");
        for act in &cells.menu {
            marked.starts(out);
            act_html(act, opts, &Doc::bare(), out);
            marked.ends(out);
        }
        out.push_str("</div>");
    }

    marked.close(&cells.marks);
    out.push_str(RowLook::Table.close_tag());
}

/// The class saying when a region member drops.
///
/// `makeover-webview`'s table half already maps a [`layout::Priority`] onto
/// one of these, and the stylesheet already hides them at the right size
/// classes: `cell-drops-first` at `Medium` and below, `cell-drops-next` at
/// `Compact`. Both rules are written against the bare class rather than
/// against a table, so a region member wearing one narrows with the tables
/// beside it and by the same declared rule.
///
/// The names say "cell" because that is where they were needed first. Reusing
/// them is deliberate: a second set of names would be a second encoding of one
/// fact, and the two would have to be kept in agreement by hand. Renaming the
/// pair to something placement-neutral belongs in `makeover-webview`, and the
/// mapping wants to be public there rather than copied here -- it is private
/// today, which is the only reason this function exists.
fn drop_class(priority: layout::Priority) -> Option<&'static str> {
    match priority {
        layout::Priority::Optional => Some("cell-drops-first"),
        layout::Priority::Secondary => Some("cell-drops-next"),
        // A tier added upstream keeps its place. Of the two ways to be wrong
        // about a priority this renderer has not learned, showing something
        // that should have dropped is the one the reader can see and work
        // around.
        _ => None,
    }
}

/// One member of a region, and what it is worth when room runs out.
///
/// The wrapper appears only for a member that can drop, so every region
/// written before [`quasi_router::Ranked`] existed -- which is all of them,
/// since [`Slot::with`] still ranks at `Essential` -- emits exactly the markup
/// it always did.
fn ranked_html(placed: &quasi_router::Ranked, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    let drops = drop_class(placed.priority);
    let divides = share_attr(placed.width).is_some();
    if drops.is_none() && !divides {
        node_html(&placed.node, opts, doc, out);
        return;
    }
    out.push_str("<div");
    if let Some(drops) = drops {
        class_attr(&[drops], opts, out);
    }
    if let Some(share) = share_attr(placed.width) {
        out.push_str(" data-width=\"");
        out.push_str(share);
        out.push('"');
    }
    out.push('>');
    node_html(&placed.node, opts, doc, out);
    out.push_str("</div>");
}

/// How much of its row a member asked for, where it is not the default.
///
/// `width_attr`'s attribute and the opposite default, which is the whole
/// difference between the two positions. A control's width defaults to
/// [`layout::Width::Fill`] because that is what a control did before the member
/// existed; a run member's defaults to [`layout::Width::Content`] because a
/// flex item with `min-width: min-content` and no grow is content-sized. So
/// each side omits the value that changes nothing, and they omit opposite ones.
///
/// [`layout::Width::Fixed`] is stated and not implemented. A run carries no
/// size by design, so there is nothing to fix a member at, and the honest
/// answer is to carry the description's word into the markup and let the
/// stylesheet say nothing about it yet.
fn share_attr(width: layout::Width) -> Option<&'static str> {
    match width {
        layout::Width::Content => None,
        layout::Width::Fixed => Some("fixed"),
        layout::Width::Fill => Some("fill"),
        // `Width` is `#[non_exhaustive]`; a member added upstream is one this
        // renderer has not learned, and drawing it as content is what it drew
        // before the member existed.
        _ => None,
    }
}

/// One thing on a screen.
pub(crate) fn node_html(node: &Node, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    match node {
        Node::Heading { level, text } => {
            let tag = match level {
                layout::Heading::Page => "h1",
                layout::Heading::Section => "h2",
                layout::Heading::Subsection => "h3",
            };
            out.push('<');
            out.push_str(tag);
            class_attr(&["heading"], opts, out);
            out.push('>');
            escape_into(text, out);
            out.push_str("</");
            out.push_str(tag);
            out.push('>');
        }

        Node::Text { text, tone } => {
            out.push_str("<p");
            class_attr(&["text"], opts, out);
            tone_attr(*tone, out);
            out.push('>');
            escape_into(text, out);
            out.push_str("</p>");
        }

        // `19d7602d`. The runs are already classified, so this writes a span
        // per run carrying the class name `layout::Syntax` spells and nothing
        // else: no highlighter enters this crate, and a host's stylesheet says
        // what each class looks like. `docengine::Emphasis` crosses the seam
        // the same way.
        //
        // A run at `Syntax::Plain` gets no span at all. It is most of a file,
        // its class would say only "ordinary", and a span per word triples the
        // document for nothing.
        Node::Code {
            runs,
            language,
            inline,
        } => {
            let (open, close) = if *inline {
                ("<code", "</code>")
            } else {
                ("<pre", "</pre>")
            };
            out.push_str(open);
            class_attr(&["code"], opts, out);
            // The hint, as an attribute rather than a class: a language is app
            // text and a class built from it would be a class name built from
            // arbitrary input. A host keying off it has `[data-language]`.
            if let Some(language) = language {
                out.push_str(" data-language=\"");
                escape_into(language, out);
                out.push('"');
            }
            out.push('>');
            for run in runs {
                if run.syntax == layout::Syntax::Plain {
                    escape_into(&run.text, out);
                    continue;
                }
                out.push_str("<span");
                // Not `class_attr`: that prefixes with the emitter's own
                // namespace, and these are one class each from a closed set the
                // vocabulary spells. `lex-` rather than a bare `keyword`,
                // because `.string` and `.comment` are names a host stylesheet
                // will already have used for something else.
                out.push_str(" class=\"lex-");
                out.push_str(run.syntax.name());
                out.push_str("\">");
                escape_into(&run.text, out);
                out.push_str("</span>");
            }
            out.push_str(close);
        }

        Node::StandIn {
            state,
            message,
            act,
            marks,
        } => {
            // The markup is makeover-webview's, unchanged, for the reason every
            // other emitter here defers to it: the CSS that has to match it is
            // emitted there too. The way out arrives as `Markup` because a
            // button is an address and no crate down there names one.
            let mut way_out = String::new();
            if let Some(act) = act {
                act_html(act, opts, doc, &mut way_out);
            }
            let action = (!way_out.is_empty()).then_some(Markup(way_out.as_str()));
            // The way out is the one member a placeholder holds, and the branch
            // covers the wrapper with it: `placeholder-action` is emitted only
            // when there is something to put in it, so it goes when the way out
            // goes.
            let mut marked = crate::stage::Cursor::open(marks);
            if marked.watching() {
                let mut placed = None;
                makeover_webview::placeholder::placeholder_html_placed(
                    *state,
                    message,
                    action,
                    opts,
                    out,
                    &mut placed,
                );
                if let Some(block) = placed {
                    marked.wrote(block.start, block.end);
                }
                marked.close(marks);
            } else {
                placeholder_html_into(*state, message, action, opts, out);
            }
        }

        Node::Rich {
            source,
            richness,
            trust,
        } => {
            out.push_str("<div");
            class_attr(&["rich"], opts, out);
            // The fence hyperscript owes, wherever text a user typed becomes
            // markup. `0081563e`: a loaded interpreter reads `_` attributes
            // anywhere in the document, creator-authored content included, and
            // this is the one node whose content is authored by somebody other
            // than the app.
            //
            // Belt and braces rather than the only guard, and it earns its
            // place now that `Trust::Trusted` exists: an untrusted source has
            // its raw HTML stripped and never reaches this fence with an
            // attribute in it, but a trusted one keeps its markup, so the fence
            // is what stops the app's own copy from carrying a `_` attribute
            // into a document with a loaded interpreter. The guarantee no
            // longer depends on which way the trust axis is set.
            out.push_str(" data-disable-scripting");
            out.push('>');
            out.push_str(&rich_html(source, *richness, *trust));
            out.push_str("</div>");
        }

        Node::Act(act) => act_html(act, opts, doc, out),

        // Text that goes somewhere. `control_tag` picks the anchor or the
        // button from the method, the same way a cell link already did, and
        // `link` is the class makeover names it with.
        Node::Link { text, action } => {
            let (open, close) = control_tag(action);
            out.push_str(open);
            class_attr(&["link"], opts, out);
            out.push_str(" data-act");
            action_attrs(action, Fires::Click, None, None, false, out);
            out.push('>');
            escape_into(text, out);
            out.push_str(close);
        }

        Node::Token(tag) => tag_html(tag, opts, out),

        // The readouts derived from the current time. The first words are made
        // here and every set after them by `clock.js`, which reads the two
        // attributes this writes; see `crate::clock` for why the format is
        // stated twice and `Shell::clock_src` for what a document without the
        // script gets.
        Node::Since { at } => clock_html(Clock::Since, *at, opts, out),
        Node::Until { at } => clock_html(Clock::Until, *at, opts, out),
        Node::Age { at } => clock_html(Clock::Age, *at, opts, out),

        // One figure, through the same emitter the strip uses. What differs is
        // that nothing wraps it: the run it sits in is already the grouping.
        Node::Figure(figure) => {
            figure_html_into(&figure.as_layout(), opts, out);
        }

        Node::Image(picture) => {
            // A captioned picture is a `<figure>`, which is what the element is
            // for and what the shipped carousel already writes by hand. An
            // uncaptioned one is the bare `<img>`: wrapping it would put a
            // grouping element around a group of one.
            let captioned = picture.caption.is_some();
            if captioned {
                out.push_str("<figure");
                class_attr(&["picture"], opts, out);
                out.push('>');
            }

            img_tag(picture, opts, out);

            if let Some(caption) = &picture.caption {
                out.push_str("<figcaption");
                class_attr(&["picture-caption"], opts, out);
                out.push('>');
                escape_into(caption, out);
                out.push_str("</figcaption></figure>");
            }
        }

        Node::Notice {
            kind,
            tone,
            text,
            act,
        } => {
            out.push_str("<div");
            class_attr(
                &[match kind {
                    layout::Notice::Toast => "toast",
                    layout::Notice::Banner => "banner",
                }],
                opts,
                out,
            );
            tone_attr(*tone, out);
            // The hook the clock script takes a toast away by. An attribute
            // rather than the class above, for `data-clock`'s reason: a class
            // is prefixed by host configuration and a script shipped by this
            // crate cannot know the prefix. `4453bf82`.
            //
            // Emitted for the transient kind only, because it means "this one
            // is on a clock" rather than "this one is a notice". A banner has
            // no deadline and nothing to say to the script.
            if kind.transient() {
                out.push_str(" data-notice=\"toast\"");
            }
            // A danger or warning notice interrupts; anything else waits for a
            // pause. The description already says which through its tone, so
            // the renderer does not need a second field to be told.
            let assertive = matches!(tone, layout::Tone::Danger | layout::Tone::Warning);
            if assertive {
                out.push_str(" role=\"alert\"");
            } else {
                out.push_str(" role=\"status\" aria-live=\"polite\"");
            }
            out.push('>');
            escape_into(text, out);
            // The one thing to do about it, inside the notice rather than
            // beside it: a control that scrolled away from the sentence
            // explaining it is a button with no subject. `bde35298`.
            if let Some(act) = act {
                act_html(act, opts, doc, out);
            }
            out.push_str("</div>");
        }

        Node::Field(field) => field_group_html(field, opts, doc, out),

        Node::Form {
            action,
            submit,
            fields,
            marks,
        } => {
            out.push_str("<form");
            class_attr(&["form"], opts, out);
            action_attrs(action, Fires::Submit, None, None, false, out);
            out.push('>');
            let mut marked = crate::stage::Cursor::open(marks);
            for field in fields {
                marked.starts(out);
                field_group_html(field, opts, doc, out);
                marked.ends(out);
            }
            marked.close(marks);
            out.push_str("<button type=\"submit\"");
            class_attr(&["button", "act-submit"], opts, out);
            out.push('>');
            escape_into(submit, out);
            out.push_str("</button></form>");
        }

        Node::Timeline {
            track,
            entries,
            focus,
            ..
        } => {
            // The axis first, then the things on it. Two children of one
            // positioned box, so the entries resolve their percentages against
            // the same height the slots fill.
            out.push_str("<div");
            class_attr(&["track"], opts, out);
            // The focus travels as data rather than as a scroll offset: the app
            // knows the interesting hour, the host decides how to get there.
            // goingson's JS hardcodes `targetHour = 9` inside its renderer,
            // which is the arrangement this replaces.
            if let Some(minute) = focus {
                let _ = write!(out, " data-focus=\"{minute}\"");
            }
            out.push('>');

            // The ruler. Slots are the grid the eye reads against; a tick every
            // `tick` minutes carries the label. Both are the axis describing
            // itself, so neither is an entry and neither is addressable.
            let slots = track.slots();
            let tick_every = if track.slot == 0 || track.tick == 0 {
                0
            } else {
                track.tick / track.slot
            };
            for slot in 0..slots {
                out.push_str("<div");
                class_attr(&["track-slot"], opts, out);
                out.push('>');
                if tick_every > 0 && slot % tick_every == 0 {
                    let minute = track.span.from() + slot * track.slot;
                    out.push_str("<span");
                    class_attr(&["track-tick"], opts, out);
                    out.push('>');
                    // The label the axis's unit asks for. This assumed minutes
                    // until 2026-08-15 and printed `00:00` over a month strip,
                    // which is the defect `layout::Unit` exists to close: the
                    // geometry above is unit-agnostic and correct either way,
                    // so nothing else here noticed.
                    match track.unit {
                        // Wall clock, wrapped, so a span running past midnight
                        // labels 02:00 rather than 26:00. The wrap is
                        // presentation: `Span` deliberately counts past 1440 so
                        // it needs no date, and how that reads to a person is
                        // this renderer's call.
                        layout::Unit::Minutes => {
                            let _ = write!(out, "{:02}:{:02}", (minute / 60) % 24, minute % 60);
                        }
                        // Day one, not day zero. A strip's offsets are
                        // zero-based like every other axis here, and nobody
                        // calls the first of the month the zeroth.
                        layout::Unit::Days => {
                            let _ = write!(out, "{}", minute + 1);
                        }
                        // A unit added later lands here rather than silently
                        // taking the clock, which is exactly how this bug was
                        // shipped in the first place.
                        _ => {}
                    }
                    out.push_str("</span>");
                }
                out.push_str("</div>");
            }

            // Lanes. Overlapping entries sit side by side, and which lane each
            // takes is worked out here rather than described, because it is a
            // fact about how wide the box is and not about the day. The
            // description said when things happen; `Placement::overlaps` turns
            // that into who collides.
            //
            // Greedy first-fit against the entries already placed, which is the
            // standard day-view packing: an entry takes the lowest lane no
            // occupant of which it overlaps. O(n^2) in the worst case and n is a
            // day's worth of appointments, so the clever interval graph is not
            // worth its own bugs here.
            let mut lanes: Vec<usize> = Vec::with_capacity(entries.len());
            for (i, entry) in entries.iter().enumerate() {
                let mut lane = 0;
                loop {
                    let taken = entries[..i]
                        .iter()
                        .zip(&lanes)
                        .any(|(other, &l)| l == lane && entry.overlaps(other));
                    if !taken {
                        break;
                    }
                    lane += 1;
                }
                lanes.push(lane);
            }
            // One width for the whole track rather than per collision cluster.
            // Per-cluster is denser and is a layout decision this renderer can
            // revisit without the description changing, which is the point of
            // it being here.
            let width = lanes.iter().copied().max().map_or(1, |m| m + 1);

            for (entry, lane) in entries.iter().zip(&lanes) {
                let at = track.fraction(entry.placement.at());
                let end = track.fraction(entry.placement.end());
                out.push_str("<div");
                class_attr(&["track-entry"], opts, out);
                // The only inline style this crate writes, and it carries no
                // colour, no size and no opinion: four numbers makeover's rules
                // read. A stylesheet cannot hold these, because they are the
                // data.
                let _ = write!(
                    out,
                    " style=\"--track-at:{:.4}%;--track-for:{:.4}%;--track-lane:{lane};--track-lanes:{width}\"",
                    at * 100.0,
                    (end - at) * 100.0
                );
                out.push('>');
                row_html(&entry.row, false, opts, out);
                out.push_str("</div>");
            }

            out.push_str("</div>");
        }

        Node::Table {
            columns,
            rows,
            more,
            marks,
        } => {
            // **A table that declared no columns is a list, and draws as one.**
            // One node since the 2026-09-06 collapse, and this is the whole of
            // where the two arrangements part company in this renderer.
            //
            // `<ul>` rather than `role="table"` over a feed, deliberately. The
            // model is unified and the presentation is not: a feed of items is a
            // list to a screen reader, and announcing it as a table with one
            // column would be a worse document rather than a more consistent
            // one. The rows are the same `Row` either way, which is the point --
            // nothing about what the description *says* changes here, only how
            // it is arranged.
            if columns.is_empty() {
                out.push_str("<ul");
                class_attr(&["list"], opts, out);
                out.push('>');
                // Which rows a shut branch folds away, asked once for the list
                // rather than per row: it is a fact about the run of rows and a
                // row cannot see the ones above it. Every row is emitted either
                // way and the folded ones are `hidden`, so opening a branch is a
                // class change in the browser rather than a round trip for rows
                // the document already holds.
                let folded = quasi_router::folded(rows);
                // A list declared no columns, so its index space is the rows
                // and then the pager. `Table::placed` counts the columns first
                // and there are none, so the two agree without a special case.
                let mut marked = crate::stage::Cursor::open(marks);
                for (row, folded) in rows.iter().zip(folded) {
                    marked.starts(out);
                    row_html(row, folded, opts, out);
                    marked.ends(out);
                }
                out.push_str("</ul>");

                // Outside the list, because it is not one of the things in it.
                if let Some(rest) = more {
                    marked.starts(out);
                    rest_html(rest, opts, out);
                    marked.ends(out);
                }
                marked.close(marks);
                return;
            }

            let borrowed: Vec<layout::Column<'_>> = columns
                .iter()
                .map(quasi_router::screen::Column::as_layout)
                .collect();
            // No CSS travels with the table, and none can. A described table's
            // columns are known here rather than at build time, so a track list
            // would have to be emitted per table: a `<style>` element beside it,
            // which needs `style-src 'unsafe-inline'`, or a head block, which a
            // fragment swap does not carry. makeover's stylesheet lays the table
            // out with `display: table` instead, aligning columns across rows
            // knowing nothing about how many there are, and hides a dropped
            // column by the drop class its cells carry. The markup owes the
            // cells and headings those classes and nothing more.
            out.push_str("<div role=\"table\"");
            class_attr(&["table"], opts, out);
            out.push('>');

            // A tick takes no column, so the header owes it a cell that names
            // none. `display: table` aligns by position, so the gutter has to
            // exist in the head or every heading sits one place left of the
            // values under it. Empty rather than holding a select-all box: the
            // description says which rows exist and this crate emits no script
            // of its own, so ticking them all is a route the app offers (the
            // task list's `ticked=all`) rather than something a renderer can
            // invent.
            let ticks = rows.iter().any(|row| row.selected.is_some());
            // The disclosure gutter, on the same terms: a cell in the head or
            // every heading sits one place left of the values under it.
            let branches = rows.iter().any(|row| row.open.is_some());

            out.push_str("<div role=\"row\"");
            class_attr(&["table-head"], opts, out);
            out.push('>');
            if branches {
                out.push_str("<span role=\"columnheader\"");
                class_attr(&["table-heading", "table-disclose-head"], opts, out);
                out.push_str(" aria-label=\"Expand\"></span>");
            }
            if ticks {
                // `table-heading` as well, so it takes the head row's own
                // treatment and the gutter does not read as a gap. Labelled
                // rather than captioned: there is nothing to write above a
                // column of checkboxes that is not noise for everyone who can
                // see them, and a bare `columnheader` announces as an empty
                // heading to everyone who cannot.
                out.push_str("<span role=\"columnheader\"");
                class_attr(&["table-heading", "table-select-head"], opts, out);
                out.push_str(" aria-label=\"Select\"></span>");
            }
            let mut marked = crate::stage::Cursor::open(marks);
            for (column, described) in borrowed.iter().zip(columns) {
                marked.starts(out);
                out.push_str("<span role=\"columnheader\"");
                // The heading carries the same classes its column's cells do,
                // or the header and the body disagree about which column just
                // dropped and every heading below the cut sits over the wrong
                // values. `column_classes` is makeover's, so the two lists
                // cannot be assembled differently in two places.
                out.push_str(" class=\"");
                class_into("table-heading", opts, out);
                out.push(' ');
                // Not escaped, unlike every other app-supplied string here.
                // makeover reduces a column name to identifier characters
                // rather than escaping it (0.41.0), because the same name is
                // written into a CSS selector by `narrowing_css` and an escaped
                // one would be safe in the attribute and unmatchable from the
                // stylesheet. Escaping the result again would encode nothing
                // and is the one way this heading could stop matching the cells
                // below it.
                push_column_classes(out, column, opts);
                out.push('"');
                // `aria-sort` is what a table actually says about its order;
                // the caret in `state_rules` is this renderer's expression of
                // the same fact for everyone not using a screen reader.
                if let Some(sort) = column.sorted {
                    out.push_str(" aria-sort=\"");
                    out.push_str(sort.as_str());
                    out.push('"');
                }
                if column.sortable {
                    out.push_str(" data-sortable");
                }
                out.push('>');
                match &described.reorder {
                    // A button inside the header cell rather than attributes on
                    // the cell itself: `role="columnheader"` is not a control,
                    // and a screen reader offered a press on something that
                    // announces itself as a heading has been lied to.
                    Some(action) => {
                        let (open, close) = control_tag(action);
                        out.push_str(open);
                        class_attr(&["table-sort"], opts, out);
                        action_attrs(action, Fires::Click, None, None, false, out);
                        out.push('>');
                        escape_into(column.name, out);
                        out.push_str(close);
                    }
                    None => escape_into(column.name, out),
                }
                out.push_str("</span>");
                marked.ends(out);
            }
            out.push_str("</div>");

            let mut buffers = RowBuffers::default();
            // The fold, asked once for the table rather than per row: it is a
            // fact about the run of rows and a row cannot see the ones above it.
            let folds = quasi_router::folded(rows);
            for (cells, folded) in rows.iter().zip(folds) {
                marked.starts(out);
                cells_row_html(cells, &borrowed, folded, &mut buffers, opts, out);
                marked.ends(out);
            }
            out.push_str("</div>");

            // After the table's own element and not inside it, the way a list's
            // pager sits outside the `<ul>`: a pager is not a row, and a
            // `role="table"` with a non-row child is a table that says something
            // untrue about its own shape.
            if let Some(rest) = more {
                marked.starts(out);
                rest_html(rest, opts, out);
                marked.ends(out);
            }
            marked.close(marks);
        }

        // The trough and its tones are makeover-webview's, unchanged, for the
        // same reason the field markup is: a second emitter here would be the
        // same anatomy with a different escaping story, and the CSS it has to
        // match is emitted there too.
        Node::Meter(meter) => meter_html_into(&meter.as_layout(), opts, out),
        Node::Chart { axis, bars, marks } => {
            // Told where each bar went rather than looking for one. A bar's
            // markup is a function of its magnitude, so two bars of the same
            // height are the same bytes and searching would find either.
            let mut marked = crate::stage::Cursor::open(marks);
            if marked.watching() {
                let mut placed = Vec::new();
                makeover_webview::chart::chart_html_placed(
                    &axis.as_layout(),
                    bars.iter().map(Bar::as_layout),
                    opts,
                    out,
                    &mut placed,
                );
                for block in &placed {
                    marked.wrote(block.start, block.end);
                }
                marked.close(marks);
            } else {
                chart_html_into(
                    &axis.as_layout(),
                    bars.iter().map(Bar::as_layout),
                    opts,
                    out,
                );
            }
        }

        // The strip and its tones are makeover-webview's too, and the actions
        // are this crate's: a figure that answers a click becomes a control
        // wrapped round the emitted markup rather than a second figure emitter
        // that knows about routes.
        Node::Stats { figures, marks } => {
            out.push_str("<div");
            class_attr(&["figures"], opts, out);
            out.push('>');
            let mut marked = crate::stage::Cursor::open(marks);
            for (figure, action) in figures {
                marked.starts(out);
                match action {
                    Some(action) => {
                        let (open, close) = control_tag(action);
                        out.push_str(open);
                        class_attr(&["figure-act"], opts, out);
                        action_attrs(action, Fires::Click, None, None, false, out);
                        out.push('>');
                        figure_html_into(&figure.as_layout(), opts, out);
                        out.push_str(close);
                    }
                    None => figure_html_into(&figure.as_layout(), opts, out),
                }
                marked.ends(out);
            }
            marked.close(marks);
            out.push_str("</div>");
        }

        // The one member whose content this renderer does not build. `48a6e9e5`.
        //
        // The markup goes out as it arrived, which is the whole of what a canvas
        // is for and the whole of its risk: it is written by somebody who is not
        // the app, and the app is what sanitised it. Nothing here parses it,
        // because a second opinion formed from less context than the sanitiser
        // had is not a safety net -- it is a place for the two to disagree.
        //
        // The element carries the app's own class and id and none of this
        // renderer's. That is deliberate rather than an omission: the scope is a
        // contract between the app and the stylesheet it re-scoped, so a name
        // this crate prefixed or renamed would leave a sheet aimed at a selector
        // that matches nothing. They are escaped, being app strings in attribute
        // values, the same way `Document::body_class` is.
        Node::Canvas(canvas) => {
            out.push_str("<div");
            if let Some(class) = &canvas.class {
                out.push_str(" class=\"");
                escape_into(class, out);
                out.push('"');
            }
            if let Some(id) = &canvas.id {
                out.push_str(" id=\"");
                escape_into(id, out);
                out.push('"');
            }
            out.push('>');
            out.push_str(&canvas.markup);
            // After the markup and inside the scope, which is what lets a
            // creator's sheet reach the platform's own blocks. See
            // `Canvas::within`.
            for node in &canvas.within {
                node_html(node, opts, doc, out);
            }
            out.push_str("</div>");
        }

        Node::Region(slot) => slot_html(slot, Asks::ForItself, opts, doc, out),

        // A member added since this renderer last learned the vocabulary.
        // [`Node`] is `#[non_exhaustive]` so that landing one is not a lockstep
        // release across three renderers, and this arm is the price.
        //
        // It emits the same placeholder [`Node::StandIn`] does, because it is
        // the same situation said by the renderer instead of by the handler:
        // something is here and you are not seeing it. Emitting nothing would
        // leave a hole no reader could tell from a screen that never had the
        // part, and the markup and CSS for saying so already exist.
        //
        // `Readiness::Empty` and not `Failed`: nothing went wrong. The content
        // arrived intact and this renderer has not learned the word for it, so
        // a danger tone would report a fault the server did not have.
        _ => placeholder_html_into(
            layout::Readiness::Empty,
            "Not shown here yet.",
            None,
            opts,
            out,
        ),
    }
}

/// A readout the browser keeps writing.
///
/// A `<span>` and not a `<time>`: a `<time>` element's text has to be a machine
/// readable datetime when it carries no `datetime` attribute, and "3h ago" is
/// not one. Carrying both would mean emitting the instant twice in two
/// spellings for an element nothing in these apps styles differently.
fn clock_html(clock: Clock, at: std::time::SystemTime, opts: &Emit, out: &mut String) {
    out.push_str("<span");
    class_attr(&["clock"], opts, out);
    let _ = write!(
        out,
        " data-clock=\"{}\" data-at=\"{}\">",
        match clock {
            Clock::Since => "since",
            Clock::Until => "until",
            Clock::Age => "age",
        },
        crate::clock::epoch_millis(at)
    );
    // Escaped like every other string this crate emits, even though the only
    // thing that can be here is digits and colons this file made. The rule is
    // that text goes through the escaper; an exception argued from what the
    // value happens to be today is how the next one is written by hand.
    escape_into(
        &crate::clock::text(clock, at, std::time::SystemTime::now()),
        out,
    );
    out.push_str("</span>");
}

/// A small labelled thing sitting inside something else.
///
/// Took eight arguments, one per field of `Node::Token`, until the payload
/// became [`Tag`] so a row could carry one. The `too_many_arguments` allow went
/// with them.
///
/// # What this renderer does with a hint
///
/// Emits it as `title`. That is what the shipped goingson badges used and is
/// the only standing-help affordance a browser gives a `span`, so a described
/// badge draws what the hand-written one drew. It is hover-only and therefore
/// unreachable by touch and unreliable to a screen reader, which is why
/// [`Tag::hint`] says nothing may live only there.
fn tag_html(tag: &Tag, opts: &Emit, out: &mut String) {
    let Tag {
        kind,
        label,
        tone,
        latched,
        action,
        hint,
    } = tag;
    let (kind, tone, latched) = (*kind, *tone, *latched);
    let action = action.as_ref();

    let mut classes = vec![match kind {
        layout::Token::Badge => "badge",
        layout::Token::Chip { .. } => "chip",
    }];
    // `latched`, which is what makeover styles: `.chip.latched` is the pressed
    // depth a chip holds itself down with. This said `chip-latched`, a third
    // name for it, and a latched chip therefore looked exactly like an
    // unlatched one.
    if latched {
        classes.push("latched");
    }

    // A badge answers no click, so it is not a button however it is styled.
    // The description says which through the kind, which is the whole reason
    // the two are separate members rather than one with a flag.
    let interactive = kind.interactive() && action.is_some();
    let close = if interactive {
        // An interactive tag whose destination leaves the app is an anchor, for
        // the reason `control_tag` gives. A tag that answers nothing stays a
        // span either way.
        let (open, close) = action.map_or(("<span", "</span>"), control_tag);
        out.push_str(open);
        close
    } else {
        out.push_str("<span");
        "</span>"
    };
    class_attr(&classes, opts, out);
    tone_attr(tone, out);

    if interactive {
        // `data-act` for the same reason a button carries it: a chip that
        // answers a click is a control, and a table row filtering its own
        // trigger has to be able to tell one apart from its own text. A badge
        // never gets it, because a badge answers nothing.
        out.push_str(" data-act");
        if latched {
            // A chip standing for a filter is on or off, and its latched class
            // carries that fact visually through Depth::pressed either way.
            // Which word says it depends on what the chip turned out to be:
            // aria-pressed is a button's state and means nothing on an anchor,
            // and a link that is the view you are looking at is the one thing
            // aria-current exists to say.
            if action.is_some_and(is_link) {
                out.push_str(" aria-current=\"true\"");
            } else {
                out.push_str(" aria-pressed=\"true\"");
            }
        }
        if let Some(action) = action {
            action_attrs(action, Fires::Click, None, None, false, out);
        }
    }

    // `436bc223`: the detail behind the label, as `title`, which is what the
    // shipped goingson badges use and is the only standing-help affordance a
    // browser gives a span. Hover-only, so it is genuinely a hint and the
    // vocabulary says so -- nothing may live only here.
    if let Some(hint) = hint {
        out.push_str(" title=\"");
        escape_into(hint, out);
        out.push('"');
    }

    out.push('>');
    escape_into(label, out);
    if matches!(kind, layout::Token::Chip { removable: true }) {
        out.push_str("<span");
        class_attr(&["chip-remove"], opts, out);
        out.push_str(" aria-hidden=\"true\"></span>");
    }
    out.push_str(close);
}

/// What tells the swap to leave this element alone.
///
/// The third function `hx-` is allowed to appear in, and it is here rather than
/// inlined for the reason the other two are named: decision 13 says the
/// transport is replaceable, and a claim like that is only worth anything if
/// something checks it. `htmx_enters_in_exactly_two_functions` is that check
/// and it counts three now.
///
/// A third and not a fourth reading of one fact. [`action_attrs`] says where a
/// control sends and where its answer lands, [`oob_html`] says where a piece of
/// the answer lands that no control asked for, and this says what the answer
/// may not touch on the way in. Swapping htmx for something else rewrites the
/// three of them together.
///
/// Written without a leading space, which is [`Filling::control_attrs`]'s
/// contract: the caller separates them.
///
/// [`Filling::control_attrs`]: makeover_webview::form::Filling::control_attrs
fn preserve_attr(out: &mut String) {
    out.push_str("hx-preserve=\"true\"");
}

/// A region the answer changed without being aimed at it.
///
/// The second half of the transport, and the reason this file's htmx test
/// names two functions rather than one. [`action_attrs`] says where a control
/// sends and where the answer lands; this says where a piece of the answer
/// lands that no control asked for. Both are the same fact — how htmx is told
/// to put markup somewhere — and a transport swapped for fixi moves both, which
/// is what decision 13's claim needs.
///
/// # Why `innerHTML:` and not a bare `true`
///
/// A bare `hx-swap-oob="true"` replaces the element carrying the matching id
/// outright, and the element in the document is [`slot_html`]'s `<div>` with
/// the region's classes on it. Replacing it with what is emitted here would
/// strip them, so the region would keep its contents and lose its layout.
/// Addressing the swap by selector instead puts the markup *inside* the slot
/// and leaves the wrapper alone, which is what [`Serves::fragment`] already
/// means for the targeted region. The wrapper emitted here is htmx's envelope
/// and never reaches the document.
///
/// [`Serves::fragment`]: quasi_http::Serves::fragment
pub(crate) fn oob_html(region: &str, node: &Node, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    out.push_str("<div hx-swap-oob=\"innerHTML:#");
    // Escaped as an attribute, and otherwise untouched for `slot_html`'s
    // reason: this has to match the id that function emitted, and a slot id is
    // the address the description chose.
    escape_into(region, out);
    out.push_str("\">");
    node_html(node, opts, doc, out);
    out.push_str("</div>");
}

/// Write a frame's `class="..."`, prefixed, plus `current` if it is the one,
/// plus what addresses it.
///
/// `current` is written bare rather than through [`class_attr`], because
/// `showing_rules` writes `.showing-frame:not(.current)` and the state half of
/// that pair does not move under a prefix. Same shape as makeover's `chosen`
/// and `latched`: the thing is prefixed, the state qualifying it is not.
///
/// `data-frame` and `data-shown` are what the emitted chrome selects on:
/// which region the frame belongs to, and which of that region's children it
/// is. The region is named on every frame rather than the frames being found by
/// descent, because a region showing one child at a time can contain another
/// one -- a tab group over a gallery -- and a descendant query would step the
/// outer region through the inner one's frames.
///
/// Attributes and not classes for `data-shows`' reason: these are addresses
/// this renderer emits for its own chrome, and a class is the app's styling
/// surface.
fn frame_attrs(slot: &Slot, at: usize, current: bool, opts: &Emit, out: &mut String) {
    out.push_str(" class=\"");
    class_into("showing-frame", opts, out);
    if current {
        out.push_str(" current");
    }
    out.push_str("\" data-frame=\"");
    escape_into(&slot.id, out);
    let _ = write!(out, "\" data-shown=\"{at}\"");
}

/// Who asks for a region's content, when the region says where it comes from.
///
/// A labelled tab group is the second: the strip button carries the panel's
/// address, so the panel must not carry it as well or pressing a tab would
/// fetch it twice and the four unpressed ones would fetch on load.
///
/// A two-member enum rather than a `bool`, because the call sites that pass it
/// are twenty lines apart and `slot_html(child, false, ..)` says nothing about
/// which false.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub(crate) enum Asks {
    /// The region asks for its own content, which is every region but one.
    ForItself,
    /// Something above it asks, so it stays silent and waits to be given.
    AndIsAskedFor,
}

/// The address of one child of a region that shows them one at a time.
///
/// `Slot::fed_by` on such a child means the panel is a route, and the strip is
/// what calls it, so this is read from the parent rather than acted on by the
/// child. Every other region reads `fed_by` the ordinary way: it is the parent
/// showing one child at a time that changes who asks.
fn fed_child(slot: &Slot, at: usize) -> Option<&Action> {
    match &slot.body.get(at)?.node {
        Node::Region(child) => child.fed_by.as_deref(),
        _ => None,
    }
}

/// A region whose children are answers to one question, and the chrome for it.
///
/// [`Slot::repeating`] says the children are slots; this draws each under its
/// number, with the control that takes it away, and the control that adds one
/// under the lot.
///
/// # Everything here is derived as nodes and rendered through the ordinary walk
///
/// The caption is a [`Node::Heading`] and both controls are [`Node::Act`], so
/// this function invents no markup and no class: a slot's number comes out as
/// the same heading a described one does, and the two controls take everything
/// [`act_html`] already knows about tone, confirmation and waiting. The
/// alternative was a `slot-caption` class this crate defined and makeover did
/// not, which is the SSH-keys bug the class-coverage test exists to catch.
///
/// # The floor and the ceiling are drawn, not hidden
///
/// A remove past the floor and an add past the ceiling are emitted disabled
/// rather than left out. audiofiles' rule editor already made that call for its
/// last condition -- "offered dead rather than hidden", following its own
/// last-vault Delete -- and a control that vanishes at a boundary is a control
/// the reader has to discover twice.
///
/// What changed is who enforces it. The app disabled its own last Remove and
/// every renderer would have had to be told separately; now
/// [`Repeating::least`] says it once and [`Repeating::may_remove`] is what all
/// three read.
fn repeating_html(
    slot: &Slot,
    repeating: &quasi_router::Repeating,
    opts: &Emit,
    doc: &Doc<'_>,
    out: &mut String,
) {
    let standing = slot.body.len();
    for (at, placed) in slot.body.iter().enumerate() {
        // One-based, because it is read by a person: "Condition 1" and not
        // "Condition 0". The number is the renderer's for the reason
        // `Repeating::one` is a singular noun -- a description that wrote the
        // numbers would go stale the moment a slot left the middle.
        node_html(
            &Node::section(format!("{} {}", repeating.one, at + 1)),
            opts,
            doc,
            out,
        );
        ranked_html(placed, opts, doc, out);

        // The child's own, because only the child knows which slot it is. See
        // `Slot::removes` for why it is not one action on the parent.
        if let Node::Region(child) = &placed.node
            && let Some(removes) = &child.removes
        {
            let mut act = (**removes).clone();
            if !repeating.may_remove(standing) {
                act = act.disabled();
            }
            act_html(&act, opts, doc, out);
        }
    }

    let mut add = repeating.add.clone();
    if !repeating.may_add(standing) {
        add = add.disabled();
    }
    act_html(&add, opts, doc, out);
}

/// The chrome for a region showing one child at a time.
///
/// Derived, once, for every widget there will ever be. Nothing here reads
/// [`quasi_router::RegionKind::Widget`]'s name, and that is the point of the
/// whole design: a carousel, a tab group and a disclosure are one region that
/// shows some of its children, and which idiom comes out falls out of what the
/// children carry rather than out of what the assembly is called.
///
/// # The three shapes, and what picks between them
///
/// - Children carrying labels get a strip of them, which is
///   [`layout::Selector::Tabs`] markup verbatim. A tab strip is already a
///   described thing here; deriving a second spelling of one would be this
///   renderer inventing a name makeover would then not style, which is the
///   SSH-keys bug with extra steps.
/// - One dismissible child with a name gets that name as a control, which is a
///   summary line that opens.
/// - Anything else gets previous, position, next.
///
/// # Where the bytes come from, and what picks between the two
///
/// A carousel's frames are in the document already, so its controls call no
/// route: what changes is which of several children the reader has downloaded
/// is showing, and a round trip to reveal those bytes is worse on every one of
/// the three MNW galleries this was measured against. Those controls carry
/// `data-shows` and whatever binds the region binds them, the same relationship
/// `data-act` and `data-bespoke` already have with their host.
///
/// A tab group over routed panels is the other case, `dfbc88ce`. When a child
/// carries [`Slot::fed_by`], that action is the tab's address and the strip
/// button calls it, so the reader downloads the panel they asked for and not
/// the four they did not. Both marks go on the button: htmx makes the request
/// and the binder moves the frame, which is the same division of labour as a
/// control that acts and navigates.
///
/// The child does not also fetch itself, which is the half of this that is not
/// visible from here -- see [`slot_html`]. It is uniform rather than sparing
/// the shown child because a screen renders once at final geometry, with no
/// placeholder before first content, and the shown panel arriving on `load` is
/// a placeholder on the one panel being looked at.
///
/// Presence is the only thing that picks between the two, so nothing here reads
/// the region's kind and a description that mixes them is describing a carousel
/// whose frames are routes, which is a coherent thing to want.
fn showing_html(slot: &Slot, opts: &Emit, out: &mut String) {
    let labels = slot.labels();
    let current = slot.current();
    let total = slot.body.len();
    // What performs the move, when there is something that can address the
    // region. `0081563e`: the frames are in the document, so moving between
    // them is local, and this is the renderer emitting the behaviour instead of
    // waiting for a host to bind one. See `crate::hyperscript` for the whole of
    // why a program may be written into an attribute and why an id that is not
    // a handle gets the mark and nothing else.
    let handle = crate::hyperscript::handle(&slot.id);

    // A named single child that can close is a disclosure, and the check comes
    // first because such a child is also a labelled one: a strip of one tab is
    // not what a summary line is.
    if slot.showing().dismissible()
        && total == 1
        && let [label] = labels.as_slice()
    {
        out.push_str("<button type=\"button\"");
        // `button`, which is makeover's name for a control and carries its whole
        // interactive set. `act_html` learned this the expensive way.
        class_attr(&["button"], opts, out);
        out.push_str(" data-shows=\"0\" aria-expanded=\"");
        out.push_str(if current.is_some() {
            "true\""
        } else {
            "false\""
        });
        if let Some(handle) = handle {
            crate::hyperscript::disclosure(handle, out);
        }
        out.push('>');
        escape_into(label, out);
        out.push_str("</button>");
        return;
    }

    if !labels.is_empty() {
        let tab = option_class(layout::Selector::Tabs);
        out.push_str("<div");
        class_attr(&["selector"], opts, out);
        out.push_str(" data-selector=\"");
        out.push_str(tab);
        out.push_str("\" role=\"tablist\"");
        // `aad33ecc`. The strip is the element carrying `role="tablist"`, so it
        // is the element a screen reader announces and the one the region's own
        // name belongs on. `slot_html` skips the name when it emits a strip, so
        // the two never both write it.
        name_attr(slot.name.as_deref(), out);
        out.push('>');
        for (at, label) in labels.iter().enumerate() {
            let picked = current == Some(at);
            out.push_str("<button type=\"button\" class=\"");
            class_into(tab, opts, out);
            if picked {
                out.push_str(" chosen");
            }
            let _ = write!(out, "\" data-shows=\"{at}\" role=\"tab\" aria-selected=\"");
            out.push_str(if picked { "true\"" } else { "false\"" });
            // The panel's address, when the panel is a route rather than bytes
            // already here. No target is written, for the reason `slot_html`
            // does not write one either: the router answers with a fragment
            // naming the slot it changed and aims it with `HX-Retarget`, so the
            // party that knows stays the party that says.
            if let Some(action) = fed_child(slot, at) {
                action_attrs(action, Fires::ClickInStrip, None, None, false, out);
            }
            // Last, after whatever transport this tab carries, because the two
            // are separate halves of one press and reading them apart is how
            // the markup stays readable: htmx fetches the panel if there is one
            // to fetch, and this moves the frame either way.
            if let Some(handle) = handle {
                crate::hyperscript::tab(handle, at, out);
            }
            out.push('>');
            escape_into(label, out);
            out.push_str("</button>");
        }
        out.push_str("</div>");
        return;
    }

    // Previous, position, next. In flow, under the content, nothing overlaid:
    // a terminal cannot honestly overlay anything, and the dot strip this
    // replaces had no form at all past a handful of children -- two of the
    // three galleries it shipped on are creator uploads of arbitrary length.
    out.push_str("<div");
    class_attr(&["showing"], opts, out);
    out.push('>');

    out.push_str("<button type=\"button\"");
    class_attr(&["button"], opts, out);
    out.push_str(" data-shows=\"previous\"");
    if let Some(handle) = handle {
        crate::hyperscript::step(handle, crate::hyperscript::Step::Back, total, out);
    }
    out.push_str(">Prev</button>");

    out.push('<');
    out.push_str("span");
    class_attr(&["showing-position"], opts, out);
    // Named as well as classed, because the step controls write into it: a
    // class is what a stylesheet is entitled to rename, and this is an address.
    if let Some(handle) = handle {
        out.push_str(" data-position=\"");
        escape_into(handle, out);
        out.push('"');
    }
    // Zero when a dismissible region is closed, which is a true statement about
    // how many of its children are showing and needs no glyph of its own.
    let _ = write!(out, ">{} / {total}</span>", current.map_or(0, |at| at + 1));

    out.push_str("<button type=\"button\"");
    class_attr(&["button"], opts, out);
    out.push_str(" data-shows=\"next\"");
    if let Some(handle) = handle {
        crate::hyperscript::step(handle, crate::hyperscript::Step::Forward, total, out);
    }
    out.push_str(">Next</button>");

    out.push_str("</div>");
}

/// The chrome for a set that arrived in parts.
///
/// The same control [`showing_html`] draws, bound the other way. A carousel's
/// frames are in the document already, so its buttons carry `data-shows` and the
/// move is the host's; these rows were never fetched, so the buttons carry
/// addresses and the move is a request. Presence is the only difference, which
/// is why `quasi_router::Rest` is a `layout::Paging` plus addresses rather than
/// a second kind of position.
///
/// # The two labels
///
/// A set with a page size prints "3 / 8", which is `showing_html`'s spelling of
/// position and deliberately the same one. A set without prints what it has:
/// "150 of 400", or bare "Show more" when nothing counted it. The description
/// decides which by whether it is paged, and no renderer infers it from the
/// numbers.
///
/// # A direction with no address is left out, not drawn disabled
///
/// Ruled by Max 2026-09-08, reversing what stood here. The argument for the
/// disabled control was "first paint is final paint": a pager that gains a
/// button on page two moves everything beside it. The argument against is this
/// renderer's own, written under [`rest_strip_html`] about the page a reader is
/// already on -- a control that answers nothing is the lying control
/// [`control_tag`] exists to prevent -- and a Prev that cannot go back is that
/// control. The layout shift is the price, and `.rest` is the place to pay it
/// if it turns out to matter.
///
/// It is also what makes a paged screen compilable, which is not why it was
/// decided but is why it was asked. A guard derives as a branch only when
/// turning it off deletes bytes; a disabled control substitutes for an enabled
/// one, and the derivation silently baked whichever it happened to render. See
/// wiki `quasi-declare-form` section 29.
fn rest_html(rest: &Rest, opts: &Emit, out: &mut String) {
    let paging = rest.as_layout();

    out.push_str("<div");
    class_attr(&["rest"], opts, out);
    out.push('>');

    // Back, then the jumps, then forward, matching `Rest::placed`. A pager is
    // the container whose declaration order and render order genuinely differ:
    // the renderer puts Prev first whatever order the declaration said its
    // directions in, which is what `emit::pager_order` makes true rather than
    // hoped for.
    let mut marked = crate::stage::Cursor::open(&rest.marks);

    if let Some(action) = &rest.back {
        marked.starts(out);
        let (open, close) = control_tag(action);
        out.push_str(open);
        class_attr(&["button", "rest-previous"], opts, out);
        action_attrs(action, Fires::Click, None, None, false, out);
        out.push_str(">Prev");
        out.push_str(close);
        marked.ends(out);
    }

    if rest.jumps.is_empty() {
        out.push('<');
        out.push_str("span");
        class_attr(&["rest-position"], opts, out);
        out.push('>');
        match (paging.page(), paging.pages_total()) {
            (Some(page), Some(total)) => {
                let _ = write!(out, "{page} / {total}");
            }
            _ => match paging.total() {
                Some(total) => {
                    let _ = write!(out, "{} of {total}", paging.shown());
                }
                None => out.push_str("Show more"),
            },
        }
        out.push_str("</span>");
    } else {
        rest_strip_html(rest, &mut marked, opts, out);
    }

    // Written out rather than shared with the Prev branch above. The class name
    // has to sit in the `class_attr` call as a literal or `tests/vocabulary.rs`
    // cannot see it, and a renderer whose emitted names are invisible to that
    // scan is how the SSH-keys drift came back. The duplication is the price of
    // the check working.
    if let Some(action) = &rest.forward {
        marked.starts(out);
        let (open, close) = control_tag(action);
        out.push_str(open);
        class_attr(&["button", "rest-next"], opts, out);
        action_attrs(action, Fires::Click, None, None, false, out);
        out.push_str(">Next");
        out.push_str(close);
        marked.ends(out);
    }

    marked.close(&rest.marks);
    out.push_str("</div>");
}

/// The numbered pages, where the description offered any.
///
/// In place of the "3 / 8" readout rather than beside it: the strip says both
/// numbers already -- the marked one is where the reader is and the last is
/// how many there are -- and printing the position twice is a control arguing
/// with itself.
///
/// The page the reader is on is drawn as text and not as a control, which is
/// what `templates/pages/feed.html` already did with a `<span class="current">`.
/// A button that reloads the page it is on is an affordance that does nothing,
/// and a control that answers nothing is the lying control `control_tag` exists
/// to prevent.
///
/// A description that offered a strip the reader is not in draws every page as
/// a control and marks none, which is a host that windowed its pages wrong. It
/// is worth being able to see, and it is not worth refusing to draw a list
/// over.
fn rest_strip_html(rest: &Rest, marked: &mut crate::stage::Cursor, opts: &Emit, out: &mut String) {
    out.push_str("<div");
    class_attr(&["rest-pages"], opts, out);
    out.push('>');
    for jump in &rest.jumps {
        marked.starts(out);
        if jump.here {
            out.push_str("<span");
            class_attr(&["rest-page", "rest-page-here"], opts, out);
            out.push_str(" aria-current=\"page\">");
            let _ = write!(out, "{}", jump.page);
            out.push_str("</span>");
            marked.ends(out);
            continue;
        }
        let (open, close) = control_tag(&jump.action);
        out.push_str(open);
        class_attr(&["button", "rest-page"], opts, out);
        action_attrs(&jump.action, Fires::Click, None, None, false, out);
        out.push('>');
        let _ = write!(out, "{}", jump.page);
        out.push_str(close);
        marked.ends(out);
    }
    out.push_str("</div>");
}

/// A region, and everything under it.
/// The region's leading row: whatever the region puts there itself, then the
/// members the description said share it.
///
/// Ruling: wiki `layout-room-and-fallback`. What this replaces is goingson
/// pinning a toolbar over a tab strip in a stylesheet, so the property worth
/// stating is the one the wrapper buys: both are inside one flex row with a
/// min-content floor under each, which is `makeover-webview`'s `.run`. Nothing
/// here positions anything, and nothing here names a size.
///
/// `strip` is the caller's, not recomputed here: a tab group's strip and a
/// carousel's counter row are both `showing_html`, they sit on opposite sides
/// of the frames, and only the caller knows which side it is on. A region with
/// no run and no strip writes nothing at all, which is what every region
/// written before either existed did.
fn run_html(slot: &Slot, strip: bool, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    let Some(run) = slot.run.as_ref() else {
        if strip {
            showing_html(slot, opts, out);
        }
        return;
    };

    // The wrapper appears only when there is a run, so the strip a tab group
    // has always emitted is unwrapped until the description says something
    // shares its row. That keeps the change additive in the markup as well as
    // in the type.
    out.push_str("<div class=\"");
    out.push_str(&class("run", opts));
    out.push(' ');
    out.push_str(&class(fallback_class(run.fallback), opts));
    out.push_str("\">");
    if strip {
        showing_html(slot, opts, out);
    }
    for placed in &run.members {
        ranked_html(placed, opts, doc, out);
    }
    out.push_str("</div>");
}

/// A region's own accessible name, when it has one.
///
/// `aria-label` rather than a visible caption: the description says the region
/// is called this, and a region that also wants it on the screen carries a
/// [`Heading`](quasi_router::layout::Heading) in its body. Writing both from one
/// member would be this renderer deciding a screen's copy.
fn name_attr(name: Option<&str>, out: &mut String) {
    if let Some(name) = name {
        out.push_str(" aria-label=\"");
        escape_into(name, out);
        out.push('"');
    }
}

pub(crate) fn slot_html(slot: &Slot, asks: Asks, opts: &Emit, doc: &Doc<'_>, out: &mut String) {
    // A region's own questions, each on a wrapper outside the region rather
    // than on the region itself. Two reasons, and the first is the one that
    // makes it mandatory: htmx takes one verb and one address per element, and
    // a region that also names a `fed_by` already spent its. The second is
    // `Field::consults`' -- one wrapper each, so a panel recomputing from one
    // set of dials at two rates is two questions and not one that overwrote the
    // other.
    //
    // Outside rather than inside, so the gathered set is exactly the region's
    // contents: the `find input, find select, find textarea` this trigger
    // carries reaches the whole region from here, and from inside it would
    // reach whatever the wrapper happened to enclose.
    for consult in &slot.consults {
        out.push_str("<div");
        class_attr(&["region-consults"], opts, out);
        // What rides along from outside the region, named by field name. The
        // dials inside need no naming: they are what the trigger's own include
        // gathers, which is the whole of what moving the consult up to a region
        // bought.
        let sends = sends_selector(&consult.sends);
        action_attrs(
            &consult.action,
            Fires::Working {
                after: consult.after,
                at_least: consult.at_least,
            },
            None,
            sends.as_deref(),
            false,
            out,
        );
        out.push('>');
    }

    let kind = match &slot.kind {
        quasi_router::RegionKind::Band => "band",
        quasi_router::RegionKind::Sidebar => "sidebar",
        quasi_router::RegionKind::Pane => "pane",
        quasi_router::RegionKind::Group => "group",
        quasi_router::RegionKind::TabGroup => "tabgroup",
        quasi_router::RegionKind::Modal => "modal",
        quasi_router::RegionKind::Handover { .. } | quasi_router::RegionKind::Ceded { .. } => {
            "bespoke"
        }
        quasi_router::RegionKind::Widget { .. } => "widget",
    };

    // Every region is a `div` except the one whose whole meaning is "these
    // things belong together", which is what `section` means in HTML. This is
    // the renderer picking the expression its host has for an intent the
    // description states, the same way a terminal picks a rule and egui picks a
    // frame; nothing in the description asked for an element name.
    //
    // Only `Group`, deliberately. A `section` per pane or per band would be the
    // usual mistake of reaching for the semantic element because it sounds
    // better, and a document of nested sections says less than one that names
    // the one thing it means.
    let tag = match &slot.kind {
        quasi_router::RegionKind::Group => "section",
        _ => "div",
    };

    let _ = write!(out, "<{tag} id=\"");
    // The id is the fragment's address. It is escaped and otherwise untouched:
    // rewriting it would break the HX-Retarget the router just sent, which
    // names the slot's own id.
    escape_into(&slot.id, out);
    out.push('"');
    class_attr(&["region", kind], opts, out);

    if let quasi_router::RegionKind::Handover { name } | quasi_router::RegionKind::Ceded { name } =
        &slot.kind
    {
        // Never interpreted, per decision 4. Handed to the app under a name it
        // chose, which is the entire contract for a bespoke region.
        out.push_str(" data-bespoke=\"");
        escape_into(name, out);
        out.push('"');
    }

    if let quasi_router::RegionKind::Widget { name } = &slot.kind {
        // Also never interpreted here, and for a different purpose: this is the
        // hook a stylesheet or a script attaches to in order to draw the
        // assembly the way a browser does it. It is an attribute rather than a
        // class because a widget name is app vocabulary and classes here are
        // this renderer's.
        //
        // What makes it safe to emit and ignore is that the body under it is
        // already the whole assembly in primitives. Nothing recognises
        // `data-widget` and the region still renders -- a carousel degrades to
        // its frames, which is the JS-off fallback the shipped partial has and
        // the reason the tier does not need three renderers to release in step.
        out.push_str(" data-widget=\"");
        escape_into(name, out);
        out.push('"');
    }

    // What a binder looks for, and the one attribute that says this region has
    // chrome to bind. It is not the widget's name: a script that moved between
    // a carousel's frames by matching `data-widget="carousel"` would have to be
    // written again for the next assembly, which is the per-widget code the
    // whole derivation exists to stop.
    //
    // Nothing is emitted for `Showing::All`, so the hook is present exactly
    // when there is something to bind.
    match slot.showing() {
        layout::Showing::One => out.push_str(" data-showing=\"one\""),
        layout::Showing::AtMostOne => out.push_str(" data-showing=\"at-most-one\""),
        _ => {}
    }

    // What brings the region out, when it is not simply out. `079a011e`: the
    // condition is the region's own, so it is emitted here rather than on
    // whatever control the reveal script will read.
    //
    // Nothing decides the initial state on this side. The emitter sees one node
    // at a time and the control may be anywhere on the screen or, for a
    // fragment, not in this response at all; the script settles every
    // conditional region on parse and after every swap, which is one answer for
    // both. The cost is that a document served without the script shows them
    // all, which is stated where the script is.
    if let Some(reveal) = &slot.revealed_by {
        reveal_attrs(reveal, out);
    }

    if matches!(asks, Asks::ForItself) && matches!(slot.readiness, layout::Readiness::Pending) {
        out.push_str(" aria-busy=\"true\"");
    }

    // The region says where its content is coming from, so it asks for it
    // itself as soon as it exists. This is what a hand-split route was doing
    // before there was a word for it: MNW's payout summary is its own tab
    // because it calls a payment provider while the rest of the screen reads the
    // database, and under this it is a region of the screen that arrives late.
    //
    // Every `hx-` attribute comes out of `action_attrs`, including these. The
    // answer is aimed by `HX-Retarget` naming this slot's id, which is why
    // nothing here writes a target: the router is the party that knows what it
    // changed, and that is unchanged by the request having been started here.
    //
    // Unless something above it is asking on its behalf, which is
    // [`Asks::AndIsAskedFor`] and is one case: a panel of a labelled tab group,
    // whose strip button carries this same address. Both halves are suppressed
    // together, `aria-busy` above included, because a panel nobody has asked
    // for is not waiting on anything.
    if matches!(asks, Asks::ForItself)
        && let Some(action) = &slot.fed_by
    {
        // A live region asks on a cadence instead of once. The description says
        // only that the contents move; the interval is `crate::CADENCE`, picked
        // for every screen this crate draws rather than per template, which is
        // what MNW's two hand-written `every 10s` triggers were doing without
        // anything making them comparable.
        let fires = if slot.live { Fires::Live } else { Fires::Load };
        action_attrs(action, fires, None, None, false, out);
    }

    if matches!(slot.kind, quasi_router::RegionKind::Modal) {
        // A modal takes input until dismissed, which is what modal means, and
        // saying so is the renderer's job rather than the app's.
        out.push_str(" role=\"dialog\" aria-modal=\"true\"");
    }

    // `aad33ecc`. The region's own name, on the region itself -- unless a tab
    // strip is about to be emitted, in which case the strip is the element with
    // the role and `showing_html` writes it there instead. A named `div` with no
    // role is announced by nothing, so putting it in both places would be one
    // announcement and one wasted attribute rather than two announcements.
    if !slot.showing().selective() || slot.labels().is_empty() {
        name_attr(slot.name.as_deref(), out);
    }

    out.push('>');
    if slot.showing().selective() {
        let current = slot.current();
        let labelled = !slot.labels().is_empty();

        // A strip sits above the panes it opens and a counter row sits under
        // the content it counts. That is the only placement decision here, and
        // it is the folder semantic rather than a preference: a tab that came
        // after its pane would not read as the tab of it.
        if labelled {
            run_html(slot, true, opts, doc, out);
        }

        // Each child is wrapped, because the rule that collapses the stack has
        // to have something to select and a described child emits whatever
        // element it is. The wrapper appears only here, so a region that shows
        // everything -- which is every region written before `Showing` existed
        // -- emits exactly the markup it always did.
        let mut marked = crate::stage::Cursor::open(&slot.marks);
        for (at, placed) in slot.body.iter().enumerate() {
            marked.starts(out);
            out.push_str("<div");
            frame_attrs(slot, at, current == Some(at), opts, out);
            out.push('>');
            // A labelled strip has just emitted every panel's address on its
            // own buttons, so the panels are asked for rather than asking. The
            // drop-class wrapper is rebuilt here rather than reached through
            // `ranked_html`, which has no reason to learn about this and no
            // other caller that would pass it.
            match (labelled, &placed.node) {
                (true, Node::Region(child)) => {
                    let drops = drop_class(placed.priority);
                    if let Some(drops) = drops {
                        out.push_str("<div");
                        class_attr(&[drops], opts, out);
                        out.push('>');
                    }
                    slot_html(child, Asks::AndIsAskedFor, opts, doc, out);
                    if drops.is_some() {
                        out.push_str("</div>");
                    }
                }
                _ => ranked_html(placed, opts, doc, out),
            }
            out.push_str("</div>");
            marked.ends(out);
        }
        marked.close(&slot.marks);

        if !labelled {
            run_html(slot, true, opts, doc, out);
        }
    } else if let Some(repeating) = &slot.repeating {
        run_html(slot, false, opts, doc, out);
        repeating_html(slot, repeating, opts, doc, out);
    } else {
        run_html(slot, false, opts, doc, out);
        let mut marked = crate::stage::Cursor::open(&slot.marks);
        for placed in slot.body.iter() {
            marked.starts(out);
            ranked_html(placed, opts, doc, out);
            marked.ends(out);
        }
        marked.close(&slot.marks);
    }

    // The host's markup for this region, after whatever the description put
    // here, and only for a bespoke one: a fill named against a pane is a host
    // reaching into a region the description already owns.
    //
    // Verbatim. See `Webview::fills` for why that is not the hole it looks
    // like: the string is host code's, never a description's, so the escaping
    // guarantee the whole vocabulary rests on is untouched.
    if matches!(
        slot.kind,
        quasi_router::RegionKind::Handover { .. } | quasi_router::RegionKind::Ceded { .. }
    ) && let Some(fill) = doc.fills.get(&slot.id)
    {
        out.push_str(fill);
    }

    // `ae8e8836`. The region's own popover container, for an anchored screen to
    // land in. Emitted for every region rather than for the ones an app anchors
    // to, because nothing in a description says which those are; the cost is one
    // empty element per region and it is paid knowingly.
    //
    // Inside the region for every kind but one, and last, so that an anchored
    // screen draws over what the description put here rather than under it.
    // Inside is what makes it the region's: a fragment replacing this region
    // takes the menu with it, and a menu left open over contents that have since
    // been swapped is the state nobody asked for.
    //
    // A bespoke region is the exception and gets a sibling instead. Decision 4
    // says that one is a place and nothing else -- the host's markup is the
    // whole of what is between its tags -- and a renderer slipping its own
    // element in there would be the interpretation the decision forbids. The
    // menu then outlives a re-fill of that region, which is the cost of not
    // reaching inside, and it is the smaller of the two.
    let anchor = crate::hyperscript::handle(&slot.id).map(anchored_id);
    let bespoke = matches!(
        slot.kind,
        quasi_router::RegionKind::Handover { .. } | quasi_router::RegionKind::Ceded { .. }
    );
    if let Some(id) = &anchor
        && !bespoke
    {
        anchor_container_html(id, opts, out);
    }

    let _ = write!(out, "</{tag}>");

    if let Some(id) = &anchor
        && bespoke
    {
        anchor_container_html(id, opts, out);
    }

    // The consult wrappers close outside the anchor container for a bespoke
    // region, which is the one case where the container is a sibling. Both are
    // the region's, and the question is the outer of the two: a menu that
    // opened over the region belongs to it, and a recompute is asked about it.
    for _ in &slot.consults {
        out.push_str("</div>");
    }
}