From 1aedcaecc5f10ff1b8eccad1df96337bb7685dc7 Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Thu, 5 Oct 2023 23:22:19 -0700
Subject: [PATCH] website: wip cub

---
 website/app/vt/cub/page.mdx       | 76 ++++++++++++++++++++++++++++++-
 website/app/vt/layout.tsx         |  2 +-
 website/components/VTSequence.tsx |  4 +-
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/website/app/vt/cub/page.mdx b/website/app/vt/cub/page.mdx
index bf7e08266..f852004c5 100644
--- a/website/app/vt/cub/page.mdx
+++ b/website/app/vt/cub/page.mdx
@@ -1,7 +1,79 @@
 import VTSequence from "@/components/VTSequence";
 
-# Cursor Backword (CUB)
+# Cursor Backward (CUB)
 
 <VTSequence sequence={["CSI", "Pn", "D"]} />
 
-TODO
+Move the cursor `n` cells left.
+
+This sequence always unsets the pending wrap state.
+
+The leftmost boundary the cursor can move to is determined by the current
+cursor column and the [left margin](#TODO). If the cursor begins to the left
+of the left margin, modify the left margin to be the leftmost column
+for the duration of the sequence. The leftmost column the cursor can be on
+is the left margin.
+
+With the above in place, there are three different cursor backward behaviors
+depending on the mode state of the terminal:
+
+- **Reverse wrap**: [wraparound (mode 7)](#TODO) and [reverse wrap (mode 45)](#TODO)
+  are **BOTH** enabled
+- **Extended reverse wrap**: [wraparound (mode 7)](#TODO) and [extended reverse wrap (mode 1045)](#TODO)
+  are **BOTH** enabled
+- **No wrap**: The default behavior if the above wrapping behaviors
+  do not have their conditions met.
+
+For the **no wrap** behavior, move the cursor to the left `n` cells while
+respecting the aforementioned leftmost boundary. Upon reaching the leftmost
+boundary, stop moving the cursor left regardless of the remaining value of `n`.
+The cursor row remains unchanged.
+
+For the **extended reverse wrap** behavior, move the cursor to the left `n`
+cells while respecting the aforementioned leftmost boundary. Upon reaching the
+leftmost boundary, if `n > 0` then move the cursor to the [right margin](#TODO)
+of the line above the cursor. If the cursor is already on the
+[top margin](#TODO), move the cursor to the right margin of the
+[bottom margin](#TODO). Both the cursor column and row can change in this
+mode.
+
+For the **reverse wrap** (non-extended) behavior, moe the cursor to the left `n`
+cells while respecting the aforementioned leftmost boundary. Upon reaching the
+leftmost boundary, if `n > 0` then move the cursor to the [right margin](#TODO)
+of the line above the cursor. If the cursor is already on the
+[top margin](#TODO), do not move the cursor up and the sequence is complete.
+This wrapping mode does not wrap the cursor row back to the bottom margin.
+
+## Validation
+
+### CUB V-1: Pending Wrap is Unset
+
+```bash
+cols=$(tput cols)
+printf "\033[${cols}G" # move to last column
+printf "A" # set pending wrap state
+printf "\033[D" # move back one
+printf "XYZ"
+echo
+```
+
+```
+|________XY|
+|Zc________|
+```
+
+### CUB V-2: Leftmost Boundary with Reverse Wrap Disabled
+
+```bash
+printf "\033[?45l" # disable reverse wrap
+echo "A"
+printf "\033[10D" # back
+printf "B"
+```
+
+```
+|A_________|
+|Bc________|
+```
+
+### TODO: Reverse Wrap, Scroll Region Validations
diff --git a/website/app/vt/layout.tsx b/website/app/vt/layout.tsx
index 82dcca92b..c67ca1f15 100644
--- a/website/app/vt/layout.tsx
+++ b/website/app/vt/layout.tsx
@@ -4,7 +4,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex justify-center font-mono mt-8">
       <div className="flex-1"></div>
-      <div className="w-1/2 max-w-[800px] prose prose-h1:text-base prose-h1:font-bold prose-h2:text-base prose-h2:font-bold prose-p:text-base prose-h1:m-0 prose-h1:mb-1.5 prose-h2:m-0 prose-h2:mb-1.5 prose-invert">
+      <div className="w-1/2 max-w-[800px] prose prose-h1:text-base prose-h1:font-bold prose-h2:text-base prose-h2:font-bold prose-h3:text-base prose-h3:font-bold prose-p:text-base prose-h1:m-0 prose-h1:mb-1.5 prose-h2:m-0 prose-h2:mb-1.5 prose-h3:m-0 prose-h3:mb-1.5 prose-invert">
         {children}
       </div>
       <div className="flex-1"></div>
diff --git a/website/components/VTSequence.tsx b/website/components/VTSequence.tsx
index 5262e4494..6cb6422d7 100644
--- a/website/components/VTSequence.tsx
+++ b/website/components/VTSequence.tsx
@@ -20,8 +20,8 @@ export default function VTSequence({
   return (
     <div className="flex my-2.5">
       {arr.map((elem, i) => (
-        <div className="shrink">
-          <VTElem key={`${i}${elem}`} elem={elem} />
+        <div key={`${i}${elem}`} className="shrink">
+          <VTElem elem={elem} />
         </div>
       ))}
     </div>