jsmdcui 0.5.0 → 0.7.0

package/tests/id-collision.test.js

@@ -0,0 +1,147 @@
+import { expect, test } from "bun:test";
+import { mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createTuiSelector } from "../src/plugins/js-bridge.js";
+
+const tui = join(import.meta.dir, "..", "tui");
+const bunBin = Bun.which("bun") || process.argv0;
+
+async function runCheck(markdown) {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-check-"));
+  const file = join(dir, "app.md");
+  await writeFile(file, markdown);
+  const result = Bun.spawnSync([bunBin, tui, "--check", file], { stdout: "pipe", stderr: "pipe" });
+  await rm(dir, { recursive: true, force: true });
+  return result;
+}
+
+test("--check exits 0 and reports unique IDs", async () => {
+  const result = await runCheck("## Input Path\n\n```text#output-path\nvalue\n```\n");
+  expect(result.exitCode).toBe(0);
+  const raw = result.stdout.toString();
+  const output = Bun.stripANSI(raw);
+  expect(output).toContain("No ID collisions found");
+  expect(output).toContain("PASSED");
+  expect(raw).toContain(`${Bun.color("#00d75f", "ansi-16m")}\x1b[1mPASSED\x1b[0m`);
+});
+
+test("--check reports heading/fenced-block collisions with line details", async () => {
+  const result = await runCheck("## Write Status\n\n```text#write-status\nwaiting\n```\n");
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(result.exitCode).toBe(1);
+  expect(output).toContain("FAIL — Found 1 colliding ID(s)");
+  expect(output).toContain("ID #write-status");
+  expect(output).toContain("Declarations: 2");
+  expect(output).toContain("Line 1");
+  expect(output).toContain("Type: heading");
+  expect(output).toContain("Source: ## Write Status");
+  expect(output).toContain("Line 3");
+  expect(output).toContain("Type: text fenced block");
+  expect(output).toContain("Source: ```text#write-status");
+  expect(result.stdout.toString()).toContain(`${Bun.color("#ff3030", "ansi-16m")}\x1b[1mFAILED\x1b[0m`);
+  expect(output.lastIndexOf("FAILED")).toBeGreaterThan(output.lastIndexOf("Suggested fix"));
+});
+
+test("--check reports duplicate fenced-block IDs", async () => {
+  const result = await runCheck("```text#myid\na\n```\n\n```textarea#myid\nb\n```\n");
+  expect(result.exitCode).toBe(1);
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(output).toContain("ID #myid");
+  expect(output).toContain("Declarations: 2");
+  expect(output).toContain("FAILED");
+});
+
+test("--check includes IDs on arbitrary fenced-block tags", async () => {
+  const result = await runCheck("```hello#myid\nyou\n```\n\n# myid\n");
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(result.exitCode).toBe(1);
+  expect(output).toContain("ID #myid");
+  expect(output).toContain("Declarations: 2");
+  expect(output).toContain("Type: hello fenced block");
+  expect(output).toContain("Fenced blocks: 1");
+  expect(output).toContain("FAILED");
+});
+
+test("--check rejects duplicate Markdown heading IDs before Bun adds suffixes", async () => {
+  const result = await runCheck("# myid\n\n# myid\n");
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(result.exitCode).toBe(1);
+  expect(output).toContain("ID #myid");
+  expect(output).toContain("Declarations: 2");
+  expect(output).toContain("Line 1");
+  expect(output).toContain("Line 3");
+  expect(output).toContain("FAILED");
+});
+
+const identityMatrix = [
+  {
+    name: "tag without class",
+    info: "text#myid",
+    selectable: true,
+  },
+  {
+    name: "tag with class",
+    info: "text#myid.field",
+    selectable: true,
+  },
+  {
+    name: "no tag and no class",
+    info: "#myid",
+    selectable: false,
+  },
+  {
+    name: "no tag with class",
+    info: "#myid.field",
+    selectable: false,
+  },
+];
+
+for (const scenario of identityMatrix) {
+  test(`--check identity matrix: ${scenario.name}`, async () => {
+    const result = await runCheck(`\`\`\`${scenario.info}\nvalue\n\`\`\`\n\n# myid\n`);
+    const output = Bun.stripANSI(result.stdout.toString());
+    expect(result.exitCode).toBe(scenario.selectable ? 1 : 0);
+    expect(output).toContain(`Fenced blocks: ${scenario.selectable ? 1 : 0}`);
+    if (scenario.selectable) {
+      expect(output).toContain("ID #myid");
+      expect(output).toContain("Declarations: 2");
+      expect(output).toContain("FAILED");
+    } else {
+      expect(output).toContain("Selectable IDs: 1");
+      expect(output).toContain("PASSED");
+    }
+  });
+}
+
+test("--check ignores tag and class differences when fenced-block IDs collide", async () => {
+  const result = await runCheck(
+    "```text#myid.left.primary\na\n```\n\n```json#myid.right.secondary\nb\n```\n",
+  );
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(result.exitCode).toBe(1);
+  expect(output).toContain("ID #myid");
+  expect(output).toContain("Declarations: 2");
+  expect(output).toContain("Type: text fenced block");
+  expect(output).toContain("Type: json fenced block");
+  expect(output).toContain("FAILED");
+});
+
+test("TUI $ selector finds one ID across every tag/class query combination", () => {
+  const markdown = "```text#myid.field.primary\nvalue\n```\n";
+  const buffer = { lines: markdown.trimEnd().split("\n") };
+  const $ = createTuiSelector(() => buffer);
+  const selectors = [
+    "text#myid.field",
+    "text#myid",
+    "#myid.field",
+    "#myid",
+  ];
+  for (const selector of selectors) expect($(selector).val()).toBe("value");
+});
+
+test("--check requires exactly one file", () => {
+  const result = Bun.spawnSync([bunBin, tui, "--check"], { stdout: "pipe", stderr: "pipe" });
+  expect(result.exitCode).toBe(2);
+  expect(result.stderr.toString()).toContain("Usage: jsmdcui --check FILE.md");
+});

package/tests/kitty-demo.md

@@ -0,0 +1,184 @@
+# Kitty scrolling test
+
+Prelude filler line 01
+Prelude filler line 02
+Prelude filler line 03
+Prelude filler line 04
+Prelude filler line 05
+Prelude filler line 06
+Prelude filler line 07
+Prelude filler line 08
+Prelude filler line 09
+Prelude filler line 10
+Prelude filler line 11
+Prelude filler line 12
+Prelude filler line 13
+Prelude filler line 14
+Prelude filler line 15
+Prelude filler line 16
+Prelude filler line 17
+Prelude filler line 18
+Prelude filler line 19
+Prelude filler line 20
+Prelude filler line 21
+Prelude filler line 22
+Prelude filler line 23
+Prelude filler line 24
+Prelude filler line 25
+Prelude filler line 26
+Prelude filler line 27
+Prelude filler line 28
+Prelude filler line 29
+Prelude filler line 30
+Prelude filler line 31
+Prelude filler line 32
+Prelude filler line 33
+Prelude filler line 34
+Prelude filler line 35
+Prelude filler line 36
+Prelude filler line 37
+Prelude filler line 38
+Prelude filler line 39
+Prelude filler line 40
+Prelude filler line 41
+Prelude filler line 42
+Prelude filler line 43
+Prelude filler line 44
+Prelude filler line 45
+Prelude filler line 46
+Prelude filler line 47
+Prelude filler line 48
+Prelude filler line 49
+Prelude filler line 50
+
+## Before image 01
+Content before the image, line 01.
+
+## Before image 02
+Content before the image, line 02.
+
+## Before image 03
+Content before the image, line 03.
+
+## Before image 04
+Content before the image, line 04.
+
+## Before image 05
+Content before the image, line 05.
+
+## Before image 06
+Content before the image, line 06.
+
+## Before image 07
+Content before the image, line 07.
+
+## Before image 08
+Content before the image, line 08.
+
+## Before image 09
+Content before the image, line 09.
+
+## Before image 10
+Content before the image, line 10.
+
+## Image anchor
+
+![img](../demo.resized.jpg)
+
+## After image 01
+Content after the image, line 01.
+
+## After image 02
+Content after the image, line 02.
+
+## After image 03
+Content after the image, line 03.
+
+## After image 04
+Content after the image, line 04.
+
+## After image 05
+Content after the image, line 05.
+
+## After image 06
+Content after the image, line 06.
+
+## After image 07
+Content after the image, line 07.
+
+## After image 08
+Content after the image, line 08.
+
+## After image 09
+Content after the image, line 09.
+
+## After image 10
+Content after the image, line 10.
+
+## After image 11
+Content after the image, line 11.
+
+## After image 12
+Content after the image, line 12.
+
+## After image 13
+Content after the image, line 13.
+
+## After image 14
+Content after the image, line 14.
+
+## After image 15
+Content after the image, line 15.
+
+![img](../demo.jpg)
+
+Epilogue filler line 01
+Epilogue filler line 02
+Epilogue filler line 03
+Epilogue filler line 04
+Epilogue filler line 05
+Epilogue filler line 06
+Epilogue filler line 07
+Epilogue filler line 08
+Epilogue filler line 09
+Epilogue filler line 10
+Epilogue filler line 11
+Epilogue filler line 12
+Epilogue filler line 13
+Epilogue filler line 14
+Epilogue filler line 15
+Epilogue filler line 16
+Epilogue filler line 17
+Epilogue filler line 18
+Epilogue filler line 19
+Epilogue filler line 20
+Epilogue filler line 21
+Epilogue filler line 22
+Epilogue filler line 23
+Epilogue filler line 24
+Epilogue filler line 25
+Epilogue filler line 26
+Epilogue filler line 27
+Epilogue filler line 28
+Epilogue filler line 29
+Epilogue filler line 30
+Epilogue filler line 31
+Epilogue filler line 32
+Epilogue filler line 33
+Epilogue filler line 34
+Epilogue filler line 35
+Epilogue filler line 36
+Epilogue filler line 37
+Epilogue filler line 38
+Epilogue filler line 39
+Epilogue filler line 40
+Epilogue filler line 41
+Epilogue filler line 42
+Epilogue filler line 43
+Epilogue filler line 44
+Epilogue filler line 45
+Epilogue filler line 46
+Epilogue filler line 47
+Epilogue filler line 48
+Epilogue filler line 49
+Epilogue filler line 50

package/tests/kitty-images.test.js

@@ -0,0 +1,147 @@
+import { expect, test } from "bun:test";
+import { mkdtemp, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { fitKittyImageToWidth, prepareKittyImages } from "../src/cui/kitty-images.mjs";
+import { Screen } from "../src/screen/screen.js";
+
+const ONE_PIXEL_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+  "base64",
+);
+
+test("Bun-rendered Markdown image links reserve rows and retain Kitty data", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-kitty-"));
+  const markdownPath = join(dir, "app.md");
+  await writeFile(join(dir, "pixel.png"), ONE_PIXEL_PNG);
+  const ansi = Bun.markdown.ansi("before\n\n![pixel](pixel.png)\n\nafter\n", {
+    hyperlinks: true,
+    columns: 40,
+  });
+  const result = await prepareKittyImages(ansi, markdownPath, 40);
+
+  expect(result.images).toHaveLength(1);
+  expect(result.images[0]).toMatchObject({ mime: "image/png", cols: 1, rows: 1 });
+  expect(result.images[0].data.equals(ONE_PIXEL_PNG)).toBe(true);
+  expect(Bun.stripANSI(result.rendered)).toContain("📷 pixel");
+});
+
+test("remote Kitty images require allowUrl and use the configured HTTP byte fetcher", async () => {
+  const imageUrl = "https://example.test/assets/pixel.png";
+  const ansi = Bun.markdown.ansi(`![pixel](${imageUrl})`, {
+    hyperlinks: true,
+    columns: 40,
+  });
+  const requests = [];
+  const fetchHttpBytes = async (url) => {
+    requests.push(url);
+    return ONE_PIXEL_PNG;
+  };
+
+  const blocked = await prepareKittyImages(ansi, "/tmp/app.md", 40, { fetchHttpBytes });
+  expect(blocked.images).toHaveLength(0);
+  expect(requests).toHaveLength(0);
+
+  const allowed = await prepareKittyImages(ansi, "/tmp/app.md", 40, {
+    allowUrl: true,
+    fetchHttpBytes,
+  });
+  expect(requests).toEqual([imageUrl]);
+  expect(allowed.images).toHaveLength(1);
+  expect(allowed.images[0].path).toBe(imageUrl);
+});
+
+test("remote Markdown resolves relative Kitty image URLs against its source URL", async () => {
+  const ansi = Bun.markdown.ansi("![pixel](../images/pixel.png?size=1)", {
+    hyperlinks: true,
+    columns: 40,
+  });
+  const requests = [];
+  const result = await prepareKittyImages(
+    ansi,
+    "https://example.test/docs/guide/app.md",
+    40,
+    {
+      allowUrl: true,
+      fetchHttpBytes: async (url) => {
+        requests.push(url);
+        return ONE_PIXEL_PNG;
+      },
+    },
+  );
+
+  expect(requests).toEqual(["https://example.test/docs/images/pixel.png?size=1"]);
+  expect(result.images).toHaveLength(1);
+});
+
+test("Kitty image sizing subtracts the gutter width without depending on remaining rows", () => {
+  // A 100-column pane with a 5-column gutter has 95 usable image columns.
+  expect(fitKittyImageToWidth({ cols: 100, rows: 40 }, 95)).toEqual({ cols: 95, rows: 38 });
+  expect(fitKittyImageToWidth({ cols: 62, rows: 21 }, 95)).toEqual({ cols: 62, rows: 21 });
+  expect(fitKittyImageToWidth({ cols: 62, rows: 21 }, 40)).toEqual({ cols: 40, rows: 14 });
+});
+
+test("Screen emits chunked Kitty placement at the requested cell and deletes only its IDs", () => {
+  const screen = new Screen({ mouse: false, kittyMode: "extended" });
+  const writes = [];
+  screen.write = (value) => writes.push(String(value));
+  screen.setKittyImages([{
+    id: 77,
+    x: 3,
+    y: 4,
+    cols: 5,
+    rows: 2,
+    sourceX: 0,
+    sourceY: 0,
+    sourceWidth: 1,
+    sourceHeight: 1,
+    mime: "image/png",
+    data: ONE_PIXEL_PNG,
+  }]);
+  screen.Show();
+  const first = writes.join("");
+  expect(first).toContain("\x1b[5;4H");
+  expect(first).toContain("\x1b_Ga=T,f=100,t=d,i=77,p=77,q=2,x=0,y=0,w=1,h=1,c=5,r=2,C=1,U=image/png,m=0;");
+
+  writes.length = 0;
+  screen.setKittyImages([]);
+  screen.Show();
+  expect(writes.join("")).toContain("\x1b_Ga=d,d=i,i=77,q=2;");
+  expect(writes.join("")).not.toContain("d=a");
+
+  writes.length = 0;
+  screen.setKittyImages([{
+    id: 77, x: 3, y: 2, cols: 5, rows: 2,
+    sourceX: 0, sourceY: 0, sourceWidth: 1, sourceHeight: 1,
+    mime: "image/png", data: ONE_PIXEL_PNG,
+  }]);
+  screen.Show();
+  const replaced = writes.join("");
+  expect(replaced).toContain("\x1b_Ga=p,i=77,p=77,q=2,x=0,y=0,w=1,h=1,c=5,r=2,C=1,U=image/png;");
+  expect(replaced).not.toContain("a=T");
+  expect(replaced).not.toContain(ONE_PIXEL_PNG.toString("base64"));
+});
+
+test("Screen gates Kitty output by mode and compat mode omits the MIME U extension", () => {
+  const image = {
+    id: 88, x: 0, y: 0, cols: 1, rows: 1,
+    sourceX: 0, sourceY: 0, sourceWidth: 1, sourceHeight: 1,
+    mime: "image/jpeg", data: ONE_PIXEL_PNG,
+  };
+
+  const off = new Screen({ mouse: false });
+  const offWrites = [];
+  off.write = (value) => offWrites.push(String(value));
+  off.setKittyImages([image]);
+  off.Show();
+  expect(offWrites.join("")).not.toContain("\x1b_G");
+
+  const compat = new Screen({ mouse: false, kittyMode: "compat" });
+  const compatWrites = [];
+  compat.write = (value) => compatWrites.push(String(value));
+  compat.setKittyImages([image]);
+  compat.Show();
+  const output = compatWrites.join("");
+  expect(output).toContain("\x1b_Ga=T");
+  expect(output).not.toContain("U=image/jpeg");
+});

package/tests/task-checkbox.test.js

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test";
+import {
+  toggleTaskCheckboxBeforeColumn,
+  updateAnsiTaskCheckbox,
+} from "../src/cui/task-checkbox.mjs";
+
+test("task checkbox toggle reports its position and new checked state", () => {
+  expect(toggleTaskCheckboxBeforeColumn("  ☐ todo", 4)).toEqual({
+    line: "  ☒ todo",
+    toggled: true,
+    checkboxAt: 2,
+    checked: true,
+  });
+  expect(toggleTaskCheckboxBeforeColumn("  ☒ todo", 4)).toEqual({
+    line: "  ☐ todo",
+    toggled: true,
+    checkboxAt: 2,
+    checked: false,
+  });
+});
+
+test("task checkbox toggle updates Bun Markdown ANSI color with the glyph", () => {
+  const unchecked = "  \x1b[2m☐ \x1b[0mtodo";
+  const checked = "  \x1b[32m☒ \x1b[0mtodo";
+  expect(updateAnsiTaskCheckbox(unchecked, 2, true)).toBe(checked);
+  expect(updateAnsiTaskCheckbox(checked, 2, false)).toBe(unchecked);
+});
+
+test("ANSI checkbox lookup ignores OSC 8 hyperlink metadata", () => {
+  const prefix = "\x1b]8;;https://example.test\x1b\\link\x1b]8;;\x1b\\ ";
+  expect(updateAnsiTaskCheckbox(`${prefix}\x1b[2m☐ \x1b[0mtodo`, 5, true))
+    .toBe(`${prefix}\x1b[32m☒ \x1b[0mtodo`);
+});

package/tests/wui-responsive-images.test.js

@@ -0,0 +1,35 @@
+import { afterEach, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createWui } from "../runmd.mjs";
+
+const temporaryDirectories = [];
+
+afterEach(() => {
+  for (const directory of temporaryDirectories.splice(0)) {
+    rmSync(directory, { recursive: true, force: true });
+  }
+});
+
+test("createWui constrains images to their content width", async () => {
+  const directory = mkdtempSync(join(tmpdir(), "jsmdcui-wui-image-"));
+  temporaryDirectories.push(directory);
+  const markdownPath = join(directory, "image.md");
+  const html = await createWui("![wide](wide.png)", markdownPath);
+
+  expect(html).toContain("img {\n  max-width: 100%;\n  height: auto;\n}");
+  expect(html.match(/max-width: 100%/g)).toHaveLength(1);
+  expect(html.match(/image\.md\.front\.js/g)).toHaveLength(1);
+});
+
+test("createWui injects the image rule into an existing document head", async () => {
+  const directory = mkdtempSync(join(tmpdir(), "jsmdcui-wui-document-"));
+  temporaryDirectories.push(directory);
+  const markdownPath = join(directory, "document.md");
+  const source = "<!doctype html><html><head><title>x</title></head><body><img src=\"wide.png\"></body></html>";
+  const html = await createWui(source, markdownPath);
+
+  expect(html.indexOf("max-width: 100%")).toBeLessThan(html.indexOf("</head>"));
+  expect(html.match(/document\.md\.front\.js/g)).toHaveLength(1);
+});

package/tests/wui.test.js

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { readMarkdownInput } from "../runmd.mjs";
+
+test("WUI writes the bundled testapp.md when it is missing", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-wui-"));
+  const mdpath = join(dir, "testapp.md");
+  try {
+    const source = await readMarkdownInput(mdpath);
+    expect(source).toContain("# jsmdcui");
+    expect(await readFile(mdpath, "utf8")).toBe(source);
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("WUI preserves an existing testapp.md", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-wui-existing-"));
+  const mdpath = join(dir, "testapp.md");
+  const existing = "# Keep my WUI demo\n";
+  try {
+    await writeFile(mdpath, existing);
+    expect(await readMarkdownInput(mdpath)).toBe(existing);
+    expect(await readFile(mdpath, "utf8")).toBe(existing);
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});

package/tui

@@ -1,5 +1,7 @@
 #!/bin/sh
 
-sd=$(dirname "$(realpath "$0")")
+':' //; sd=$(dirname "$(realpath "$0")")
 
-exec bun "$sd"/src/index.js "$@"
+':' //; exec bun "$sd"/src/index.js "$@"
+
+await import('./src/index.js')

package/wui

@@ -1,5 +1,9 @@
 #!/bin/sh
 
-sd=$(dirname "$(realpath "$0")")
+':' //; sd=$(dirname "$(realpath "$0")")
 
-exec bun "$sd"/src/index.js --wui "$@"
+':' //; exec bun "$sd"/src/index.js --wui "$@"
+
+process.argv.splice(2,0,'--wui')
+
+await import('./src/index.js')