jsmdcui 0.6.3 → 0.8.0

package/src/index.js

@@ -93,20 +93,23 @@ function printProfileReport() {
 }
 
 import child_process from "node:child_process"
-import { accessSync, constants, existsSync, readdirSync, statSync, unlinkSync } from "node:fs";
+import { accessSync, closeSync, constants, existsSync, openSync, readSync, readdirSync, statSync, unlinkSync } from "node:fs";
 import { mkdir } from "node:fs/promises";
 import { dirname, basename, join, resolve, sep } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import process from "node:process";
-import { toggleTaskCheckboxBeforeColumn } from "./cui/task-checkbox.mjs";
+import { toggleTaskCheckboxBeforeColumn, updateAnsiTaskCheckbox } from "./cui/task-checkbox.mjs";
+import { fenceEventMap, inlineFenceEventCode } from "./cui/fence-events.mjs";
 import { checkMarkdownIdCollisions, formatMarkdownIdCheckAnsi } from "./cui/id-collision.mjs";
+import { fitKittyImageToWidth, prepareKittyImages } from "./cui/kitty-images.mjs";
+import { logKittyPlacement } from "./cui/kitty-debug.mjs";
 import { Config } from "./config/config.js";
 import { defaultAllSettings, OPTION_CHOICES, LOCAL_SETTINGS } from "./config/defaults.js";
 import { cleanConfig } from "./config/clean.js";
 import { RuntimeRegistry, RTColorscheme, RTHelp } from "./runtime/registry.js";
-import { assetPath, hasInternalAssets, listInternalAssetDirs, readInternalAssetText } from "./runtime/assets.js";
+import { assetPath, hasInternalAssets, listInternalAssetDirs, listInternalAssetPaths, readInternalAssetText } from "./runtime/assets.js";
 //import { PluginManager } from "./plugins/manager.js";
-import { JsPluginManager, buildMicroGlobal, runAction, listActions } from "./plugins/js-bridge.js";
+import { JsPluginManager, buildMicroGlobal, buildTuiBlockIndex, findTuiBlockInIndex, insertTuiTextareaNewline, mergeTuiTextareaBackward, mergeTuiTextareaForward, runAction, listActions } from "./plugins/js-bridge.js";
 import { Colorscheme } from "./config/colorscheme.js";
 import { detectSyntax, loadSyntaxDefinitions } from "./highlight/parser.js";
 import { Highlighter } from "./highlight/highlighter.js";
@@ -115,10 +118,15 @@ import { Screen } from "./screen/screen.js";
 import { VT100 } from "./screen/vt100.js";
 import { ClipboardManager, probeOSC52, osc52Clipboard } from "./platform/clipboard.js";
 import { platformId, run as runCommand, runSync, fetchHttpBytes, detectHttpBackend } from "./platform/commands.js";
+import { controllingTerminalInputPath } from "./platform/terminal.js";
 import { shellSplit } from "./shell/shell.js";
 import { styleToAnsi } from "./display/ansi-style.js";
 import { encodeBinaryToBuffer, decodeBinaryBytes } from "./buffer/fixed3-codec.js";
 import { writeBackup, removeBackup, applyBackup } from "./buffer/backup.js";
+
+let kittyImageMode = "off";
+let allowRemoteKittyImages = false;
+const remoteMarkdownSources = new Map();
 import { isHex3Encoding, isMdcuiEncoding } from "./runtime/encodings.js";
 import { createInterface } from "node:readline/promises";
 
@@ -313,7 +321,12 @@ async function readTextFileWithEncoding(path, encoding = "utf-8", inferMdcui = t
 
 async function fetchTextWithEncoding(url, encoding = "utf-8", inferMdcui = true) {
   const bytes = await fetchHttpBytes(url);
-  return decodeAndRenderTextBytes(new Uint8Array(bytes), encodingForPath(url, encoding, inferMdcui));
+  return decodeAndRenderTextBytes(
+    new Uint8Array(bytes),
+    encodingForPath(url, encoding, inferMdcui),
+    process.stdout.columns || 80,
+    url,
+  );
 }
 
 function normalizeEncodingLabel(encoding = "utf-8") {
@@ -337,20 +350,31 @@ async function decodeAndRenderTextBytes(bytes, encoding = "utf-8", width = proce
   const decoded = decodeTextBytesWithEncoding(bytes, encoding);
   if (!isMdcuiEncoding(decoded.encoding)) return decoded;
   const renderWidth = Math.max(1, Math.trunc(Number(width) || 80));
-  const { rendered, tuiSourceText } = await renderMdcui(decoded.text, renderWidth, mdpath);
+  const { rendered, tuiSourceText, images } = await renderMdcui(decoded.text, renderWidth, mdpath, mdpath);
   const styled = parseAnsiStyledText(rendered);
-  return { text: styled.text, encoding: "mdcui", sourceText: decoded.text, tuiSourceText, ansiText: rendered, ansiStyleLines: styled.styleLines, mdcuiRenderWidth: renderWidth };
+  return { text: styled.text, encoding: "mdcui", sourceText: decoded.text, tuiSourceText, ansiText: rendered, ansiStyleLines: styled.styleLines, mdcuiImages: images, mdcuiRenderWidth: renderWidth };
 }
 
-async function renderMdcui(markdown, width = process.stdout.columns || 80, mdpath = null) {
+async function renderMdcui(markdown, width = process.stdout.columns || 80, mdpath = null, imageBasePath = mdpath) {
   const runmd = await import("../runmd.mjs");
   let md = String(markdown);
   if (mdpath && !isHttpUrl(mdpath)) {
     md = await runmd.extractJs(md, mdpath);
     await runmd.createWui(md, mdpath);
   }
+  const tui = runmd.createTui(md, Math.max(1, Math.trunc(Number(width) || 80)));
+  const resolvedImageBasePath = mdpath && !isHttpUrl(mdpath)
+    ? remoteMarkdownSources.get(resolve(mdpath)) ?? imageBasePath
+    : imageBasePath;
+  const prepared = kittyImageMode === "off"
+    ? { rendered: tui, images: [] }
+    : await prepareKittyImages(tui, resolvedImageBasePath, width, {
+      allowUrl: allowRemoteKittyImages,
+      kittyMode: kittyImageMode,
+    });
   return {
-    rendered: runmd.createTui(md, Math.max(1, Math.trunc(Number(width) || 80))),
+    rendered: prepared.rendered,
+    images: prepared.images,
     tuiSourceText: md,
   };
 }
@@ -590,6 +614,12 @@ function resizeMdcuiTextBlock(buf, y, x) {
     ansiLines.splice(row, deleteCount, ...replacement);
     buf._mdcuiAnsiText = ansiLines.join("\n");
   }
+  if (Array.isArray(buf._mdcuiImages)) {
+    const delta = replacement.length - deleteCount;
+    buf._mdcuiImages = buf._mdcuiImages
+      .filter((image) => image.line < row || image.line >= row + deleteCount)
+      .map((image) => image.line >= row + deleteCount ? { ...image, line: image.line + delta } : image);
+  }
 
   if (insertAt >= 0) {
     if (buf.cursor.y >= insertAt) buf.cursor.y++;
@@ -641,6 +671,21 @@ function canEditMdcuiSelection(buf, selection) {
   return first.y === last.y && prefixLength > 0 && first.x >= prefixLength;
 }
 
+function mdcuiTextareaAtCursor(buf) {
+  if (!isMdcuiEncoding(buf?.encoding)) return null;
+  let cache = buf._mdcuiControlBlockIndex;
+  if (!cache || cache.lines !== buf.lines || cache.lineCount !== buf.lines.length) {
+    cache = {
+      lines: buf.lines,
+      lineCount: buf.lines.length,
+      blocks: buildTuiBlockIndex(buf.lines),
+    };
+    buf._mdcuiControlBlockIndex = cache;
+  }
+  const block = findTuiBlockInIndex(cache.blocks, buf.cursor.y);
+  return block?.header?.tag === "textarea" ? block : null;
+}
+
 function isEditLockedBuffer(buf) {
   return isMdcuiEncoding(buf?.encoding ?? buf?.Settings?.encoding);
 }
@@ -943,6 +988,100 @@ function takeDisplay(text, maxWidth) {
   return out;
 }
 
+function keyboardEventJson(event) {
+  const target = event?.target;
+  return {
+    type: String(event?.type ?? ""),
+    key: String(event?.key ?? ""),
+    code: String(event?.code ?? ""),
+    raw: String(event?.raw ?? ""),
+    ctrlKey: Boolean(event?.ctrlKey),
+    shiftKey: Boolean(event?.shiftKey),
+    altKey: Boolean(event?.altKey),
+    metaKey: Boolean(event?.metaKey),
+    repeat: Boolean(event?.repeat),
+    defaultPrevented: Boolean(event?.defaultPrevented),
+    target: {
+      id: String(target?.id ?? ""),
+      tagName: String(target?.tagName ?? ""),
+      className: String(target?.className ?? ""),
+      value: String(target?.value ?? ""),
+    },
+  };
+}
+
+function tuiKeyEventForFront(event, target, type) {
+  const sequence = String(event?.key ?? "");
+  const parts = sequence.split("-");
+  const aliases = {
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    backtab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    left: "ArrowLeft",
+    right: "ArrowRight",
+    up: "ArrowUp",
+    down: "ArrowDown",
+    home: "Home",
+    end: "End",
+    pageup: "PageUp",
+    pagedown: "PageDown",
+    space: " ",
+  };
+  let base = parts.at(-1) || sequence;
+  if (sequence === "backtab") base = "tab";
+  const raw = String(event?.raw ?? "");
+  const key = aliases[base] ?? (sequence === raw && [...raw].length === 1 ? raw : base);
+  let defaultPrevented = false;
+  let propagationStopped = false;
+  const result = {
+    type,
+    key,
+    raw,
+    ctrlKey: parts.includes("ctrl"),
+    altKey: parts.includes("alt"),
+    shiftKey: sequence === "backtab" || parts.includes("shift"),
+    metaKey: parts.includes("meta"),
+    repeat: false,
+    target,
+    currentTarget: target,
+    get defaultPrevented() { return defaultPrevented; },
+    get propagationStopped() { return propagationStopped; },
+    preventDefault() { defaultPrevented = true; },
+    stopPropagation() { propagationStopped = true; },
+  };
+  Object.defineProperty(result, "toJSON", {
+    configurable: true,
+    value() { return keyboardEventJson(this); },
+  });
+  return result;
+}
+
+function indexedMdcuiFenceBlockAtLine(buffer, lineIndex) {
+  const declarations = buffer?._mdcuiFenceEvents;
+  if (!isMdcuiEncoding(buffer?.encoding) || declarations?.size === 0) return null;
+  let cache = buffer._mdcuiFenceBlockIndex;
+  // Render/reopen replaces the lines array; structural selector edits explicitly
+  // clear this cache. Ordinary character edits leave block boundaries unchanged.
+  if (
+    !cache
+    || cache.lines !== buffer.lines
+    || cache.lineCount !== buffer.lines.length
+    || cache.declarations !== declarations
+  ) {
+    cache = {
+      lines: buffer.lines,
+      lineCount: buffer.lines.length,
+      declarations,
+      blocks: buildTuiBlockIndex(buffer.lines, declarations),
+    };
+    buffer._mdcuiFenceBlockIndex = cache;
+  }
+  return findTuiBlockInIndex(cache.blocks, lineIndex);
+}
+
 function parseArgs(argv) {
   const flags = {
     version: false,
@@ -955,10 +1094,8 @@ function parseArgs(argv) {
     exportReadme: false,
     changelog: false,
     testapp: false,
-    demo: false,
-    demoSelect: false,
-    demoImgtool: false,
-    demoImgtoolZh: false,
+    demoList: false,
+    demo: null,
     allowUrl: false,
     buildExe: false,
     buildFor: "",
@@ -968,6 +1105,7 @@ function parseArgs(argv) {
     plugin: "",
     cdpPort: 0,
     cdpAddress: "",
+    kittyMode: "off",
     settings: new Map(),
   };
   const files = [];
@@ -1000,11 +1138,25 @@ function parseArgs(argv) {
     else if (arg === "--export-readme") flags.exportReadme = true;
     else if (arg === "--changelog") flags.changelog = true;
     else if (arg === "--testapp.md") flags.testapp = true;
-    else if (arg === "--demo") flags.demo = true;
-    else if (arg === "--demo-select") flags.demoSelect = true;
-    else if (arg === "--demo-imgtool") flags.demoImgtool = true;
-    else if (arg === "--demo-imgtool-zh") flags.demoImgtoolZh = true;
+    else if (arg === "--demo-list") flags.demoList = true;
+    else if (arg === "--demo") {
+      flags.demo = { option: arg, filename: "testapp.md", asset: "testapp.md" };
+    }
+    else if (arg === "--demo-imgtool") {
+      flags.demo = { option: arg, filename: "image-processor.md", asset: "demos/image-processor.md" };
+    }
+    else if (arg === "--demo-imgtool-zh") {
+      flags.demo = { option: arg, filename: "image-processor.zh-TW.md", asset: "demos/image-processor.zh-TW.md" };
+    }
+    else if (arg.startsWith("--demo-")) {
+      const name = arg.slice("--demo-".length);
+      flags.demo = /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(name)
+        ? { option: arg, filename: `${name}.md`, asset: `demos/${name}.md` }
+        : { option: arg, error: "demo filename must contain only letters, numbers, dots, underscores, and hyphens" };
+    }
     else if (arg === "--allow-url") flags.allowUrl = true;
+    else if (arg === "--kitty") flags.kittyMode = "extended";
+    else if (arg === "--kitty-compat") flags.kittyMode = "compat";
     else if (arg === "--build-exe") flags.buildExe = true;
     else if (arg === "--build-for") flags.buildFor = argv[++i] ?? "";
     else if (arg === "-debug") flags.debug = true;
@@ -1056,6 +1208,10 @@ Modes:
   -encoding mdcui
       Render Markdown through runmd.mjs#createTui; .md files use this automatically
       Writes .front.js, .back.js, .html, -rpc.js, and -server.js beside the .md file
+  --kitty
+      Display Markdown images with Kitty graphics and the jsgotty MIME extension
+  --kitty-compat
+      Display Markdown images with Kitty graphics without the non-standard MIME U field
 
 Settings:
   -SETTING VALUE
@@ -1086,22 +1242,23 @@ Information:
 Demo:
   --testapp.md
       Write the bundled testapp.md to stdout & exit
+  --demo-list
+      List the bundled demos and their command-line options, then exit
   --demo
       Use the existing ./testapp.md without overwriting it, or write the bundled demo if missing
       Open it in the TUI and write 5 generated files beside it
-  --demo-select
-      Use the existing ./select.md without overwriting it, or write the bundled demo if missing
+  --demo-<filename>
+      Load demos/<filename>.md, preserving an existing ./<filename>.md or writing the bundled copy
       Open it in the TUI and write 5 generated files beside it
+      For example: --demo-select, --demo-todo, or --demo-todo-zh
   --demo-imgtool
-      Use the existing ./image-processor.md without overwriting it, or write the bundled demo if missing
-      Open the Bun.Image processor in the TUI and write 5 generated files beside it
+      Alias for --demo-image-processor
   --demo-imgtool-zh
-      Use the existing ./image-processor.zh-TW.md without overwriting it, or write the bundled demo if missing
-      Open the Traditional Chinese Bun.Image processor in the TUI and write 5 generated files beside it
+      Alias for --demo-image-processor.zh-TW
 
 Remote Markdown:
   --allow-url
-      Download HTTP(S) Markdown to cwd, write 5 generated files, and allow its code to run
+      Download HTTP(S) Markdown and, with Kitty mode, its HTTP(S) images; allow its code to run
 
 Experimental:
   --build-exe                   Build a Bun single-file executable and exit
@@ -1149,7 +1306,7 @@ class BufferModel {
   get searchPattern() { return this._searchPattern ?? ""; }
   set searchPattern(v) { this._searchPattern = v ?? ""; this.searchMatches?.clear(); }
 
-  constructor({ path = "", text = "", command = {}, type = "default", readonly = false, modTimeMs = null, encoding = DEFAULT_SETTINGS.encoding, ansiStyleLines = null, ansiText = null, sourceText = null, tuiSourceText = null, mdcuiRenderWidth = 0 } = {}) {
+  constructor({ path = "", text = "", command = {}, type = "default", readonly = false, modTimeMs = null, encoding = DEFAULT_SETTINGS.encoding, ansiStyleLines = null, ansiText = null, sourceText = null, tuiSourceText = null, mdcuiImages = null, mdcuiRenderWidth = 0 } = {}) {
     this.path = path;
     this.type = type;
     this.name = path ? basename(path) : "No name";
@@ -1162,6 +1319,8 @@ class BufferModel {
     this._mdcuiAnsiText = isMdcuiEncoding(this.encoding) ? String(ansiText ?? "") : null;
     this._mdcuiSourceText = isMdcuiEncoding(this.encoding) ? String(sourceText ?? text) : null;
     this._mdcuiTuiSourceText = isMdcuiEncoding(this.encoding) ? String(tuiSourceText ?? sourceText ?? text) : null;
+    this._mdcuiFenceEvents = isMdcuiEncoding(this.encoding) ? fenceEventMap(sourceText ?? tuiSourceText ?? text) : new Map();
+    this._mdcuiImages = isMdcuiEncoding(this.encoding) ? (mdcuiImages ?? []) : [];
     this._mdcuiRenderWidth = Math.trunc(Number(mdcuiRenderWidth) || 0);
     this.cursor = { x: 0, y: 0 };
     this.scroll = { x: 0, y: 0, row: 0 };
@@ -1262,6 +1421,7 @@ class BufferModel {
     let sourceText = null;
     let tuiSourceText = null;
     let mdcuiRenderWidth = 0;
+    let mdcuiImages = null;
     if (existsSync(path)) {
       const info = statSync(path);
       if (info.isDirectory()) throw new Error(`${path} is a directory`);
@@ -1275,9 +1435,10 @@ class BufferModel {
       sourceText = decoded.sourceText ?? null;
       tuiSourceText = decoded.tuiSourceText ?? null;
       mdcuiRenderWidth = decoded.mdcuiRenderWidth ?? 0;
+      mdcuiImages = decoded.mdcuiImages ?? null;
       if (isMdcuiEncoding(encoding)) readonly = true;
     }
-    const buffer = new BufferModel({ path, text, command, readonly, modTimeMs, encoding, ansiStyleLines, ansiText, sourceText, tuiSourceText, mdcuiRenderWidth });
+    const buffer = new BufferModel({ path, text, command, readonly, modTimeMs, encoding, ansiStyleLines, ansiText, sourceText, tuiSourceText, mdcuiImages, mdcuiRenderWidth });
     buffer._configDir = context?.config?.configDir ?? null;
     attachSyntax(buffer, context, path, text);
     return buffer;
@@ -1517,9 +1678,39 @@ class BufferModel {
     this.cursor.x = x;
   }
 
+  _historyState() {
+    return {
+      lines: this.lines.slice(),
+      cursor: { ...this.cursor },
+      serial: this._undoSerial,
+      ansiStyleLines: Array.isArray(this._ansiStyleLines)
+        ? this._ansiStyleLines.map((line) => Array.isArray(line) ? line.slice() : line)
+        : this._ansiStyleLines,
+      mdcuiAnsiText: this._mdcuiAnsiText,
+      mdcuiImages: Array.isArray(this._mdcuiImages)
+        ? this._mdcuiImages.map((image) => ({ ...image }))
+        : this._mdcuiImages,
+      headingTaskListAnchors: this._mdcuiHeadingTaskListAnchors instanceof Map
+        ? new Map([...this._mdcuiHeadingTaskListAnchors].map(([key, value]) => [key, { ...value }]))
+        : this._mdcuiHeadingTaskListAnchors,
+    };
+  }
+
+  _restoreHistoryState(state) {
+    this.lines = state.lines;
+    this.cursor = { ...state.cursor };
+    this._undoSerial = state.serial ?? 0;
+    this._ansiStyleLines = state.ansiStyleLines;
+    this._mdcuiAnsiText = state.mdcuiAnsiText;
+    this._mdcuiImages = state.mdcuiImages;
+    this._mdcuiHeadingTaskListAnchors = state.headingTaskListAnchors;
+    this._mdcuiFenceBlockIndex = null;
+    this._mdcuiControlBlockIndex = null;
+  }
+
   pushUndo(force = false) {
     if (!force && this.isEditLocked() && !canEditMdcuiAtCursor(this)) return;
-    this.undoStack.push({ lines: this.lines.slice(), cursor: { ...this.cursor }, serial: this._undoSerial });
+    this.undoStack.push(this._historyState());
     this._undoSerial = (this._undoSerial ?? 0) + 1;
     if (this.undoStack.length > 500) this.undoStack.shift();
     this.redoStack = [];
@@ -1528,12 +1719,10 @@ class BufferModel {
   undo() {
     if (this.isEditLocked() && !isMdcuiEncoding(this.encoding)) return false;
     if (!this.undoStack.length) return false;
-    this.redoStack.push({ lines: this.lines.slice(), cursor: { ...this.cursor }, serial: this._undoSerial });
+    this.redoStack.push(this._historyState());
     const s = this.undoStack.pop();
-    this.lines = s.lines;
+    this._restoreHistoryState(s);
     this.invalidateHighlightFrom(0, { force: true });
-    this.cursor = { ...s.cursor };
-    this._undoSerial = s.serial ?? 0;
     this.modified = this._undoSerial !== this._savedSerial;
     return true;
   }
@@ -1541,12 +1730,10 @@ class BufferModel {
   redo() {
     if (this.isEditLocked() && !isMdcuiEncoding(this.encoding)) return false;
     if (!this.redoStack.length) return false;
-    this.undoStack.push({ lines: this.lines.slice(), cursor: { ...this.cursor }, serial: this._undoSerial });
+    this.undoStack.push(this._historyState());
     const s = this.redoStack.pop();
-    this.lines = s.lines;
+    this._restoreHistoryState(s);
     this.invalidateHighlightFrom(0, { force: true });
-    this.cursor = { ...s.cursor };
-    this._undoSerial = s.serial ?? 0;
     this.modified = this._undoSerial !== this._savedSerial;
     return true;
   }
@@ -1677,7 +1864,9 @@ class BufferModel {
       this._mdcuiAnsiText = isMdcuiEncoding(this.encoding) ? String(decoded.ansiText ?? "") : null;
       this._mdcuiSourceText = isMdcuiEncoding(this.encoding) ? String(decoded.sourceText ?? text) : null;
       this._mdcuiTuiSourceText = isMdcuiEncoding(this.encoding) ? String(decoded.tuiSourceText ?? decoded.sourceText ?? text) : null;
+      this._mdcuiFenceEvents = isMdcuiEncoding(this.encoding) ? fenceEventMap(decoded.sourceText ?? decoded.tuiSourceText ?? text) : new Map();
       this._mdcuiRenderWidth = decoded.mdcuiRenderWidth ?? 0;
+      this._mdcuiImages = decoded.mdcuiImages ?? [];
       const readonly = isMdcuiEncoding(this.encoding);
       this.fileformat = detectFileFormat(text, this.Settings.fileformat ?? DEFAULT_SETTINGS.fileformat);
       this.Settings.fileformat = this.fileformat;
@@ -1709,7 +1898,9 @@ class BufferModel {
     this._mdcuiAnsiText = isMdcuiEncoding(this.encoding) ? String(decoded.ansiText ?? "") : null;
     this._mdcuiSourceText = isMdcuiEncoding(this.encoding) ? String(decoded.sourceText ?? text) : null;
     this._mdcuiTuiSourceText = isMdcuiEncoding(this.encoding) ? String(decoded.tuiSourceText ?? decoded.sourceText ?? text) : null;
+    this._mdcuiFenceEvents = isMdcuiEncoding(this.encoding) ? fenceEventMap(decoded.sourceText ?? decoded.tuiSourceText ?? text) : new Map();
     this._mdcuiRenderWidth = decoded.mdcuiRenderWidth ?? 0;
+    this._mdcuiImages = decoded.mdcuiImages ?? [];
     this.fileformat = detectFileFormat(text, this.Settings.fileformat ?? DEFAULT_SETTINGS.fileformat);
     this.Settings.fileformat = this.fileformat;
     this.lines = normalizeBufferText(text).split("\n");
@@ -1733,12 +1924,13 @@ class BufferModel {
     if (!isMdcuiEncoding(this.encoding) || this._mdcuiTuiSourceText == null) return false;
     const renderWidth = Math.max(1, Math.trunc(Number(width) || 80));
     if (renderWidth === this._mdcuiRenderWidth) return false;
-    const { rendered } = await renderMdcui(this._mdcuiTuiSourceText, renderWidth);
+    const { rendered, images } = await renderMdcui(this._mdcuiTuiSourceText, renderWidth, null, this.path);
     const styled = parseAnsiStyledText(rendered);
     this.lines = normalizeBufferText(styled.text).split("\n");
     if (this.lines.length === 0) this.lines = [""];
     this._ansiStyleLines = styled.styleLines;
     this._mdcuiAnsiText = rendered;
+    this._mdcuiImages = images;
     this._mdcuiRenderWidth = renderWidth;
     this.fileformat = detectFileFormat(styled.text, this.Settings.fileformat ?? DEFAULT_SETTINGS.fileformat);
     this.Settings.fileformat = this.fileformat;
@@ -2404,7 +2596,10 @@ class App {
     this.clipboard = new ClipboardManager();
     this.context = context;
     this.shellRunning = false;
-    this.screen = new Screen({ mouse: DEFAULT_SETTINGS.mouse !== false });
+    this.screen = new Screen({
+      mouse: DEFAULT_SETTINGS.mouse !== false,
+      kittyMode: context.kittyMode ?? "off",
+    });
     this.tabRects = [];
     this._escBuf = null;   // pending lone ESC bytes waiting for alt-key combo
     this._escTimer = null;
@@ -2449,16 +2644,14 @@ class App {
   }
 
   async start() {
-    this._started = true;
+    this.installProtectedPrompts();
     // When stdin was a pipe (content already consumed in loadBuffers), open the
     // controlling terminal directly so the event loop has a live handle and
-    // keyboard input works.  Unix: /dev/tty  Windows: \\.\CON
+    // keyboard input works. Unix: /dev/tty; Windows: CONIN$.
     if (!process.stdin.isTTY) {
       try {
-        const { openSync } = await import("node:fs");
         const { ReadStream } = await import("node:tty");
-        const ttyPath = process.platform === "win32" ? "\\\\.\\CON" : "/dev/tty";
-        const fd = openSync(ttyPath, "r+");
+        const fd = openSync(controllingTerminalInputPath(), "r");
         this._ttyStream = new ReadStream(fd);
       } catch {
         this._ttyStream = process.stdin;
@@ -2488,6 +2681,7 @@ class App {
     });
     process.on("SIGINT", () => {}); // Ctrl+C is handled as copy in handleEvent
     this.screen.init();
+    this._started = true;
     // Update backup prompt to screen-aware version now that TUI is running.
     if (this.context._termPrompt) {
       this.context._termPrompt = async (msg) => {
@@ -2572,6 +2766,8 @@ class App {
         if (p.type === "term") p.terminal?.close();
     (this._ttyStream ?? process.stdin).setRawMode?.(false);
     this.screen.fini();
+    this._started = false;
+    this.restoreProtectedPrompts();
 
     if (this.context?.config?.getGlobalOption("savehistory") !== false) {
       try { await saveHistory(this.context.config.configDir); } catch {}
@@ -2590,6 +2786,157 @@ class App {
     process.exit(code);
   }
 
+  installProtectedPrompts() {
+    if (this._protectedPrompts) return;
+    const saved = {
+      alert: {
+        had: Object.prototype.hasOwnProperty.call(globalThis, "alert"),
+        value: globalThis.alert,
+      },
+      confirm: {
+        had: Object.prototype.hasOwnProperty.call(globalThis, "confirm"),
+        value: globalThis.confirm,
+      },
+      prompt: {
+        had: Object.prototype.hasOwnProperty.call(globalThis, "prompt"),
+        value: globalThis.prompt,
+      },
+    };
+    this._protectedPrompts = saved;
+    this._protectedPromptGlobals = {
+      alert: this.protectedAlert.bind(this),
+      confirm: this.protectedConfirm.bind(this),
+      prompt: this.protectedPrompt.bind(this),
+    };
+    Object.assign(globalThis, this._protectedPromptGlobals);
+  }
+
+  runProtectedPrompt(name, fallback, args) {
+    const nativeFn = this._protectedPrompts?.[name]?.value;
+    const tty = this._ttyStream ?? process.stdin;
+    const wasRaw = typeof tty?.isRaw === "boolean" ? tty.isRaw : true;
+    if (
+      !this._started
+      || this.shellRunning
+      || this._alertRunning
+      || !wasRaw
+      || typeof nativeFn !== "function"
+    ) {
+      this.message = String(args[0] ?? "");
+      return fallback;
+    }
+
+    const inputHandler = this._inputHandler;
+    const listenerAttached = Boolean(
+      inputHandler && tty.listeners?.("data").includes(inputHandler),
+    );
+    const wasPaused = tty.isPaused?.() ?? false;
+    let value;
+    let failed = false;
+    let failure;
+    const cleanupFailures = [];
+    const cleanup = (fn) => {
+      try { fn(); } catch (error) { cleanupFailures.push(error); }
+    };
+
+    try {
+      this._alertRunning = true;
+      // Do not let the editor's flowing-mode data listener race the blocking
+      // prompt for bytes from the same terminal.
+      if (listenerAttached) tty.removeListener("data", inputHandler);
+      tty.pause?.();
+      tty.setRawMode?.(false);
+      this.screen.fini();
+      this.screen.previous = null;
+      // Bun's native prompts always read fd 0. If Markdown itself came from a
+      // pipe, read synchronously from the controlling terminal instead.
+      value = tty !== process.stdin
+        ? this.runProtectedTtyPrompt(name, fallback, args)
+        : Reflect.apply(nativeFn, globalThis, args);
+    } catch (error) {
+      failed = true;
+      failure = error;
+    } finally {
+      cleanup(() => tty.setRawMode?.(wasRaw));
+      cleanup(() => { this.screen.previous = null; });
+      cleanup(() => this.screen.init());
+      cleanup(() => { this._alertRunning = false; });
+      cleanup(() => {
+        if (listenerAttached) tty.on("data", inputHandler);
+      });
+      cleanup(() => {
+        if (!wasPaused) tty.resume?.();
+      });
+      cleanup(() => this.render());
+    }
+    if (failed) throw failure;
+    if (cleanupFailures.length > 0) throw cleanupFailures[0];
+    return value;
+  }
+
+  runProtectedTtyPrompt(name, fallback, args) {
+    const message = String(args[0] ?? "");
+    const defaultValue = String(args[1] ?? "");
+    const fd = openSync(controllingTerminalInputPath(), "r");
+    try {
+      if (name === "alert") {
+        process.stdout.write(`${message}\n\nPress ENTER to continue...`);
+        this.readProtectedPromptLine(fd);
+        return undefined;
+      }
+      const suffix = name === "confirm"
+        ? " [y/N] "
+        : defaultValue ? ` (${defaultValue}) ` : " ";
+      process.stdout.write(message + suffix);
+      const answer = this.readProtectedPromptLine(fd);
+      if (answer == null) return fallback;
+      if (name === "confirm") return /^(?:y|yes)$/i.test(answer.trim());
+      return answer === "" ? defaultValue : answer;
+    } finally {
+      closeSync(fd);
+    }
+  }
+
+  readProtectedPromptLine(fd) {
+    const chunks = [];
+    const chunk = Buffer.allocUnsafe(1024);
+    while (true) {
+      const length = readSync(fd, chunk, 0, chunk.length, null);
+      if (length === 0) return chunks.length > 0 ? Buffer.concat(chunks).toString() : null;
+      const bytes = chunk.subarray(0, length);
+      const newline = bytes.findIndex((byte) => byte === 0x0a || byte === 0x0d);
+      chunks.push(Buffer.from(newline < 0 ? bytes : bytes.subarray(0, newline)));
+      if (newline >= 0) return Buffer.concat(chunks).toString();
+    }
+  }
+
+  protectedAlert(msg = "") {
+    return this.runProtectedPrompt("alert", undefined, [String(msg)]);
+  }
+
+  protectedConfirm(msg = "") {
+    return this.runProtectedPrompt("confirm", false, [String(msg)]);
+  }
+
+  protectedPrompt(msg = "", defaultValue = "") {
+    return this.runProtectedPrompt(
+      "prompt",
+      defaultValue,
+      [String(msg), String(defaultValue)],
+    );
+  }
+
+  restoreProtectedPrompts() {
+    const saved = this._protectedPrompts;
+    if (!saved) return;
+    for (const name of ["alert", "confirm", "prompt"]) {
+      if (saved[name].had) globalThis[name] = saved[name].value;
+      else delete globalThis[name];
+    }
+    this._protectedPrompts = null;
+    this._protectedPromptGlobals = null;
+  }
+
   layoutEditorArea() {
     const promptHeight = this.prompt ? 1 : 0;
     const tabBarHeight = this.tabs.length > 1 ? 1 : 0;
@@ -2638,6 +2985,7 @@ class App {
 
     const defaultStyle = this.context.colorscheme?.defaultStyle ?? {};
     this.screen.fill(" ", defaultStyle);
+    this._kittyFrameImages = [];
 
     this.tabRects = [];
     if (tabBarHeight) this.renderTabbar(defaultStyle);
@@ -2813,6 +3161,7 @@ class App {
       this.screen.setCursor(0, 0, false);
     }
 
+    this.screen.setKittyImages(this._kittyFrameImages);
     this.screen.show();
   }
 
@@ -2995,6 +3344,59 @@ class App {
       ? (this.context.colorscheme.get("cursor-line")?.fg ?? null)
       : null;
 
+    const addKittyImage = (lineNo, screenRow, subRow = 0) => {
+      if (subRow !== 0 || !Array.isArray(buf._mdcuiImages)) return;
+      for (const image of buf._mdcuiImages) {
+        if (image.line !== lineNo) continue;
+        const { cols, rows } = fitKittyImageToWidth(image, maxW);
+        const visibleTop = Math.max(pane.y, screenRow);
+        const visibleBottom = Math.min(pane.y + pane.h, screenRow + rows);
+        const visibleRows = visibleBottom - visibleTop;
+        if (visibleRows < 1 || cols < 1) continue;
+        const clippedTopRows = visibleTop - screenRow;
+        const pixelHeight = Math.max(1, Math.trunc(Number(image.pixelHeight) || 1));
+        const sourceY = Math.min(pixelHeight - 1, Math.round(pixelHeight * clippedTopRows / rows));
+        const sourceBottom = Math.min(pixelHeight, Math.round(pixelHeight * (clippedTopRows + visibleRows) / rows));
+        const sourceHeight = Math.max(1, sourceBottom - sourceY);
+        const sourceWidth = Math.max(1, Math.trunc(Number(image.pixelWidth) || 1));
+        const x = pane.x + gutterW;
+        const placementId = ((image.id ^ Math.imul(x + 1, 73856093) ^ Math.imul(visibleTop + 1, 19349663) ^ Math.imul(sourceY + 1, 83492791)) >>> 0) % 2147483646 + 1;
+        logKittyPlacement("app-placement", {
+          buffer: buf.path,
+          imagePath: image.path,
+          imageId: image.id,
+          placementId,
+          imageLogicalLine: image.line,
+          renderedLine: lineNo,
+          subRow,
+          pane: { x: pane.x, y: pane.y, width: pane.w, height: pane.h },
+          scroll: { ...buf.scroll },
+          gutterWidth: gutterW,
+          maxWidth: maxW,
+          screenX: x,
+          nominalScreenY: screenRow,
+          screenY: visibleTop,
+          cols,
+          rows: visibleRows,
+          originalCols: image.cols,
+          originalRows: image.rows,
+          sourceRect: { x: 0, y: sourceY, width: sourceWidth, height: sourceHeight },
+        });
+        this._kittyFrameImages.push({
+          ...image,
+          x,
+          y: visibleTop,
+          cols,
+          rows: visibleRows,
+          sourceX: 0,
+          sourceY,
+          sourceWidth,
+          sourceHeight,
+          placementId,
+        });
+      }
+    };
+
     const hasDiff   = (buf.Settings?.diffgutter ?? false) && !!buf.diffBase;
     if (hasDiff && !buf._diffOnUpdate) buf._diffOnUpdate = () => this.render();
     const diffMarks = hasDiff ? getDiffMarkers(buf) : null;
@@ -3009,6 +3411,18 @@ class App {
     const msgWarnStyle = cs?.styles?.has("gutter-warning") ? cs.get("gutter-warning") : defaultStyle;
     const msgErrStyle = cs?.styles?.has("gutter-error") ? cs.get("gutter-error") : defaultStyle;
 
+    // When the image anchor has scrolled above the pane, its lower portion can
+    // still intersect the viewport. It will not be encountered by the normal
+    // visible-line loop, so add that clipped placement explicitly.
+    for (const image of buf._mdcuiImages ?? []) {
+      if (image.line >= buf.scroll.y) continue;
+      const nominalScreenRow = pane.y + image.line - buf.scroll.y;
+      const { rows } = fitKittyImageToWidth(image, maxW);
+      if (nominalScreenRow < pane.y && nominalScreenRow + rows > pane.y) {
+        addKittyImage(image.line, nominalScreenRow);
+      }
+    }
+
     const renderGutter = (lineNo, row, screenRow, subRow = 0) => {
       // Message indicator: 2 cols, '> ' with kind-based style (Go: drawGutter)
       if (msgW > 0) {
@@ -3052,6 +3466,7 @@ class App {
         if (lineNo < buf.lines.length) {
           const cells = renderHighlightedCells(buf, lineNo, buf.scroll.x, maxW, this.context.colorscheme, pane.selection, getLineSearchRanges(buf, lineNo), braceMatches, isCL ? clBg : null);
           putCells(this.screen, pane.x + gutterW, screenRow, cells, maxW);
+          addKittyImage(lineNo, screenRow);
         }
       }
     } else {
@@ -3075,6 +3490,7 @@ class App {
 
         const cells = renderHighlightedCells(buf, lineNo, segStart, maxW, this.context.colorscheme, pane.selection, _swSearchRanges, braceMatches, isCL ? clBg : null);
         putCells(this.screen, pane.x + gutterW, screenRow, cells, maxW);
+        addKittyImage(lineNo, screenRow, subRow);
 
         if (subRow + 1 < breaks.length) {
           sloc = { line: lineNo, row: subRow + 1 };
@@ -3631,6 +4047,7 @@ class App {
 
     const text = event.raw;
     const seq = event.key;
+    const keydownBlock = indexedMdcuiFenceBlockAtLine(buf, buf?.cursor.y);
     if (buf) buf.allowCursorOffscreen = false;
 
     if (this._rawMode) {
@@ -3641,6 +4058,12 @@ class App {
       return;
     }
 
+    const keydownEvent = await this.dispatchMdcuiFenceEvent(buf, keydownBlock, event, "keydown");
+    if (keydownEvent?.defaultPrevented && !["ctrl-q", "alt-q", "escape"].includes(seq)) {
+      this.render();
+      return;
+    }
+
     // Reset undo insert chain on any non-printable-char key
     if (!(seq === text && text.length === 1 && text >= " ")) this._undoInsertChain = false;
 
@@ -3829,15 +4252,28 @@ class App {
       case "backspace":
         buf.pushUndo();
         if (this.pane?.selection) deleteSelection(buf, this.pane);
-        else if (await this.runPluginBool("preBackspace")) buf.backspace();
+        else if (await this.runPluginBool("preBackspace")) {
+          const textarea = mdcuiTextareaAtCursor(buf);
+          if (!mergeTuiTextareaBackward(buf, textarea)) buf.backspace();
+        }
         break;
       case "delete":
         buf.pushUndo();
         if (this.pane?.selection) deleteSelection(buf, this.pane);
-        else buf.deleteForward();
+        else {
+          const textarea = mdcuiTextareaAtCursor(buf);
+          if (!mergeTuiTextareaForward(buf, textarea)) buf.deleteForward();
+        }
         break;
       case "enter":
         if (isMdcuiEncoding(buf?.encoding)) {
+          const textarea = mdcuiTextareaAtCursor(buf);
+          if (textarea && canEditMdcuiAtCursor(buf)) {
+            buf.pushUndo();
+            if (this.pane?.selection) deleteSelection(buf, this.pane);
+            insertTuiTextareaNewline(buf, textarea);
+            break;
+          }
           await this.handleMdcuiCellCallback(buf, buf.cursor.y, buf.cursor.x, "enter");
           break;
         }
@@ -4013,6 +4449,48 @@ class App {
     this.render();
   }
 
+  async dispatchMdcuiFenceEvent(buf, block, inputEvent, eventName) {
+    const id = block?.header?.id;
+    const declaration = id ? buf?._mdcuiFenceEvents?.get(id) : null;
+    const handler = declaration?.events?.get(eventName);
+    const code = inlineFenceEventCode(handler);
+    if (
+      !code
+      || declaration.tag !== block?.header?.tag
+      || !buf?.path
+      || isHttpUrl(buf.path)
+    ) return false;
+
+    const frontPath = `${buf.path}.front.js`;
+    if (!existsSync(frontPath)) return false;
+    try {
+      const selection = globalThis.$?.(`${declaration.tag}#${id}`);
+      const target = {
+        id,
+        tagName: declaration.tag.toUpperCase(),
+        className: declaration.classes.join(" "),
+      };
+      Object.defineProperty(target, "value", {
+        enumerable: true,
+        get: () => selection?.val?.() ?? "",
+        set: (value) => selection?.val?.(value),
+      });
+      const event = tuiKeyEventForFront(inputEvent, target, eventName);
+      const [{ evalFront }, frontMod] = await Promise.all([
+        import("./cui/rpc.mjs"),
+        import(localModuleUrl(frontPath)),
+      ]);
+      const result = await evalFront(frontMod, code, { event });
+      if (result && typeof result === "object" && result.ok === false) {
+        this.message = `mdcui ${eventName}: ${String(result.error ?? "Unknown error")}`;
+      }
+      return event;
+    } catch (error) {
+      this.message = `mdcui ${eventName}: ${String(error?.message || error)}`;
+      return null;
+    }
+  }
+
   async handleMdcuiCellCallback(buf, y = buf?.cursor?.y ?? 0, x = buf?.cursor?.x ?? 0, trigger = "unknown") {
     const payload = mdcuiCellPayload(buf, y, x, trigger);
     if (!payload) return false;
@@ -4039,50 +4517,11 @@ class App {
             import("./cui/rpc.mjs"),
             import(localModuleUrl(`${buf.path}.front.js`)),
           ]);
-          const hadAlert = Object.prototype.hasOwnProperty.call(globalThis, "alert");
-          const prevAlert = globalThis.alert;
-          const hadConfirm = Object.prototype.hasOwnProperty.call(globalThis, "confirm");
-          const prevConfirm = globalThis.confirm;
-          const hadPrompt = Object.prototype.hasOwnProperty.call(globalThis, "prompt");
-          const prevPrompt = globalThis.prompt;
-          const nativeAlert = typeof prevAlert === "function" ? prevAlert : null;
-          const withNativePrompt = (nativeFn, fallback, args) => {
-            if (!this._started || typeof nativeFn !== "function") {
-              this.message = String(args[0] ?? "");
-              return fallback;
-            }
-            const tty = this._ttyStream ?? process.stdin;
-            this._alertRunning = true;
-            tty.setRawMode?.(false);
-            this.screen.fini();
-            this.screen.previous = null;
-            try {
-              return nativeFn(...args);
-            } finally {
-              tty.setRawMode?.(true);
-              this.screen.previous = null;
-              this.screen.init();
-              this._alertRunning = false;
-              this.render();
-            }
-          };
-          globalThis.alert = (msg = "") => withNativePrompt(nativeAlert, undefined, [String(msg)]);
-          globalThis.confirm = (msg = "") => withNativePrompt(prevConfirm, false, [String(msg)]);
-          globalThis.prompt = (msg = "", defaultValue = "") => withNativePrompt(prevPrompt, defaultValue, [String(msg), String(defaultValue)]);
-          try {
-            const result = await evalFront(frontMod, payload.link);
-            if (result && typeof result === "object" && result.ok === false) {
-              globalThis.alert(String(result.error ?? "Unknown error"));
-            } else if (result != null) {
-              this.message = String(result);
-            }
-          } finally {
-            if (hadAlert) globalThis.alert = prevAlert;
-            else delete globalThis.alert;
-            if (hadConfirm) globalThis.confirm = prevConfirm;
-            else delete globalThis.confirm;
-            if (hadPrompt) globalThis.prompt = prevPrompt;
-            else delete globalThis.prompt;
+          const result = await evalFront(frontMod, payload.link);
+          if (result && typeof result === "object" && result.ok === false) {
+            this.protectedAlert(String(result.error ?? "Unknown error"));
+          } else if (result != null) {
+            this.message = String(result);
           }
           return true;
         } catch (error) {
@@ -4094,6 +4533,22 @@ class App {
       const checkboxResult = toggleTaskCheckboxBeforeColumn(payload.line, x);
       if (checkboxResult.toggled) {
         buf.lines[y] = checkboxResult.line;
+        const checkboxStyle = checkboxResult.checked ? { fg: "green" } : null;
+        const styleLine = buf._ansiStyleLines?.[y];
+        if (Array.isArray(styleLine)) {
+          styleLine[checkboxResult.checkboxAt] = checkboxStyle;
+          if (checkboxResult.line[checkboxResult.checkboxAt + 1] === " ")
+            styleLine[checkboxResult.checkboxAt + 1] = checkboxStyle;
+        }
+        if (typeof buf._mdcuiAnsiText === "string") {
+          const ansiLines = buf._mdcuiAnsiText.split("\n");
+          ansiLines[y] = updateAnsiTaskCheckbox(
+            ansiLines[y],
+            checkboxResult.checkboxAt,
+            checkboxResult.checked,
+          );
+          buf._mdcuiAnsiText = ansiLines.join("\n");
+        }
         buf.modified = true;
       }
     
@@ -6788,6 +7243,7 @@ async function loadBufferForPath(pathOrUrl, context, command = {}, { interactive
     if (!name.toLowerCase().endsWith(".md")) name += ".md";
     const localPath = resolve(name);
     await Bun.write(localPath, await fetchHttpBytes(pathOrUrl));
+    remoteMarkdownSources.set(localPath, new URL(pathOrUrl).href);
     return await loadBufferForPath(localPath, loadContext, command, { interactive });
   }
   let buffer;
@@ -6807,6 +7263,7 @@ async function loadBufferForPath(pathOrUrl, context, command = {}, { interactive
       sourceText: decoded.sourceText ?? null,
       tuiSourceText: decoded.tuiSourceText ?? null,
       mdcuiRenderWidth: decoded.mdcuiRenderWidth ?? 0,
+      mdcuiImages: decoded.mdcuiImages ?? null,
     });
     buffer._configDir = context?.config?.configDir ?? null;
     attachSyntax(buffer, loadContext, urlPath, text);
@@ -7517,6 +7974,7 @@ async function loadBuffers(files, command) {
       sourceText: decoded.sourceText ?? null,
       tuiSourceText: decoded.tuiSourceText ?? null,
       mdcuiRenderWidth: decoded.mdcuiRenderWidth ?? 0,
+      mdcuiImages: decoded.mdcuiImages ?? null,
     });
     if (loadBuffers.context) attachSyntax(stdinBuf, loadBuffers.context, "", stdinText);
     buffers.push(stdinBuf);
@@ -7558,6 +8016,42 @@ async function bundledMarkdownSource(filename) {
   return readInternalAssetText(filename) ?? await Bun.file(join(REPO_ROOT, filename)).text();
 }
 
+function availableDemoAssets() {
+  let paths;
+  if (hasInternalAssets()) {
+    paths = listInternalAssetPaths("demos");
+  } else {
+    try {
+      paths = readdirSync(join(REPO_ROOT, "demos"), { withFileTypes: true })
+        .filter((entry) => entry.isFile())
+        .map((entry) => assetPath("demos", entry.name));
+    } catch {
+      paths = [];
+    }
+  }
+
+  return [...new Set(paths)]
+    .filter((path) => /^demos\/[^/]+\.md$/i.test(path))
+    .sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+}
+
+function printDemoList() {
+  const demos = availableDemoAssets().map((asset) => ({
+    option: `--demo-${asset.slice("demos/".length, -".md".length)}`,
+    asset,
+  }));
+  const entries = [{ option: "--demo", asset: "testapp.md" }, ...demos];
+  const optionWidth = Math.max(...entries.map(({ option }) => option.length));
+
+  console.log("Available demos:\n");
+  for (const { option, asset } of entries) {
+    console.log(`  ${option.padEnd(optionWidth)}  ${asset}`);
+  }
+  console.log("\nCompatibility aliases:\n");
+  console.log("  --demo-imgtool     --demo-image-processor");
+  console.log("  --demo-imgtool-zh  --demo-image-processor.zh-TW");
+}
+
 async function main() {
   if (process.argv[2] === "--wui") {
     process.argv.splice(2, 1);
@@ -7571,6 +8065,8 @@ async function main() {
   await buildEarlyExit(null,DEFAULT_BUILD_OUTFILE)
   
   const { flags, files: rawFiles } = parseArgs(process.argv.slice(2));
+  kittyImageMode = flags.kittyMode;
+  allowRemoteKittyImages = flags.allowUrl;
 
   if (flags.help) {
     console.log(usage());
@@ -7636,19 +8132,27 @@ async function main() {
     await printTestappSource();
     return;
   }
-  const demoFilename = flags.demo
-    ? "testapp.md"
-    : flags.demoSelect
-      ? "select.md"
-      : flags.demoImgtool
-        ? "image-processor.md"
-        : flags.demoImgtoolZh
-          ? "image-processor.zh-TW.md"
-          : "";
-  if (demoFilename) {
-    const demoPath = resolve(demoFilename);
+  if (flags.demoList) {
+    printDemoList();
+    return;
+  }
+  if (flags.demo) {
+    if (flags.demo.error) {
+      console.error(`Invalid demo option ${flags.demo.option}: ${flags.demo.error}`);
+      process.exitCode = 2;
+      return;
+    }
+    let demoSource;
+    try {
+      demoSource = await bundledMarkdownSource(flags.demo.asset);
+    } catch {
+      console.error(`Unknown demo ${flags.demo.option}: ${flags.demo.asset} was not found`);
+      process.exitCode = 2;
+      return;
+    }
+    const demoPath = resolve(flags.demo.filename);
     if (!(await Bun.file(demoPath).exists())) {
-      await Bun.write(demoPath, await bundledMarkdownSource(demoFilename));
+      await Bun.write(demoPath, demoSource);
     }
     rawFiles.splice(0, rawFiles.length, demoPath);
   }
@@ -7732,7 +8236,16 @@ async function main() {
 
   const { files, command } = parseInput(rawFiles);
   const jsPlugins = new JsPluginManager();
-  const context = { colorscheme, syntaxDefinitions, config, runtime, jsPlugins, encodingExplicit, allowUrl: flags.allowUrl };
+  const context = {
+    colorscheme,
+    syntaxDefinitions,
+    config,
+    runtime,
+    jsPlugins,
+    encodingExplicit,
+    allowUrl: flags.allowUrl,
+    kittyMode: flags.kittyMode,
+  };
   jsPlugins.setContext(context);
   buildMicroGlobal(jsPlugins);   // sets globalThis.micro
 
@@ -7836,6 +8349,7 @@ async function main() {
   addCheckpoint("App Instantiation");
   const app = new App(buffers, context);
   jsPlugins.setApp(app);
+  app.installProtectedPrompts();
   // if (plugins && !pluginErr && app.buffer) plugins.curPaneAdapter = makePaneAdapter(app.buffer, app);
   // Dispatch all JS plugin lifecycle hooks after setApp so TermMessage,
   // CurPane, cmd/action proxies, and buffer APIs all work correctly.