@dunkinfrunkin/mdcat 0.1.10 → 0.1.12

package/README.md

@@ -32,6 +32,8 @@ npx @dunkinfrunkin/mdcat README.md
 ```sh
 mdcat README.md                  # open a file
 mdcat --web README.md            # render and open in browser
+mdcat --light README.md          # force light theme
+mdcat --dark README.md           # force dark theme
 cat CHANGELOG.md | mdcat         # pipe from stdin
 curl -s https://… | mdcat        # pipe from curl
 mdcat --help                     # show help
@@ -54,6 +56,23 @@ mdcat --version                  # show version
 | `Esc` | Clear search |
 | Mouse wheel | Scroll three lines |
 
+## Theme
+
+mdcat auto-detects your terminal's light or dark background and adjusts colors accordingly.
+
+**Auto-detection** checks (in order):
+1. `MDCAT_THEME` env var (`light` or `dark`)
+2. `COLORFGBG` env var (set by many terminals)
+3. macOS system appearance (light/dark mode)
+4. Falls back to dark
+
+**Override manually:**
+```sh
+mdcat --light README.md          # force light theme
+mdcat --dark README.md           # force dark theme
+MDCAT_THEME=light mdcat file.md  # env var override
+```
+
 ## What it renders
 
 | Element | Rendering |
@@ -62,7 +81,7 @@ mdcat --version                  # show version
 | H2 | Bold blue with underline |
 | H3–H6 | Green → yellow → cyan → dim |
 | **Bold** / _italic_ / ~~strike~~ | Standard ANSI |
-| `inline code` | Amber on dark background |
+| `inline code` | Amber on dark bg / brown on light bg |
 | Fenced code | Bordered box with syntax highlighting |
 | Blockquotes | Amber `▌` bar, dim italic |
 | Unordered lists | `●` / `○` / `‣` bullets |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dunkinfrunkin/mdcat",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "View markdown files beautifully in your terminal",
   "type": "module",
   "bin": {

package/src/cli.js

@@ -3,10 +3,11 @@ import { readFileSync, writeFileSync } from "fs";
 import { resolve, basename } from "path";
 import { tmpdir } from "os";
 import { execFileSync } from "child_process";
-import { marked } from "marked";
-import { renderTokens } from "./render.js";
+import { marked, Marked } from "marked";
+import { renderTokens, setTheme } from "./render.js";
 import { launch } from "./tui.js";
 import { toDocx } from "./docx.js";
+import { detectTheme, themeFromArgs, stripThemeArgs } from "./theme.js";
 
 marked.use({ gfm: true });
 
@@ -20,7 +21,7 @@ const bold = s => `${E}[1m${s}${E}[0m`;
 
 const CAT = `  ${gray("/\\")}${blue("(o.o)")}${gray("/\\")}  `;
 
-const args = process.argv.slice(2);
+let args = process.argv.slice(2);
 
 if (args[0] === "--help" || args[0] === "-h") {
   console.log(`\n${CAT}  ${bold("mdcat")} ${dim(`v${pkg.version}`)}`);
@@ -29,7 +30,12 @@ if (args[0] === "--help" || args[0] === "-h") {
   console.log(`  mdcat ${dim("<file.md>")}`);
   console.log(`  mdcat ${dim("--web <file.md>")}   ${dim("# open in browser")}`);
   console.log(`  mdcat ${dim("--doc <file.md>")}   ${dim("# export to .docx")}`);
+  console.log(`  mdcat ${dim("--light")}           ${dim("# force light theme")}`);
+  console.log(`  mdcat ${dim("--dark")}            ${dim("# force dark theme")}`);
   console.log(`  cat file.md ${dim("|")} mdcat\n`);
+  console.log(`${bold("Theme:")}`);
+  console.log(`  Auto-detects terminal theme. Override with ${blue("--light")} / ${blue("--dark")}`);
+  console.log(`  or set ${blue("MDCAT_THEME")}=light|dark\n`);
   console.log(`${bold("Keys:")}`);
   console.log(`  ${blue("/")}          search          ${blue("n/N")}   next/prev match`);
   console.log(`  ${blue("j/k")} ${dim("↑↓")}    scroll line     ${blue("space/b")} page down/up`);
@@ -38,6 +44,11 @@ if (args[0] === "--help" || args[0] === "-h") {
   process.exit(0);
 }
 
+// Resolve theme: CLI flag > env var > auto-detect
+const activeTheme = themeFromArgs(args) ?? detectTheme();
+args = stripThemeArgs(args);
+setTheme(activeTheme);
+
 if (args[0] === "--version" || args[0] === "-v") {
   console.log(`${CAT}  ${bold("mdcat")} ${dim(`v${pkg.version}`)}`);
   process.exit(0);
@@ -52,7 +63,7 @@ function escapeHtml(s) {
 function openInBrowser(title, content) {
   // Use a custom renderer that escapes raw HTML tokens so bare <tag> in
   // markdown text isn't swallowed by the browser.
-  const webMarked = new marked.Marked({ gfm: true });
+  const webMarked = new Marked({ gfm: true });
   webMarked.use({
     renderer: {
       html(token) {
@@ -61,6 +72,7 @@ function openInBrowser(title, content) {
     },
   });
   const html = webMarked.parse(content);
+  const isLight = activeTheme === "light";
   const page = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -70,31 +82,31 @@ function openInBrowser(title, content) {
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      background: #282c34;
-      color: #abb2bf;
+      background: ${isLight ? "#fafafa" : "#282c34"};
+      color: ${isLight ? "#383a42" : "#abb2bf"};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       font-size: 16px;
       line-height: 1.7;
       padding: 2rem 1rem;
     }
     .wrap { max-width: 760px; margin: 0 auto; }
-    h1, h2, h3, h4, h5, h6 { color: #e5c07b; margin: 1.5rem 0 0.5rem; font-weight: 700; }
-    h1 { font-size: 2rem; color: #c678dd; border-bottom: 2px solid #3e4451; padding-bottom: 0.4rem; }
-    h2 { font-size: 1.4rem; color: #61afef; border-bottom: 1px solid #3e4451; padding-bottom: 0.3rem; }
-    h3 { font-size: 1.15rem; color: #98c379; }
+    h1, h2, h3, h4, h5, h6 { color: ${isLight ? "#c18401" : "#e5c07b"}; margin: 1.5rem 0 0.5rem; font-weight: 700; }
+    h1 { font-size: 2rem; color: ${isLight ? "#a626a4" : "#c678dd"}; border-bottom: 2px solid ${isLight ? "#d3d3d8" : "#3e4451"}; padding-bottom: 0.4rem; }
+    h2 { font-size: 1.4rem; color: ${isLight ? "#4078f2" : "#61afef"}; border-bottom: 1px solid ${isLight ? "#d3d3d8" : "#3e4451"}; padding-bottom: 0.3rem; }
+    h3 { font-size: 1.15rem; color: ${isLight ? "#50a14f" : "#98c379"}; }
     p { margin: 0.75rem 0; }
-    a { color: #61afef; text-decoration: underline; }
-    code { background: #2c313a; color: #e5c07b; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
-    pre { background: #21252b; border: 1px solid #3e4451; border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; margin: 1rem 0; }
-    pre code { background: none; color: #abb2bf; padding: 0; font-size: 0.875rem; }
-    blockquote { border-left: 3px solid #e5c07b; padding: 0.5rem 1rem; margin: 1rem 0; color: #5c6370; font-style: italic; }
+    a { color: ${isLight ? "#4078f2" : "#61afef"}; text-decoration: underline; }
+    code { background: ${isLight ? "#e8e8e8" : "#2c313a"}; color: ${isLight ? "#986801" : "#e5c07b"}; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
+    pre { background: ${isLight ? "#f0f0f0" : "#21252b"}; border: 1px solid ${isLight ? "#d3d3d8" : "#3e4451"}; border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; margin: 1rem 0; }
+    pre code { background: none; color: ${isLight ? "#383a42" : "#abb2bf"}; padding: 0; font-size: 0.875rem; }
+    blockquote { border-left: 3px solid ${isLight ? "#c18401" : "#e5c07b"}; padding: 0.5rem 1rem; margin: 1rem 0; color: ${isLight ? "#696c77" : "#5c6370"}; font-style: italic; }
     ul, ol { padding-left: 1.5rem; margin: 0.75rem 0; }
     li { margin: 0.25rem 0; }
     table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
-    th { background: #21252b; color: #61afef; padding: 0.5rem 0.75rem; border: 1px solid #3e4451; text-align: left; }
-    td { padding: 0.5rem 0.75rem; border: 1px solid #3e4451; }
-    tr:nth-child(even) { background: #2c313a; }
-    hr { border: none; border-top: 1px solid #3e4451; margin: 1.5rem 0; }
+    th { background: ${isLight ? "#e8e8e8" : "#21252b"}; color: ${isLight ? "#4078f2" : "#61afef"}; padding: 0.5rem 0.75rem; border: 1px solid ${isLight ? "#d3d3d8" : "#3e4451"}; text-align: left; }
+    td { padding: 0.5rem 0.75rem; border: 1px solid ${isLight ? "#d3d3d8" : "#3e4451"}; }
+    tr:nth-child(even) { background: ${isLight ? "#f0f0f0" : "#2c313a"}; }
+    hr { border: none; border-top: 1px solid ${isLight ? "#d3d3d8" : "#3e4451"}; margin: 1.5rem 0; }
     img { max-width: 100%; border-radius: 6px; }
   </style>
 </head>
@@ -112,10 +124,11 @@ function openInBrowser(title, content) {
 }
 
 function runTUI(title, content) {
-  const cols = Math.min(process.stdout.columns || 80, MAX_COLS);
+  const termCols = process.stdout.columns || 80;
+  const cols = Math.min(termCols, MAX_COLS);
   const tokens = marked.lexer(content);
-  const lines = renderTokens(tokens, cols);
-  launch(title, lines);
+  const lines = renderTokens(tokens, cols, termCols > MAX_COLS ? termCols : undefined);
+  launch(title, lines, activeTheme);
 }
 
 // --web / --doc flags

package/src/render.js

@@ -4,44 +4,96 @@ import { highlight as cliHighlight } from "cli-highlight";
 
 const chalk = new Chalk({ level: 3 });
 
-// ─── One Dark palette ──────────────────────────────────────────────────────────
-const c = {
-  // Headings
-  h1:       chalk.hex("#c678dd").bold,          // purple
-  h2:       chalk.hex("#61afef").bold,          // blue
-  h3:       chalk.hex("#98c379").bold,          // green
-  h4:       chalk.hex("#e5c07b").bold,          // yellow
-  h5:       chalk.hex("#56b6c2"),               // cyan
-  h6:       chalk.dim,
-  // Inline
-  strong:   chalk.bold.white,
-  em:       chalk.italic,
-  del:      chalk.strikethrough.dim,
-  code:     chalk.hex("#e5c07b").bgHex("#2a2a2a"), // amber on dark bg
-  link:     chalk.hex("#61afef").underline,
-  image:    chalk.dim,
-  // Code block
-  border:   chalk.dim,
-  codeLang: chalk.hex("#e5c07b").dim,
-  // Blockquote
-  bqBar:    chalk.hex("#e5c07b"),
-  bqText:   chalk.dim.italic,
-  // Lists
-  bullet0:  chalk.hex("#61afef"),              // blue ● depth 0
-  bullet1:  chalk.dim,                         // dim ○ depth 1
-  bullet2:  chalk.dim,                         // very dim ‣ depth 2+
-  ordered:  chalk.hex("#56b6c2"),              // cyan number
-  taskDone: chalk.hex("#98c379"),              // green ☑
-  taskTodo: chalk.dim,                         // dim ☐
-  // Table
-  tableBorder: chalk.dim,
-  tableHead:   chalk.hex("#61afef").bold,
-  tableCell:   chalk.reset,
-  // HR
-  hr:       chalk.dim,
-  // Paragraph text
-  fg:       chalk.reset,
-};
+// ─── Color palettes ─────────────────────────────────────────────────────────────
+
+function darkPalette() {
+  return {
+    // Headings
+    h1:       chalk.hex("#c678dd").bold,          // purple
+    h2:       chalk.hex("#61afef").bold,          // blue
+    h3:       chalk.hex("#98c379").bold,          // green
+    h4:       chalk.hex("#e5c07b").bold,          // yellow
+    h5:       chalk.hex("#56b6c2"),               // cyan
+    h6:       chalk.dim,
+    // Inline
+    strong:   chalk.bold.white,
+    em:       chalk.italic,
+    del:      chalk.strikethrough.dim,
+    code:     chalk.hex("#e5c07b").bgHex("#2a2a2a"), // amber on dark bg
+    link:     chalk.hex("#61afef").underline,
+    image:    chalk.dim,
+    badge:    chalk.hex("#abb2bf"),
+    // Code block
+    border:   chalk.dim,
+    codeLang: chalk.hex("#e5c07b").dim,
+    // Blockquote
+    bqBar:    chalk.hex("#e5c07b"),
+    bqText:   chalk.dim.italic,
+    // Lists
+    bullet0:  chalk.hex("#61afef"),              // blue ● depth 0
+    bullet1:  chalk.dim,                         // dim ○ depth 1
+    bullet2:  chalk.dim,                         // very dim ‣ depth 2+
+    ordered:  chalk.hex("#56b6c2"),              // cyan number
+    taskDone: chalk.hex("#98c379"),              // green ☑
+    taskTodo: chalk.dim,                         // dim ☐
+    // Table
+    tableBorder: chalk.dim,
+    tableHead:   chalk.hex("#61afef").bold,
+    tableCell:   chalk.reset,
+    // HR
+    hr:       chalk.dim,
+    // Paragraph text
+    fg:       chalk.reset,
+  };
+}
+
+function lightPalette() {
+  return {
+    // Headings
+    h1:       chalk.hex("#a626a4").bold,          // magenta
+    h2:       chalk.hex("#4078f2").bold,          // blue
+    h3:       chalk.hex("#50a14f").bold,          // green
+    h4:       chalk.hex("#c18401").bold,          // dark yellow
+    h5:       chalk.hex("#0184bc"),               // teal
+    h6:       chalk.hex("#696c77"),               // gray
+    // Inline
+    strong:   chalk.bold.black,
+    em:       chalk.italic,
+    del:      chalk.strikethrough.hex("#696c77"),
+    code:     chalk.hex("#986801").bgHex("#e8e8e8"), // brown on light gray
+    link:     chalk.hex("#4078f2").underline,
+    image:    chalk.hex("#696c77"),
+    badge:    chalk.hex("#383a42"),
+    // Code block
+    border:   chalk.hex("#a0a1a7"),
+    codeLang: chalk.hex("#986801"),
+    // Blockquote
+    bqBar:    chalk.hex("#c18401"),
+    bqText:   chalk.hex("#696c77").italic,
+    // Lists
+    bullet0:  chalk.hex("#4078f2"),              // blue ● depth 0
+    bullet1:  chalk.hex("#a0a1a7"),              // gray ○ depth 1
+    bullet2:  chalk.hex("#a0a1a7"),              // gray ‣ depth 2+
+    ordered:  chalk.hex("#0184bc"),              // teal number
+    taskDone: chalk.hex("#50a14f"),              // green ☑
+    taskTodo: chalk.hex("#a0a1a7"),              // gray ☐
+    // Table
+    tableBorder: chalk.hex("#a0a1a7"),
+    tableHead:   chalk.hex("#4078f2").bold,
+    tableCell:   chalk.reset,
+    // HR
+    hr:       chalk.hex("#a0a1a7"),
+    // Paragraph text
+    fg:       chalk.reset,
+  };
+}
+
+let c = darkPalette();
+
+/** Set the active color palette. Call before renderTokens(). */
+export function setTheme(theme) {
+  c = theme === "light" ? lightPalette() : darkPalette();
+}
 
 const MARGIN = "  "; // 2-space left margin
 
@@ -124,7 +176,7 @@ function inline(tokens) {
           if (tok.tokens?.length === 1 && tok.tokens[0].type === "image") {
             const alt = tok.tokens[0].text || tok.tokens[0].alt || "";
             if (alt) {
-              const badge = chalk.dim("[") + chalk.hex("#abb2bf")(alt) + chalk.dim("]");
+              const badge = chalk.dim("[") + c.badge(alt) + chalk.dim("]");
               return `\x1B]8;;${href}\x1B\\${badge}\x1B]8;;\x1B\\`;
             }
           }
@@ -468,7 +520,7 @@ function hr(w) {
 
 // ─── Token dispatcher ──────────────────────────────────────────────────────────
 
-function token(tok, w) {
+function token(tok, w, tableW) {
   try {
     switch (tok.type) {
       case "heading":
@@ -482,7 +534,7 @@ function token(tok, w) {
       case "list":
         return ["", ...list(tok, w, 0), ""];
       case "table":
-        return table(tok, w);
+        return table(tok, tableW ?? w);
       case "hr":
         return hr(w);
       case "space":
@@ -504,9 +556,11 @@ function token(tok, w) {
  *
  * @param {import("marked").Token[]} tokens  - Output of `marked.lexer()`
  * @param {number} cols                      - Terminal width (default 80)
+ * @param {number} [fullCols]               - Uncapped terminal width for tables
  * @returns {string[]}
  */
-export function renderTokens(tokens, cols = 80) {
+export function renderTokens(tokens, cols = 80, fullCols) {
   const w = Math.max(20, cols - MARGIN.length * 2);
-  return tokens.flatMap((tok) => token(tok, w));
+  const tableW = fullCols ? Math.max(20, fullCols - MARGIN.length * 2) : undefined;
+  return tokens.flatMap((tok) => token(tok, w, tableW));
 }

package/src/theme.js

@@ -0,0 +1,54 @@
+import { execSync } from "child_process";
+
+/**
+ * Detect whether the terminal is using a light or dark background.
+ *
+ * Checks (in order):
+ *   1. MDCAT_THEME env var ("light" or "dark")
+ *   2. COLORFGBG env var (e.g. "15;0" → dark, "0;15" → light)
+ *   3. macOS Appearance via `defaults read`
+ *   4. Falls back to "dark"
+ */
+export function detectTheme() {
+  // 1. Explicit override
+  const env = (process.env.MDCAT_THEME || "").toLowerCase();
+  if (env === "light" || env === "dark") return env;
+
+  // 2. COLORFGBG — "fg;bg" where bg >= 8 usually means light
+  const colorfgbg = process.env.COLORFGBG;
+  if (colorfgbg) {
+    const parts = colorfgbg.split(";");
+    const bg = parseInt(parts[parts.length - 1], 10);
+    if (!isNaN(bg) && bg >= 8) return "light";
+    if (!isNaN(bg) && bg < 8) return "dark";
+  }
+
+  // 3. macOS: check system appearance
+  if (process.platform === "darwin") {
+    try {
+      const result = execSync(
+        "defaults read -g AppleInterfaceStyle 2>/dev/null",
+        { encoding: "utf8", timeout: 500 }
+      ).trim();
+      // "Dark" means dark mode; absence or error means light
+      return result === "Dark" ? "dark" : "light";
+    } catch {
+      // Key missing → light mode on macOS
+      return "light";
+    }
+  }
+
+  return "dark";
+}
+
+/** Check CLI args for --light or --dark flags, returns the flag value or null. */
+export function themeFromArgs(args) {
+  if (args.includes("--light")) return "light";
+  if (args.includes("--dark")) return "dark";
+  return null;
+}
+
+/** Remove --light / --dark from an args array. */
+export function stripThemeArgs(args) {
+  return args.filter(a => a !== "--light" && a !== "--dark");
+}

package/src/tui.js

@@ -12,17 +12,36 @@ const ERASE_L   = `${ESC}[2K`;
 const RESET     = `${ESC}[0m`;
 const move      = (r, c) => `${ESC}[${r};${c}H`;
 
-// One Dark-aligned color palette (24-bit ANSI)
-const C = {
-  chromeBg:    `${ESC}[48;2;33;37;43m`,    // #21252b  — top/bottom chrome bg
+// Color palettes for TUI chrome (24-bit ANSI)
+const DARK = {
+  chromeBg:    `${ESC}[48;2;33;37;43m`,    // #21252b
   badge:       `${ESC}[38;2;198;120;221m`,  // #c678dd  — purple badge
   titleFg:     `${ESC}[97m`,                // bright white — filename
-  dimFg:       `${ESC}[38;2;92;99;112m`,   // #5c6370  — dim hints / app name
-  accentFg:    `${ESC}[38;2;97;175;239m`,  // #61afef  — blue search prompt
-  matchFg:     `${ESC}[38;2;229;192;123m`, // #e5c07b  — gold current match
-  greenFg:     `${ESC}[38;2;152;195;121m`, // #98c379  — match count
-  redFg:       `${ESC}[38;2;224;108;117m`, // #e06c75  — no matches
-  otherMatchFg:`${ESC}[38;2;92;99;112m`,   // #5c6370  — other match gutter
+  dimFg:       `${ESC}[38;2;92;99;112m`,   // #5c6370
+  accentFg:    `${ESC}[38;2;97;175;239m`,  // #61afef
+  matchFg:     `${ESC}[38;2;229;192;123m`, // #e5c07b
+  greenFg:     `${ESC}[38;2;152;195;121m`, // #98c379
+  redFg:       `${ESC}[38;2;224;108;117m`, // #e06c75
+  otherMatchFg:`${ESC}[38;2;92;99;112m`,   // #5c6370
+  hlMatch:     `${ESC}[48;2;62;68;82m${ESC}[38;2;229;192;123m`,
+  hlCurrent:   `${ESC}[48;2;229;192;123m${ESC}[38;2;0;0;0m`,
+};
+
+const LIGHT = {
+  chromeBg:    `${ESC}[48;2;228;228;228m`, // #e4e4e4
+  badge:       `${ESC}[38;2;166;38;164m`,  // #a626a4  — magenta badge
+  titleFg:     `${ESC}[30m`,               // black — filename
+  dimFg:       `${ESC}[38;2;105;108;119m`, // #696c77
+  accentFg:    `${ESC}[38;2;64;120;242m`,  // #4078f2
+  matchFg:     `${ESC}[38;2;152;104;1m`,   // #986801
+  greenFg:     `${ESC}[38;2;80;161;79m`,   // #50a14f
+  redFg:       `${ESC}[38;2;228;86;73m`,   // #e45649
+  otherMatchFg:`${ESC}[38;2;105;108;119m`, // #696c77
+  hlMatch:     `${ESC}[48;2;209;226;255m${ESC}[38;2;64;120;242m`,
+  hlCurrent:   `${ESC}[48;2;64;120;242m${ESC}[38;2;255;255;255m`,
+};
+
+let C = { ...DARK,
   bold:        `${ESC}[1m`,
   dim:         `${ESC}[2m`,
   italic:      `${ESC}[3m`,
@@ -42,9 +61,9 @@ function plen(s) { return s.replace(/\x1B\[[0-9;]*m/g, "").length; }
 
 // Highlight all occurrences of `query` within an ANSI-coloured line.
 // Walks the string char-by-char so ANSI escape sequences don't shift offsets.
-const HL_MATCH   = `${ESC}[48;2;62;68;82m${ESC}[38;2;229;192;123m`; // other matches
-const HL_CURRENT = `${ESC}[48;2;229;192;123m${ESC}[38;2;0;0;0m`;    // current match
-const HL_OFF     = `${ESC}[49m${ESC}[39m`;
+let HL_MATCH   = C.hlMatch;
+let HL_CURRENT = C.hlCurrent;
+const HL_OFF   = `${ESC}[49m${ESC}[39m`;
 
 function highlightInLine(line, query, isCurrent) {
   if (!query) return line;
@@ -110,7 +129,14 @@ function copyText(text) {
   catch { /* not on macOS or pbcopy unavailable */ }
 }
 
-export function launch(title, lines) {
+export function launch(title, lines, theme) {
+  // Apply theme to TUI chrome
+  if (theme === "light") {
+    const pal = LIGHT;
+    Object.assign(C, pal);
+    HL_MATCH = pal.hlMatch;
+    HL_CURRENT = pal.hlCurrent;
+  }
   // Viewport state
   let offset = 0;