From 2ca85e208b6f2688c86f6d94ce445a3bb9ee3d43 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 12:27:08 +0300
Subject: [PATCH 01/11] Extract `svg` module tests to separate file

---
 src/svg/mod.rs   | 472 +----------------------------------------------
 src/svg/tests.rs | 468 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 470 insertions(+), 470 deletions(-)
 create mode 100644 src/svg/tests.rs

diff --git a/src/svg/mod.rs b/src/svg/mod.rs
index fcebd2c..97c5274 100644
--- a/src/svg/mod.rs
+++ b/src/svg/mod.rs
@@ -18,6 +18,8 @@ use std::{fmt, io::Write};
 mod data;
 mod helpers;
 mod palette;
+#[cfg(test)]
+mod tests;
 
 pub use self::{
     data::{CreatorData, HandlebarsData, SerializedInteraction},
@@ -409,473 +411,3 @@ impl Template {
             .render_to_write(MAIN_TEMPLATE_NAME, &data, destination)
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-    use crate::{ExitStatus, Interaction, UserInput};
-
-    #[test]
-    fn rendering_simple_transcript() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        Template::new(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.starts_with("<!--"));
-        assert!(
-            buffer.ends_with("</svg>\n") || buffer.ends_with("</svg>\r\n"),
-            // ^-- allows for different newline chars in Windows
-            "unexpected rendering result: {buffer}"
-        );
-        assert!(buffer.contains(r#"Hello, <span class="fg2">world</span>!"#));
-        assert!(!buffer.contains("data-exit-status"));
-        assert!(!buffer.contains("<circle"));
-
-        assert!(!buffer.contains("user-input-failure"));
-        assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
-    }
-
-    #[test]
-    fn rendering_simple_transcript_to_pure_svg() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("test --arg"),
-            "Hello, \u{1b}[31m\u{1b}[42mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        Template::pure_svg(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        let top_svg = "<svg viewBox=\"0 0 720 118\"";
-        assert!(buffer.contains(top_svg), "{buffer}");
-        let first_input_text = r#"<tspan xml:space="preserve" x="10" y="16" class="input">"#;
-        assert!(buffer.contains(first_input_text), "{buffer}");
-        let first_output_text = r#"<tspan xml:space="preserve" x="10" y="42" class="output">"#;
-        assert!(buffer.contains(first_output_text), "{buffer}");
-        let second_input_text = r#"<tspan xml:space="preserve" x="10" y="68" class="input">"#;
-        assert!(buffer.contains(second_input_text), "{buffer}");
-        let second_output_text = r#"<tspan xml:space="preserve" x="10" y="94" class="output">"#;
-        assert!(buffer.contains(second_output_text), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_empty_output_to_pure_svg() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(UserInput::command("test"), "");
-        transcript.add_interaction(
-            UserInput::command("test --arg"),
-            "Hello, \u{1b}[31m\u{1b}[42mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        Template::pure_svg(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        let top_svg = "<svg viewBox=\"0 0 720 94\"";
-        assert!(buffer.contains(top_svg), "{buffer}");
-        let second_input_bg = r#"<rect x="0" y="28" width="100%" height="22""#;
-        assert!(buffer.contains(second_input_bg), "{buffer}");
-        let second_input_text = r#"<tspan xml:space="preserve" x="10" y="44" class="input">"#;
-        assert!(buffer.contains(second_input_text), "{buffer}");
-        let second_output_bg = r#"<tspan xml:space="preserve" x="10" y="70" class="output-bg">"#;
-        assert!(buffer.contains(second_output_bg), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_explicit_success() {
-        let mut transcript = Transcript::new();
-        let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
-            .with_exit_status(ExitStatus(0));
-        transcript.add_existing_interaction(interaction);
-
-        let mut buffer = vec![];
-        Template::new(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(!buffer.contains("user-input-failure"));
-        assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
-        assert!(buffer.contains(r#"data-exit-status="0""#));
-    }
-
-    #[test]
-    fn rendering_transcript_with_failure() {
-        let mut transcript = Transcript::new();
-        let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
-            .with_exit_status(ExitStatus(1));
-        transcript.add_existing_interaction(interaction);
-
-        let mut buffer = vec![];
-        Template::new(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains("user-input-failure"));
-        assert!(buffer.contains("title=\"This command exited with non-zero code\""));
-        assert!(buffer.contains(r#"data-exit-status="1""#));
-    }
-
-    #[test]
-    fn rendering_pure_svg_transcript_with_failure() {
-        let mut transcript = Transcript::new();
-        let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
-            .with_exit_status(ExitStatus(1));
-        transcript.add_existing_interaction(interaction);
-
-        let mut buffer = vec![];
-        Template::pure_svg(TemplateOptions::default())
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(".input-bg .input-failure"), "{buffer}");
-        let failure_bg = "<rect x=\"0\" y=\"0\" width=\"100%\" height=\"22\" \
-            class=\"input-failure\"";
-        assert!(buffer.contains(failure_bg), "{buffer}");
-        let left_failure_border = "<rect x=\"0\" y=\"0\" width=\"2\" height=\"22\" \
-            class=\"input-failure-hl\" />";
-        assert!(buffer.contains(left_failure_border), "{buffer}");
-        let right_failure_border = "<rect x=\"100%\" y=\"0\" width=\"2\" height=\"22\" \
-            class=\"input-failure-hl\" transform=\"translate(-2, 0)\" />";
-        assert!(buffer.contains(right_failure_border), "{buffer}");
-        assert!(buffer.contains("<title>This command exited"), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_frame() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            window_frame: true,
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-        assert!(buffer.contains("<circle"));
-    }
-
-    #[test]
-    fn rendering_pure_svg_transcript_with_frame() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            window_frame: true,
-            ..TemplateOptions::default()
-        };
-        Template::pure_svg(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-        assert!(buffer.contains("<circle"));
-    }
-
-    #[test]
-    fn rendering_transcript_with_animation() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!\n".repeat(22),
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            scroll: Some(ScrollOptions {
-                max_height: 240,
-                interval: 3.0,
-            }),
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(r#"viewBox="0 0 720 260""#), "{buffer}");
-        assert!(buffer.contains("<animateTransform"), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_pure_svg_transcript_with_animation() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!\n".repeat(22),
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            scroll: Some(ScrollOptions {
-                max_height: 240,
-                interval: 3.0,
-            }),
-            ..TemplateOptions::default()
-        };
-        Template::pure_svg(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(r#"viewBox="0 0 720 260""#), "{buffer}");
-        assert!(buffer.contains("<animateTransform"), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_wraps() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            wrap: Some(WrapOptions::HardBreakAt(5)),
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(r#"viewBox="0 0 720 102""#), "{buffer}");
-        assert!(buffer.contains("<br/>"), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_svg_transcript_with_wraps() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            wrap: Some(WrapOptions::HardBreakAt(5)),
-            ..TemplateOptions::default()
-        };
-        Template::pure_svg(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(r#"viewBox="0 0 720 102""#), "{buffer}");
-        assert!(buffer.contains("Hello<tspan class=\"hard-br\""), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_line_numbers() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("another_test"),
-            "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            line_numbers: Some(LineNumbers::EachOutput),
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(
-            buffer.contains(r#"<pre class="line-numbers">1</pre>"#),
-            "{buffer}"
-        );
-        assert!(
-            buffer.contains(r#"<pre class="line-numbers">1<br/>2</pre>"#),
-            "{buffer}"
-        );
-    }
-
-    #[test]
-    fn rendering_pure_svg_transcript_with_line_numbers() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("another_test"),
-            "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            line_numbers: Some(LineNumbers::EachOutput),
-            ..TemplateOptions::default()
-        };
-        Template::pure_svg(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(".line-numbers {"), "{buffer}");
-        let first_output_ln = r#"<tspan x="34" y="42">1</tspan>"#;
-        assert!(buffer.contains(first_output_ln), "{buffer}");
-        let second_output_ln1 = r#"<tspan x="34" y="94">1</tspan>"#;
-        assert!(buffer.contains(second_output_ln1), "{buffer}");
-        let second_output_ln2 = r#"<tspan x="34" y="112">2</tspan>"#;
-        assert!(buffer.contains(second_output_ln2), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_continuous_line_numbers() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("another_test"),
-            "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            line_numbers: Some(LineNumbers::ContinuousOutputs),
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(
-            buffer.contains(r#"<pre class="line-numbers">1</pre>"#),
-            "{buffer}"
-        );
-        assert!(
-            buffer.contains(r#"<pre class="line-numbers">2<br/>3</pre>"#),
-            "{buffer}"
-        );
-    }
-
-    #[test]
-    fn rendering_transcript_with_input_line_numbers() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("another\ntest"),
-            "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            line_numbers: Some(LineNumbers::Continuous),
-            ..TemplateOptions::default()
-        };
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(
-            buffer.contains(r#"<div class="user-input"><pre class="line-numbers">"#),
-            "{buffer}"
-        );
-        assert!(
-            buffer.contains(r#"<pre class="line-numbers">5<br/>6</pre>"#),
-            "{buffer}"
-        );
-    }
-
-    #[test]
-    fn rendering_pure_svg_transcript_with_input_line_numbers() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-        transcript.add_interaction(
-            UserInput::command("another\ntest"),
-            "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let mut buffer = vec![];
-        let options = TemplateOptions {
-            line_numbers: Some(LineNumbers::Continuous),
-            ..TemplateOptions::default()
-        };
-        Template::pure_svg(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        let line_numbers = "<tspan x=\"34\" y=\"16\">1</tspan>\
-            <tspan x=\"34\" y=\"42\">2</tspan>\
-            <tspan x=\"34\" y=\"68\">3</tspan>\
-            <tspan x=\"34\" y=\"86\">4</tspan>\
-            <tspan x=\"34\" y=\"112\">5</tspan>\
-            <tspan x=\"34\" y=\"130\">6</tspan>";
-        assert!(buffer.contains(line_numbers), "{buffer}");
-    }
-
-    #[test]
-    fn rendering_transcript_with_styles() {
-        let mut transcript = Transcript::new();
-        transcript.add_interaction(
-            UserInput::command("test"),
-            "Hello, \u{1b}[32mworld\u{1b}[0m!",
-        );
-
-        let styles = "@font-face { font-family: 'Fira Mono'; }";
-        let options = TemplateOptions {
-            additional_styles: styles.to_owned(),
-            font_family: "Fira Mono, monospace".to_owned(),
-            ..TemplateOptions::default()
-        };
-        let mut buffer = vec![];
-        Template::new(options)
-            .render(&transcript, &mut buffer)
-            .unwrap();
-        let buffer = String::from_utf8(buffer).unwrap();
-
-        assert!(buffer.contains(styles), "{buffer}");
-        assert!(
-            buffer.contains("font: 14px Fira Mono, monospace;"),
-            "{buffer}"
-        );
-    }
-}
diff --git a/src/svg/tests.rs b/src/svg/tests.rs
new file mode 100644
index 0000000..eddf934
--- /dev/null
+++ b/src/svg/tests.rs
@@ -0,0 +1,468 @@
+//! Tests for the SVG rendering logic.
+
+use super::*;
+use crate::{ExitStatus, Interaction, UserInput};
+
+#[test]
+fn rendering_simple_transcript() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    Template::new(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.starts_with("<!--"));
+    assert!(
+        buffer.ends_with("</svg>\n") || buffer.ends_with("</svg>\r\n"),
+        // ^-- allows for different newline chars in Windows
+        "unexpected rendering result: {buffer}"
+    );
+    assert!(buffer.contains(r#"Hello, <span class="fg2">world</span>!"#));
+    assert!(!buffer.contains("data-exit-status"));
+    assert!(!buffer.contains("<circle"));
+
+    assert!(!buffer.contains("user-input-failure"));
+    assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
+}
+
+#[test]
+fn rendering_simple_transcript_to_pure_svg() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("test --arg"),
+        "Hello, \u{1b}[31m\u{1b}[42mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    Template::pure_svg(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    let top_svg = "<svg viewBox=\"0 0 720 118\"";
+    assert!(buffer.contains(top_svg), "{buffer}");
+    let first_input_text = r#"<tspan xml:space="preserve" x="10" y="16" class="input">"#;
+    assert!(buffer.contains(first_input_text), "{buffer}");
+    let first_output_text = r#"<tspan xml:space="preserve" x="10" y="42" class="output">"#;
+    assert!(buffer.contains(first_output_text), "{buffer}");
+    let second_input_text = r#"<tspan xml:space="preserve" x="10" y="68" class="input">"#;
+    assert!(buffer.contains(second_input_text), "{buffer}");
+    let second_output_text = r#"<tspan xml:space="preserve" x="10" y="94" class="output">"#;
+    assert!(buffer.contains(second_output_text), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_empty_output_to_pure_svg() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(UserInput::command("test"), "");
+    transcript.add_interaction(
+        UserInput::command("test --arg"),
+        "Hello, \u{1b}[31m\u{1b}[42mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    Template::pure_svg(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    let top_svg = "<svg viewBox=\"0 0 720 94\"";
+    assert!(buffer.contains(top_svg), "{buffer}");
+    let second_input_bg = r#"<rect x="0" y="28" width="100%" height="22""#;
+    assert!(buffer.contains(second_input_bg), "{buffer}");
+    let second_input_text = r#"<tspan xml:space="preserve" x="10" y="44" class="input">"#;
+    assert!(buffer.contains(second_input_text), "{buffer}");
+    let second_output_bg = r#"<tspan xml:space="preserve" x="10" y="70" class="output-bg">"#;
+    assert!(buffer.contains(second_output_bg), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_explicit_success() {
+    let mut transcript = Transcript::new();
+    let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
+        .with_exit_status(ExitStatus(0));
+    transcript.add_existing_interaction(interaction);
+
+    let mut buffer = vec![];
+    Template::new(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(!buffer.contains("user-input-failure"));
+    assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
+    assert!(buffer.contains(r#"data-exit-status="0""#));
+}
+
+#[test]
+fn rendering_transcript_with_failure() {
+    let mut transcript = Transcript::new();
+    let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
+        .with_exit_status(ExitStatus(1));
+    transcript.add_existing_interaction(interaction);
+
+    let mut buffer = vec![];
+    Template::new(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains("user-input-failure"));
+    assert!(buffer.contains("title=\"This command exited with non-zero code\""));
+    assert!(buffer.contains(r#"data-exit-status="1""#));
+}
+
+#[test]
+fn rendering_pure_svg_transcript_with_failure() {
+    let mut transcript = Transcript::new();
+    let interaction = Interaction::new("test", "Hello, \u{1b}[32mworld\u{1b}[0m!")
+        .with_exit_status(ExitStatus(1));
+    transcript.add_existing_interaction(interaction);
+
+    let mut buffer = vec![];
+    Template::pure_svg(TemplateOptions::default())
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(".input-bg .input-failure"), "{buffer}");
+    let failure_bg = "<rect x=\"0\" y=\"0\" width=\"100%\" height=\"22\" \
+            class=\"input-failure\"";
+    assert!(buffer.contains(failure_bg), "{buffer}");
+    let left_failure_border = "<rect x=\"0\" y=\"0\" width=\"2\" height=\"22\" \
+            class=\"input-failure-hl\" />";
+    assert!(buffer.contains(left_failure_border), "{buffer}");
+    let right_failure_border = "<rect x=\"100%\" y=\"0\" width=\"2\" height=\"22\" \
+            class=\"input-failure-hl\" transform=\"translate(-2, 0)\" />";
+    assert!(buffer.contains(right_failure_border), "{buffer}");
+    assert!(buffer.contains("<title>This command exited"), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_frame() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        window_frame: true,
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+    assert!(buffer.contains("<circle"));
+}
+
+#[test]
+fn rendering_pure_svg_transcript_with_frame() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        window_frame: true,
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+    assert!(buffer.contains("<circle"));
+}
+
+#[test]
+fn rendering_transcript_with_animation() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!\n".repeat(22),
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        scroll: Some(ScrollOptions {
+            max_height: 240,
+            interval: 3.0,
+        }),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 0 720 260""#), "{buffer}");
+    assert!(buffer.contains("<animateTransform"), "{buffer}");
+}
+
+#[test]
+fn rendering_pure_svg_transcript_with_animation() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!\n".repeat(22),
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        scroll: Some(ScrollOptions {
+            max_height: 240,
+            interval: 3.0,
+        }),
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 0 720 260""#), "{buffer}");
+    assert!(buffer.contains("<animateTransform"), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_wraps() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        wrap: Some(WrapOptions::HardBreakAt(5)),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 0 720 102""#), "{buffer}");
+    assert!(buffer.contains("<br/>"), "{buffer}");
+}
+
+#[test]
+fn rendering_svg_transcript_with_wraps() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        wrap: Some(WrapOptions::HardBreakAt(5)),
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 0 720 102""#), "{buffer}");
+    assert!(buffer.contains("Hello<tspan class=\"hard-br\""), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_line_numbers() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another_test"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::EachOutput),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(
+        buffer.contains(r#"<pre class="line-numbers">1</pre>"#),
+        "{buffer}"
+    );
+    assert!(
+        buffer.contains(r#"<pre class="line-numbers">1<br/>2</pre>"#),
+        "{buffer}"
+    );
+}
+
+#[test]
+fn rendering_pure_svg_transcript_with_line_numbers() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another_test"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::EachOutput),
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(".line-numbers {"), "{buffer}");
+    let first_output_ln = r#"<tspan x="34" y="42">1</tspan>"#;
+    assert!(buffer.contains(first_output_ln), "{buffer}");
+    let second_output_ln1 = r#"<tspan x="34" y="94">1</tspan>"#;
+    assert!(buffer.contains(second_output_ln1), "{buffer}");
+    let second_output_ln2 = r#"<tspan x="34" y="112">2</tspan>"#;
+    assert!(buffer.contains(second_output_ln2), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_continuous_line_numbers() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another_test"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::ContinuousOutputs),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(
+        buffer.contains(r#"<pre class="line-numbers">1</pre>"#),
+        "{buffer}"
+    );
+    assert!(
+        buffer.contains(r#"<pre class="line-numbers">2<br/>3</pre>"#),
+        "{buffer}"
+    );
+}
+
+#[test]
+fn rendering_transcript_with_input_line_numbers() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another\ntest"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::Continuous),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(
+        buffer.contains(r#"<div class="user-input"><pre class="line-numbers">"#),
+        "{buffer}"
+    );
+    assert!(
+        buffer.contains(r#"<pre class="line-numbers">5<br/>6</pre>"#),
+        "{buffer}"
+    );
+}
+
+#[test]
+fn rendering_pure_svg_transcript_with_input_line_numbers() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another\ntest"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::Continuous),
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    let line_numbers = "<tspan x=\"34\" y=\"16\">1</tspan>\
+            <tspan x=\"34\" y=\"42\">2</tspan>\
+            <tspan x=\"34\" y=\"68\">3</tspan>\
+            <tspan x=\"34\" y=\"86\">4</tspan>\
+            <tspan x=\"34\" y=\"112\">5</tspan>\
+            <tspan x=\"34\" y=\"130\">6</tspan>";
+    assert!(buffer.contains(line_numbers), "{buffer}");
+}
+
+#[test]
+fn rendering_transcript_with_styles() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test"),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let styles = "@font-face { font-family: 'Fira Mono'; }";
+    let options = TemplateOptions {
+        additional_styles: styles.to_owned(),
+        font_family: "Fira Mono, monospace".to_owned(),
+        ..TemplateOptions::default()
+    };
+    let mut buffer = vec![];
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(styles), "{buffer}");
+    assert!(
+        buffer.contains("font: 14px Fira Mono, monospace;"),
+        "{buffer}"
+    );
+}

From 07243b5bb4a21e71dca871992264a6392e196dbd Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 12:44:45 +0300
Subject: [PATCH 02/11] Shorten input / output class names in default template

---
 src/svg/default.svg.handlebars | 14 +++++++-------
 src/svg/tests.rs               |  8 ++++----
 src/test/parser/mod.rs         | 17 ++++++++++-------
 src/test/parser/tests.rs       | 16 ++++++++--------
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/svg/default.svg.handlebars b/src/svg/default.svg.handlebars
index e45dcec..78d1d53 100644
--- a/src/svg/default.svg.handlebars
+++ b/src/svg/default.svg.handlebars
@@ -122,7 +122,7 @@
     font: 14px {{font_family}};
     line-height: inherit;
   }
-  .user-input {
+  .input {
     {{~#if (eq line_numbers "continuous")}}
 
     display: flex;
@@ -135,13 +135,13 @@
   }
   {{~#if (eq line_numbers "continuous")}}
 
-  .user-input > pre { flex-grow: 1; }
+  .input > pre { flex-grow: 1; }
   {{~/if}}
 
-  .term-output { {{#if line_numbers}}display: flex; {{/if}}margin-bottom: {{const.BLOCK_MARGIN}}px; }
+  .output { {{#if line_numbers}}display: flex; {{/if}}margin-bottom: {{const.BLOCK_MARGIN}}px; }
   {{~#if line_numbers}}
 
-  .term-output > pre { flex-grow: 1; }
+  .output > pre { flex-grow: 1; }
   pre.line-numbers {
     flex-grow: 0;
     width: 1.5rem;
@@ -153,7 +153,7 @@
   {{/if}}
   {{~#if has_failures}}
 
-  .user-input-failure {
+  .input-failure {
     border-left: 2px solid {{ palette.colors.red }};
     border-right: 2px solid {{ palette.colors.red }};
     background: rgba(255, 0, 65, 0.15);
@@ -230,12 +230,12 @@
           <div xmlns="http://www.w3.org/1999/xhtml" class="container">
             {{~#each interactions}}
 
-            <div class="user-input{{#if failure}} user-input-failure{{/if}}"
+            <div class="input{{#if failure}} input-failure{{/if}}"
               {{~#if (ne exit_status null)}} data-exit-status="{{exit_status}}"{{/if~}}
               {{~#if failure}} title="This command exited with non-zero code"{{/if}}>
               {{~#if (eq ../line_numbers "continuous")}}{{>number_input_lines}}{{/if~}}
               <pre><span class="prompt">{{ input.prompt }}</span> {{ input.text }}</pre></div>
-            <div class="term-output">{{#if ../line_numbers}}{{>number_output_lines}}{{/if}}<pre>{{{output_html}}}</pre></div>
+            <div class="output">{{#if ../line_numbers}}{{>number_output_lines}}{{/if}}<pre>{{{output_html}}}</pre></div>
             {{~/each}}
 
           </div>
diff --git a/src/svg/tests.rs b/src/svg/tests.rs
index eddf934..f5feff8 100644
--- a/src/svg/tests.rs
+++ b/src/svg/tests.rs
@@ -27,7 +27,7 @@ fn rendering_simple_transcript() {
     assert!(!buffer.contains("data-exit-status"));
     assert!(!buffer.contains("<circle"));
 
-    assert!(!buffer.contains("user-input-failure"));
+    assert!(!buffer.contains("input-failure"));
     assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
 }
 
@@ -99,7 +99,7 @@ fn rendering_transcript_with_explicit_success() {
         .unwrap();
     let buffer = String::from_utf8(buffer).unwrap();
 
-    assert!(!buffer.contains("user-input-failure"));
+    assert!(!buffer.contains("input-failure"));
     assert!(!buffer.contains("title=\"This command exited with non-zero code\""));
     assert!(buffer.contains(r#"data-exit-status="0""#));
 }
@@ -117,7 +117,7 @@ fn rendering_transcript_with_failure() {
         .unwrap();
     let buffer = String::from_utf8(buffer).unwrap();
 
-    assert!(buffer.contains("user-input-failure"));
+    assert!(buffer.contains("input-failure"));
     assert!(buffer.contains("title=\"This command exited with non-zero code\""));
     assert!(buffer.contains(r#"data-exit-status="1""#));
 }
@@ -400,7 +400,7 @@ fn rendering_transcript_with_input_line_numbers() {
     let buffer = String::from_utf8(buffer).unwrap();
 
     assert!(
-        buffer.contains(r#"<div class="user-input"><pre class="line-numbers">"#),
+        buffer.contains(r#"<div class="input"><pre class="line-numbers">"#),
         "{buffer}"
     );
     assert!(
diff --git a/src/test/parser/mod.rs b/src/test/parser/mod.rs
index 8244189..e156aa9 100644
--- a/src/test/parser/mod.rs
+++ b/src/test/parser/mod.rs
@@ -265,6 +265,7 @@ impl UserInputState {
                 let input = UserInput {
                     text: String::new(),
                     prompt: Some(UserInput::intern_prompt(parsed.plaintext)),
+                    hidden: false,
                 };
                 return Ok(Some(Interaction {
                     input,
@@ -280,6 +281,7 @@ impl UserInputState {
             let input = UserInput {
                 text: parsed.into_input_text(),
                 prompt: self.prompt.take(),
+                hidden: false,
             };
             Interaction {
                 input,
@@ -297,13 +299,13 @@ enum ParserState {
     Initialized,
     /// Encountered `<svg>` tag; searching for `<div class="container">`.
     EncounteredSvgTag,
-    /// Encountered `<div class="container">`; searching for `<div class="user-input">`.
+    /// Encountered `<div class="container">`; searching for `<div class="input">`.
     EncounteredContainer,
-    /// Reading user input (`<div class="user-input">` contents).
+    /// Reading user input (`<div class="input">` contents).
     ReadingUserInput(UserInputState),
-    /// Finished reading user input; searching for `<div class="term-output">`.
+    /// Finished reading user input; searching for `<div class="output">`.
     EncounteredUserInput(Interaction<Parsed>),
-    /// Reading terminal output (`<div class="term-output">` contents).
+    /// Reading terminal output (`<div class="output">` contents).
     ReadingTermOutput(Interaction<Parsed>, TextReadingState),
 }
 
@@ -312,6 +314,7 @@ impl ParserState {
         input: UserInput {
             text: String::new(),
             prompt: None,
+            hidden: false,
         },
         output: Parsed::DEFAULT,
         exit_status: None,
@@ -348,7 +351,7 @@ impl ParserState {
             Self::EncounteredContainer => {
                 if let Event::Start(tag) = event {
                     let classes = parse_classes(tag.attributes())?;
-                    if extract_base_class(&classes) == b"user-input" {
+                    if extract_base_class(&classes) == b"input" {
                         let exit_status = parse_exit_status(tag.attributes())?;
                         self.set_state(Self::ReadingUserInput(UserInputState::new(exit_status)));
                     }
@@ -366,13 +369,13 @@ impl ParserState {
                     let classes = parse_classes(tag.attributes())?;
                     let base_class = extract_base_class(&classes);
 
-                    if base_class == b"term-output" {
+                    if base_class == b"output" {
                         let interaction = mem::replace(interaction, Self::DUMMY_INTERACTION);
                         self.set_state(Self::ReadingTermOutput(
                             interaction,
                             TextReadingState::default(),
                         ));
-                    } else if base_class == b"user-input" {
+                    } else if base_class == b"input" {
                         let interaction = mem::replace(interaction, Self::DUMMY_INTERACTION);
                         let exit_status = parse_exit_status(tag.attributes())?;
                         self.set_state(Self::ReadingUserInput(UserInputState::new(exit_status)));
diff --git a/src/test/parser/tests.rs b/src/test/parser/tests.rs
index 00bb460..7804bda 100644
--- a/src/test/parser/tests.rs
+++ b/src/test/parser/tests.rs
@@ -10,8 +10,8 @@ const SVG: &[u8] = br#"
     <svg viewBox="0 0 652 344" xmlns="http://www.w3.org/2000/svg">
       <foreignObject x="0" y="0" width="652" height="344">
         <div xmlns="http://www.w3.org/1999/xhtml" class="container">
-          <div class="user-input"><pre><span class="prompt">$</span> ls -al --color=always</pre></div>
-          <div class="term-output"><pre>total 28
+          <div class="input"><pre><span class="prompt">$</span> ls -al --color=always</pre></div>
+          <div class="output"><pre>total 28
 drwxr-xr-x 1 alex alex 4096 Apr 18 12:54 <span class="fg4">.</span>
 drwxrwxrwx 1 alex alex 4096 Apr 18 12:38 <span class="fg4 bg2">..</span>
 -rw-r--r-- 1 alex alex 8199 Apr 18 12:48 Cargo.lock</pre>
@@ -29,7 +29,7 @@ fn reading_file() {
     let interaction = &transcript.interactions[0];
     assert_matches!(
         &interaction.input,
-        UserInput { text, prompt }
+        UserInput { text, prompt, .. }
             if text == "ls -al --color=always" && prompt.as_deref() == Some("$")
     );
 
@@ -67,9 +67,9 @@ fn reading_file_with_no_output() {
         <svg viewBox="0 0 652 344" xmlns="http://www.w3.org/2000/svg">
           <foreignObject x="0" y="0" width="652" height="344">
             <div xmlns="http://www.w3.org/1999/xhtml" class="container">
-              <div class="user-input"><pre><span class="prompt">$</span> ls &gt; /dev/null</pre></div>
-              <div class="user-input"><pre><span class="prompt">$</span> ls</pre></div>
-              <div class="term-output"><pre>total 28
+              <div class="input"><pre><span class="prompt">$</span> ls &gt; /dev/null</pre></div>
+              <div class="input"><pre><span class="prompt">$</span> ls</pre></div>
+              <div class="output"><pre>total 28
 drwxr-xr-x 1 alex alex 4096 Apr 18 12:54 <span class="fg-blue">.</span>
 drwxrwxrwx 1 alex alex 4096 Apr 18 12:38 <span class="fg-blue bg-green">..</span>
 -rw-r--r-- 1 alex alex 8199 Apr 18 12:48 Cargo.lock</pre>
@@ -97,7 +97,7 @@ fn reading_file_with_exit_code_info() {
         <svg viewBox="0 0 652 344" xmlns="http://www.w3.org/2000/svg">
           <foreignObject x="0" y="0" width="652" height="344">
             <div xmlns="http://www.w3.org/1999/xhtml" class="container">
-              <div class="user-input user-input-invalid" data-exit-status="127"><pre><span class="prompt">$</span> what</pre></div>
+              <div class="input input-failure" data-exit-status="127"><pre><span class="prompt">$</span> what</pre></div>
             </div>
           </foreignObject>
         </svg>
@@ -117,7 +117,7 @@ fn invalid_exit_code_info() {
         <svg viewBox="0 0 652 344" xmlns="http://www.w3.org/2000/svg">
           <foreignObject x="0" y="0" width="652" height="344">
             <div xmlns="http://www.w3.org/1999/xhtml" class="container">
-              <div class="user-input user-input-invalid" data-exit-status="??"><pre><span class="prompt">$</span> what</pre></div>
+              <div class="input input-failure" data-exit-status="??"><pre><span class="prompt">$</span> what</pre></div>
             </div>
           </foreignObject>
         </svg>

From cae6d5f22d0773fb91450dc04a1610d9c184f656 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 12:46:50 +0300
Subject: [PATCH 03/11] Allow hiding `UserInput`s

---
 src/lib.rs     | 11 +++++++++++
 src/svg/mod.rs |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/lib.rs b/src/lib.rs
index 97ad1c2..8a6c25e 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -383,6 +383,7 @@ impl<Out: TermOutput> Interaction<Out> {
 pub struct UserInput {
     text: String,
     prompt: Option<Cow<'static, str>>,
+    hidden: bool,
 }
 
 impl UserInput {
@@ -401,6 +402,7 @@ impl UserInput {
         Self {
             text: text.into(),
             prompt: Some(Cow::Borrowed("$")),
+            hidden: false,
         }
     }
 
@@ -409,6 +411,7 @@ impl UserInput {
         Self {
             text: text.into(),
             prompt: Some(Cow::Borrowed(">>>")),
+            hidden: false,
         }
     }
 
@@ -417,6 +420,7 @@ impl UserInput {
         Self {
             text: text.into(),
             prompt: Some(Cow::Borrowed("...")),
+            hidden: false,
         }
     }
 
@@ -424,6 +428,13 @@ impl UserInput {
     pub fn prompt(&self) -> Option<&str> {
         self.prompt.as_deref()
     }
+
+    /// Marks this input as hidden (one that should not be displayed in the rendered transcript).
+    #[must_use]
+    pub fn hide(mut self) -> Self {
+        self.hidden = true;
+        self
+    }
 }
 
 /// Returns the command part of the input without the prompt.
diff --git a/src/svg/mod.rs b/src/svg/mod.rs
index 97c5274..1c9dd88 100644
--- a/src/svg/mod.rs
+++ b/src/svg/mod.rs
@@ -43,7 +43,8 @@ pub enum LineNumbers {
     EachOutput,
     /// Use continuous numbering for the lines in all outputs. Inputs are not numbered.
     ContinuousOutputs,
-    /// Use continuous numbering for the lines in all inputs and outputs.
+    /// Use continuous numbering for the lines in all displayed inputs (i.e., ones that
+    /// are not [hidden](crate::UserInput::hide())) and outputs.
     Continuous,
 }
 

From 1410e3d88e53c35c825883e562f89c1bdb8e9662 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 13:40:54 +0300
Subject: [PATCH 04/11] Hide inputs as requested in default template

---
 src/svg/default.svg.handlebars | 20 ++++++-----
 src/svg/tests.rs               | 61 ++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/svg/default.svg.handlebars b/src/svg/default.svg.handlebars
index 78d1d53..13602cd 100644
--- a/src/svg/default.svg.handlebars
+++ b/src/svg/default.svg.handlebars
@@ -24,13 +24,16 @@
   Expected hash inputs: `interactions`, `const`.
 }}
 {{~#*inline "compute_content_height"}}
-  {{#scope lines=0 margins=0}}
+  {{#scope lines=0 margins=0 displayed_interactions=0}}
     {{#each interactions}}
-      {{lines set=(add (lines) (count_lines input.text) (count_lines output_html format="html"))}}
-      {{#if (eq 0 (len output_html))}}
+      {{#if (not input.hidden)}}
+        {{lines set=(add (lines) (count_lines input.text))}}
+        {{margins set=(add (margins) 1)}}
+        {{displayed_interactions set=(add (displayed_interactions) 1)}}
+      {{/if}}
+      {{lines set=(add (lines) (count_lines output_html format="html"))}}
+      {{#if (ne 0 (len output_html))}}
         {{margins set=(add (margins) 1)}}
-      {{else}}
-        {{margins set=(add (margins) 2)}}
       {{/if}}
     {{/each}}
     {{#if (gt (margins) 0)}}
@@ -39,7 +42,7 @@
     {{/if}}
     {{add (mul (lines) const.LINE_HEIGHT)
           (mul (margins) const.BLOCK_MARGIN)
-          (mul (len interactions) const.USER_INPUT_PADDING) }}
+          (mul (displayed_interactions) const.USER_INPUT_PADDING) }}
   {{/scope}}
 {{/inline~}}
 
@@ -133,6 +136,7 @@
     background: rgba(255, 255, 255, 0.1);
     padding: 2px {{const.WINDOW_PADDING}}px;
   }
+  .input-hidden { display: none; }
   {{~#if (eq line_numbers "continuous")}}
 
   .input > pre { flex-grow: 1; }
@@ -230,10 +234,10 @@
           <div xmlns="http://www.w3.org/1999/xhtml" class="container">
             {{~#each interactions}}
 
-            <div class="input{{#if failure}} input-failure{{/if}}"
+            <div class="input{{#if failure}} input-failure{{/if}}{{#if input.hidden}} input-hidden{{/if}}"
               {{~#if (ne exit_status null)}} data-exit-status="{{exit_status}}"{{/if~}}
               {{~#if failure}} title="This command exited with non-zero code"{{/if}}>
-              {{~#if (eq ../line_numbers "continuous")}}{{>number_input_lines}}{{/if~}}
+              {{~#if (and (eq ../line_numbers "continuous") (not input.hidden))}}{{>number_input_lines}}{{/if~}}
               <pre><span class="prompt">{{ input.prompt }}</span> {{ input.text }}</pre></div>
             <div class="output">{{#if ../line_numbers}}{{>number_output_lines}}{{/if}}<pre>{{{output_html}}}</pre></div>
             {{~/each}}
diff --git a/src/svg/tests.rs b/src/svg/tests.rs
index f5feff8..0e4eb6e 100644
--- a/src/svg/tests.rs
+++ b/src/svg/tests.rs
@@ -61,6 +61,32 @@ fn rendering_simple_transcript_to_pure_svg() {
     assert!(buffer.contains(second_output_text), "{buffer}");
 }
 
+#[test]
+fn rendering_transcript_with_hidden_input() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let options = TemplateOptions {
+        window_frame: true,
+        ..TemplateOptions::default()
+    };
+    let mut buffer = vec![];
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 -22 720 60""#), "{buffer}");
+    assert!(buffer.contains(r#"viewBox="0 0 720 18""#), "{buffer}");
+    assert!(
+        buffer.contains(r#"<div class="input input-hidden">"#),
+        "{buffer}"
+    );
+}
+
 #[test]
 fn rendering_transcript_with_empty_output_to_pure_svg() {
     let mut transcript = Transcript::new();
@@ -409,6 +435,41 @@ fn rendering_transcript_with_input_line_numbers() {
     );
 }
 
+#[test]
+fn rendering_transcript_with_input_line_numbers_and_hidden_input() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another\ntest"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("third\ntest").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::Continuous),
+        ..TemplateOptions::default()
+    };
+    Template::new(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    let first_output_line_numbers = r#"<div class="output"><pre class="line-numbers">1</pre>"#;
+    assert!(buffer.contains(first_output_line_numbers), "{buffer}");
+    let input_line_numbers = r#"<div class="input"><pre class="line-numbers">2<br/>3</pre>"#;
+    assert!(buffer.contains(input_line_numbers), "{buffer}");
+    let second_output_line_numbers =
+        r#"<div class="output"><pre class="line-numbers">4<br/>5</pre>"#;
+    assert!(buffer.contains(second_output_line_numbers), "{buffer}");
+}
+
 #[test]
 fn rendering_pure_svg_transcript_with_input_line_numbers() {
     let mut transcript = Transcript::new();

From 94346173c00630cc3f50584e1f2adff3fa1b6ec9 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 14:11:44 +0300
Subject: [PATCH 05/11] Hide inputs as requested in pure SVG template

---
 src/svg/pure.svg.handlebars | 63 +++++++++++++++++---------------
 src/svg/tests.rs            | 71 +++++++++++++++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/src/svg/pure.svg.handlebars b/src/svg/pure.svg.handlebars
index 16a8a2e..f751950 100644
--- a/src/svg/pure.svg.handlebars
+++ b/src/svg/pure.svg.handlebars
@@ -28,13 +28,16 @@
   Expected hash inputs: `interactions`, `const`.
 }}
 {{~#*inline "compute_content_height"}}
-  {{#scope lines=0 margins=0}}
+  {{#scope lines=0 margins=0 displayed_interactions=0}}
     {{#each interactions}}
-      {{lines set=(add (lines) (count_lines input.text) (count_lines output_html format="html"))}}
-      {{#if (eq 0 (len output_html))}}
+      {{#if (not input.hidden)}}
+        {{lines set=(add (lines) (count_lines input.text))}}
+        {{margins set=(add (margins) 1)}}
+        {{displayed_interactions set=(add (displayed_interactions) 1)}}
+      {{/if}}
+      {{lines set=(add (lines) (len output_svg))}}
+      {{#if (ne 0 (len output_svg))}}
         {{margins set=(add (margins) 1)}}
-      {{else}}
-        {{margins set=(add (margins) 2)}}
       {{/if}}
     {{/each}}
     {{#if (gt (margins) 0)}}
@@ -43,7 +46,7 @@
     {{/if}}
     {{add (mul (lines) const.LINE_HEIGHT)
           (mul (margins) const.BLOCK_MARGIN)
-          (mul 2 (len interactions) const.INPUT_PADDING) }}
+          (mul 2 (displayed_interactions) const.INPUT_PADDING) }}
   {{/scope}}
 {{/inline~}}
 
@@ -176,15 +179,11 @@
       {{~/if}}
 
       {{! Render backgrounds for each input beforehand since they cannot be placed in <text>. }}
-      {{#scope y_pos=0 input_height=0 block_margin=0}}
+      {{#scope y_pos=0 input_height=0}}
       <g class="input-bg">
         {{~#each interactions}}
+        {{~#if (not input.hidden)}}
         {{~input_height set=(add (mul (count_lines input.text) const.LINE_HEIGHT) (mul 2 const.INPUT_PADDING))~}}
-        {{~#if (eq (len output_svg) 0)~}}
-          {{~block_margin set=const.BLOCK_MARGIN~}}
-        {{~else~}}
-          {{~block_margin set=(mul 2 const.BLOCK_MARGIN)~}}
-        {{~/if~}}
 
         <rect x="0" y="{{y_pos}}" width="100%" height="{{input_height}}"{{#if failure}} class="input-failure"{{/if}}>
         {{~#if failure~}}
@@ -195,7 +194,12 @@
         <rect x="0" y="{{y_pos}}" width="2" height="{{input_height}}" class="input-failure-hl" />
         <rect x="100%" y="{{y_pos}}" width="2" height="{{input_height}}" class="input-failure-hl" transform="translate(-2, 0)" />
         {{~/if~}}
-        {{~y_pos set=(add (y_pos) (input_height) (mul const.LINE_HEIGHT (len output_svg)) (block_margin))~}}
+        {{~y_pos set=(add (y_pos) (input_height) const.BLOCK_MARGIN)~}}
+        {{~/if~}} {{! if (not input.hidden) }}
+        {{~y_pos set=(add (y_pos) (mul const.LINE_HEIGHT (len output_svg)))~}}
+        {{~#if (ne (len output_svg) 0)}}
+          {{~y_pos set=(add (y_pos) const.BLOCK_MARGIN)}}
+        {{~/if}}
         {{~/each~}}
       </g>
       {{~/scope}}
@@ -219,6 +223,7 @@
       {{! The awkward newlines at the end of line <tspan>s are required for the text to be properly copyable }}
       <text class="container fg7">
         {{~#each interactions~}}
+        {{~#if (not input.hidden)~}}
         {{~y_pos set=(add (y_pos) const.INPUT_PADDING)~}}
         <tspan xml:space="preserve" x="{{input_x_pos}}" y="{{y_pos}}" class="input{{#if failure}} input-failure{{/if}}">
           {{~#each (split_lines input.text)~}}
@@ -227,10 +232,8 @@
           {{~y_pos set=(add (y_pos) const.LINE_HEIGHT)}}
           {{~/each~}}
 </tspan>
-        {{~y_pos set=(add (y_pos) const.INPUT_PADDING)}}
-        {{~#if (gt (len output_svg) 0)~}}
-          {{~y_pos set=(add (y_pos) const.BLOCK_MARGIN)~}}
-        {{~/if~}}
+        {{~y_pos set=(add (y_pos) const.INPUT_PADDING const.BLOCK_MARGIN)}}
+        {{~/if~}} {{! if (not input.hidden) }}
         {{~#each output_svg}}
         {{~#if (ne background null)~}}
         <tspan xml:space="preserve" x="{{x_pos}}" y="{{y_pos}}" class="output-bg">{{{background}}}</tspan>
@@ -239,7 +242,9 @@
 </tspan>
         {{~y_pos set=(add (y_pos) const.LINE_HEIGHT)~}}
         {{~/each~}}
-        {{~y_pos set=(add (y_pos) const.BLOCK_MARGIN)}}
+        {{~#if (gt (len output_svg) 0)~}}
+          {{~y_pos set=(add (y_pos) const.BLOCK_MARGIN)~}}
+        {{~/if~}}
         {{~/each~}}
       </text>
       {{/scope}}
@@ -268,17 +273,19 @@
 
 {{~#*inline "number_lines_in_interaction"~}}
   {{! Number lines in the input }}
-  {{~y_pos set=(add (y_pos) const.INPUT_PADDING)~}}
-  {{~#if (eq ../line_numbers "continuous")}}
-    {{~#each (range 0 (count_lines input.text))~}}
-      <tspan x="{{x_pos}}" y="{{y_pos}}">{{add this (line_number)}}</tspan>
-      {{~y_pos set=(add (y_pos) const.LINE_HEIGHT)~}}
-    {{~/each~}}
-    {{~line_number set=(add (line_number) (count_lines input.text))~}}
-  {{~else~}}
-    {{~y_pos set=(add (y_pos) (mul (count_lines input.text) const.LINE_HEIGHT))~}}
+  {{~#if (not input.hidden)}}
+    {{~y_pos set=(add (y_pos) const.INPUT_PADDING)~}}
+    {{~#if (eq ../line_numbers "continuous")}}
+      {{~#each (range 0 (count_lines input.text))~}}
+        <tspan x="{{x_pos}}" y="{{y_pos}}">{{add this (line_number)}}</tspan>
+        {{~y_pos set=(add (y_pos) const.LINE_HEIGHT)~}}
+      {{~/each~}}
+      {{~line_number set=(add (line_number) (count_lines input.text))~}}
+    {{~else~}}
+      {{~y_pos set=(add (y_pos) (mul (count_lines input.text) const.LINE_HEIGHT))~}}
+    {{~/if~}}
+    {{~y_pos set=(add (y_pos) const.INPUT_PADDING const.BLOCK_MARGIN)~}}
   {{~/if~}}
-  {{~y_pos set=(add (y_pos) const.INPUT_PADDING const.BLOCK_MARGIN)~}}
   {{! Number lines in the output }}
   {{~#each (range 0 (len output_svg))~}}
     <tspan x="{{x_pos}}" y="{{y_pos}}">{{add this (line_number)}}</tspan>
diff --git a/src/svg/tests.rs b/src/svg/tests.rs
index 0e4eb6e..6667c22 100644
--- a/src/svg/tests.rs
+++ b/src/svg/tests.rs
@@ -87,6 +87,33 @@ fn rendering_transcript_with_hidden_input() {
     );
 }
 
+#[test]
+fn rendering_transcript_with_hidden_input_to_pure_svg() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let options = TemplateOptions {
+        window_frame: true,
+        ..TemplateOptions::default()
+    };
+    let mut buffer = vec![];
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    assert!(buffer.contains(r#"viewBox="0 -22 720 60""#), "{buffer}");
+    assert!(buffer.contains(r#"viewBox="0 0 720 18""#), "{buffer}");
+    // No background for input should be displayed.
+    assert!(buffer.contains(r#"<g class="input-bg"></g>"#), "{buffer}");
+    let output_span = r#"<tspan xml:space="preserve" x="10" y="14" class="output">"#;
+    assert!(buffer.contains(output_span), "{buffer}");
+    assert!(!buffer.contains(r#"class="input""#), "{buffer}");
+}
+
 #[test]
 fn rendering_transcript_with_empty_output_to_pure_svg() {
     let mut transcript = Transcript::new();
@@ -470,6 +497,50 @@ fn rendering_transcript_with_input_line_numbers_and_hidden_input() {
     assert!(buffer.contains(second_output_line_numbers), "{buffer}");
 }
 
+#[test]
+fn rendering_transcript_with_input_line_numbers_and_hidden_input_in_pure_svg() {
+    let mut transcript = Transcript::new();
+    transcript.add_interaction(
+        UserInput::command("test").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("another\ntest"),
+        "Hello,\n\u{1b}[32mworld\u{1b}[0m!",
+    );
+    transcript.add_interaction(
+        UserInput::command("third\ntest").hide(),
+        "Hello, \u{1b}[32mworld\u{1b}[0m!",
+    );
+
+    let mut buffer = vec![];
+    let options = TemplateOptions {
+        line_numbers: Some(LineNumbers::Continuous),
+        ..TemplateOptions::default()
+    };
+    Template::pure_svg(options)
+        .render(&transcript, &mut buffer)
+        .unwrap();
+    let buffer = String::from_utf8(buffer).unwrap();
+
+    let input_bg = r#"<g class="input-bg"><rect x="0" y="24" width="100%" height="40"></rect></g>"#;
+    assert!(buffer.contains(input_bg), "{buffer}");
+    let line_numbers = "<tspan x=\"34\" y=\"14\">1</tspan>\
+        <tspan x=\"34\" y=\"40\">2</tspan>\
+        <tspan x=\"34\" y=\"58\">3</tspan>\
+        <tspan x=\"34\" y=\"84\">4</tspan>\
+        <tspan x=\"34\" y=\"102\">5</tspan>\
+        <tspan x=\"34\" y=\"126\">6</tspan>";
+    assert!(buffer.contains(line_numbers), "{buffer}");
+
+    let first_output = r#"<tspan xml:space="preserve" x="42" y="84" class="output">"#;
+    assert!(buffer.contains(first_output), "{buffer}");
+    let second_output = r#"<tspan xml:space="preserve" x="42" y="102" class="output">"#;
+    assert!(buffer.contains(second_output), "{buffer}");
+    let third_output = r#"<tspan xml:space="preserve" x="42" y="126" class="output">"#;
+    assert!(buffer.contains(third_output), "{buffer}");
+}
+
 #[test]
 fn rendering_pure_svg_transcript_with_input_line_numbers() {
     let mut transcript = Transcript::new();

From c205843be6ee2605f8fd16a1c7becf70cd9a4f27 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 14:19:20 +0300
Subject: [PATCH 06/11] Support old class names when testing transcripts

---
 src/test/parser/mod.rs   | 14 +++++++++++---
 src/test/parser/tests.rs | 29 ++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/test/parser/mod.rs b/src/test/parser/mod.rs
index e156aa9..92e2743 100644
--- a/src/test/parser/mod.rs
+++ b/src/test/parser/mod.rs
@@ -351,7 +351,7 @@ impl ParserState {
             Self::EncounteredContainer => {
                 if let Event::Start(tag) = event {
                     let classes = parse_classes(tag.attributes())?;
-                    if extract_base_class(&classes) == b"input" {
+                    if Self::is_input_class(extract_base_class(&classes)) {
                         let exit_status = parse_exit_status(tag.attributes())?;
                         self.set_state(Self::ReadingUserInput(UserInputState::new(exit_status)));
                     }
@@ -369,13 +369,13 @@ impl ParserState {
                     let classes = parse_classes(tag.attributes())?;
                     let base_class = extract_base_class(&classes);
 
-                    if base_class == b"output" {
+                    if Self::is_output_class(base_class) {
                         let interaction = mem::replace(interaction, Self::DUMMY_INTERACTION);
                         self.set_state(Self::ReadingTermOutput(
                             interaction,
                             TextReadingState::default(),
                         ));
-                    } else if base_class == b"input" {
+                    } else if Self::is_input_class(base_class) {
                         let interaction = mem::replace(interaction, Self::DUMMY_INTERACTION);
                         let exit_status = parse_exit_status(tag.attributes())?;
                         self.set_state(Self::ReadingUserInput(UserInputState::new(exit_status)));
@@ -396,6 +396,14 @@ impl ParserState {
         Ok(None)
     }
 
+    fn is_input_class(class_name: &[u8]) -> bool {
+        class_name == b"input" || class_name == b"user-input"
+    }
+
+    fn is_output_class(class_name: &[u8]) -> bool {
+        class_name == b"output" || class_name == b"term-output"
+    }
+
     #[cfg_attr(
         feature = "tracing",
         tracing::instrument(level = "debug", skip_all, err)
diff --git a/src/test/parser/tests.rs b/src/test/parser/tests.rs
index 7804bda..871ba09 100644
--- a/src/test/parser/tests.rs
+++ b/src/test/parser/tests.rs
@@ -21,9 +21,8 @@ drwxrwxrwx 1 alex alex 4096 Apr 18 12:38 <span class="fg4 bg2">..</span>
     </svg>
 "#;
 
-#[test]
-fn reading_file() {
-    let transcript = Transcript::from_svg(SVG).unwrap();
+fn test_reading_file(file_contents: &[u8]) {
+    let transcript = Transcript::from_svg(file_contents).unwrap();
     assert_eq!(transcript.interactions.len(), 1);
 
     let interaction = &transcript.interactions[0];
@@ -46,6 +45,30 @@ fn reading_file() {
     assert_eq!(color_spans.len(), 5); // 2 colored regions + 3 surrounding areas
 }
 
+#[test]
+fn reading_file() {
+    test_reading_file(SVG);
+}
+
+#[test]
+fn reading_old_file() {
+    const LEGACY_SVG: &[u8] = br#"
+        <svg viewBox="0 0 652 344" xmlns="http://www.w3.org/2000/svg">
+          <foreignObject x="0" y="0" width="652" height="344">
+            <div xmlns="http://www.w3.org/1999/xhtml" class="container">
+              <div class="user-input"><pre><span class="prompt">$</span> ls -al --color=always</pre></div>
+              <div class="term-output"><pre>total 28
+drwxr-xr-x 1 alex alex 4096 Apr 18 12:54 <span class="fg4">.</span>
+drwxrwxrwx 1 alex alex 4096 Apr 18 12:38 <span class="fg4 bg2">..</span>
+-rw-r--r-- 1 alex alex 8199 Apr 18 12:48 Cargo.lock</pre>
+              </div>
+            </div>
+          </foreignObject>
+        </svg>
+    "#;
+    test_reading_file(LEGACY_SVG);
+}
+
 #[test]
 fn reading_file_with_extra_info() {
     let mut data = SVG.to_owned();

From b7ff790e9dbbd66f6350d5c22e8f1a01ad2e42a5 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 14:46:44 +0300
Subject: [PATCH 07/11] cli: Allow hiding user inputs

---
 cli/src/main.rs     |  6 +++---
 cli/src/template.rs | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/cli/src/main.rs b/cli/src/main.rs
index 04aa9d9..4a8a3e6 100644
--- a/cli/src/main.rs
+++ b/cli/src/main.rs
@@ -16,7 +16,7 @@ use std::{
 use term_transcript::{
     test::{MatchKind, TestConfig, TestOutputConfig, TestStats},
     traits::SpawnShell,
-    Transcript, UserInput,
+    Transcript,
 };
 
 mod shell;
@@ -98,7 +98,7 @@ impl Command {
                     term_output.pop();
                 }
 
-                transcript.add_interaction(UserInput::command(command), term_output);
+                transcript.add_interaction(template.create_input(command), term_output);
                 template.render(&transcript)?;
             }
 
@@ -107,7 +107,7 @@ impl Command {
                 inputs,
                 template,
             } => {
-                let inputs = inputs.into_iter().map(UserInput::command);
+                let inputs = inputs.into_iter().map(|input| template.create_input(input));
                 let transcript = shell.create_transcript(inputs)?;
                 template.render(&transcript)?;
             }
diff --git a/cli/src/template.rs b/cli/src/template.rs
index ceed284..a60ff63 100644
--- a/cli/src/template.rs
+++ b/cli/src/template.rs
@@ -12,7 +12,7 @@ use std::{
 
 use term_transcript::{
     svg::{self, ScrollOptions, Template, TemplateOptions, WrapOptions},
-    Transcript,
+    Transcript, UserInput,
 };
 
 #[derive(Debug, Clone, ValueEnum)]
@@ -85,6 +85,9 @@ pub(crate) struct TemplateArgs {
     /// by more viewers, but there may be rendering artifacts.
     #[arg(long = "pure-svg", conflicts_with = "template_path")]
     pure_svg: bool,
+    /// Hides all user inputs; only outputs will be rendered.
+    #[arg(long = "no-inputs")]
+    no_inputs: bool,
     /// Path to a custom Handlebars template to use. `-` means not to use a template at all,
     /// and instead output JSON data that would be fed to a template.
     ///
@@ -125,6 +128,15 @@ impl From<TemplateArgs> for TemplateOptions {
 }
 
 impl TemplateArgs {
+    pub fn create_input(&self, command: String) -> UserInput {
+        let input = UserInput::command(command);
+        if self.no_inputs {
+            input.hide()
+        } else {
+            input
+        }
+    }
+
     pub fn render(mut self, transcript: &Transcript) -> anyhow::Result<()> {
         let pure_svg = self.pure_svg;
         let out_path = mem::take(&mut self.out);

From 7f8673b211141539a32e9362e1a6041dadbcd9b2 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 14:47:06 +0300
Subject: [PATCH 08/11] Add examples with hidden user inputs

---
 examples/README.md                  |  21 ++++-
 examples/generate-snapshots.sh      |  12 +++
 examples/no-inputs-numbers-pure.svg |  71 +++++++++++++++++
 examples/no-inputs-numbers.svg      | 114 ++++++++++++++++++++++++++++
 4 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 examples/no-inputs-numbers-pure.svg
 create mode 100644 examples/no-inputs-numbers.svg

diff --git a/examples/README.md b/examples/README.md
index cdd1ec7..985e44d 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -101,7 +101,26 @@ term-transcript exec -T 250ms --palette gjm8 \
 Same snapshot generated using the pure SVG template (i.e., with the additional
 `--pure-svg` flag):
 
-![Numbering with line breaks](numbers-long-pure.svg)
+![Numbering with line breaks, pure SVG](numbers-long-pure.svg)
+
+## Hiding user inputs
+
+Combined with line numbering and scrolling to test more features.
+
+![Hidden user inputs](no-inputs-numbers.svg)
+
+Generating command:
+
+```shell
+term-transcript exec -T 250ms --scroll --palette xterm \
+  --no-inputs --line-numbers continuous \
+  rainbow 'rainbow --short'
+```
+
+Same snapshot generated using the pure SVG template (i.e., with the additional
+`--pure-svg` flag):
+
+![Hidden user inputs, pure SVG](no-inputs-numbers-pure.svg)
 
 ## Custom fonts
 
diff --git a/examples/generate-snapshots.sh b/examples/generate-snapshots.sh
index 4ee1cc8..8c48aef 100755
--- a/examples/generate-snapshots.sh
+++ b/examples/generate-snapshots.sh
@@ -77,6 +77,18 @@ term-transcript exec $TT_ARGS --scroll --palette xterm --line-numbers each-outpu
   rainbow 'rainbow --short' \
   > "$ROOT_DIR/examples/numbers-each-output.$EXTENSION"
 
+echo "Creating snapshot with no inputs, --line-numbers continuous"
+term-transcript exec $TT_ARGS --scroll --palette xterm \
+  --no-inputs --line-numbers continuous \
+  rainbow 'rainbow --short' \
+  > "$ROOT_DIR/examples/no-inputs-numbers.$EXTENSION"
+
+echo "Creating snapshot with no inputs, --line-numbers continuous (pure SVG)"
+term-transcript exec $TT_ARGS --scroll --palette xterm --pure-svg \
+  --no-inputs --line-numbers continuous \
+  rainbow 'rainbow --short' \
+  > "$ROOT_DIR/examples/no-inputs-numbers-pure.$EXTENSION"
+
 echo "Creating snapshot with --line-numbers continuous-outputs"
 term-transcript exec $TT_ARGS --scroll --palette powershell --line-numbers continuous-outputs \
   rainbow 'rainbow --short' \
diff --git a/examples/no-inputs-numbers-pure.svg b/examples/no-inputs-numbers-pure.svg
new file mode 100644
index 0000000..1b79f84
--- /dev/null
+++ b/examples/no-inputs-numbers-pure.svg
@@ -0,0 +1,71 @@
+<!-- Created with term-transcript v0.3.0-beta.1 (https://github.com/slowli/term-transcript) -->
+<svg viewBox="0 0 720 362" width="720" height="362" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .container {
+      font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      line-height: 18px;
+    }
+    .input,.output,.output-bg {
+      white-space: pre;
+    }
+    .input-bg { fill: #fff; fill-opacity: 0.1; }
+    .output-bg { user-select: none; text-rendering: geometricPrecision; stroke-width: 0.1; }
+    .scrollbar { fill: #fff; fill-opacity: 0.35; }
+    .line-numbers { text-anchor: end; fill-opacity: 0.35; user-select: none; }
+
+    .bold,.prompt { font-weight: 600; }
+    .italic { font-style: italic; }
+    .underline { text-decoration: underline; }
+    .dimmed { fill-opacity: 0.7; }
+    .hard-br { font-size: 16px; fill-opacity: 0.8; user-select: none; }
+    .fg0 { fill: #000000; } .output-bg .fg0 { stroke: #000000; }
+    .fg1 { fill: #cd0000; } .output-bg .fg1 { stroke: #cd0000; }
+    .fg2 { fill: #00cd00; } .output-bg .fg2 { stroke: #00cd00; }
+    .fg3 { fill: #cdcd00; } .output-bg .fg3 { stroke: #cdcd00; }
+    .fg4 { fill: #0000ee; } .output-bg .fg4 { stroke: #0000ee; }
+    .fg5 { fill: #cd00cd; } .output-bg .fg5 { stroke: #cd00cd; }
+    .fg6 { fill: #00cdcd; } .output-bg .fg6 { stroke: #00cdcd; }
+    .fg7 { fill: #e5e5e5; } .output-bg .fg7 { stroke: #e5e5e5; }
+    .fg8 { fill: #7f7f7f; } .output-bg .fg8 { stroke: #7f7f7f; }
+    .fg9 { fill: #ff0000; } .output-bg .fg9 { stroke: #ff0000; }
+    .fg10 { fill: #00ff00; } .output-bg .fg10 { stroke: #00ff00; }
+    .fg11 { fill: #ffff00; } .output-bg .fg11 { stroke: #ffff00; }
+    .fg12 { fill: #5c5cff; } .output-bg .fg12 { stroke: #5c5cff; }
+    .fg13 { fill: #ff00ff; } .output-bg .fg13 { stroke: #ff00ff; }
+    .fg14 { fill: #00ffff; } .output-bg .fg14 { stroke: #00ffff; }
+    .fg15 { fill: #ffffff; } .output-bg .fg15 { stroke: #ffffff; }
+  </style>
+  <rect width="100%" height="100%" y="0" rx="4.5" style="fill: #000000;" />
+    <svg x="0" y="10" width="720" height="342" viewBox="0 0 720 342">
+      <animate attributeName="viewBox" values="0 0 720 342;0 52 720 342;0 104 720 342" dur="8.0s" repeatCount="indefinite" calcMode="discrete" />
+      <g class="input-bg"></g>
+      <text class="container fg7 line-numbers"><tspan x="34" y="14">1</tspan><tspan x="34" y="32">2</tspan><tspan x="34" y="50">3</tspan><tspan x="34" y="68">4</tspan><tspan x="34" y="86">5</tspan><tspan x="34" y="104">6</tspan><tspan x="34" y="122">7</tspan><tspan x="34" y="140">8</tspan><tspan x="34" y="158">9</tspan><tspan x="34" y="176">10</tspan><tspan x="34" y="194">11</tspan><tspan x="34" y="212">12</tspan><tspan x="34" y="230">13</tspan><tspan x="34" y="248">14</tspan><tspan x="34" y="266">15</tspan><tspan x="34" y="284">16</tspan><tspan x="34" y="302">17</tspan><tspan x="34" y="326">18</tspan><tspan x="34" y="344">19</tspan><tspan x="34" y="362">20</tspan><tspan x="34" y="380">21</tspan><tspan x="34" y="398">22</tspan><tspan x="34" y="416">23</tspan></text>
+      <text class="container fg7"><tspan xml:space="preserve" x="42" y="14" class="output">Base colors:
+</tspan><tspan xml:space="preserve" x="42" y="32" class="output"><tspan class="underline fg0">black</tspan> <tspan class="fg4">blue</tspan> <tspan class="underline fg2">green</tspan> <tspan class="fg1">red</tspan> <tspan class="underline fg6">cyan</tspan> <tspan class="fg5">magenta</tspan> <tspan class="underline fg3">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="50" class="output"><tspan class="fg8">black</tspan> <tspan class="underline fg12">blue</tspan> <tspan class="fg10">green</tspan> <tspan class="underline fg9">red</tspan> <tspan class="fg14">cyan</tspan> <tspan class="underline fg13">magenta</tspan> <tspan class="fg11">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="68" class="output">Base colors (bg):
+</tspan><tspan xml:space="preserve" x="42" y="86" class="output-bg"><tspan class="fg0">█████</tspan> <tspan class="fg4">████</tspan> <tspan class="fg2">█████</tspan> <tspan class="fg1">███</tspan> <tspan class="fg6">████</tspan> <tspan class="fg5">███████</tspan> <tspan class="fg3">██████</tspan></tspan><tspan xml:space="preserve" x="42" y="86" class="output"><tspan class="fg7 bg0">black</tspan> <tspan class="fg7 bg4">blue</tspan> <tspan class="fg7 bg2">green</tspan> <tspan class="fg7 bg1">red</tspan> <tspan class="fg7 bg6">cyan</tspan> <tspan class="fg7 bg5">magenta</tspan> <tspan class="fg7 bg3">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="104" class="output-bg"><tspan class="fg8">█████</tspan> <tspan class="fg12">████</tspan> <tspan class="fg10">█████</tspan> <tspan class="fg9">███</tspan> <tspan class="fg14">████</tspan> <tspan class="fg13">███████</tspan> <tspan class="fg11">██████</tspan></tspan><tspan xml:space="preserve" x="42" y="104" class="output"><tspan class="fg15 bg8">black</tspan> <tspan class="fg15 bg12">blue</tspan> <tspan class="fg15 bg10">green</tspan> <tspan class="fg15 bg9">red</tspan> <tspan class="fg15 bg14">cyan</tspan> <tspan class="fg15 bg13">magenta</tspan> <tspan class="fg15 bg11">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="122" class="output">ANSI color palette:
+</tspan><tspan xml:space="preserve" x="42" y="140" class="output-bg"> <tspan style="fill: #000000; stroke: #000000;">█</tspan> <tspan style="fill: #00005f; stroke: #00005f;">█</tspan> <tspan style="fill: #000087; stroke: #000087;">█</tspan> <tspan style="fill: #0000af; stroke: #0000af;">█</tspan> <tspan style="fill: #0000d7; stroke: #0000d7;">█</tspan> <tspan style="fill: #0000ff; stroke: #0000ff;">█</tspan> <tspan style="fill: #005f00; stroke: #005f00;">█</tspan> <tspan style="fill: #005f5f; stroke: #005f5f;">█</tspan> <tspan style="fill: #005f87; stroke: #005f87;">█</tspan> <tspan style="fill: #005faf; stroke: #005faf;">█</tspan> <tspan style="fill: #005fd7; stroke: #005fd7;">█</tspan> <tspan style="fill: #005fff; stroke: #005fff;">█</tspan> <tspan style="fill: #008700; stroke: #008700;">█</tspan> <tspan style="fill: #00875f; stroke: #00875f;">█</tspan> <tspan style="fill: #008787; stroke: #008787;">█</tspan> <tspan style="fill: #0087af; stroke: #0087af;">█</tspan> <tspan style="fill: #0087d7; stroke: #0087d7;">█</tspan> <tspan style="fill: #0087ff; stroke: #0087ff;">█</tspan> <tspan style="fill: #00af00; stroke: #00af00;">█</tspan> <tspan style="fill: #00af5f; stroke: #00af5f;">█</tspan> <tspan style="fill: #00af87; stroke: #00af87;">█</tspan> <tspan style="fill: #00afaf; stroke: #00afaf;">█</tspan> <tspan style="fill: #00afd7; stroke: #00afd7;">█</tspan> <tspan style="fill: #00afff; stroke: #00afff;">█</tspan> <tspan style="fill: #00d700; stroke: #00d700;">█</tspan> <tspan style="fill: #00d75f; stroke: #00d75f;">█</tspan> <tspan style="fill: #00d787; stroke: #00d787;">█</tspan> <tspan style="fill: #00d7af; stroke: #00d7af;">█</tspan> <tspan style="fill: #00d7d7; stroke: #00d7d7;">█</tspan> <tspan style="fill: #00d7ff; stroke: #00d7ff;">█</tspan> <tspan style="fill: #00ff00; stroke: #00ff00;">█</tspan> <tspan style="fill: #00ff5f; stroke: #00ff5f;">█</tspan> <tspan style="fill: #00ff87; stroke: #00ff87;">█</tspan> <tspan style="fill: #00ffaf; stroke: #00ffaf;">█</tspan> <tspan style="fill: #00ffd7; stroke: #00ffd7;">█</tspan> <tspan style="fill: #00ffff; stroke: #00ffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="140" class="output"><tspan style="fill: #000000;">!</tspan><tspan class="fg7 bg#000000">?</tspan><tspan style="fill: #00005f;">!</tspan><tspan class="fg7 bg#00005f">?</tspan><tspan style="fill: #000087;">!</tspan><tspan class="fg7 bg#000087">?</tspan><tspan style="fill: #0000af;">!</tspan><tspan class="fg7 bg#0000af">?</tspan><tspan style="fill: #0000d7;">!</tspan><tspan class="fg7 bg#0000d7">?</tspan><tspan style="fill: #0000ff;">!</tspan><tspan class="fg7 bg#0000ff">?</tspan><tspan style="fill: #005f00;">!</tspan><tspan class="fg7 bg#005f00">?</tspan><tspan style="fill: #005f5f;">!</tspan><tspan class="fg7 bg#005f5f">?</tspan><tspan style="fill: #005f87;">!</tspan><tspan class="fg7 bg#005f87">?</tspan><tspan style="fill: #005faf;">!</tspan><tspan class="fg7 bg#005faf">?</tspan><tspan style="fill: #005fd7;">!</tspan><tspan class="fg7 bg#005fd7">?</tspan><tspan style="fill: #005fff;">!</tspan><tspan class="fg7 bg#005fff">?</tspan><tspan style="fill: #008700;">!</tspan><tspan class="fg7 bg#008700">?</tspan><tspan style="fill: #00875f;">!</tspan><tspan class="fg7 bg#00875f">?</tspan><tspan style="fill: #008787;">!</tspan><tspan class="fg7 bg#008787">?</tspan><tspan style="fill: #0087af;">!</tspan><tspan class="fg7 bg#0087af">?</tspan><tspan style="fill: #0087d7;">!</tspan><tspan class="fg0 bg#0087d7">?</tspan><tspan style="fill: #0087ff;">!</tspan><tspan class="fg0 bg#0087ff">?</tspan><tspan style="fill: #00af00;">!</tspan><tspan class="fg0 bg#00af00">?</tspan><tspan style="fill: #00af5f;">!</tspan><tspan class="fg0 bg#00af5f">?</tspan><tspan style="fill: #00af87;">!</tspan><tspan class="fg0 bg#00af87">?</tspan><tspan style="fill: #00afaf;">!</tspan><tspan class="fg0 bg#00afaf">?</tspan><tspan style="fill: #00afd7;">!</tspan><tspan class="fg0 bg#00afd7">?</tspan><tspan style="fill: #00afff;">!</tspan><tspan class="fg0 bg#00afff">?</tspan><tspan style="fill: #00d700;">!</tspan><tspan class="fg0 bg#00d700">?</tspan><tspan style="fill: #00d75f;">!</tspan><tspan class="fg0 bg#00d75f">?</tspan><tspan style="fill: #00d787;">!</tspan><tspan class="fg0 bg#00d787">?</tspan><tspan style="fill: #00d7af;">!</tspan><tspan class="fg0 bg#00d7af">?</tspan><tspan style="fill: #00d7d7;">!</tspan><tspan class="fg0 bg#00d7d7">?</tspan><tspan style="fill: #00d7ff;">!</tspan><tspan class="fg0 bg#00d7ff">?</tspan><tspan style="fill: #00ff00;">!</tspan><tspan class="fg0 bg#00ff00">?</tspan><tspan style="fill: #00ff5f;">!</tspan><tspan class="fg0 bg#00ff5f">?</tspan><tspan style="fill: #00ff87;">!</tspan><tspan class="fg0 bg#00ff87">?</tspan><tspan style="fill: #00ffaf;">!</tspan><tspan class="fg0 bg#00ffaf">?</tspan><tspan style="fill: #00ffd7;">!</tspan><tspan class="fg0 bg#00ffd7">?</tspan><tspan style="fill: #00ffff;">!</tspan><tspan class="fg0 bg#00ffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="158" class="output-bg"> <tspan style="fill: #5f0000; stroke: #5f0000;">█</tspan> <tspan style="fill: #5f005f; stroke: #5f005f;">█</tspan> <tspan style="fill: #5f0087; stroke: #5f0087;">█</tspan> <tspan style="fill: #5f00af; stroke: #5f00af;">█</tspan> <tspan style="fill: #5f00d7; stroke: #5f00d7;">█</tspan> <tspan style="fill: #5f00ff; stroke: #5f00ff;">█</tspan> <tspan style="fill: #5f5f00; stroke: #5f5f00;">█</tspan> <tspan style="fill: #5f5f5f; stroke: #5f5f5f;">█</tspan> <tspan style="fill: #5f5f87; stroke: #5f5f87;">█</tspan> <tspan style="fill: #5f5faf; stroke: #5f5faf;">█</tspan> <tspan style="fill: #5f5fd7; stroke: #5f5fd7;">█</tspan> <tspan style="fill: #5f5fff; stroke: #5f5fff;">█</tspan> <tspan style="fill: #5f8700; stroke: #5f8700;">█</tspan> <tspan style="fill: #5f875f; stroke: #5f875f;">█</tspan> <tspan style="fill: #5f8787; stroke: #5f8787;">█</tspan> <tspan style="fill: #5f87af; stroke: #5f87af;">█</tspan> <tspan style="fill: #5f87d7; stroke: #5f87d7;">█</tspan> <tspan style="fill: #5f87ff; stroke: #5f87ff;">█</tspan> <tspan style="fill: #5faf00; stroke: #5faf00;">█</tspan> <tspan style="fill: #5faf5f; stroke: #5faf5f;">█</tspan> <tspan style="fill: #5faf87; stroke: #5faf87;">█</tspan> <tspan style="fill: #5fafaf; stroke: #5fafaf;">█</tspan> <tspan style="fill: #5fafd7; stroke: #5fafd7;">█</tspan> <tspan style="fill: #5fafff; stroke: #5fafff;">█</tspan> <tspan style="fill: #5fd700; stroke: #5fd700;">█</tspan> <tspan style="fill: #5fd75f; stroke: #5fd75f;">█</tspan> <tspan style="fill: #5fd787; stroke: #5fd787;">█</tspan> <tspan style="fill: #5fd7af; stroke: #5fd7af;">█</tspan> <tspan style="fill: #5fd7d7; stroke: #5fd7d7;">█</tspan> <tspan style="fill: #5fd7ff; stroke: #5fd7ff;">█</tspan> <tspan style="fill: #5fff00; stroke: #5fff00;">█</tspan> <tspan style="fill: #5fff5f; stroke: #5fff5f;">█</tspan> <tspan style="fill: #5fff87; stroke: #5fff87;">█</tspan> <tspan style="fill: #5fffaf; stroke: #5fffaf;">█</tspan> <tspan style="fill: #5fffd7; stroke: #5fffd7;">█</tspan> <tspan style="fill: #5fffff; stroke: #5fffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="158" class="output"><tspan style="fill: #5f0000;">!</tspan><tspan class="fg7 bg#5f0000">?</tspan><tspan style="fill: #5f005f;">!</tspan><tspan class="fg7 bg#5f005f">?</tspan><tspan style="fill: #5f0087;">!</tspan><tspan class="fg7 bg#5f0087">?</tspan><tspan style="fill: #5f00af;">!</tspan><tspan class="fg7 bg#5f00af">?</tspan><tspan style="fill: #5f00d7;">!</tspan><tspan class="fg7 bg#5f00d7">?</tspan><tspan style="fill: #5f00ff;">!</tspan><tspan class="fg7 bg#5f00ff">?</tspan><tspan style="fill: #5f5f00;">!</tspan><tspan class="fg7 bg#5f5f00">?</tspan><tspan style="fill: #5f5f5f;">!</tspan><tspan class="fg7 bg#5f5f5f">?</tspan><tspan style="fill: #5f5f87;">!</tspan><tspan class="fg7 bg#5f5f87">?</tspan><tspan style="fill: #5f5faf;">!</tspan><tspan class="fg7 bg#5f5faf">?</tspan><tspan style="fill: #5f5fd7;">!</tspan><tspan class="fg7 bg#5f5fd7">?</tspan><tspan style="fill: #5f5fff;">!</tspan><tspan class="fg7 bg#5f5fff">?</tspan><tspan style="fill: #5f8700;">!</tspan><tspan class="fg7 bg#5f8700">?</tspan><tspan style="fill: #5f875f;">!</tspan><tspan class="fg7 bg#5f875f">?</tspan><tspan style="fill: #5f8787;">!</tspan><tspan class="fg7 bg#5f8787">?</tspan><tspan style="fill: #5f87af;">!</tspan><tspan class="fg7 bg#5f87af">?</tspan><tspan style="fill: #5f87d7;">!</tspan><tspan class="fg0 bg#5f87d7">?</tspan><tspan style="fill: #5f87ff;">!</tspan><tspan class="fg0 bg#5f87ff">?</tspan><tspan style="fill: #5faf00;">!</tspan><tspan class="fg0 bg#5faf00">?</tspan><tspan style="fill: #5faf5f;">!</tspan><tspan class="fg0 bg#5faf5f">?</tspan><tspan style="fill: #5faf87;">!</tspan><tspan class="fg0 bg#5faf87">?</tspan><tspan style="fill: #5fafaf;">!</tspan><tspan class="fg0 bg#5fafaf">?</tspan><tspan style="fill: #5fafd7;">!</tspan><tspan class="fg0 bg#5fafd7">?</tspan><tspan style="fill: #5fafff;">!</tspan><tspan class="fg0 bg#5fafff">?</tspan><tspan style="fill: #5fd700;">!</tspan><tspan class="fg0 bg#5fd700">?</tspan><tspan style="fill: #5fd75f;">!</tspan><tspan class="fg0 bg#5fd75f">?</tspan><tspan style="fill: #5fd787;">!</tspan><tspan class="fg0 bg#5fd787">?</tspan><tspan style="fill: #5fd7af;">!</tspan><tspan class="fg0 bg#5fd7af">?</tspan><tspan style="fill: #5fd7d7;">!</tspan><tspan class="fg0 bg#5fd7d7">?</tspan><tspan style="fill: #5fd7ff;">!</tspan><tspan class="fg0 bg#5fd7ff">?</tspan><tspan style="fill: #5fff00;">!</tspan><tspan class="fg0 bg#5fff00">?</tspan><tspan style="fill: #5fff5f;">!</tspan><tspan class="fg0 bg#5fff5f">?</tspan><tspan style="fill: #5fff87;">!</tspan><tspan class="fg0 bg#5fff87">?</tspan><tspan style="fill: #5fffaf;">!</tspan><tspan class="fg0 bg#5fffaf">?</tspan><tspan style="fill: #5fffd7;">!</tspan><tspan class="fg0 bg#5fffd7">?</tspan><tspan style="fill: #5fffff;">!</tspan><tspan class="fg0 bg#5fffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="176" class="output-bg"> <tspan style="fill: #870000; stroke: #870000;">█</tspan> <tspan style="fill: #87005f; stroke: #87005f;">█</tspan> <tspan style="fill: #870087; stroke: #870087;">█</tspan> <tspan style="fill: #8700af; stroke: #8700af;">█</tspan> <tspan style="fill: #8700d7; stroke: #8700d7;">█</tspan> <tspan style="fill: #8700ff; stroke: #8700ff;">█</tspan> <tspan style="fill: #875f00; stroke: #875f00;">█</tspan> <tspan style="fill: #875f5f; stroke: #875f5f;">█</tspan> <tspan style="fill: #875f87; stroke: #875f87;">█</tspan> <tspan style="fill: #875faf; stroke: #875faf;">█</tspan> <tspan style="fill: #875fd7; stroke: #875fd7;">█</tspan> <tspan style="fill: #875fff; stroke: #875fff;">█</tspan> <tspan style="fill: #878700; stroke: #878700;">█</tspan> <tspan style="fill: #87875f; stroke: #87875f;">█</tspan> <tspan style="fill: #878787; stroke: #878787;">█</tspan> <tspan style="fill: #8787af; stroke: #8787af;">█</tspan> <tspan style="fill: #8787d7; stroke: #8787d7;">█</tspan> <tspan style="fill: #8787ff; stroke: #8787ff;">█</tspan> <tspan style="fill: #87af00; stroke: #87af00;">█</tspan> <tspan style="fill: #87af5f; stroke: #87af5f;">█</tspan> <tspan style="fill: #87af87; stroke: #87af87;">█</tspan> <tspan style="fill: #87afaf; stroke: #87afaf;">█</tspan> <tspan style="fill: #87afd7; stroke: #87afd7;">█</tspan> <tspan style="fill: #87afff; stroke: #87afff;">█</tspan> <tspan style="fill: #87d700; stroke: #87d700;">█</tspan> <tspan style="fill: #87d75f; stroke: #87d75f;">█</tspan> <tspan style="fill: #87d787; stroke: #87d787;">█</tspan> <tspan style="fill: #87d7af; stroke: #87d7af;">█</tspan> <tspan style="fill: #87d7d7; stroke: #87d7d7;">█</tspan> <tspan style="fill: #87d7ff; stroke: #87d7ff;">█</tspan> <tspan style="fill: #87ff00; stroke: #87ff00;">█</tspan> <tspan style="fill: #87ff5f; stroke: #87ff5f;">█</tspan> <tspan style="fill: #87ff87; stroke: #87ff87;">█</tspan> <tspan style="fill: #87ffaf; stroke: #87ffaf;">█</tspan> <tspan style="fill: #87ffd7; stroke: #87ffd7;">█</tspan> <tspan style="fill: #87ffff; stroke: #87ffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="176" class="output"><tspan style="fill: #870000;">!</tspan><tspan class="fg7 bg#870000">?</tspan><tspan style="fill: #87005f;">!</tspan><tspan class="fg7 bg#87005f">?</tspan><tspan style="fill: #870087;">!</tspan><tspan class="fg7 bg#870087">?</tspan><tspan style="fill: #8700af;">!</tspan><tspan class="fg7 bg#8700af">?</tspan><tspan style="fill: #8700d7;">!</tspan><tspan class="fg7 bg#8700d7">?</tspan><tspan style="fill: #8700ff;">!</tspan><tspan class="fg7 bg#8700ff">?</tspan><tspan style="fill: #875f00;">!</tspan><tspan class="fg7 bg#875f00">?</tspan><tspan style="fill: #875f5f;">!</tspan><tspan class="fg7 bg#875f5f">?</tspan><tspan style="fill: #875f87;">!</tspan><tspan class="fg7 bg#875f87">?</tspan><tspan style="fill: #875faf;">!</tspan><tspan class="fg7 bg#875faf">?</tspan><tspan style="fill: #875fd7;">!</tspan><tspan class="fg7 bg#875fd7">?</tspan><tspan style="fill: #875fff;">!</tspan><tspan class="fg7 bg#875fff">?</tspan><tspan style="fill: #878700;">!</tspan><tspan class="fg7 bg#878700">?</tspan><tspan style="fill: #87875f;">!</tspan><tspan class="fg7 bg#87875f">?</tspan><tspan style="fill: #878787;">!</tspan><tspan class="fg7 bg#878787">?</tspan><tspan style="fill: #8787af;">!</tspan><tspan class="fg7 bg#8787af">?</tspan><tspan style="fill: #8787d7;">!</tspan><tspan class="fg0 bg#8787d7">?</tspan><tspan style="fill: #8787ff;">!</tspan><tspan class="fg0 bg#8787ff">?</tspan><tspan style="fill: #87af00;">!</tspan><tspan class="fg0 bg#87af00">?</tspan><tspan style="fill: #87af5f;">!</tspan><tspan class="fg0 bg#87af5f">?</tspan><tspan style="fill: #87af87;">!</tspan><tspan class="fg0 bg#87af87">?</tspan><tspan style="fill: #87afaf;">!</tspan><tspan class="fg0 bg#87afaf">?</tspan><tspan style="fill: #87afd7;">!</tspan><tspan class="fg0 bg#87afd7">?</tspan><tspan style="fill: #87afff;">!</tspan><tspan class="fg0 bg#87afff">?</tspan><tspan style="fill: #87d700;">!</tspan><tspan class="fg0 bg#87d700">?</tspan><tspan style="fill: #87d75f;">!</tspan><tspan class="fg0 bg#87d75f">?</tspan><tspan style="fill: #87d787;">!</tspan><tspan class="fg0 bg#87d787">?</tspan><tspan style="fill: #87d7af;">!</tspan><tspan class="fg0 bg#87d7af">?</tspan><tspan style="fill: #87d7d7;">!</tspan><tspan class="fg0 bg#87d7d7">?</tspan><tspan style="fill: #87d7ff;">!</tspan><tspan class="fg0 bg#87d7ff">?</tspan><tspan style="fill: #87ff00;">!</tspan><tspan class="fg0 bg#87ff00">?</tspan><tspan style="fill: #87ff5f;">!</tspan><tspan class="fg0 bg#87ff5f">?</tspan><tspan style="fill: #87ff87;">!</tspan><tspan class="fg0 bg#87ff87">?</tspan><tspan style="fill: #87ffaf;">!</tspan><tspan class="fg0 bg#87ffaf">?</tspan><tspan style="fill: #87ffd7;">!</tspan><tspan class="fg0 bg#87ffd7">?</tspan><tspan style="fill: #87ffff;">!</tspan><tspan class="fg0 bg#87ffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="194" class="output-bg"> <tspan style="fill: #af0000; stroke: #af0000;">█</tspan> <tspan style="fill: #af005f; stroke: #af005f;">█</tspan> <tspan style="fill: #af0087; stroke: #af0087;">█</tspan> <tspan style="fill: #af00af; stroke: #af00af;">█</tspan> <tspan style="fill: #af00d7; stroke: #af00d7;">█</tspan> <tspan style="fill: #af00ff; stroke: #af00ff;">█</tspan> <tspan style="fill: #af5f00; stroke: #af5f00;">█</tspan> <tspan style="fill: #af5f5f; stroke: #af5f5f;">█</tspan> <tspan style="fill: #af5f87; stroke: #af5f87;">█</tspan> <tspan style="fill: #af5faf; stroke: #af5faf;">█</tspan> <tspan style="fill: #af5fd7; stroke: #af5fd7;">█</tspan> <tspan style="fill: #af5fff; stroke: #af5fff;">█</tspan> <tspan style="fill: #af8700; stroke: #af8700;">█</tspan> <tspan style="fill: #af875f; stroke: #af875f;">█</tspan> <tspan style="fill: #af8787; stroke: #af8787;">█</tspan> <tspan style="fill: #af87af; stroke: #af87af;">█</tspan> <tspan style="fill: #af87d7; stroke: #af87d7;">█</tspan> <tspan style="fill: #af87ff; stroke: #af87ff;">█</tspan> <tspan style="fill: #afaf00; stroke: #afaf00;">█</tspan> <tspan style="fill: #afaf5f; stroke: #afaf5f;">█</tspan> <tspan style="fill: #afaf87; stroke: #afaf87;">█</tspan> <tspan style="fill: #afafaf; stroke: #afafaf;">█</tspan> <tspan style="fill: #afafd7; stroke: #afafd7;">█</tspan> <tspan style="fill: #afafff; stroke: #afafff;">█</tspan> <tspan style="fill: #afd700; stroke: #afd700;">█</tspan> <tspan style="fill: #afd75f; stroke: #afd75f;">█</tspan> <tspan style="fill: #afd787; stroke: #afd787;">█</tspan> <tspan style="fill: #afd7af; stroke: #afd7af;">█</tspan> <tspan style="fill: #afd7d7; stroke: #afd7d7;">█</tspan> <tspan style="fill: #afd7ff; stroke: #afd7ff;">█</tspan> <tspan style="fill: #afff00; stroke: #afff00;">█</tspan> <tspan style="fill: #afff5f; stroke: #afff5f;">█</tspan> <tspan style="fill: #afff87; stroke: #afff87;">█</tspan> <tspan style="fill: #afffaf; stroke: #afffaf;">█</tspan> <tspan style="fill: #afffd7; stroke: #afffd7;">█</tspan> <tspan style="fill: #afffff; stroke: #afffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="194" class="output"><tspan style="fill: #af0000;">!</tspan><tspan class="fg7 bg#af0000">?</tspan><tspan style="fill: #af005f;">!</tspan><tspan class="fg7 bg#af005f">?</tspan><tspan style="fill: #af0087;">!</tspan><tspan class="fg7 bg#af0087">?</tspan><tspan style="fill: #af00af;">!</tspan><tspan class="fg7 bg#af00af">?</tspan><tspan style="fill: #af00d7;">!</tspan><tspan class="fg7 bg#af00d7">?</tspan><tspan style="fill: #af00ff;">!</tspan><tspan class="fg7 bg#af00ff">?</tspan><tspan style="fill: #af5f00;">!</tspan><tspan class="fg7 bg#af5f00">?</tspan><tspan style="fill: #af5f5f;">!</tspan><tspan class="fg7 bg#af5f5f">?</tspan><tspan style="fill: #af5f87;">!</tspan><tspan class="fg7 bg#af5f87">?</tspan><tspan style="fill: #af5faf;">!</tspan><tspan class="fg7 bg#af5faf">?</tspan><tspan style="fill: #af5fd7;">!</tspan><tspan class="fg7 bg#af5fd7">?</tspan><tspan style="fill: #af5fff;">!</tspan><tspan class="fg7 bg#af5fff">?</tspan><tspan style="fill: #af8700;">!</tspan><tspan class="fg7 bg#af8700">?</tspan><tspan style="fill: #af875f;">!</tspan><tspan class="fg7 bg#af875f">?</tspan><tspan style="fill: #af8787;">!</tspan><tspan class="fg7 bg#af8787">?</tspan><tspan style="fill: #af87af;">!</tspan><tspan class="fg7 bg#af87af">?</tspan><tspan style="fill: #af87d7;">!</tspan><tspan class="fg0 bg#af87d7">?</tspan><tspan style="fill: #af87ff;">!</tspan><tspan class="fg0 bg#af87ff">?</tspan><tspan style="fill: #afaf00;">!</tspan><tspan class="fg0 bg#afaf00">?</tspan><tspan style="fill: #afaf5f;">!</tspan><tspan class="fg0 bg#afaf5f">?</tspan><tspan style="fill: #afaf87;">!</tspan><tspan class="fg0 bg#afaf87">?</tspan><tspan style="fill: #afafaf;">!</tspan><tspan class="fg0 bg#afafaf">?</tspan><tspan style="fill: #afafd7;">!</tspan><tspan class="fg0 bg#afafd7">?</tspan><tspan style="fill: #afafff;">!</tspan><tspan class="fg0 bg#afafff">?</tspan><tspan style="fill: #afd700;">!</tspan><tspan class="fg0 bg#afd700">?</tspan><tspan style="fill: #afd75f;">!</tspan><tspan class="fg0 bg#afd75f">?</tspan><tspan style="fill: #afd787;">!</tspan><tspan class="fg0 bg#afd787">?</tspan><tspan style="fill: #afd7af;">!</tspan><tspan class="fg0 bg#afd7af">?</tspan><tspan style="fill: #afd7d7;">!</tspan><tspan class="fg0 bg#afd7d7">?</tspan><tspan style="fill: #afd7ff;">!</tspan><tspan class="fg0 bg#afd7ff">?</tspan><tspan style="fill: #afff00;">!</tspan><tspan class="fg0 bg#afff00">?</tspan><tspan style="fill: #afff5f;">!</tspan><tspan class="fg0 bg#afff5f">?</tspan><tspan style="fill: #afff87;">!</tspan><tspan class="fg0 bg#afff87">?</tspan><tspan style="fill: #afffaf;">!</tspan><tspan class="fg0 bg#afffaf">?</tspan><tspan style="fill: #afffd7;">!</tspan><tspan class="fg0 bg#afffd7">?</tspan><tspan style="fill: #afffff;">!</tspan><tspan class="fg0 bg#afffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="212" class="output-bg"> <tspan style="fill: #d70000; stroke: #d70000;">█</tspan> <tspan style="fill: #d7005f; stroke: #d7005f;">█</tspan> <tspan style="fill: #d70087; stroke: #d70087;">█</tspan> <tspan style="fill: #d700af; stroke: #d700af;">█</tspan> <tspan style="fill: #d700d7; stroke: #d700d7;">█</tspan> <tspan style="fill: #d700ff; stroke: #d700ff;">█</tspan> <tspan style="fill: #d75f00; stroke: #d75f00;">█</tspan> <tspan style="fill: #d75f5f; stroke: #d75f5f;">█</tspan> <tspan style="fill: #d75f87; stroke: #d75f87;">█</tspan> <tspan style="fill: #d75faf; stroke: #d75faf;">█</tspan> <tspan style="fill: #d75fd7; stroke: #d75fd7;">█</tspan> <tspan style="fill: #d75fff; stroke: #d75fff;">█</tspan> <tspan style="fill: #d78700; stroke: #d78700;">█</tspan> <tspan style="fill: #d7875f; stroke: #d7875f;">█</tspan> <tspan style="fill: #d78787; stroke: #d78787;">█</tspan> <tspan style="fill: #d787af; stroke: #d787af;">█</tspan> <tspan style="fill: #d787d7; stroke: #d787d7;">█</tspan> <tspan style="fill: #d787ff; stroke: #d787ff;">█</tspan> <tspan style="fill: #d7af00; stroke: #d7af00;">█</tspan> <tspan style="fill: #d7af5f; stroke: #d7af5f;">█</tspan> <tspan style="fill: #d7af87; stroke: #d7af87;">█</tspan> <tspan style="fill: #d7afaf; stroke: #d7afaf;">█</tspan> <tspan style="fill: #d7afd7; stroke: #d7afd7;">█</tspan> <tspan style="fill: #d7afff; stroke: #d7afff;">█</tspan> <tspan style="fill: #d7d700; stroke: #d7d700;">█</tspan> <tspan style="fill: #d7d75f; stroke: #d7d75f;">█</tspan> <tspan style="fill: #d7d787; stroke: #d7d787;">█</tspan> <tspan style="fill: #d7d7af; stroke: #d7d7af;">█</tspan> <tspan style="fill: #d7d7d7; stroke: #d7d7d7;">█</tspan> <tspan style="fill: #d7d7ff; stroke: #d7d7ff;">█</tspan> <tspan style="fill: #d7ff00; stroke: #d7ff00;">█</tspan> <tspan style="fill: #d7ff5f; stroke: #d7ff5f;">█</tspan> <tspan style="fill: #d7ff87; stroke: #d7ff87;">█</tspan> <tspan style="fill: #d7ffaf; stroke: #d7ffaf;">█</tspan> <tspan style="fill: #d7ffd7; stroke: #d7ffd7;">█</tspan> <tspan style="fill: #d7ffff; stroke: #d7ffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="212" class="output"><tspan style="fill: #d70000;">!</tspan><tspan class="fg7 bg#d70000">?</tspan><tspan style="fill: #d7005f;">!</tspan><tspan class="fg7 bg#d7005f">?</tspan><tspan style="fill: #d70087;">!</tspan><tspan class="fg7 bg#d70087">?</tspan><tspan style="fill: #d700af;">!</tspan><tspan class="fg7 bg#d700af">?</tspan><tspan style="fill: #d700d7;">!</tspan><tspan class="fg7 bg#d700d7">?</tspan><tspan style="fill: #d700ff;">!</tspan><tspan class="fg7 bg#d700ff">?</tspan><tspan style="fill: #d75f00;">!</tspan><tspan class="fg7 bg#d75f00">?</tspan><tspan style="fill: #d75f5f;">!</tspan><tspan class="fg7 bg#d75f5f">?</tspan><tspan style="fill: #d75f87;">!</tspan><tspan class="fg7 bg#d75f87">?</tspan><tspan style="fill: #d75faf;">!</tspan><tspan class="fg7 bg#d75faf">?</tspan><tspan style="fill: #d75fd7;">!</tspan><tspan class="fg7 bg#d75fd7">?</tspan><tspan style="fill: #d75fff;">!</tspan><tspan class="fg7 bg#d75fff">?</tspan><tspan style="fill: #d78700;">!</tspan><tspan class="fg7 bg#d78700">?</tspan><tspan style="fill: #d7875f;">!</tspan><tspan class="fg7 bg#d7875f">?</tspan><tspan style="fill: #d78787;">!</tspan><tspan class="fg7 bg#d78787">?</tspan><tspan style="fill: #d787af;">!</tspan><tspan class="fg7 bg#d787af">?</tspan><tspan style="fill: #d787d7;">!</tspan><tspan class="fg0 bg#d787d7">?</tspan><tspan style="fill: #d787ff;">!</tspan><tspan class="fg0 bg#d787ff">?</tspan><tspan style="fill: #d7af00;">!</tspan><tspan class="fg0 bg#d7af00">?</tspan><tspan style="fill: #d7af5f;">!</tspan><tspan class="fg0 bg#d7af5f">?</tspan><tspan style="fill: #d7af87;">!</tspan><tspan class="fg0 bg#d7af87">?</tspan><tspan style="fill: #d7afaf;">!</tspan><tspan class="fg0 bg#d7afaf">?</tspan><tspan style="fill: #d7afd7;">!</tspan><tspan class="fg0 bg#d7afd7">?</tspan><tspan style="fill: #d7afff;">!</tspan><tspan class="fg0 bg#d7afff">?</tspan><tspan style="fill: #d7d700;">!</tspan><tspan class="fg0 bg#d7d700">?</tspan><tspan style="fill: #d7d75f;">!</tspan><tspan class="fg0 bg#d7d75f">?</tspan><tspan style="fill: #d7d787;">!</tspan><tspan class="fg0 bg#d7d787">?</tspan><tspan style="fill: #d7d7af;">!</tspan><tspan class="fg0 bg#d7d7af">?</tspan><tspan style="fill: #d7d7d7;">!</tspan><tspan class="fg0 bg#d7d7d7">?</tspan><tspan style="fill: #d7d7ff;">!</tspan><tspan class="fg0 bg#d7d7ff">?</tspan><tspan style="fill: #d7ff00;">!</tspan><tspan class="fg0 bg#d7ff00">?</tspan><tspan style="fill: #d7ff5f;">!</tspan><tspan class="fg0 bg#d7ff5f">?</tspan><tspan style="fill: #d7ff87;">!</tspan><tspan class="fg0 bg#d7ff87">?</tspan><tspan style="fill: #d7ffaf;">!</tspan><tspan class="fg0 bg#d7ffaf">?</tspan><tspan style="fill: #d7ffd7;">!</tspan><tspan class="fg0 bg#d7ffd7">?</tspan><tspan style="fill: #d7ffff;">!</tspan><tspan class="fg0 bg#d7ffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="230" class="output-bg"> <tspan style="fill: #ff0000; stroke: #ff0000;">█</tspan> <tspan style="fill: #ff005f; stroke: #ff005f;">█</tspan> <tspan style="fill: #ff0087; stroke: #ff0087;">█</tspan> <tspan style="fill: #ff00af; stroke: #ff00af;">█</tspan> <tspan style="fill: #ff00d7; stroke: #ff00d7;">█</tspan> <tspan style="fill: #ff00ff; stroke: #ff00ff;">█</tspan> <tspan style="fill: #ff5f00; stroke: #ff5f00;">█</tspan> <tspan style="fill: #ff5f5f; stroke: #ff5f5f;">█</tspan> <tspan style="fill: #ff5f87; stroke: #ff5f87;">█</tspan> <tspan style="fill: #ff5faf; stroke: #ff5faf;">█</tspan> <tspan style="fill: #ff5fd7; stroke: #ff5fd7;">█</tspan> <tspan style="fill: #ff5fff; stroke: #ff5fff;">█</tspan> <tspan style="fill: #ff8700; stroke: #ff8700;">█</tspan> <tspan style="fill: #ff875f; stroke: #ff875f;">█</tspan> <tspan style="fill: #ff8787; stroke: #ff8787;">█</tspan> <tspan style="fill: #ff87af; stroke: #ff87af;">█</tspan> <tspan style="fill: #ff87d7; stroke: #ff87d7;">█</tspan> <tspan style="fill: #ff87ff; stroke: #ff87ff;">█</tspan> <tspan style="fill: #ffaf00; stroke: #ffaf00;">█</tspan> <tspan style="fill: #ffaf5f; stroke: #ffaf5f;">█</tspan> <tspan style="fill: #ffaf87; stroke: #ffaf87;">█</tspan> <tspan style="fill: #ffafaf; stroke: #ffafaf;">█</tspan> <tspan style="fill: #ffafd7; stroke: #ffafd7;">█</tspan> <tspan style="fill: #ffafff; stroke: #ffafff;">█</tspan> <tspan style="fill: #ffd700; stroke: #ffd700;">█</tspan> <tspan style="fill: #ffd75f; stroke: #ffd75f;">█</tspan> <tspan style="fill: #ffd787; stroke: #ffd787;">█</tspan> <tspan style="fill: #ffd7af; stroke: #ffd7af;">█</tspan> <tspan style="fill: #ffd7d7; stroke: #ffd7d7;">█</tspan> <tspan style="fill: #ffd7ff; stroke: #ffd7ff;">█</tspan> <tspan style="fill: #ffff00; stroke: #ffff00;">█</tspan> <tspan style="fill: #ffff5f; stroke: #ffff5f;">█</tspan> <tspan style="fill: #ffff87; stroke: #ffff87;">█</tspan> <tspan style="fill: #ffffaf; stroke: #ffffaf;">█</tspan> <tspan style="fill: #ffffd7; stroke: #ffffd7;">█</tspan> <tspan style="fill: #ffffff; stroke: #ffffff;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="230" class="output"><tspan style="fill: #ff0000;">!</tspan><tspan class="fg7 bg#ff0000">?</tspan><tspan style="fill: #ff005f;">!</tspan><tspan class="fg7 bg#ff005f">?</tspan><tspan style="fill: #ff0087;">!</tspan><tspan class="fg7 bg#ff0087">?</tspan><tspan style="fill: #ff00af;">!</tspan><tspan class="fg7 bg#ff00af">?</tspan><tspan style="fill: #ff00d7;">!</tspan><tspan class="fg7 bg#ff00d7">?</tspan><tspan style="fill: #ff00ff;">!</tspan><tspan class="fg7 bg#ff00ff">?</tspan><tspan style="fill: #ff5f00;">!</tspan><tspan class="fg7 bg#ff5f00">?</tspan><tspan style="fill: #ff5f5f;">!</tspan><tspan class="fg7 bg#ff5f5f">?</tspan><tspan style="fill: #ff5f87;">!</tspan><tspan class="fg7 bg#ff5f87">?</tspan><tspan style="fill: #ff5faf;">!</tspan><tspan class="fg7 bg#ff5faf">?</tspan><tspan style="fill: #ff5fd7;">!</tspan><tspan class="fg7 bg#ff5fd7">?</tspan><tspan style="fill: #ff5fff;">!</tspan><tspan class="fg7 bg#ff5fff">?</tspan><tspan style="fill: #ff8700;">!</tspan><tspan class="fg7 bg#ff8700">?</tspan><tspan style="fill: #ff875f;">!</tspan><tspan class="fg7 bg#ff875f">?</tspan><tspan style="fill: #ff8787;">!</tspan><tspan class="fg7 bg#ff8787">?</tspan><tspan style="fill: #ff87af;">!</tspan><tspan class="fg7 bg#ff87af">?</tspan><tspan style="fill: #ff87d7;">!</tspan><tspan class="fg0 bg#ff87d7">?</tspan><tspan style="fill: #ff87ff;">!</tspan><tspan class="fg0 bg#ff87ff">?</tspan><tspan style="fill: #ffaf00;">!</tspan><tspan class="fg0 bg#ffaf00">?</tspan><tspan style="fill: #ffaf5f;">!</tspan><tspan class="fg0 bg#ffaf5f">?</tspan><tspan style="fill: #ffaf87;">!</tspan><tspan class="fg0 bg#ffaf87">?</tspan><tspan style="fill: #ffafaf;">!</tspan><tspan class="fg0 bg#ffafaf">?</tspan><tspan style="fill: #ffafd7;">!</tspan><tspan class="fg0 bg#ffafd7">?</tspan><tspan style="fill: #ffafff;">!</tspan><tspan class="fg0 bg#ffafff">?</tspan><tspan style="fill: #ffd700;">!</tspan><tspan class="fg0 bg#ffd700">?</tspan><tspan style="fill: #ffd75f;">!</tspan><tspan class="fg0 bg#ffd75f">?</tspan><tspan style="fill: #ffd787;">!</tspan><tspan class="fg0 bg#ffd787">?</tspan><tspan style="fill: #ffd7af;">!</tspan><tspan class="fg0 bg#ffd7af">?</tspan><tspan style="fill: #ffd7d7;">!</tspan><tspan class="fg0 bg#ffd7d7">?</tspan><tspan style="fill: #ffd7ff;">!</tspan><tspan class="fg0 bg#ffd7ff">?</tspan><tspan style="fill: #ffff00;">!</tspan><tspan class="fg0 bg#ffff00">?</tspan><tspan style="fill: #ffff5f;">!</tspan><tspan class="fg0 bg#ffff5f">?</tspan><tspan style="fill: #ffff87;">!</tspan><tspan class="fg0 bg#ffff87">?</tspan><tspan style="fill: #ffffaf;">!</tspan><tspan class="fg0 bg#ffffaf">?</tspan><tspan style="fill: #ffffd7;">!</tspan><tspan class="fg0 bg#ffffd7">?</tspan><tspan style="fill: #ffffff;">!</tspan><tspan class="fg0 bg#ffffff">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="248" class="output">ANSI grayscale palette:
+</tspan><tspan xml:space="preserve" x="42" y="266" class="output-bg"> <tspan style="fill: #080808; stroke: #080808;">█</tspan> <tspan style="fill: #121212; stroke: #121212;">█</tspan> <tspan style="fill: #1c1c1c; stroke: #1c1c1c;">█</tspan> <tspan style="fill: #262626; stroke: #262626;">█</tspan> <tspan style="fill: #303030; stroke: #303030;">█</tspan> <tspan style="fill: #3a3a3a; stroke: #3a3a3a;">█</tspan> <tspan style="fill: #444444; stroke: #444444;">█</tspan> <tspan style="fill: #4e4e4e; stroke: #4e4e4e;">█</tspan> <tspan style="fill: #585858; stroke: #585858;">█</tspan> <tspan style="fill: #626262; stroke: #626262;">█</tspan> <tspan style="fill: #6c6c6c; stroke: #6c6c6c;">█</tspan> <tspan style="fill: #767676; stroke: #767676;">█</tspan> <tspan style="fill: #808080; stroke: #808080;">█</tspan> <tspan style="fill: #8a8a8a; stroke: #8a8a8a;">█</tspan> <tspan style="fill: #949494; stroke: #949494;">█</tspan> <tspan style="fill: #9e9e9e; stroke: #9e9e9e;">█</tspan> <tspan style="fill: #a8a8a8; stroke: #a8a8a8;">█</tspan> <tspan style="fill: #b2b2b2; stroke: #b2b2b2;">█</tspan> <tspan style="fill: #bcbcbc; stroke: #bcbcbc;">█</tspan> <tspan style="fill: #c6c6c6; stroke: #c6c6c6;">█</tspan> <tspan style="fill: #d0d0d0; stroke: #d0d0d0;">█</tspan> <tspan style="fill: #dadada; stroke: #dadada;">█</tspan> <tspan style="fill: #e4e4e4; stroke: #e4e4e4;">█</tspan> <tspan style="fill: #eeeeee; stroke: #eeeeee;">█</tspan></tspan><tspan xml:space="preserve" x="42" y="266" class="output"><tspan style="fill: #080808;">!</tspan><tspan class="bold fg7 bg#080808">?</tspan><tspan style="fill: #121212;">!</tspan><tspan class="bold fg7 bg#121212">?</tspan><tspan style="fill: #1c1c1c;">!</tspan><tspan class="bold fg7 bg#1c1c1c">?</tspan><tspan style="fill: #262626;">!</tspan><tspan class="bold fg7 bg#262626">?</tspan><tspan style="fill: #303030;">!</tspan><tspan class="bold fg7 bg#303030">?</tspan><tspan style="fill: #3a3a3a;">!</tspan><tspan class="bold fg7 bg#3a3a3a">?</tspan><tspan style="fill: #444444;">!</tspan><tspan class="bold fg7 bg#444444">?</tspan><tspan style="fill: #4e4e4e;">!</tspan><tspan class="bold fg7 bg#4e4e4e">?</tspan><tspan style="fill: #585858;">!</tspan><tspan class="bold fg7 bg#585858">?</tspan><tspan style="fill: #626262;">!</tspan><tspan class="bold fg7 bg#626262">?</tspan><tspan style="fill: #6c6c6c;">!</tspan><tspan class="bold fg7 bg#6c6c6c">?</tspan><tspan style="fill: #767676;">!</tspan><tspan class="bold fg7 bg#767676">?</tspan><tspan style="fill: #808080;">!</tspan><tspan class="bold fg0 bg#808080">?</tspan><tspan style="fill: #8a8a8a;">!</tspan><tspan class="bold fg0 bg#8a8a8a">?</tspan><tspan style="fill: #949494;">!</tspan><tspan class="bold fg0 bg#949494">?</tspan><tspan style="fill: #9e9e9e;">!</tspan><tspan class="bold fg0 bg#9e9e9e">?</tspan><tspan style="fill: #a8a8a8;">!</tspan><tspan class="bold fg0 bg#a8a8a8">?</tspan><tspan style="fill: #b2b2b2;">!</tspan><tspan class="bold fg0 bg#b2b2b2">?</tspan><tspan style="fill: #bcbcbc;">!</tspan><tspan class="bold fg0 bg#bcbcbc">?</tspan><tspan style="fill: #c6c6c6;">!</tspan><tspan class="bold fg0 bg#c6c6c6">?</tspan><tspan style="fill: #d0d0d0;">!</tspan><tspan class="bold fg0 bg#d0d0d0">?</tspan><tspan style="fill: #dadada;">!</tspan><tspan class="bold fg0 bg#dadada">?</tspan><tspan style="fill: #e4e4e4;">!</tspan><tspan class="bold fg0 bg#e4e4e4">?</tspan><tspan style="fill: #eeeeee;">!</tspan><tspan class="bold fg0 bg#eeeeee">?</tspan>
+</tspan><tspan xml:space="preserve" x="42" y="284" class="output">24-bit colors:
+</tspan><tspan xml:space="preserve" x="42" y="302" class="output"><tspan style="fill: #ffbbdd;">pink</tspan> <tspan style="fill: #ffaa44;">orange</tspan> <tspan style="fill: #9f4010;">brown</tspan> <tspan style="fill: #10889f;">teal</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="326" class="output">Base colors:
+</tspan><tspan xml:space="preserve" x="42" y="344" class="output"><tspan class="underline fg0">black</tspan> <tspan class="fg4">blue</tspan> <tspan class="underline fg2">green</tspan> <tspan class="fg1">red</tspan> <tspan class="underline fg6">cyan</tspan> <tspan class="fg5">magenta</tspan> <tspan class="underline fg3">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="362" class="output"><tspan class="fg8">black</tspan> <tspan class="underline fg12">blue</tspan> <tspan class="fg10">green</tspan> <tspan class="underline fg9">red</tspan> <tspan class="fg14">cyan</tspan> <tspan class="underline fg13">magenta</tspan> <tspan class="fg11">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="380" class="output">Base colors (bg):
+</tspan><tspan xml:space="preserve" x="42" y="398" class="output-bg"><tspan class="fg0">█████</tspan> <tspan class="fg4">████</tspan> <tspan class="fg2">█████</tspan> <tspan class="fg1">███</tspan> <tspan class="fg6">████</tspan> <tspan class="fg5">███████</tspan> <tspan class="fg3">██████</tspan></tspan><tspan xml:space="preserve" x="42" y="398" class="output"><tspan class="fg7 bg0">black</tspan> <tspan class="fg7 bg4">blue</tspan> <tspan class="fg7 bg2">green</tspan> <tspan class="fg7 bg1">red</tspan> <tspan class="fg7 bg6">cyan</tspan> <tspan class="fg7 bg5">magenta</tspan> <tspan class="fg7 bg3">yellow</tspan> 
+</tspan><tspan xml:space="preserve" x="42" y="416" class="output-bg"><tspan class="fg8">█████</tspan> <tspan class="fg12">████</tspan> <tspan class="fg10">█████</tspan> <tspan class="fg9">███</tspan> <tspan class="fg14">████</tspan> <tspan class="fg13">███████</tspan> <tspan class="fg11">██████</tspan></tspan><tspan xml:space="preserve" x="42" y="416" class="output"><tspan class="fg15 bg8">black</tspan> <tspan class="fg15 bg12">blue</tspan> <tspan class="fg15 bg10">green</tspan> <tspan class="fg15 bg9">red</tspan> <tspan class="fg15 bg14">cyan</tspan> <tspan class="fg15 bg13">magenta</tspan> <tspan class="fg15 bg11">yellow</tspan> 
+</tspan></text>
+    </svg>
+  <rect class="scrollbar" x="713" y="10" width="5" height="40">
+    <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;0 151;0 302" dur="8.0s" repeatCount="indefinite" calcMode="discrete" />
+  </rect>
+</svg>
diff --git a/examples/no-inputs-numbers.svg b/examples/no-inputs-numbers.svg
new file mode 100644
index 0000000..3fdada8
--- /dev/null
+++ b/examples/no-inputs-numbers.svg
@@ -0,0 +1,114 @@
+<!-- Created with term-transcript v0.3.0-beta.1 (https://github.com/slowli/term-transcript) -->
+<svg viewBox="0 0 720 362" width="720" height="362" xmlns="http://www.w3.org/2000/svg">
+  <switch>
+    <g requiredExtensions="http://www.w3.org/1999/xhtml">
+      <style>
+        .container {
+          padding: 0 10px;
+          color: #e5e5e5;
+          line-height: 18px;
+        }
+        .container pre {
+          padding: 0;
+          margin: 0;
+          font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+          line-height: inherit;
+        }
+        .input {
+          display: flex;
+          margin: 0 -10px 6px;
+          color: #e5e5e5;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 2px 10px;
+        }
+        .input-hidden { display: none; }
+        .input > pre { flex-grow: 1; }
+        .output { display: flex; margin-bottom: 6px; }
+        .output > pre { flex-grow: 1; }
+        pre.line-numbers {
+          flex-grow: 0;
+          width: 1.5rem;
+          text-align: right;
+          padding-right: .5rem;
+          opacity: 0.35;
+          user-select: none;
+        }
+
+        .scrollbar { fill: #fff; fill-opacity: 0.35; }
+        .bold,.prompt { font-weight: bold; }
+        .italic { font-style: italic; }
+        .underline { text-decoration: underline; }
+        .dimmed { opacity: 0.7; }
+        .hard-br {
+          position: relative;
+          margin-left: 5px;
+        }
+        .hard-br:before {
+          content: '↓';
+          font-size: 16px;
+          height: 16px;
+          position: absolute;
+          bottom: 0;
+          transform: rotate(45deg);
+          opacity: 0.8;
+        }
+        .fg0 { color: #000000; } .bg0 { background: #000000; }
+        .fg1 { color: #cd0000; } .bg1 { background: #cd0000; }
+        .fg2 { color: #00cd00; } .bg2 { background: #00cd00; }
+        .fg3 { color: #cdcd00; } .bg3 { background: #cdcd00; }
+        .fg4 { color: #0000ee; } .bg4 { background: #0000ee; }
+        .fg5 { color: #cd00cd; } .bg5 { background: #cd00cd; }
+        .fg6 { color: #00cdcd; } .bg6 { background: #00cdcd; }
+        .fg7 { color: #e5e5e5; } .bg7 { background: #e5e5e5; }
+        .fg8 { color: #7f7f7f; } .bg8 { background: #7f7f7f; }
+        .fg9 { color: #ff0000; } .bg9 { background: #ff0000; }
+        .fg10 { color: #00ff00; } .bg10 { background: #00ff00; }
+        .fg11 { color: #ffff00; } .bg11 { background: #ffff00; }
+        .fg12 { color: #5c5cff; } .bg12 { background: #5c5cff; }
+        .fg13 { color: #ff00ff; } .bg13 { background: #ff00ff; }
+        .fg14 { color: #00ffff; } .bg14 { background: #00ffff; }
+        .fg15 { color: #ffffff; } .bg15 { background: #ffffff; }
+      </style>
+      <rect width="100%" height="100%" y="0" rx="4.5" style="fill: #000000;" />
+      <svg x="0" y="10" width="720" height="342" viewBox="0 0 720 342">
+        <animate attributeName="viewBox" values="0 0 720 342;0 52 720 342;0 104 720 342" dur="8.0s" repeatCount="indefinite" calcMode="discrete" />
+        <foreignObject width="720" height="420">
+          <div xmlns="http://www.w3.org/1999/xhtml" class="container">
+            <div class="input input-hidden" data-exit-status="0"><pre><span class="prompt">$</span> rainbow</pre></div>
+            <div class="output"><pre class="line-numbers">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17</pre><pre>Base colors:
+<span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span> 
+<span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span> 
+Base colors (bg):
+<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span> 
+<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> 
+ANSI color palette:
+<span style="color: #000000;">!</span><span class="fg7" style="background: #000000;">?</span><span style="color: #00005f;">!</span><span class="fg7" style="background: #00005f;">?</span><span style="color: #000087;">!</span><span class="fg7" style="background: #000087;">?</span><span style="color: #0000af;">!</span><span class="fg7" style="background: #0000af;">?</span><span style="color: #0000d7;">!</span><span class="fg7" style="background: #0000d7;">?</span><span style="color: #0000ff;">!</span><span class="fg7" style="background: #0000ff;">?</span><span style="color: #005f00;">!</span><span class="fg7" style="background: #005f00;">?</span><span style="color: #005f5f;">!</span><span class="fg7" style="background: #005f5f;">?</span><span style="color: #005f87;">!</span><span class="fg7" style="background: #005f87;">?</span><span style="color: #005faf;">!</span><span class="fg7" style="background: #005faf;">?</span><span style="color: #005fd7;">!</span><span class="fg7" style="background: #005fd7;">?</span><span style="color: #005fff;">!</span><span class="fg7" style="background: #005fff;">?</span><span style="color: #008700;">!</span><span class="fg7" style="background: #008700;">?</span><span style="color: #00875f;">!</span><span class="fg7" style="background: #00875f;">?</span><span style="color: #008787;">!</span><span class="fg7" style="background: #008787;">?</span><span style="color: #0087af;">!</span><span class="fg7" style="background: #0087af;">?</span><span style="color: #0087d7;">!</span><span class="fg0" style="background: #0087d7;">?</span><span style="color: #0087ff;">!</span><span class="fg0" style="background: #0087ff;">?</span><span style="color: #00af00;">!</span><span class="fg0" style="background: #00af00;">?</span><span style="color: #00af5f;">!</span><span class="fg0" style="background: #00af5f;">?</span><span style="color: #00af87;">!</span><span class="fg0" style="background: #00af87;">?</span><span style="color: #00afaf;">!</span><span class="fg0" style="background: #00afaf;">?</span><span style="color: #00afd7;">!</span><span class="fg0" style="background: #00afd7;">?</span><span style="color: #00afff;">!</span><span class="fg0" style="background: #00afff;">?</span><span style="color: #00d700;">!</span><span class="fg0" style="background: #00d700;">?</span><span style="color: #00d75f;">!</span><span class="fg0" style="background: #00d75f;">?</span><span style="color: #00d787;">!</span><span class="fg0" style="background: #00d787;">?</span><span style="color: #00d7af;">!</span><span class="fg0" style="background: #00d7af;">?</span><span style="color: #00d7d7;">!</span><span class="fg0" style="background: #00d7d7;">?</span><span style="color: #00d7ff;">!</span><span class="fg0" style="background: #00d7ff;">?</span><span style="color: #00ff00;">!</span><span class="fg0" style="background: #00ff00;">?</span><span style="color: #00ff5f;">!</span><span class="fg0" style="background: #00ff5f;">?</span><span style="color: #00ff87;">!</span><span class="fg0" style="background: #00ff87;">?</span><span style="color: #00ffaf;">!</span><span class="fg0" style="background: #00ffaf;">?</span><span style="color: #00ffd7;">!</span><span class="fg0" style="background: #00ffd7;">?</span><span style="color: #00ffff;">!</span><span class="fg0" style="background: #00ffff;">?</span>
+<span style="color: #5f0000;">!</span><span class="fg7" style="background: #5f0000;">?</span><span style="color: #5f005f;">!</span><span class="fg7" style="background: #5f005f;">?</span><span style="color: #5f0087;">!</span><span class="fg7" style="background: #5f0087;">?</span><span style="color: #5f00af;">!</span><span class="fg7" style="background: #5f00af;">?</span><span style="color: #5f00d7;">!</span><span class="fg7" style="background: #5f00d7;">?</span><span style="color: #5f00ff;">!</span><span class="fg7" style="background: #5f00ff;">?</span><span style="color: #5f5f00;">!</span><span class="fg7" style="background: #5f5f00;">?</span><span style="color: #5f5f5f;">!</span><span class="fg7" style="background: #5f5f5f;">?</span><span style="color: #5f5f87;">!</span><span class="fg7" style="background: #5f5f87;">?</span><span style="color: #5f5faf;">!</span><span class="fg7" style="background: #5f5faf;">?</span><span style="color: #5f5fd7;">!</span><span class="fg7" style="background: #5f5fd7;">?</span><span style="color: #5f5fff;">!</span><span class="fg7" style="background: #5f5fff;">?</span><span style="color: #5f8700;">!</span><span class="fg7" style="background: #5f8700;">?</span><span style="color: #5f875f;">!</span><span class="fg7" style="background: #5f875f;">?</span><span style="color: #5f8787;">!</span><span class="fg7" style="background: #5f8787;">?</span><span style="color: #5f87af;">!</span><span class="fg7" style="background: #5f87af;">?</span><span style="color: #5f87d7;">!</span><span class="fg0" style="background: #5f87d7;">?</span><span style="color: #5f87ff;">!</span><span class="fg0" style="background: #5f87ff;">?</span><span style="color: #5faf00;">!</span><span class="fg0" style="background: #5faf00;">?</span><span style="color: #5faf5f;">!</span><span class="fg0" style="background: #5faf5f;">?</span><span style="color: #5faf87;">!</span><span class="fg0" style="background: #5faf87;">?</span><span style="color: #5fafaf;">!</span><span class="fg0" style="background: #5fafaf;">?</span><span style="color: #5fafd7;">!</span><span class="fg0" style="background: #5fafd7;">?</span><span style="color: #5fafff;">!</span><span class="fg0" style="background: #5fafff;">?</span><span style="color: #5fd700;">!</span><span class="fg0" style="background: #5fd700;">?</span><span style="color: #5fd75f;">!</span><span class="fg0" style="background: #5fd75f;">?</span><span style="color: #5fd787;">!</span><span class="fg0" style="background: #5fd787;">?</span><span style="color: #5fd7af;">!</span><span class="fg0" style="background: #5fd7af;">?</span><span style="color: #5fd7d7;">!</span><span class="fg0" style="background: #5fd7d7;">?</span><span style="color: #5fd7ff;">!</span><span class="fg0" style="background: #5fd7ff;">?</span><span style="color: #5fff00;">!</span><span class="fg0" style="background: #5fff00;">?</span><span style="color: #5fff5f;">!</span><span class="fg0" style="background: #5fff5f;">?</span><span style="color: #5fff87;">!</span><span class="fg0" style="background: #5fff87;">?</span><span style="color: #5fffaf;">!</span><span class="fg0" style="background: #5fffaf;">?</span><span style="color: #5fffd7;">!</span><span class="fg0" style="background: #5fffd7;">?</span><span style="color: #5fffff;">!</span><span class="fg0" style="background: #5fffff;">?</span>
+<span style="color: #870000;">!</span><span class="fg7" style="background: #870000;">?</span><span style="color: #87005f;">!</span><span class="fg7" style="background: #87005f;">?</span><span style="color: #870087;">!</span><span class="fg7" style="background: #870087;">?</span><span style="color: #8700af;">!</span><span class="fg7" style="background: #8700af;">?</span><span style="color: #8700d7;">!</span><span class="fg7" style="background: #8700d7;">?</span><span style="color: #8700ff;">!</span><span class="fg7" style="background: #8700ff;">?</span><span style="color: #875f00;">!</span><span class="fg7" style="background: #875f00;">?</span><span style="color: #875f5f;">!</span><span class="fg7" style="background: #875f5f;">?</span><span style="color: #875f87;">!</span><span class="fg7" style="background: #875f87;">?</span><span style="color: #875faf;">!</span><span class="fg7" style="background: #875faf;">?</span><span style="color: #875fd7;">!</span><span class="fg7" style="background: #875fd7;">?</span><span style="color: #875fff;">!</span><span class="fg7" style="background: #875fff;">?</span><span style="color: #878700;">!</span><span class="fg7" style="background: #878700;">?</span><span style="color: #87875f;">!</span><span class="fg7" style="background: #87875f;">?</span><span style="color: #878787;">!</span><span class="fg7" style="background: #878787;">?</span><span style="color: #8787af;">!</span><span class="fg7" style="background: #8787af;">?</span><span style="color: #8787d7;">!</span><span class="fg0" style="background: #8787d7;">?</span><span style="color: #8787ff;">!</span><span class="fg0" style="background: #8787ff;">?</span><span style="color: #87af00;">!</span><span class="fg0" style="background: #87af00;">?</span><span style="color: #87af5f;">!</span><span class="fg0" style="background: #87af5f;">?</span><span style="color: #87af87;">!</span><span class="fg0" style="background: #87af87;">?</span><span style="color: #87afaf;">!</span><span class="fg0" style="background: #87afaf;">?</span><span style="color: #87afd7;">!</span><span class="fg0" style="background: #87afd7;">?</span><span style="color: #87afff;">!</span><span class="fg0" style="background: #87afff;">?</span><span style="color: #87d700;">!</span><span class="fg0" style="background: #87d700;">?</span><span style="color: #87d75f;">!</span><span class="fg0" style="background: #87d75f;">?</span><span style="color: #87d787;">!</span><span class="fg0" style="background: #87d787;">?</span><span style="color: #87d7af;">!</span><span class="fg0" style="background: #87d7af;">?</span><span style="color: #87d7d7;">!</span><span class="fg0" style="background: #87d7d7;">?</span><span style="color: #87d7ff;">!</span><span class="fg0" style="background: #87d7ff;">?</span><span style="color: #87ff00;">!</span><span class="fg0" style="background: #87ff00;">?</span><span style="color: #87ff5f;">!</span><span class="fg0" style="background: #87ff5f;">?</span><span style="color: #87ff87;">!</span><span class="fg0" style="background: #87ff87;">?</span><span style="color: #87ffaf;">!</span><span class="fg0" style="background: #87ffaf;">?</span><span style="color: #87ffd7;">!</span><span class="fg0" style="background: #87ffd7;">?</span><span style="color: #87ffff;">!</span><span class="fg0" style="background: #87ffff;">?</span>
+<span style="color: #af0000;">!</span><span class="fg7" style="background: #af0000;">?</span><span style="color: #af005f;">!</span><span class="fg7" style="background: #af005f;">?</span><span style="color: #af0087;">!</span><span class="fg7" style="background: #af0087;">?</span><span style="color: #af00af;">!</span><span class="fg7" style="background: #af00af;">?</span><span style="color: #af00d7;">!</span><span class="fg7" style="background: #af00d7;">?</span><span style="color: #af00ff;">!</span><span class="fg7" style="background: #af00ff;">?</span><span style="color: #af5f00;">!</span><span class="fg7" style="background: #af5f00;">?</span><span style="color: #af5f5f;">!</span><span class="fg7" style="background: #af5f5f;">?</span><span style="color: #af5f87;">!</span><span class="fg7" style="background: #af5f87;">?</span><span style="color: #af5faf;">!</span><span class="fg7" style="background: #af5faf;">?</span><span style="color: #af5fd7;">!</span><span class="fg7" style="background: #af5fd7;">?</span><span style="color: #af5fff;">!</span><span class="fg7" style="background: #af5fff;">?</span><span style="color: #af8700;">!</span><span class="fg7" style="background: #af8700;">?</span><span style="color: #af875f;">!</span><span class="fg7" style="background: #af875f;">?</span><span style="color: #af8787;">!</span><span class="fg7" style="background: #af8787;">?</span><span style="color: #af87af;">!</span><span class="fg7" style="background: #af87af;">?</span><span style="color: #af87d7;">!</span><span class="fg0" style="background: #af87d7;">?</span><span style="color: #af87ff;">!</span><span class="fg0" style="background: #af87ff;">?</span><span style="color: #afaf00;">!</span><span class="fg0" style="background: #afaf00;">?</span><span style="color: #afaf5f;">!</span><span class="fg0" style="background: #afaf5f;">?</span><span style="color: #afaf87;">!</span><span class="fg0" style="background: #afaf87;">?</span><span style="color: #afafaf;">!</span><span class="fg0" style="background: #afafaf;">?</span><span style="color: #afafd7;">!</span><span class="fg0" style="background: #afafd7;">?</span><span style="color: #afafff;">!</span><span class="fg0" style="background: #afafff;">?</span><span style="color: #afd700;">!</span><span class="fg0" style="background: #afd700;">?</span><span style="color: #afd75f;">!</span><span class="fg0" style="background: #afd75f;">?</span><span style="color: #afd787;">!</span><span class="fg0" style="background: #afd787;">?</span><span style="color: #afd7af;">!</span><span class="fg0" style="background: #afd7af;">?</span><span style="color: #afd7d7;">!</span><span class="fg0" style="background: #afd7d7;">?</span><span style="color: #afd7ff;">!</span><span class="fg0" style="background: #afd7ff;">?</span><span style="color: #afff00;">!</span><span class="fg0" style="background: #afff00;">?</span><span style="color: #afff5f;">!</span><span class="fg0" style="background: #afff5f;">?</span><span style="color: #afff87;">!</span><span class="fg0" style="background: #afff87;">?</span><span style="color: #afffaf;">!</span><span class="fg0" style="background: #afffaf;">?</span><span style="color: #afffd7;">!</span><span class="fg0" style="background: #afffd7;">?</span><span style="color: #afffff;">!</span><span class="fg0" style="background: #afffff;">?</span>
+<span style="color: #d70000;">!</span><span class="fg7" style="background: #d70000;">?</span><span style="color: #d7005f;">!</span><span class="fg7" style="background: #d7005f;">?</span><span style="color: #d70087;">!</span><span class="fg7" style="background: #d70087;">?</span><span style="color: #d700af;">!</span><span class="fg7" style="background: #d700af;">?</span><span style="color: #d700d7;">!</span><span class="fg7" style="background: #d700d7;">?</span><span style="color: #d700ff;">!</span><span class="fg7" style="background: #d700ff;">?</span><span style="color: #d75f00;">!</span><span class="fg7" style="background: #d75f00;">?</span><span style="color: #d75f5f;">!</span><span class="fg7" style="background: #d75f5f;">?</span><span style="color: #d75f87;">!</span><span class="fg7" style="background: #d75f87;">?</span><span style="color: #d75faf;">!</span><span class="fg7" style="background: #d75faf;">?</span><span style="color: #d75fd7;">!</span><span class="fg7" style="background: #d75fd7;">?</span><span style="color: #d75fff;">!</span><span class="fg7" style="background: #d75fff;">?</span><span style="color: #d78700;">!</span><span class="fg7" style="background: #d78700;">?</span><span style="color: #d7875f;">!</span><span class="fg7" style="background: #d7875f;">?</span><span style="color: #d78787;">!</span><span class="fg7" style="background: #d78787;">?</span><span style="color: #d787af;">!</span><span class="fg7" style="background: #d787af;">?</span><span style="color: #d787d7;">!</span><span class="fg0" style="background: #d787d7;">?</span><span style="color: #d787ff;">!</span><span class="fg0" style="background: #d787ff;">?</span><span style="color: #d7af00;">!</span><span class="fg0" style="background: #d7af00;">?</span><span style="color: #d7af5f;">!</span><span class="fg0" style="background: #d7af5f;">?</span><span style="color: #d7af87;">!</span><span class="fg0" style="background: #d7af87;">?</span><span style="color: #d7afaf;">!</span><span class="fg0" style="background: #d7afaf;">?</span><span style="color: #d7afd7;">!</span><span class="fg0" style="background: #d7afd7;">?</span><span style="color: #d7afff;">!</span><span class="fg0" style="background: #d7afff;">?</span><span style="color: #d7d700;">!</span><span class="fg0" style="background: #d7d700;">?</span><span style="color: #d7d75f;">!</span><span class="fg0" style="background: #d7d75f;">?</span><span style="color: #d7d787;">!</span><span class="fg0" style="background: #d7d787;">?</span><span style="color: #d7d7af;">!</span><span class="fg0" style="background: #d7d7af;">?</span><span style="color: #d7d7d7;">!</span><span class="fg0" style="background: #d7d7d7;">?</span><span style="color: #d7d7ff;">!</span><span class="fg0" style="background: #d7d7ff;">?</span><span style="color: #d7ff00;">!</span><span class="fg0" style="background: #d7ff00;">?</span><span style="color: #d7ff5f;">!</span><span class="fg0" style="background: #d7ff5f;">?</span><span style="color: #d7ff87;">!</span><span class="fg0" style="background: #d7ff87;">?</span><span style="color: #d7ffaf;">!</span><span class="fg0" style="background: #d7ffaf;">?</span><span style="color: #d7ffd7;">!</span><span class="fg0" style="background: #d7ffd7;">?</span><span style="color: #d7ffff;">!</span><span class="fg0" style="background: #d7ffff;">?</span>
+<span style="color: #ff0000;">!</span><span class="fg7" style="background: #ff0000;">?</span><span style="color: #ff005f;">!</span><span class="fg7" style="background: #ff005f;">?</span><span style="color: #ff0087;">!</span><span class="fg7" style="background: #ff0087;">?</span><span style="color: #ff00af;">!</span><span class="fg7" style="background: #ff00af;">?</span><span style="color: #ff00d7;">!</span><span class="fg7" style="background: #ff00d7;">?</span><span style="color: #ff00ff;">!</span><span class="fg7" style="background: #ff00ff;">?</span><span style="color: #ff5f00;">!</span><span class="fg7" style="background: #ff5f00;">?</span><span style="color: #ff5f5f;">!</span><span class="fg7" style="background: #ff5f5f;">?</span><span style="color: #ff5f87;">!</span><span class="fg7" style="background: #ff5f87;">?</span><span style="color: #ff5faf;">!</span><span class="fg7" style="background: #ff5faf;">?</span><span style="color: #ff5fd7;">!</span><span class="fg7" style="background: #ff5fd7;">?</span><span style="color: #ff5fff;">!</span><span class="fg7" style="background: #ff5fff;">?</span><span style="color: #ff8700;">!</span><span class="fg7" style="background: #ff8700;">?</span><span style="color: #ff875f;">!</span><span class="fg7" style="background: #ff875f;">?</span><span style="color: #ff8787;">!</span><span class="fg7" style="background: #ff8787;">?</span><span style="color: #ff87af;">!</span><span class="fg7" style="background: #ff87af;">?</span><span style="color: #ff87d7;">!</span><span class="fg0" style="background: #ff87d7;">?</span><span style="color: #ff87ff;">!</span><span class="fg0" style="background: #ff87ff;">?</span><span style="color: #ffaf00;">!</span><span class="fg0" style="background: #ffaf00;">?</span><span style="color: #ffaf5f;">!</span><span class="fg0" style="background: #ffaf5f;">?</span><span style="color: #ffaf87;">!</span><span class="fg0" style="background: #ffaf87;">?</span><span style="color: #ffafaf;">!</span><span class="fg0" style="background: #ffafaf;">?</span><span style="color: #ffafd7;">!</span><span class="fg0" style="background: #ffafd7;">?</span><span style="color: #ffafff;">!</span><span class="fg0" style="background: #ffafff;">?</span><span style="color: #ffd700;">!</span><span class="fg0" style="background: #ffd700;">?</span><span style="color: #ffd75f;">!</span><span class="fg0" style="background: #ffd75f;">?</span><span style="color: #ffd787;">!</span><span class="fg0" style="background: #ffd787;">?</span><span style="color: #ffd7af;">!</span><span class="fg0" style="background: #ffd7af;">?</span><span style="color: #ffd7d7;">!</span><span class="fg0" style="background: #ffd7d7;">?</span><span style="color: #ffd7ff;">!</span><span class="fg0" style="background: #ffd7ff;">?</span><span style="color: #ffff00;">!</span><span class="fg0" style="background: #ffff00;">?</span><span style="color: #ffff5f;">!</span><span class="fg0" style="background: #ffff5f;">?</span><span style="color: #ffff87;">!</span><span class="fg0" style="background: #ffff87;">?</span><span style="color: #ffffaf;">!</span><span class="fg0" style="background: #ffffaf;">?</span><span style="color: #ffffd7;">!</span><span class="fg0" style="background: #ffffd7;">?</span><span style="color: #ffffff;">!</span><span class="fg0" style="background: #ffffff;">?</span>
+ANSI grayscale palette:
+<span style="color: #080808;">!</span><span class="bold fg7" style="background: #080808;">?</span><span style="color: #121212;">!</span><span class="bold fg7" style="background: #121212;">?</span><span style="color: #1c1c1c;">!</span><span class="bold fg7" style="background: #1c1c1c;">?</span><span style="color: #262626;">!</span><span class="bold fg7" style="background: #262626;">?</span><span style="color: #303030;">!</span><span class="bold fg7" style="background: #303030;">?</span><span style="color: #3a3a3a;">!</span><span class="bold fg7" style="background: #3a3a3a;">?</span><span style="color: #444444;">!</span><span class="bold fg7" style="background: #444444;">?</span><span style="color: #4e4e4e;">!</span><span class="bold fg7" style="background: #4e4e4e;">?</span><span style="color: #585858;">!</span><span class="bold fg7" style="background: #585858;">?</span><span style="color: #626262;">!</span><span class="bold fg7" style="background: #626262;">?</span><span style="color: #6c6c6c;">!</span><span class="bold fg7" style="background: #6c6c6c;">?</span><span style="color: #767676;">!</span><span class="bold fg7" style="background: #767676;">?</span><span style="color: #808080;">!</span><span class="bold fg0" style="background: #808080;">?</span><span style="color: #8a8a8a;">!</span><span class="bold fg0" style="background: #8a8a8a;">?</span><span style="color: #949494;">!</span><span class="bold fg0" style="background: #949494;">?</span><span style="color: #9e9e9e;">!</span><span class="bold fg0" style="background: #9e9e9e;">?</span><span style="color: #a8a8a8;">!</span><span class="bold fg0" style="background: #a8a8a8;">?</span><span style="color: #b2b2b2;">!</span><span class="bold fg0" style="background: #b2b2b2;">?</span><span style="color: #bcbcbc;">!</span><span class="bold fg0" style="background: #bcbcbc;">?</span><span style="color: #c6c6c6;">!</span><span class="bold fg0" style="background: #c6c6c6;">?</span><span style="color: #d0d0d0;">!</span><span class="bold fg0" style="background: #d0d0d0;">?</span><span style="color: #dadada;">!</span><span class="bold fg0" style="background: #dadada;">?</span><span style="color: #e4e4e4;">!</span><span class="bold fg0" style="background: #e4e4e4;">?</span><span style="color: #eeeeee;">!</span><span class="bold fg0" style="background: #eeeeee;">?</span>
+24-bit colors:
+<span style="color: #ffbbdd;">pink</span> <span style="color: #ffaa44;">orange</span> <span style="color: #9f4010;">brown</span> <span style="color: #10889f;">teal</span> </pre></div>
+            <div class="input input-hidden" data-exit-status="0"><pre><span class="prompt">$</span> rainbow --short</pre></div>
+            <div class="output"><pre class="line-numbers">18<br/>19<br/>20<br/>21<br/>22<br/>23</pre><pre>Base colors:
+<span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span> 
+<span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span> 
+Base colors (bg):
+<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span> 
+<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> </pre></div>
+          </div>
+        </foreignObject>
+      </svg>
+      <rect class="scrollbar" x="713" y="10" width="5" height="40">
+        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;0 151;0 302" dur="8.0s" repeatCount="indefinite" calcMode="discrete" />
+      </rect>
+    </g>
+    <text x="10" y="18" style="font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; fill: #cd0000;">
+      HTML embedding not supported.
+      Consult <tspan style="text-decoration: underline; text-decoration-thickness: 1px;"><a href="https://github.com/slowli/term-transcript/blob/HEAD/FAQ.md">term-transcript docs</a></tspan> for details.
+    </text>
+  </switch>
+</svg>

From 9c9e2769df3edf24854a5e1d325dfd6a16668c0b Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 14:54:33 +0300
Subject: [PATCH 09/11] Fix doc and end-to-end tests

---
 examples/rainbow.svg | 9 +++++----
 src/svg/data.rs      | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/rainbow.svg b/examples/rainbow.svg
index 23952cb..40d6e2b 100644
--- a/examples/rainbow.svg
+++ b/examples/rainbow.svg
@@ -14,13 +14,14 @@
           font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
           line-height: inherit;
         }
-        .user-input {
+        .input {
           margin: 0 -10px 6px;
           color: #e5e5e5;
           background: rgba(255, 255, 255, 0.1);
           padding: 2px 10px;
         }
-        .term-output { margin-bottom: 6px; }
+        .input-hidden { display: none; }
+        .output { margin-bottom: 6px; }
         .bold,.prompt { font-weight: bold; }
         .italic { font-style: italic; }
         .underline { text-decoration: underline; }
@@ -59,8 +60,8 @@
       <svg x="0" y="10" width="720" height="334" viewBox="0 0 720 334">
         <foreignObject width="720" height="334">
           <div xmlns="http://www.w3.org/1999/xhtml" class="container">
-            <div class="user-input"><pre><span class="prompt">$</span> rainbow</pre></div>
-            <div class="term-output"><pre>Base colors:
+            <div class="input"><pre><span class="prompt">$</span> rainbow</pre></div>
+            <div class="output"><pre>Base colors:
 <span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span> 
 <span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span> 
 Base colors (bg):
diff --git a/src/svg/data.rs b/src/svg/data.rs
index 6d8861e..8e89307 100644
--- a/src/svg/data.rs
+++ b/src/svg/data.rs
@@ -63,6 +63,7 @@ use crate::{svg::TemplateOptions, write::SvgLine, UserInput};
 ///         "input": {
 ///             "text": "rainbow",
 ///             "prompt": "$",
+///             "hidden": false,
 ///         },
 ///         "output_html": "Hello, <span class=\"fg2\">world</span>!",
 /// #       "output_svg": [{

From 9b56e154ace7c5ce0eae057f8dfe4e2a1ff60e63 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 15:03:58 +0300
Subject: [PATCH 10/11] cli: Link to examples readme from CLI readme

---
 cli/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cli/README.md b/cli/README.md
index 0d120a4..4d52999 100644
--- a/cli/README.md
+++ b/cli/README.md
@@ -133,6 +133,7 @@ on the terminal size.
 
 See also [a shell script][generate-snapshots] used in the "parent" `term-transcript`
 crate to render examples; it uses all major commands and options of the CLI app.
+The snapshots generated by the script are showcased [in a dedicated file][examples-readme].
 
 ## License
 
@@ -153,3 +154,4 @@ shall be dual licensed as above, without any additional terms or conditions.
 [help-snapshot-link]: https://github.com/slowli/term-transcript/raw/HEAD/cli/tests/snapshots/help.svg?sanitize=true
 [`isatty`]: https://man7.org/linux/man-pages/man3/isatty.3.html
 [generate-snapshots]: https://github.com/slowli/term-transcript/blob/HEAD/examples/generate-snapshots.sh
+[examples-readme]: https://github.com/slowli/term-transcript/blob/HEAD/examples/README.md

From 3785b22a7fa66beec9d90a75e82c171cacbcaaf8 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Thu, 13 Apr 2023 16:39:57 +0300
Subject: [PATCH 11/11] Update changelogs

---
 CHANGELOG.md     | 2 ++
 cli/CHANGELOG.md | 1 +
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a2658a..e2426d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,8 @@ The project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
 - Add a fallback error message to the default template if HTML-in-SVG embedding
   is not supported.
 - Add [FAQ](FAQ.md) with some tips and troubleshooting advice.
+- Allow hiding `UserInput`s during transcript rendering by calling the `hide()` method.
+  Hidden inputs are supported by the default and pure SVG templates.
 
 ### Changed
 
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 47e144a..bd11fcf 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -14,6 +14,7 @@ The project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
   As an example, this can be used to import fonts using `@import` or `@font-face`.
 - Support rendering pure SVG using `--pure-svg` option. See the library changelog and FAQ
   for more details.
+- Allow hiding all user inputs in a rendered transcript by specifying the `--no-inputs` flag.
 
 ## 0.3.0-beta.1 - 2023-01-19