jsmdcui 0.6.3 → 0.8.0

package/src/cui/kitty-images.mjs

@@ -0,0 +1,200 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { logKittyPlacement } from "./kitty-debug.mjs";
+import { fetchHttpBytes as defaultFetchHttpBytes } from "../platform/commands.js";
+
+const PNG = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+function imageSize(buffer) {
+  if (buffer.length >= 24 && buffer.subarray(0, 8).equals(PNG)) {
+    return { mime: "image/png", width: buffer.readUInt32BE(16), height: buffer.readUInt32BE(20) };
+  }
+  const gif = buffer.toString("ascii", 0, 6);
+  if (buffer.length >= 10 && (gif === "GIF87a" || gif === "GIF89a")) {
+    return { mime: "image/gif", width: buffer.readUInt16LE(6), height: buffer.readUInt16LE(8) };
+  }
+  if (buffer.length >= 26 && buffer.toString("ascii", 0, 2) === "BM") {
+    return { mime: "image/bmp", width: Math.abs(buffer.readInt32LE(18)), height: Math.abs(buffer.readInt32LE(22)) };
+  }
+  if (buffer.length >= 16 && buffer.toString("ascii", 0, 4) === "RIFF" && buffer.toString("ascii", 8, 12) === "WEBP") {
+    const kind = buffer.toString("ascii", 12, 16);
+    if (kind === "VP8 " && buffer.length >= 30) {
+      return {
+        mime: "image/webp",
+        width: buffer.readUInt16LE(26) & 0x3fff,
+        height: buffer.readUInt16LE(28) & 0x3fff,
+      };
+    }
+    if (kind === "VP8L" && buffer.length >= 25) {
+      const bits = buffer[21] | (buffer[22] << 8) | (buffer[23] << 16) | (buffer[24] << 24);
+      return {
+        mime: "image/webp",
+        width: (bits & 0x3fff) + 1,
+        height: ((bits >> 14) & 0x3fff) + 1,
+      };
+    }
+    if (kind === "VP8X" && buffer.length >= 30) {
+      return {
+        mime: "image/webp",
+        width: 1 + buffer.readUIntLE(24, 3),
+        height: 1 + buffer.readUIntLE(27, 3),
+      };
+    }
+  }
+  if (buffer.length >= 4 && buffer[0] === 0xff && buffer[1] === 0xd8) {
+    let offset = 2;
+    while (offset + 8 < buffer.length) {
+      if (buffer[offset] !== 0xff) { offset++; continue; }
+      const marker = buffer[offset + 1];
+      offset += 2;
+      if (marker === 0xd8 || marker === 0xd9 || (marker >= 0xd0 && marker <= 0xd7)) continue;
+      if (offset + 2 > buffer.length) break;
+      const length = buffer.readUInt16BE(offset);
+      if (length < 2 || offset + length > buffer.length) break;
+      const sof = (marker >= 0xc0 && marker <= 0xc3) ||
+        (marker >= 0xc5 && marker <= 0xc7) ||
+        (marker >= 0xc9 && marker <= 0xcb) ||
+        (marker >= 0xcd && marker <= 0xcf);
+      if (sof && length >= 7) {
+        return { mime: "image/jpeg", width: buffer.readUInt16BE(offset + 5), height: buffer.readUInt16BE(offset + 3) };
+      }
+      offset += length;
+    }
+  }
+  const svg = buffer.subarray(0, Math.min(buffer.length, 8192)).toString("utf8");
+  if (svg.includes("<svg")) {
+    const width = svg.match(/\bwidth=["']([0-9.]+)(?:px)?["']/i);
+    const height = svg.match(/\bheight=["']([0-9.]+)(?:px)?["']/i);
+    if (width && height) {
+      return { mime: "image/svg+xml", width: Math.round(Number(width[1])), height: Math.round(Number(height[1])) };
+    }
+    const viewBox = svg.match(/\bviewBox=["'][^"']*?([0-9.]+)[ ,]+([0-9.]+)\s*["']/i);
+    if (viewBox) {
+      return { mime: "image/svg+xml", width: Math.round(Number(viewBox[1])), height: Math.round(Number(viewBox[2])) };
+    }
+  }
+  return null;
+}
+
+function isHttpUrl(value) {
+  return /^https?:\/\//i.test(String(value ?? ""));
+}
+
+function imageSource(href, markdownPath, allowUrl) {
+  try {
+    if (href.startsWith("file:")) return { kind: "local", value: fileURLToPath(href) };
+    if (process.platform === "win32" && /^[A-Za-z]:[\\/]/.test(href)) {
+      return { kind: "local", value: resolve(href) };
+    }
+    if (isHttpUrl(href)) {
+      return allowUrl ? { kind: "remote", value: new URL(href).href } : null;
+    }
+    if (href.startsWith("//")) {
+      if (!allowUrl) return null;
+      const protocol = isHttpUrl(markdownPath) ? new URL(markdownPath).protocol : "https:";
+      return { kind: "remote", value: new URL(`${protocol}${href}`).href };
+    }
+    if (/^[A-Za-z][A-Za-z\d+.-]*:/.test(href)) return null;
+    if (isHttpUrl(markdownPath)) {
+      return allowUrl ? { kind: "remote", value: new URL(href, markdownPath).href } : null;
+    }
+    const decoded = decodeURIComponent(href.replace(/[?#].*$/, ""));
+    return {
+      kind: "local",
+      value: resolve(markdownPath ? dirname(markdownPath) : process.cwd(), decoded),
+    };
+  } catch {
+    return null;
+  }
+}
+
+function stableImageId(pathname, line, data) {
+  let hash = 2166136261;
+  for (const byte of Buffer.concat([Buffer.from(`${pathname}\0${line}\0`), data])) {
+    hash ^= byte;
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) % 2147483646 + 1;
+}
+
+async function convertToKittyPng(data) {
+  return Buffer.from(await new Bun.Image(data).png().toBuffer());
+}
+
+export function fitKittyImageToWidth(image, maxCols) {
+  const originalCols = Math.max(1, Math.trunc(Number(image?.cols) || 1));
+  const originalRows = Math.max(1, Math.trunc(Number(image?.rows) || 1));
+  const availableCols = Math.max(1, Math.trunc(Number(maxCols) || 1));
+  const cols = Math.min(originalCols, availableCols);
+  const rows = Math.max(1, Math.round(originalRows * cols / originalCols));
+  return { cols, rows };
+}
+
+export async function prepareKittyImages(ansiText, markdownPath, terminalCols = 80, options = {}) {
+  const inputLines = String(ansiText).split("\n");
+  const outputLines = [];
+  const images = [];
+  const maxCols = Math.max(1, Math.trunc(Number(terminalCols) || 80));
+  const oscImage = /\x1b\]8;;([^\x1b]*)\x1b\\(?=[^\n]*📷)/;
+
+  for (let sourceLine = 0; sourceLine < inputLines.length; sourceLine++) {
+    const line = inputLines[sourceLine];
+    const match = line.match(oscImage);
+    const source = match ? imageSource(match[1], markdownPath, options.allowUrl === true) : null;
+    if (!source) {
+      outputLines.push(line);
+      continue;
+    }
+    try {
+      let data;
+      if (source.kind === "remote") {
+        const fetchBytes = options.fetchHttpBytes ?? defaultFetchHttpBytes;
+        data = Buffer.from(await fetchBytes(source.value));
+      } else {
+        const file = Bun.file(source.value);
+        if (!(await file.exists())) throw new Error("missing image");
+        data = Buffer.from(await file.arrayBuffer());
+      }
+      let size = imageSize(data);
+      if (!size?.width || !size?.height) throw new Error("unsupported image");
+      if (options.kittyMode === "compat" && size.mime !== "image/png") {
+        data = await convertToKittyPng(data);
+        size = imageSize(data);
+        if (size?.mime !== "image/png" || !size.width || !size.height)
+          throw new Error("PNG conversion failed");
+      }
+      const estimatedCols = Math.max(1, Math.round(size.width / 8));
+      const cols = Math.min(maxCols, estimatedCols);
+      const rows = Math.max(1, Math.round((cols * size.height) / size.width / 2));
+      const lineIndex = outputLines.length;
+      outputLines.push(line, ...Array(Math.max(0, rows - 1)).fill(""));
+      images.push({
+        id: stableImageId(source.value, sourceLine, data),
+        line: lineIndex,
+        cols,
+        rows,
+        pixelWidth: size.width,
+        pixelHeight: size.height,
+        mime: size.mime,
+        data,
+        path: source.value,
+      });
+      logKittyPlacement("image-prepared", {
+        path: source.value,
+        sourceKind: source.kind,
+        sourceLine,
+        renderedLine: lineIndex,
+        imageId: images.at(-1).id,
+        intrinsicWidth: size.width,
+        intrinsicHeight: size.height,
+        cols,
+        rows,
+        terminalCols: maxCols + 1,
+      });
+    } catch {
+      // An unavailable or unsupported image remains the normal Markdown link.
+      outputLines.push(line);
+    }
+  }
+  return { rendered: outputLines.join("\n"), images };
+}

package/src/cui/rpc.mjs

@@ -71,16 +71,13 @@ function isWebHeading(element)
   return /^h[1-6]$/i.test(String(element?.tagName ?? ""));
 }
 
-function firstHeadingTaskList(heading)
+function firstHeadingList(heading)
 {
   for (let sibling = heading?.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
     if (isWebHeading(sibling) || String(sibling.tagName ?? "").toLowerCase() === "section")
       break;
-    const task = sibling.matches?.("li.task-list-item")
-      ? sibling
-      : sibling.querySelector?.("li.task-list-item");
-    if (!task) continue;
-    const list = task.closest?.("ul, ol");
+    if (sibling.matches?.("ul, ol")) return sibling;
+    const list = sibling.querySelector?.("ul, ol");
     if (list) return list;
   }
   return null;
@@ -109,7 +106,7 @@ function webTaskItemValue(item, checkbox)
 function webHeadingValue(heading)
 {
   const single = String(heading?.id ?? "").startsWith("select");
-  const list = firstHeadingTaskList(heading);
+  const list = firstHeadingList(heading);
   if (!list) return single ? null : [];
 
   const selected = [];
@@ -124,6 +121,114 @@ function webHeadingValue(heading)
   return single ? null : selected;
 }
 
+function directWebTaskItems(list)
+{
+  const items = [];
+  for (const item of list?.children ?? []) {
+    if (!item.matches?.("li.task-list-item")) continue;
+    if (directTaskCheckbox(item)) items.push(item);
+  }
+  return items;
+}
+
+function webTaskItemSnapshot(item)
+{
+  const checkbox = directTaskCheckbox(item);
+  return {
+    value: webTaskItemValue(item, checkbox),
+    checked: Boolean(checkbox?.checked),
+  };
+}
+
+function normalizedTaskItem(input)
+{
+  if (input && typeof input === "object") {
+    return {
+      value: String(input.value ?? input.label ?? "").replace(/\r?\n/g, " "),
+      checked: Boolean(input.checked),
+    };
+  }
+  return {
+    value: String(input ?? "").replace(/\r?\n/g, " "),
+    checked: false,
+  };
+}
+
+function normalizedSpliceRange(length, argumentCount, start, deleteCount)
+{
+  if (argumentCount === 0) return { start: 0, deleteCount: 0 };
+  let relativeStart = Number(start);
+  if (Number.isNaN(relativeStart)) relativeStart = 0;
+  relativeStart = Math.trunc(relativeStart);
+  const actualStart = relativeStart < 0
+    ? Math.max(length + relativeStart, 0)
+    : Math.min(relativeStart, length);
+  if (argumentCount === 1) return { start: actualStart, deleteCount: length - actualStart };
+  let requestedDelete = Number(deleteCount);
+  if (Number.isNaN(requestedDelete)) requestedDelete = 0;
+  requestedDelete = Math.max(0, Math.trunc(requestedDelete));
+  return {
+    start: actualStart,
+    deleteCount: Math.min(requestedDelete, length - actualStart),
+  };
+}
+
+function appendWebTaskItem(list, input, before = null)
+{
+  const documentObject = list?.ownerDocument;
+  if (!documentObject?.createElement || !documentObject?.createTextNode) return false;
+
+  const itemValue = normalizedTaskItem(input);
+  const item = documentObject.createElement("li");
+  item.classList?.add("task-list-item");
+  const label = documentObject.createElement("label");
+  const checkbox = documentObject.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.classList?.add("task-list-item-checkbox");
+  checkbox.checked = itemValue.checked;
+  label.append(checkbox, documentObject.createTextNode(itemValue.value));
+  item.append(label);
+  list.insertBefore(item, before);
+  return true;
+}
+
+function mutateWebHeadingList(heading, method, args)
+{
+  const list = firstHeadingList(heading);
+  if (!list) {
+    if (method === "push" || method === "unshift") return 0;
+    if (method === "splice") return [];
+    return undefined;
+  }
+
+  const items = directWebTaskItems(list);
+  if (method === "splice") {
+    const range = normalizedSpliceRange(items.length, args.length, args[0], args[1]);
+    const removed = items
+      .slice(range.start, range.start + range.deleteCount)
+      .map((item) => webTaskItemValue(item, directTaskCheckbox(item)));
+    const before = items[range.start] ?? null;
+    for (const input of args.slice(2)) appendWebTaskItem(list, input, before);
+    for (const item of items.slice(range.start, range.start + range.deleteCount)) item.remove?.();
+    return removed;
+  }
+  if (method === "pop" || method === "shift") {
+    const item = method === "pop" ? items.at(-1) : items[0];
+    if (!item) return undefined;
+    const value = webTaskItemValue(item, directTaskCheckbox(item));
+    item.remove?.();
+    return value;
+  }
+
+  if (method === "push") {
+    for (const input of args) appendWebTaskItem(list, input);
+  } else {
+    const before = items[0] ?? list.firstChild ?? null;
+    for (const input of args) appendWebTaskItem(list, input, before);
+  }
+  return directWebTaskItems(list).length;
+}
+
 function resizeWebTextarea(element)
 {
   if (!element || String(element.tagName ?? "").toLowerCase() !== "textarea") return;
@@ -194,6 +299,57 @@ export function createWebDollar(documentObject = globalThis.document)
           return args.length > 0 ? selection : "";
         }
       },
+      push(...items) {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          return isWebHeading(element) ? mutateWebHeadingList(element, "push", items) : 0;
+        } catch {
+          return 0;
+        }
+      },
+      pop() {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          return isWebHeading(element) ? mutateWebHeadingList(element, "pop", []) : undefined;
+        } catch {
+          return undefined;
+        }
+      },
+      shift() {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          return isWebHeading(element) ? mutateWebHeadingList(element, "shift", []) : undefined;
+        } catch {
+          return undefined;
+        }
+      },
+      unshift(...items) {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          return isWebHeading(element) ? mutateWebHeadingList(element, "unshift", items) : 0;
+        } catch {
+          return 0;
+        }
+      },
+      splice(...args) {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          return isWebHeading(element) ? mutateWebHeadingList(element, "splice", args) : [];
+        } catch {
+          return [];
+        }
+      },
+      slice(...args) {
+        try {
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          if (!isWebHeading(element)) return [];
+          const list = firstHeadingList(element);
+          if (!list) return [];
+          return directWebTaskItems(list).map(webTaskItemSnapshot).slice(...args);
+        } catch {
+          return [];
+        }
+      },
     };
     return selection;
   };
@@ -295,15 +451,18 @@ function safeFrontValue(value)
   };
 }
 
-export async function evalFront(mod, text) 
+export async function evalFront(mod, text, scope = {})
 {
 try{
 
     text = text.replace(/^javascript:/, "");
 
-    const entries = Object.entries(mod).filter(([name]) => name !== "$");
+    const entryMap = new Map(Object.entries(mod).filter(([name]) => name !== "$"));
     if (typeof globalThis.$ === "function")
-      entries.push(["$", globalThis.$]);
+      entryMap.set("$", globalThis.$);
+    for (const [name, value] of Object.entries(scope))
+      entryMap.set(name, value);
+    const entries = [...entryMap];
     const names = entries.map(([name]) => name);
     const values = entries.map(([, value]) => safeFrontValue(value));
 

package/src/cui/server.mjs

@@ -50,7 +50,7 @@ export function main()
 
 const basePath = "/" + crypto.randomUUID()
 const pathname = basePath + "/"
-const server = Bun.serve({
+const serverOptions = {
   port: Number(process.env.PORT || 3000),
   development: {
     hmr: true,
@@ -101,9 +101,20 @@ const server = Bun.serve({
   fetch() {
     return new Response("Not Found", { status: 404 });
   },
-});
+};
+
+let server;
+try {
+  server = Bun.serve(serverOptions);
+} catch (error) {
+  const addressInUse = error?.code === "EADDRINUSE"
+    || error?.cause?.code === "EADDRINUSE"
+    || /EADDRINUSE|address already in use/i.test(String(error?.message || error));
+  if (serverOptions.port !== 3000 || !addressInUse) throw error;
+  server = Bun.serve({ ...serverOptions, port: 0 });
+}
 
-console.log(mda("- Bun RPC server listening on"));
+console.error(mda("- Bun RPC server listening on"));
 console.log(`http://localhost:${server.port}${pathname}`);
 
 

package/src/cui/task-checkbox.mjs

@@ -12,5 +12,49 @@ export function toggleTaskCheckboxBeforeColumn(line, column) {
   return {
     line: text.slice(0, checkboxAt) + replacement + text.slice(checkboxAt + 1),
     toggled: true,
+    checkboxAt,
+    checked: replacement === "☒",
   };
 }
+
+export function updateAnsiTaskCheckbox(ansiLine, checkboxAt, checked) {
+  const input = String(ansiLine ?? "");
+  const target = checked ? "☒" : "☐";
+  const sgr = `\x1b[${checked ? "32" : "2"}m`;
+  let plainIndex = 0;
+
+  for (let i = 0; i < input.length;) {
+    if (input[i] === "\x1b" && input[i + 1] === "[") {
+      let end = i + 2;
+      while (end < input.length) {
+        const code = input.charCodeAt(end);
+        if (code >= 0x40 && code <= 0x7e) { end++; break; }
+        end++;
+      }
+      i = end;
+      continue;
+    }
+    if (input[i] === "\x1b" && input[i + 1] === "]") {
+      const bel = input.indexOf("\x07", i + 2);
+      const st = input.indexOf("\x1b\\", i + 2);
+      if (bel < 0 && st < 0) break;
+      i = bel >= 0 && (st < 0 || bel < st) ? bel + 1 : st + 2;
+      continue;
+    }
+
+    const codePoint = input.codePointAt(i);
+    const charLength = codePoint > 0xffff ? 2 : 1;
+    if (plainIndex === checkboxAt && (input[i] === "☐" || input[i] === "☒")) {
+      const prefix = input.slice(0, i);
+      const immediateSgr = prefix.match(/\x1b\[[0-9;]*m$/);
+      const beforeStyle = immediateSgr
+        ? prefix.slice(0, prefix.length - immediateSgr[0].length) + sgr
+        : prefix;
+      return beforeStyle + target + input.slice(i + charLength);
+    }
+    plainIndex += charLength;
+    i += charLength;
+  }
+
+  return input;
+}