htui 0.1.0

A terminal HTML/CSS renderer with an embedded JavaScript engine — build interactive TUIs from HTML, CSS and JS
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
//! Frame pipeline: re-parse / re-cascade / re-layout / re-paint / flush, plus
//! the parse and CSS-source helpers shared by the render thread and `run`.

use std::io::{BufWriter, Write, stdout};
use std::sync::Arc;
use std::sync::atomic::Ordering;
use std::sync::mpsc;

use crossterm::execute;
use indexmap::IndexMap;

use crate::events::Geometry;
use crate::html::css_parse::{
    self, CssRule, PseudoClass, css_into_node_with_state, css_pseudo_rule_set, reset_css_attr,
};
use crate::layout::Rect;
use crate::layout::layout::TermMap;
use crate::layout::layoutbox::{pin_fixed_boxes, pin_sticky_boxes};
use crate::tdom::node::{NodeArena, NodeId, NodeType};
use crate::tui::graph_api::{DirtyInfo, TermLayout};

use super::overlay::apply_select_overlay;
use super::region::{incremental_region, pinned_boxes_rects, pseudo_affected_region, union_rect};
use super::selection::{highlight_lines, lines_bounds};
use super::state::{RenderState, SELECTION_BG};

/// Flush one rendered frame from the session's `BufWriter`, skipping the
/// syscall entirely when the frame wrote nothing (an unchanged viewport).
pub(super) fn flush_frame<W: Write>(out: &mut BufWriter<W>) {
    if out.buffer().is_empty() {
        return;
    }
    if let Err(e) = out.flush() {
        log::error!("Failed to flush stdout: {}", e);
    }
}

pub(super) fn combined_css_source(html: &str, css: &str) -> String {
    let mut html_parser = crate::html::html_parse::Parser::new(html);
    let (_root_id, _arena, embedded_css) = html_parser.parse();

    if css.is_empty() {
        embedded_css
    } else {
        format!("{}\n{}", embedded_css, css)
    }
}

/// Parse a full CSS source string into rules (empty source → empty rules).
pub(super) fn parse_css_source(source: &str) -> CssRule {
    if source.trim().is_empty() {
        return CssRule::new();
    }
    let mut css_parser = css_parse::Parser::new(source);
    css_parser.parse()
}

/// Extract the document `<title>` text from the parsed DOM, if present.
///
/// Browsers use the first `<title>` element and ignore later ones; this walks
/// the arena in document order and returns the concatenated text of the first
/// `<title>` found. Returns `None` when the document has no `<title>` or it
/// contains no non-whitespace text.
fn extract_title(arena: &NodeArena, root_id: NodeId) -> Option<String> {
    let mut stack = vec![root_id];
    while let Some(id) = stack.pop() {
        let node = &arena[id];
        if node.node_type == NodeType::Title {
            let text: String = node
                .children
                .iter()
                .filter_map(|&child_id| match &arena[child_id].node_type {
                    NodeType::Text => arena[child_id].data.as_deref(),
                    _ => None,
                })
                .collect();
            let text = text.trim();
            return if text.is_empty() {
                None
            } else {
                Some(text.to_string())
            };
        }
        // Reverse so the stack visits children in document order (LIFO).
        stack.extend(node.children.iter().rev().copied());
    }
    None
}

impl RenderState {
    /// Re-parse, re-layout, re-paint, publish the geometry and flush a frame.
    ///
    /// Shared by `Redraw` (same document) and `RenderHtml` (new document).
    /// `out` is generic so tests can drive the pipeline against an in-memory
    /// writer.
    pub(super) fn redraw<W: Write>(
        &mut self,
        out: &mut BufWriter<W>,
        geo_tx: &Option<mpsc::Sender<Arc<Geometry>>>,
        term_map: &TermMap,
        scroll_y: u32,
        zoom: f32,
    ) {
        let (root_id, arena) = self.parse_and_apply();
        self.layout_and_paint(out, geo_tx, term_map, arena, root_id, scroll_y, zoom, None);
    }

    /// Re-layout / re-paint a supplied DOM arena, publishing geometry.
    ///
    /// Shared tail of [`redraw`](Self::redraw) and
    /// [`render_arena`](Self::render_arena). `arena` must already carry its
    /// cascaded CSS (`css_attr`); the caller handles parsing or re-cascading.
    /// `dirty` carries the nodes JS mutated since the previous frame: when
    /// the re-layout leaves every box rect unchanged, only those nodes'
    /// region is repainted instead of the whole canvas.
    fn layout_and_paint<W: Write>(
        &mut self,
        out: &mut BufWriter<W>,
        geo_tx: &Option<mpsc::Sender<Arc<Geometry>>>,
        term_map: &TermMap,
        arena: NodeArena,
        root_id: NodeId,
        scroll_y: u32,
        zoom: f32,
        dirty: Option<&DirtyInfo>,
    ) {
        // Reuse the existing canvas when its dimensions still match the
        // terminal. Only allocate a fresh Vec on the first render or after a
        // terminal resize, when the buffer size must change. A resize also
        // invalidates every cached pixel, so it forces the full-repaint path.
        let size_changed = match self.term_layout.as_ref() {
            Some(tl) => tl.columns != term_map.columns || tl.rows != term_map.rows,
            None => true,
        };
        if size_changed {
            self.term_layout = Some(TermLayout::new(term_map, zoom));
            // A resize invalidates the canvas-coordinate caches the overlay /
            // selection repaints rely on: drop them so the fresh frame paints
            // clean instead of re-applying stale rectangles onto the new
            // layout (the input loop separately clears its own mirrors).
            self.text_selection = None;
            self.open_select = None;
            if let Ok(mut guard) = self.selection_text.lock() {
                guard.clear();
            }
        }
        let Some(tl) = self.term_layout.as_mut() else {
            // `term_layout` is guaranteed `Some` by the branch above.
            return;
        };

        let boxes = tl.layout_only(&arena, root_id, term_map);
        // Whether the document contains any `position: fixed` box: scrolling
        // re-pins fixed / sticky boxes to the new scroll offset (a targeted
        // repaint) instead of the cheap canvas re-slice.
        self.has_pinned = !pinned_boxes_rects(&boxes).is_empty();

        // Install the document `<title>` as the terminal window title once
        // per session. The DOM is re-parsed on every `Redraw` but the title
        // is static, so this only runs on the first successful layout.
        if !self.title_set {
            if let Some(title) = extract_title(&arena, root_id) {
                execute!(stdout(), crossterm::terminal::SetTitle(title))
                    .unwrap_or_else(|e| log::error!("Failed to set terminal title: {}", e));
            }
            self.title_set = true;
        }

        let geo = Arc::new(Geometry {
            arena,
            boxes,
            root_id,
        });

        // Incremental repaint: when JS only touched a few nodes, the fresh
        // layout usually keeps every box rect identical to the cached one, so
        // only the dirty nodes' region can differ from the previous frame.
        // Repainting just that region (plus the ancestor background fills)
        // avoids clearing and re-painting the whole buffer. Any mismatch — a
        // moved / reflowed box, a hover change, a canvas resize — falls back
        // to the full repaint.
        let mut region = if !size_changed
            && let Some(dirty) = dirty
            && !dirty.is_empty()
            && let Some(prev) = &self.geometry
        {
            incremental_region(&prev.boxes, &geo.boxes, &geo.arena, &dirty.nodes)
        } else {
            None
        };

        // Publish the layout snapshot: cache it for `:hover` re-styling and
        // forward a copy to the hit-test thread when one is listening (the
        // event system is active).
        self.geometry = Some(Arc::clone(&geo));
        if let Some(tx) = geo_tx
            && let Err(e) = tx.send(Arc::clone(&geo))
        {
            // No hit-test thread is listening (plain `render`), so the
            // snapshot has no consumer — benign.
            log::debug!("Hit-test channel closed: {}", e);
        }

        // The selection re-apply below blends each selected cell from its
        // freshly painted colour. Cells outside an *incremental* repaint
        // region would keep the previous frame's highlight and be blended
        // again — a step darker per repaint, which an animated widget (a
        // timer / hover repaint) turns into a visible bright / dark flicker.
        // Extend the incremental region to the selection bounds so every
        // selected cell is painted fresh exactly once before the highlight is
        // overlaid. A `None` region stays `None`: the full repaint already
        // covers the selection.
        if let Some(r) = region
            && let Some(sel) = &self.text_selection
        {
            let sel_lines = highlight_lines(&geo.arena, &geo.boxes, sel, tl.columns as u32);
            if let Some(sel_rect) = lines_bounds(&sel_lines) {
                region = Some(union_rect(r, sel_rect));
            }
        }

        match region {
            Some(r) => tl.repaint_region(&geo.arena, &geo.boxes, r),
            None => tl.repaint_from(&geo.arena, &geo.boxes),
        }

        // Clamp the requested scroll position against the *fresh* content
        // height — the paint pass just established `rendered_rows`, so this
        // keeps the user's position across a resize instead of jumping to the
        // top (a brand-new canvas still reports 0 rows before the paint) — and
        // publish the new upper bound of `scroll_y` for the input loop. The
        // bound must also come from the post-paint state: publishing 0 on a
        // fresh canvas (first frame / every resize) would clamp every scroll
        // position to 0, making the wheel and PageUp/PageDown appear dead
        // until some later re-layout republished it. u32::MAX is the startup
        // placeholder (no upper bound known yet), overwritten by the first
        // successful layout with the real value.
        tl.scroll_y = scroll_y;
        tl.clamp_scroll();
        self.max_scroll.store(tl.max_scroll(), Ordering::Relaxed);

        // Re-apply the active page selection: the paint pass has no knowledge
        // of it, so any freshly painted canvas needs the highlight overlaid.
        // Flow selections are clipped to the text columns so the highlight
        // never spills over borders / padding / trailing whitespace.
        if let Some(sel) = &self.text_selection {
            let lines = highlight_lines(&geo.arena, &geo.boxes, sel, tl.columns as u32);
            tl.apply_text_selection(&lines, SELECTION_BG);
        }
        // Re-apply an open dropdown overlay (a repaint would clear it).
        if let Some(open) = &self.open_select {
            apply_select_overlay(tl, open);
        }

        // The incremental renderer emits only the changed cells (and a
        // one-time full clear on the first frame / after resize), so redraws
        // need no per-frame Clear. `flush_frame` is the single I/O per frame,
        // skipped entirely when nothing changed.
        tl.render(out);
        flush_frame(out);
    }

    /// Re-cascade CSS (with the current `:hover` / `:focus`) into a
    /// script-engine arena snapshot and render it without re-parsing HTML.
    ///
    /// Backs `RenderCmd::RenderArena`: JS mutated the live DOM, so the arena
    /// arrives raw (no `css_attr`) and must be cascaded first. `dirty` lists
    /// the mutated nodes for the incremental repaint; `state_changed` is true
    /// when the `:hover` target or the focused field moved, which invalidates
    /// the incremental path (the highlight may live anywhere in the tree).
    pub(super) fn render_arena<W: Write>(
        &mut self,
        out: &mut BufWriter<W>,
        geo_tx: &Option<mpsc::Sender<Arc<Geometry>>>,
        term_map: &TermMap,
        arena: &NodeArena,
        root_id: NodeId,
        scroll_y: u32,
        zoom: f32,
        dirty: DirtyInfo,
        state_changed: bool,
    ) {
        // `innerHTML`-injected `<style>` CSS must extend the session
        // stylesheet before the cascade. The added rules may restyle any node
        // in the tree, so the incremental repaint is disabled for this frame.
        let css_changed = !dirty.injected_css.is_empty();
        if css_changed {
            self.apply_injected_css(&dirty.injected_css);
        }
        let mut arena = arena.clone();
        reset_css_attr(&mut arena, root_id);
        css_into_node_with_state(&mut arena, root_id, &self.css_rules, &self.dynamic);
        let dirty = if state_changed || css_changed {
            None
        } else {
            Some(&dirty)
        };
        self.layout_and_paint(out, geo_tx, term_map, arena, root_id, scroll_y, zoom, dirty);
    }

    /// Replace the session's injected-CSS set with `injected` (host → css)
    /// and re-parse the combined stylesheet — but only when the set actually
    /// changed: a timer tick that re-injects identical styles rebuilds the
    /// combined string and compares, without re-parsing.
    ///
    /// The host-keyed replacement tracks the document's *live* injected
    /// styles. The previous append-only accumulation grew without bound and
    /// re-parsed `base + full history` on every injected write (O(n²) under
    /// refresh churn); now both the storage and each re-parse are bounded by
    /// the page's actual style content.
    fn apply_injected_css(&mut self, injected: &IndexMap<NodeId, String>) {
        let mut extra = String::new();
        for css in injected.values() {
            if css.trim().is_empty() {
                continue;
            }
            extra.push_str(css);
            extra.push('\n');
        }
        if extra == self.extra_css {
            return;
        }
        self.extra_css = extra;
        let mut combined = String::with_capacity(self.base_css.len() + 1 + self.extra_css.len());
        combined.push_str(&self.base_css);
        combined.push('\n');
        combined.push_str(&self.extra_css);
        let rules = parse_css_source(&combined);
        self.pseudo_rules = css_pseudo_rule_set(&rules);
        self.css_rules = Arc::new(rules);
    }

    /// Re-cascade the cached geometry with the session interaction state
    /// (`self.dynamic`) and repaint only the region affected by `pseudo`
    /// moving from `prev` to `new` (the old highlight is cleared, the new one
    /// painted). When neither position matches a rule of that pseudo-class the
    /// cascade paints identically, so nothing is drawn.
    ///
    /// Backs `RenderCmd::Hover` / `RenderCmd::Focus`. The arena is cloned —
    /// the shared snapshot stays immutable for the hit-test thread, and a
    /// slotmap clone keeps the same keys, so the cached boxes remain valid
    /// (state changes only recolour, never reflow).
    pub(super) fn repaint_dynamic<W: Write>(
        &mut self,
        out: &mut BufWriter<W>,
        pseudo: PseudoClass,
        prev: Option<NodeId>,
        new: Option<NodeId>,
    ) {
        let Some(tl) = self.term_layout.as_mut() else {
            return;
        };
        let Some(geo) = self.geometry.as_ref() else {
            return;
        };
        let mut arena = geo.arena.clone();
        reset_css_attr(&mut arena, geo.root_id);
        css_into_node_with_state(&mut arena, geo.root_id, &self.css_rules, &self.dynamic);
        // Incremental repaint: only the union of the old and new affected
        // regions can differ from the previous frame. Repainting this small
        // region instead of resetting the whole canvas keeps hover / focus
        // tracking responsive.
        let region = match (
            pseudo_affected_region(&geo.boxes, &arena, &self.css_rules, pseudo, prev),
            pseudo_affected_region(&geo.boxes, &arena, &self.css_rules, pseudo, new),
        ) {
            (Some(a), Some(b)) => Some(union_rect(a, b)),
            (Some(a), None) => Some(a),
            (None, Some(b)) => Some(b),
            (None, None) => None,
        };
        let Some(mut r) = region else {
            return;
        };
        // Extend the repaint to the active selection bounds: the selection
        // re-apply below blends each selected cell from its freshly painted
        // colour, so cells outside `r` would keep the previous frame's
        // highlight and be blended again (a step darker per hover / focus
        // repaint — the bright / dark flicker).
        if let Some(sel) = &self.text_selection {
            let sel_lines = highlight_lines(&geo.arena, &geo.boxes, sel, tl.columns as u32);
            if let Some(sel_rect) = lines_bounds(&sel_lines) {
                r = union_rect(r, sel_rect);
            }
        }
        tl.repaint_region(&arena, &geo.boxes, r);
        // The repaint reset the canvas (or part of it); the active selection
        // highlight must be overlaid again.
        if let Some(sel) = &self.text_selection {
            let lines = highlight_lines(&geo.arena, &geo.boxes, sel, tl.columns as u32);
            tl.apply_text_selection(&lines, SELECTION_BG);
        }
        if let Some(open) = &self.open_select {
            apply_select_overlay(tl, open);
        }
        tl.render(out);
        flush_frame(out);
    }

    /// Re-anchor `position: fixed` / `sticky` boxes to the current scroll
    /// offset and repaint the cells they occupy, then re-publish the geometry.
    ///
    /// The cached boxes were pinned to the *previous* scroll; this moves them
    /// by the scroll delta (document coordinates) so the canvas slice shows
    /// them at their constant screen position. Only the union of the old and
    /// new pinned areas is repainted (a small region), and the fresh geometry
    /// is forwarded to the hit-test thread so hit regions stay in sync. Backs
    /// the scroll-aware path of [`RenderCmd::Rerender`] when the document has
    /// pinned boxes; the caller renders the frame afterwards.
    pub(super) fn pin_fixed_and_repaint(&mut self, geo_tx: &Option<mpsc::Sender<Arc<Geometry>>>) {
        let Some(tl) = self.term_layout.as_mut() else {
            return;
        };
        let Some(geo) = self.geometry.clone() else {
            return;
        };
        let old_rects = pinned_boxes_rects(&geo.boxes);
        let mut boxes = geo.boxes.clone();
        let viewport = Rect::new(
            0,
            tl.scroll_y as usize,
            tl.columns as usize,
            tl.rows as usize,
        );
        pin_fixed_boxes(&mut boxes, viewport);
        pin_sticky_boxes(&mut boxes, viewport);
        let new_rects = pinned_boxes_rects(&boxes);
        let fresh = Arc::new(Geometry {
            arena: geo.arena.clone(),
            boxes,
            root_id: geo.root_id,
        });
        self.geometry = Some(Arc::clone(&fresh));
        if let Some(tx) = geo_tx
            && let Err(e) = tx.send(Arc::clone(&fresh))
        {
            log::debug!("Hit-test channel closed: {}", e);
        }
        let Some(region) = old_rects.into_iter().chain(new_rects).reduce(union_rect) else {
            return;
        };
        tl.repaint_region(&fresh.arena, &fresh.boxes, region);
        // The repaint reset the region; re-apply the active overlays on top.
        if let Some(sel) = &self.text_selection {
            let lines = highlight_lines(&geo.arena, &geo.boxes, sel, tl.columns as u32);
            tl.apply_text_selection(&lines, SELECTION_BG);
        }
        if let Some(open) = &self.open_select {
            apply_select_overlay(tl, open);
        }
    }

    /// Replace the session document and fully re-render it, keeping the
    /// current scroll position / zoom.
    ///
    /// Backs `RenderCmd::RenderHtml`. Script-side replacements are intercepted
    /// by `ScriptEngine::reload` (the engine stays the document's single
    /// source of truth); this render-thread path remains only for direct API
    /// use and as a fallback when an in-engine reload fails.
    pub(super) fn render_html<W: Write>(
        &mut self,
        out: &mut BufWriter<W>,
        geo_tx: &Option<mpsc::Sender<Arc<Geometry>>>,
        term_map: &TermMap,
        html: Arc<str>,
    ) {
        let (scroll_y, zoom) = match &self.term_layout {
            Some(tl) => (tl.scroll_y, tl.zoom),
            None => (0, 1.0),
        };
        self.html = html;
        // A fresh document discards any `innerHTML`-injected CSS.
        self.extra_css = String::new();
        let rules = parse_css_source(&self.base_css);
        self.pseudo_rules = css_pseudo_rule_set(&rules);
        self.css_rules = Arc::new(rules);
        // The new document may carry a different `<title>`.
        self.title_set = false;
        self.redraw(out, geo_tx, term_map, scroll_y, zoom);
    }
}