jsmdcui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 All notable user-visible changes to jsmdcui are documented here.
 
+## [0.5.0] - 2026-07-16
+
+This update adds cross-environment form-like text blocks and a small
+jQuery-style selector API, while keeping the same Markdown source usable in
+both the terminal and browser interfaces.
+
+### Added
+
+- Add a minimal global `$` API to terminal frontend evaluation, JavaScript
+  plugins, generated browser frontend modules, and `javascript:` links.
+- Support tag, ID, class, and combined selectors such as `$('text')`,
+  `$('#answer')`, `$('.field')`, and `$('text#answer.field')`.
+- Add `.val()` and `.val(value)` for reading and replacing block contents.
+  Getters always return a string and use an empty string for missing elements,
+  invalid selectors, or lookup errors. Setters support chaining and resize
+  terminal blocks to fit multiline values.
+- Recognize both raw Markdown fenced blocks and rendered Bun ANSI blocks,
+  including ASCII and Unicode frame characters.
+- Add editable terminal `text` blocks. Content after the protected `│ ` or
+  `| ` prefix can be edited, while frame characters, line joins, inserted
+  newlines, and multiline pastes remain protected.
+- Add interactive terminal text-block resizing. Activating the lower-left
+  frame corner adds an empty content row; activating the upper-left corner
+  removes only a trailing empty row and never deletes non-empty content.
+- Add the optional frontend lifecycle callback
+  `onMdcuiExit({ reason, path, $ })`. The terminal awaits it before closing an
+  mdcui buffer and invokes it at most once per buffer.
+- Add Markdown syntax completions for fenced block language identifiers.
+
+### Changed
+
+- Convert `text` and `textarea` fenced blocks into native browser
+  `<textarea>` elements while preserving their ID, classes, original language
+  metadata, and selector compatibility.
+- Prefer native `document.querySelector()` in the browser `$` implementation,
+  then fall back to mdcui metadata and the original `pre > code` structure.
+- Automatically wrap and resize generated browser textareas on page load,
+  input, `.val(value)`, and window resize. Initial `rows` and `cols` are
+  derived from the Markdown content.
+- Generate complete HTML5 documents for WUI output, including `<!doctype
+  html>`, UTF-8 metadata, a responsive viewport, a document title, and
+  `lang="zh-TW"`.
+- Enable `softwrap` by default.
+- Close modified mdcui buffers without displaying a save prompt. Applications
+  can use `onMdcuiExit` to collect edited field values or call backend RPC
+  functions before closing.
+- Update the bundled example with editable text fields, selector API examples,
+  answer validation, and manual text-box resizing instructions.
+
+### Fixed
+
+- Keep terminal text-block frame prefixes intact during editing and prevent
+  Delete at the end of a content row from merging it with the next row.
+- Preserve browser textarea IDs and classes during Markdown-to-HTML
+  conversion, including compatibility metadata for original `text` selectors.
+- Keep README and built-in help lifecycle documentation synchronized.
+
 ## [0.4.0] - 2026-07-16
 
 This release separates executable Markdown UI views from ordinary editable

package/README.md

@@ -100,6 +100,11 @@ Create `app.md`:
 
 - [Say hello](javascript:sayHello())
 - [Get server time](javascript:showServerTime())
+- [Update text box](javascript:updateText())
+
+```text#myid.myclass
+Editable in both TUI and WUI
+```
 
 ```js front
 export function sayHello() {
@@ -111,6 +116,10 @@ export async function showServerTime() {
   const time = await rpc.getServerTime();
   alert(time);
 }
+
+export function updateText() {
+  $('#myid').val($('.myclass').val() + ' ✓');
+}
 ```
 
 ```js back
@@ -127,12 +136,37 @@ bun src/index.js app.md
 bun src/index.js --wui app.md
 ```
 
+### Text blocks
+
+Both `text` and `textarea` fenced blocks define editable text fields:
+
+````md
+```text#message.note
+Initial value
+```
+````
+
+The same Markdown works in both interfaces. In the browser WUI it becomes a
+native `<textarea>` with the declared ID and classes. Long text wraps
+automatically, and the field height is recalculated when the user types, the
+window is resized, or frontend code calls `.val(value)`.
+
+In the terminal TUI, only content after the protected `│ ` or `| ` prefix can
+be edited. The frame prefix cannot be deleted, Enter cannot insert a newline,
+Delete at the end of a row cannot join the next row, and multiline paste is
+blocked. Activate the lower-left frame corner to add a row. Activate the
+upper-left frame corner to remove the trailing row only when it is empty;
+non-empty content is never removed.
+
 The three UI building blocks are:
 
 - Regular Markdown provides headings, text, lists, task checkboxes, code, and
   links.
 - A `js front` block contains UI code. Exported functions can use
   `alert`, `confirm`, `prompt`, and the generated `rpc` client.
+- A front module may export `async function onMdcuiExit({ reason, path, $ })`.
+  The terminal UI awaits it before closing an `mdcui` buffer. Modified
+  `mdcui` buffers close without a save prompt.
 - A `js back` block exports trusted backend functions. In the browser WUI,
   `rpc` publishes only exported functions whose exported names do not start
   with `_`. Call a published function from the front end with
@@ -149,6 +183,22 @@ Use a `javascript:` Markdown link to run front-end code:
 [Button label](javascript:exportedFunction())
 ```
 
+Use `onMdcuiExit` when a terminal Markdown app needs to submit or otherwise
+process edited fields before it closes:
+
+```js
+export async function onMdcuiExit({ reason, path, $ }) {
+  await rpc.saveDraft({
+    reason,
+    path,
+    message: $('#message').val(),
+  });
+}
+```
+
+The callback is optional, may be asynchronous, and is called at most once for
+each mdcui buffer.
+
 The front and back code blocks are extracted and are not shown in the rendered
 UI. In the terminal, `rpc` calls the generated backend module directly. In the
 browser, it sends the call to the relative `rpc` endpoint under the printed
@@ -156,8 +206,9 @@ UUID URL (`/<uuid>/rpc`).
 
 ## Terminal interaction
 
-Markdown files automatically use `mdcui` mode. The rendered buffer is
-read-only, but navigation, selection, search, and copy remain available.
+Markdown files automatically use `mdcui` mode. Most rendered content remains
+protected, while `text` block content rows can be edited. Navigation,
+selection, search, and copy remain available.
 
 | Input | Result |
 | --- | --- |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsmdcui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Markdown as a Common UI for Terminals and Web Browsers",
   "type": "module",
   "main": "./src/index.js",

package/runmd.mjs

@@ -189,6 +189,54 @@ export function createTui(md,TERMINAL_WIDTH=30) // ANSI Colors
   )
 }
 
+function parseWuiControlIdentity(info)
+{
+  const match = String(info ?? "").match(/^([A-Za-z_][\w:-]*)(?:#([A-Za-z_][\w:-]*))?((?:\.[A-Za-z_][\w:-]*)*)$/);
+  if (!match || !["text", "textarea"].includes(match[1])) return null;
+  return {
+    tag: match[1],
+    id: match[2] || "",
+    classes: match[3] ? match[3].slice(1).split(".") : [],
+  };
+}
+
+function escapeHtmlAttribute(value)
+{
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll('"', """)
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+export function convertWuiTextareas(html)
+{
+  return String(html).replace(
+    /<pre><code class="language-([^"]+)">([^]*?)<\/code><\/pre>/g,
+    (whole, info, content) => {
+      const identity = parseWuiControlIdentity(info);
+      if (!identity) return whole;
+      const value = content.replace(/\n$/, "");
+      const contentLines = value.split("\n");
+      const cols = Math.max(1, ...contentLines.map(line => [...line].length));
+      const attrs = [
+        `data-mdcui-tag="${identity.tag}"`,
+        `data-mdcui-language="${escapeHtmlAttribute(info)}"`,
+        identity.id ? `id="${escapeHtmlAttribute(identity.id)}"` : "",
+        `class="${escapeHtmlAttribute([
+          `language-${info}`,
+          ...identity.classes,
+        ].join(" "))}"`,
+        `rows="${Math.max(1, contentLines.length)}"`,
+        `cols="${cols}"`,
+        'wrap="soft"',
+        'style="box-sizing:border-box;max-width:100%;width:100%;resize:vertical;overflow-y:hidden"',
+      ].filter(Boolean).join(" ");
+      return `<textarea ${attrs}>${value}</textarea>`;
+    },
+  );
+}
+
 export async function createWui(md,mdpath) // HTML
 {
   
@@ -209,16 +257,31 @@ export async function createWui(md,mdpath) // HTML
     'class="task-list-item-checkbox" disabled',
     'class="task-list-item-checkbox"'
   )
+
+  md = convertWuiTextareas(md)
   
   const mdb = path.basename(mdpath);
   
-  
-  md += `
-
-<scr`+`ipt type="module" src="./${mdb}.front.js">
-</scr`+`ipt>
-
-  `;
+  const moduleScript = `<scr`+`ipt type="module" src="./${mdb}.front.js"></scr`+`ipt>`;
+  if (!/^\s*<!doctype html>/i.test(md)) {
+    md = `<!doctype html>
+<html lang="zh-TW">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtmlAttribute(mdb)}</title>
+</head>
+<body>
+${md}
+${moduleScript}
+</body>
+</html>
+`;
+  } else if (/<\/body\s*>/i.test(md)) {
+    md = md.replace(/<\/body\s*>/i, `${moduleScript}\n</body>`);
+  } else {
+    md += `\n${moduleScript}\n`;
+  }
   
   
   await Bun.write(mdpath+".html",md)

package/runtime/help/help.md

@@ -100,6 +100,11 @@ Create `app.md`:
 
 - [Say hello](javascript:sayHello())
 - [Get server time](javascript:showServerTime())
+- [Update text box](javascript:updateText())
+
+```text#myid.myclass
+Editable in both TUI and WUI
+```
 
 ```js front
 export function sayHello() {
@@ -111,6 +116,10 @@ export async function showServerTime() {
   const time = await rpc.getServerTime();
   alert(time);
 }
+
+export function updateText() {
+  $('#myid').val($('.myclass').val() + ' ✓');
+}
 ```
 
 ```js back
@@ -127,12 +136,37 @@ bun src/index.js app.md
 bun src/index.js --wui app.md
 ```
 
+### Text blocks
+
+Both `text` and `textarea` fenced blocks define editable text fields:
+
+````md
+```text#message.note
+Initial value
+```
+````
+
+The same Markdown works in both interfaces. In the browser WUI it becomes a
+native `<textarea>` with the declared ID and classes. Long text wraps
+automatically, and the field height is recalculated when the user types, the
+window is resized, or frontend code calls `.val(value)`.
+
+In the terminal TUI, only content after the protected `│ ` or `| ` prefix can
+be edited. The frame prefix cannot be deleted, Enter cannot insert a newline,
+Delete at the end of a row cannot join the next row, and multiline paste is
+blocked. Activate the lower-left frame corner to add a row. Activate the
+upper-left frame corner to remove the trailing row only when it is empty;
+non-empty content is never removed.
+
 The three UI building blocks are:
 
 - Regular Markdown provides headings, text, lists, task checkboxes, code, and
   links.
 - A `js front` block contains UI code. Exported functions can use
   `alert`, `confirm`, `prompt`, and the generated `rpc` client.
+- A front module may export `async function onMdcuiExit({ reason, path, $ })`.
+  The terminal UI awaits it before closing an `mdcui` buffer. Modified
+  `mdcui` buffers close without a save prompt.
 - A `js back` block exports trusted backend functions. In the browser WUI,
   `rpc` publishes only exported functions whose exported names do not start
   with `_`. Call a published function from the front end with
@@ -149,6 +183,22 @@ Use a `javascript:` Markdown link to run front-end code:
 [Button label](javascript:exportedFunction())
 ```
 
+Use `onMdcuiExit` when a terminal Markdown app needs to submit or otherwise
+process edited fields before it closes:
+
+```js
+export async function onMdcuiExit({ reason, path, $ }) {
+  await rpc.saveDraft({
+    reason,
+    path,
+    message: $('#message').val(),
+  });
+}
+```
+
+The callback is optional, may be asynchronous, and is called at most once for
+each mdcui buffer.
+
 The front and back code blocks are extracted and are not shown in the rendered
 UI. In the terminal, `rpc` calls the generated backend module directly. In the
 browser, it sends the call to the relative `rpc` endpoint under the printed
@@ -156,8 +206,9 @@ UUID URL (`/<uuid>/rpc`).
 
 ## Terminal interaction
 
-Markdown files automatically use `mdcui` mode. The rendered buffer is
-read-only, but navigation, selection, search, and copy remain available.
+Markdown files automatically use `mdcui` mode. Most rendered content remains
+protected, while `text` block content rows can be edited. Navigation,
+selection, search, and copy remain available.
 
 | Input | Result |
 | --- | --- |

package/runtime/syntax/markdown.yaml

@@ -47,3 +47,15 @@ rules:
         start: "`"
         end: "`"
         rules: []
+
+
+# keywords
+# javascript alert confirm prompt rpc 
+# front back 
+# console log error JSON stringify parse
+# async await Promise 
+# textarea text password search 
+# email url tel number range color
+# date time datetime-local month week 
+# checkbox radio file hidden image button submit reset
+

package/src/config/defaults.js

@@ -38,7 +38,7 @@ export const DEFAULT_COMMON_SETTINGS = {
   scrollspeed: 2,
   showchars: "",
   smartpaste: true,
-  softwrap: false,
+  softwrap: true,
   splitbottom: true,
   splitright: true,
   statusformatl: "$(filename) $(modified)$(overwrite)($(line),$(col)) $(status.paste)| ft:$(opt:filetype) | $(opt:fileformat) | $(opt:encoding)",

package/src/cui/rpc.mjs

@@ -9,6 +9,138 @@ let apilist = new Map()
 
 export const jss = JSON.stringify
 
+function parseDollarIdentity(input, { selector = false } = {})
+{
+  const text = String(input ?? "").trim();
+  const match = text.match(/^([A-Za-z_][\w:-]*)?(?:#([A-Za-z_][\w:-]*))?((?:\.[A-Za-z_][\w:-]*)*)$/);
+  if (!match || (!match[1] && !match[2] && !match[3])) return null;
+  if (!selector && !match[1]) return null;
+  return {
+    tag: match[1] || null,
+    id: match[2] || null,
+    classes: match[3] ? match[3].slice(1).split(".") : [],
+  };
+}
+
+function matchesDollarIdentity(identity, selector)
+{
+  if (selector.tag && identity.tag !== selector.tag) return false;
+  if (selector.id && identity.id !== selector.id) return false;
+  return selector.classes.every(name => identity.classes.includes(name));
+}
+
+function findMarkdownCodeElement(documentObject, selector)
+{
+  for (const code of documentObject?.querySelectorAll?.("pre > code") ?? []) {
+    for (const className of code.classList ?? []) {
+      if (!className.startsWith("language-")) continue;
+      const identity = parseDollarIdentity(className.slice("language-".length));
+      if (identity && matchesDollarIdentity(identity, selector)) return code;
+    }
+  }
+  return null;
+}
+
+function findWebDollarElement(documentObject, selectorText, selector)
+{
+  try {
+    const direct = documentObject?.querySelector?.(String(selectorText));
+    if (direct) return direct;
+  } catch {}
+
+  for (const element of documentObject?.querySelectorAll?.("[data-mdcui-tag]") ?? []) {
+    const identity = {
+      tag: element.getAttribute?.("data-mdcui-tag") || null,
+      id: element.id || null,
+      classes: [...(element.classList ?? [])],
+    };
+    if (matchesDollarIdentity(identity, selector)) return element;
+  }
+
+  return findMarkdownCodeElement(documentObject, selector);
+}
+
+function webDollarValue(element)
+{
+  if (element && "value" in element) return String(element.value ?? "");
+  return String(element?.textContent ?? "").replace(/\n$/, "");
+}
+
+function resizeWebTextarea(element)
+{
+  if (!element || String(element.tagName ?? "").toLowerCase() !== "textarea") return;
+  try {
+    element.style.height = "auto";
+    element.style.height = `${element.scrollHeight}px`;
+    const lineHeight = Number.parseFloat(
+      element.ownerDocument?.defaultView?.getComputedStyle?.(element)?.lineHeight,
+    );
+    if (Number.isFinite(lineHeight) && lineHeight > 0)
+      element.rows = Math.max(1, Math.ceil(element.scrollHeight / lineHeight));
+  } catch {}
+}
+
+function installWebTextareaResize(target)
+{
+  const documentObject = target?.document;
+  if (!documentObject || documentObject.__mdcuiTextareaResizeInstalled) return;
+  documentObject.__mdcuiTextareaResizeInstalled = true;
+  const resizeAll = () => {
+    for (const element of documentObject.querySelectorAll?.("textarea[data-mdcui-tag]") ?? [])
+      resizeWebTextarea(element);
+  };
+  documentObject.addEventListener?.("input", event => {
+    if (event.target?.matches?.("textarea[data-mdcui-tag]"))
+      resizeWebTextarea(event.target);
+  });
+  target.addEventListener?.("resize", resizeAll);
+  if (documentObject.readyState === "loading")
+    documentObject.addEventListener?.("DOMContentLoaded", resizeAll, { once: true });
+  else
+    queueMicrotask(resizeAll);
+}
+
+export function createWebDollar(documentObject = globalThis.document)
+{
+  return function $(selectorText) {
+    const selector = parseDollarIdentity(selectorText, { selector: true });
+    const selection = {
+      val(...args) {
+        try {
+          if (!selector) return args.length > 0 ? selection : "";
+          const element = findWebDollarElement(documentObject, selectorText, selector);
+          if (!element) return args.length > 0 ? selection : "";
+          if (args.length > 0) {
+            const value = String(args[0] ?? "");
+            if ("value" in element) {
+              element.value = value;
+              resizeWebTextarea(element);
+            }
+            else element.textContent = value;
+            return selection;
+          }
+          return webDollarValue(element);
+        } catch {
+          return args.length > 0 ? selection : "";
+        }
+      },
+    };
+    return selection;
+  };
+}
+
+export function installWebDollar(target = globalThis)
+{
+  if (!target?.document) return target?.$;
+  const $ = createWebDollar(target.document);
+  target.$ = $;
+  installWebTextareaResize(target);
+  return $;
+}
+
+if (typeof globalThis.document !== "undefined")
+  installWebDollar(globalThis);
+
 
 export async function evalBack(backmod, qjson)
 {
@@ -99,8 +231,11 @@ try{
 
     text = text.replace(/^javascript:/, "");
 
-    const names = Object.keys(mod);
-    const values = Object.values(mod).map(safeFrontValue);
+    const entries = Object.entries(mod).filter(([name]) => name !== "$");
+    if (typeof globalThis.$ === "function")
+      entries.push(["$", globalThis.$]);
+    const names = entries.map(([name]) => name);
+    const values = entries.map(([, value]) => safeFrontValue(value));
 
     try {
       return await new AsyncFunction(...names, `return await (${text})`)(...values);

package/src/index.js

@@ -195,7 +195,7 @@ const DEFAULT_SETTINGS = {
   backup: true,
   backupdir: "",
   permbackup: false,
-  softwrap: false,
+  softwrap: true,
   wordwrap: false,
   pageoverlap: 2,
   scrollmargin: 3,
@@ -538,6 +538,70 @@ function mdcuiCellPayload(buf, y, x, trigger = "unknown") {
   };
 }
 
+function resizeMdcuiTextBlock(buf, y, x) {
+  if (!buf || !isMdcuiEncoding(buf.encoding) || x !== 0) return null;
+  const line = String(buf.lines?.[y] ?? "");
+  const top = line.match(/^(\s*)(┌─|╭─|\+-)\s*text(?:[#.][A-Za-z_][\w:.-]*)*\s*$/);
+  const bottom = line.match(/^(\s*)(└─|╰─|\+-)\s*$/);
+  if (!top && !bottom) return null;
+
+  let insertAt = -1;
+  let removeAt = -1;
+  let bodyLine = "";
+
+  if (bottom) {
+    for (let row = y - 1; row >= 0; row--) {
+      const header = String(buf.lines[row] ?? "").match(/^(\s*)(┌─|╭─|\+-)\s*text(?:[#.][A-Za-z_][\w:.-]*)*\s*$/);
+      if (!header || header[1] !== bottom[1]) continue;
+      const marker = header[2] === "+-" ? "|" : "│";
+      insertAt = y;
+      bodyLine = header[1] + marker + " ";
+      break;
+    }
+  } else if (top) {
+    const marker = top[2] === "+-" ? "|" : "│";
+    for (let row = y + 1; row < buf.lines.length; row++) {
+      const rest = String(buf.lines[row] ?? "").slice(top[1].length);
+      if (/^(?:└─|╰─|\+-)\s*$/.test(rest)) {
+        const candidate = row - 1;
+        if (candidate > y && String(buf.lines[candidate] ?? "") === top[1] + marker + " ")
+          removeAt = candidate;
+        break;
+      }
+    }
+  }
+
+  if (insertAt < 0 && removeAt < 0) return "unchanged";
+  buf.pushUndo?.(true);
+
+  const row = insertAt >= 0 ? insertAt : removeAt;
+  const deleteCount = removeAt >= 0 ? 1 : 0;
+  const replacement = insertAt >= 0 ? [bodyLine] : [];
+  buf.lines.splice(row, deleteCount, ...replacement);
+
+  if (Array.isArray(buf._ansiStyleLines)) {
+    const template = buf._ansiStyleLines[Math.max(0, row - 1)] ?? null;
+    buf._ansiStyleLines.splice(row, deleteCount, ...replacement.map(() => template));
+  }
+  if (typeof buf._mdcuiAnsiText === "string") {
+    const ansiLines = buf._mdcuiAnsiText.split("\n");
+    ansiLines.splice(row, deleteCount, ...replacement);
+    buf._mdcuiAnsiText = ansiLines.join("\n");
+  }
+
+  if (insertAt >= 0) {
+    if (buf.cursor.y >= insertAt) buf.cursor.y++;
+  } else if (buf.cursor.y > removeAt) {
+    buf.cursor.y--;
+  } else if (buf.cursor.y === removeAt) {
+    buf.cursor.y = Math.max(0, removeAt - 1);
+  }
+  buf.invalidateHighlightFrom?.(row, { force: true });
+  buf.modified = true;
+  buf.ensureCursor?.();
+  return insertAt >= 0 ? "added" : "removed";
+}
+
 function detectFileFormat(text, fallback = DEFAULT_SETTINGS.fileformat) {
   if (text.length === 0) return fallback === "dos" ? "dos" : "unix";
   const newlineIdx = text.indexOf("\n");
@@ -557,6 +621,24 @@ function isReadonlyBuffer(buf) {
   return Boolean(buf?.readonly || buf?.Settings?.readonly || buf?.Type?.Readonly);
 }
 
+function mdcuiEditablePrefixLength(buf, y = buf?.cursor?.y ?? 0) {
+  if (!isMdcuiEncoding(buf?.encoding ?? buf?.Settings?.encoding)) return 0;
+  const line = String(buf?.lines?.[y] ?? "");
+  return /^(?:│|\|) /.test(line) ? 2 : 0;
+}
+
+function canEditMdcuiAtCursor(buf) {
+  const prefixLength = mdcuiEditablePrefixLength(buf);
+  return prefixLength > 0 && (buf?.cursor?.x ?? 0) >= prefixLength;
+}
+
+function canEditMdcuiSelection(buf, selection) {
+  if (!selection) return true;
+  const { first, last } = selectionBounds(selection);
+  const prefixLength = mdcuiEditablePrefixLength(buf, first.y);
+  return first.y === last.y && prefixLength > 0 && first.x >= prefixLength;
+}
+
 function isEditLockedBuffer(buf) {
   return isMdcuiEncoding(buf?.encoding ?? buf?.Settings?.encoding);
 }
@@ -1198,7 +1280,8 @@ class BufferModel {
   }
 
   insert(text) {
-    if (this.isEditLocked()) return false;
+    if (this.isEditLocked() && !canEditMdcuiAtCursor(this)) return false;
+    if (isMdcuiEncoding(this.encoding) && /[\r\n]/.test(String(text))) return false;
     for (const ch of text) {
       if (ch === "\r" || ch === "\n") this.newline(false);
       else if (ch >= " " || ch === "\t") this.insertChar(ch);
@@ -1207,7 +1290,7 @@ class BufferModel {
   }
 
   insertChar(ch) {
-    if (this.isEditLocked()) return false;
+    if (this.isEditLocked() && !canEditMdcuiAtCursor(this)) return false;
     if (ch === "\t" && DEFAULT_SETTINGS.tabstospaces) ch = " ".repeat(DEFAULT_SETTINGS.tabsize);
     const line = this.line();
     this.lines[this.cursor.y] = line.slice(0, this.cursor.x) + ch + line.slice(this.cursor.x);
@@ -1218,6 +1301,7 @@ class BufferModel {
   }
 
   newline(autoindent = true) {
+    if (isMdcuiEncoding(this.encoding)) return false;
     if (this.isEditLocked()) return false;
     const line = this.line();
     const left = line.slice(0, this.cursor.x);
@@ -1236,7 +1320,9 @@ class BufferModel {
   }
 
   backspace() {
-    if (this.isEditLocked()) return false;
+    if (this.isEditLocked() && !canEditMdcuiAtCursor(this)) return false;
+    const mdcuiPrefixLength = mdcuiEditablePrefixLength(this);
+    if (mdcuiPrefixLength > 0 && this.cursor.x <= mdcuiPrefixLength) return false;
     if (this.cursor.x > 0) {
       const line = this.line();
       let start = this.cursor.x - 1;
@@ -1263,7 +1349,7 @@ class BufferModel {
   }
 
   deleteForward() {
-    if (this.isEditLocked()) return false;
+    if (this.isEditLocked() && !canEditMdcuiAtCursor(this)) return false;
     const line = this.line();
     if (this.cursor.x < line.length) {
       const cp = line.codePointAt(this.cursor.x);
@@ -1272,6 +1358,8 @@ class BufferModel {
       this.invalidateHighlightFrom(this.cursor.y);
       this.modified = true;
       return true;
+    } else if (isMdcuiEncoding(this.encoding)) {
+      return false;
     } else if (this.cursor.y < this.lines.length - 1) {
       this.lines[this.cursor.y] += this.lines[this.cursor.y + 1];
       this.lines.splice(this.cursor.y + 1, 1);
@@ -1401,8 +1489,8 @@ class BufferModel {
     this.cursor.x = x;
   }
 
-  pushUndo() {
-    if (this.isEditLocked()) return;
+  pushUndo(force = false) {
+    if (!force && this.isEditLocked() && !canEditMdcuiAtCursor(this)) return;
     this.undoStack.push({ lines: this.lines.slice(), cursor: { ...this.cursor }, serial: this._undoSerial });
     this._undoSerial = (this._undoSerial ?? 0) + 1;
     if (this.undoStack.length > 500) this.undoStack.shift();
@@ -1410,7 +1498,7 @@ class BufferModel {
   }
 
   undo() {
-    if (this.isEditLocked()) return false;
+    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 });
     const s = this.undoStack.pop();
@@ -1423,7 +1511,7 @@ class BufferModel {
   }
 
   redo() {
-    if (this.isEditLocked()) return false;
+    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 });
     const s = this.redoStack.pop();
@@ -2302,6 +2390,7 @@ class App {
     this._messageRowY = null;
     this._messageRowClickZone = null;
     this._resizeRenderSeq = 0;
+    this._mdcuiExitNotified = new WeakSet();
   }
 
   get tab()    { return this.tabs[this.activeTabIdx]; }
@@ -2445,6 +2534,8 @@ class App {
   }
 
   async stop(code = 0) {
+    for (const buf of this.buffers)
+      await this.notifyMdcuiExit(buf, "exit");
     this.running = false;
     if (this._backupTimer) { clearInterval(this._backupTimer); this._backupTimer = null; }
     await Promise.allSettled(this.buffers.map((buf) => buf._backupWritePromise).filter(Boolean));
@@ -3488,7 +3579,15 @@ class App {
     }
 
     if (event.type === "paste") {
-      if (isEditLockedBuffer(buf)) {
+      if (
+        (isEditLockedBuffer(buf) && !isMdcuiEncoding(buf?.encoding))
+        || (isMdcuiEncoding(buf?.encoding) && (
+          !canEditMdcuiAtCursor(buf)
+          ||
+          /[\r\n]/.test(event.text)
+          || !canEditMdcuiSelection(buf, this.pane?.selection)
+        ))
+      ) {
         this.message = "Buffer is read-only";
         this.render();
         return;
@@ -3866,13 +3965,17 @@ class App {
         break;
       default:
         if (text >= " " || text.includes("\n")) {
-          if (isMdcuiEncoding(buf?.encoding) && text === " ") {
+          if (isMdcuiEncoding(buf?.encoding) && text === " " && !canEditMdcuiAtCursor(buf)) {
             await this.handleMdcuiCellCallback(buf, buf.cursor.y, buf.cursor.x, "space");
             break;
           }
           if (!this._undoInsertChain || this.pane?.selection) {
             buf.pushUndo();
           }
+          if (isMdcuiEncoding(buf?.encoding) && !canEditMdcuiSelection(buf, this.pane?.selection)) {
+            this.message = "Protected mdcui prefix";
+            break;
+          }
           this._undoInsertChain = true;
           if (this.pane?.selection) deleteSelection(buf, this.pane);
           await this.insertTextWithHooks(text);
@@ -3885,6 +3988,12 @@ class App {
   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;
+    const resizeResult = resizeMdcuiTextBlock(buf, y, x);
+    if (resizeResult) {
+      if (resizeResult === "added") this.message = "Added text row";
+      else if (resizeResult === "removed") this.message = "Removed empty text row";
+      return true;
+    }
     const callback = this.context?.mdcuiCallback ?? globalThis.mdcuiCallback;
     if (typeof callback === "function") {
       try {
@@ -4751,6 +4860,11 @@ class App {
 
   async quit() {
     const buffer = this.buffer;
+    if (isMdcuiEncoding(buffer?.encoding)) {
+      await this.notifyMdcuiExit(buffer, "quit");
+      await this._doCloseCurrentPane();
+      return;
+    }
     if (buffer.modified) {
       if (!this.prompt) {
         this.openYNPrompt(
@@ -4771,6 +4885,7 @@ class App {
   // Close only the current pane; if it's the last pane in the tab, close the tab.
   async _doCloseCurrentPane() {
     if (this.tab.panes().length > 1) {
+      await this.notifyMdcuiExit(this.buffer, "close-pane");
       this.closePane(this.pane);
       this.render();
     } else {
@@ -4788,6 +4903,32 @@ class App {
     if (!this.prompt && !this.buffer.modified) await this.closeCurrentTab({ force: true });
   }
 
+  async notifyMdcuiExit(buffer, reason = "exit") {
+    if (
+      !buffer
+      || !isMdcuiEncoding(buffer.encoding)
+      || this._mdcuiExitNotified.has(buffer)
+    ) return;
+    this._mdcuiExitNotified.add(buffer);
+
+    const frontPath = buffer.path && !isHttpUrl(buffer.path)
+      ? `${buffer.path}.front.js`
+      : "";
+    if (!frontPath || !existsSync(frontPath)) return;
+
+    try {
+      const frontMod = await import(localModuleUrl(frontPath));
+      if (typeof frontMod.onMdcuiExit !== "function") return;
+      await frontMod.onMdcuiExit({
+        reason,
+        path: buffer.path,
+        $: globalThis.$,
+      });
+    } catch (error) {
+      console.error(`[mdcui] onMdcuiExit: ${error?.message || error}`);
+    }
+  }
+
   async toggleHelp() {
     const cur = this.pane;
     if (cur?.isHelp) {
@@ -4886,11 +5027,14 @@ class App {
   async closeCurrentTab({ force = false } = {}) {
     if (!force && this.buffer?.modified) return await this.quit();
     if (this.tabs.length <= 1) {
+      await this.notifyMdcuiExit(this.buffer, "close-tab");
       await this.stop(0);
       return;
     }
     const closingBuffers = [...new Set(this.tab.panes().flatMap((pane) => [pane.buffer, pane.prevBuffer]).filter(Boolean))];
     const closing = this.buffer;
+    for (const buffer of closingBuffers)
+      await this.notifyMdcuiExit(buffer, "close-tab");
     this.tabs.splice(this.activeTabIdx, 1);
     this.activeTabIdx = Math.min(this.activeTabIdx, this.tabs.length - 1);
     this.message = "";
@@ -5674,6 +5818,14 @@ class App {
         this._freshClip = false;
         const pasted = this.clipboard.read();
         if (pasted) {
+          if (isMdcuiEncoding(buf?.encoding) && (
+            /[\r\n]/.test(pasted)
+            || !canEditMdcuiAtCursor(buf)
+            || !canEditMdcuiSelection(buf, this.pane?.selection)
+          )) {
+            this.message = "Protected mdcui content";
+            break;
+          }
           buf.pushUndo();
           if (this.pane?.selection) deleteSelection(buf, this.pane);
           buf.insert(pasted);
@@ -7902,11 +8054,16 @@ function outdentLine(buf, _ctx) {
 }
 
 function deleteSelection(buf, pane) {
-  if (isEditLockedBuffer(buf)) return "";
   const selection = pane?.selection;
   if (!selection || !buf) return "";
   const text = getSelectionText(buf, selection);
   const { first, last } = selectionBounds(selection);
+  if (isMdcuiEncoding(buf?.encoding)) {
+    const prefixLength = mdcuiEditablePrefixLength(buf, first.y);
+    if (first.y !== last.y || prefixLength === 0 || first.x < prefixLength) return "";
+  } else if (isEditLockedBuffer(buf)) {
+    return "";
+  }
   if (first.y === last.y) {
     const line = buf.lines[first.y] ?? "";
     buf.lines[first.y] = line.slice(0, first.x) + line.slice(last.x);

package/src/plugins/js-bridge.js

@@ -685,11 +685,178 @@ function _deleteSel(buf, pane) {
   buf.ensureCursor?.();
 }
 
+// ── mdcui block selector ────────────────────────────────────────────────────
+
+function _parseBlockIdentity(input, { selector = false } = {}) {
+  const text = String(input ?? "").trim();
+  const match = text.match(/^([A-Za-z_][\w:-]*)?(?:#([A-Za-z_][\w:-]*))?((?:\.[A-Za-z_][\w:-]*)*)$/);
+  if (!match || (!match[1] && !match[2] && !match[3])) return null;
+  if (!selector && !match[1]) return null;
+  return {
+    tag: match[1] || null,
+    id: match[2] || null,
+    classes: match[3] ? match[3].slice(1).split(".") : [],
+  };
+}
+
+function _blockHeader(line) {
+  const text = String(line ?? "");
+  const framed = text.match(/^(\s*)(┌─|╭─|\+-)\s*(\S+)\s*$/);
+  if (framed) {
+    const identity = _parseBlockIdentity(framed[3]);
+    return identity
+      ? { kind: "framed", indent: framed[1], bodyMarker: framed[2] === "+-" ? "|" : "│", ...identity }
+      : null;
+  }
+
+  const fenced = text.match(/^(\s*)(`{3,})\s*(\S+)\s*$/);
+  if (fenced) {
+    const identity = _parseBlockIdentity(fenced[3]);
+    return identity
+      ? { kind: "fenced", indent: fenced[1], fenceLength: fenced[2].length, ...identity }
+      : null;
+  }
+
+  return null;
+}
+
+function _matchesBlock(header, selector) {
+  if (selector.tag && header.tag !== selector.tag) return false;
+  if (selector.id && header.id !== selector.id) return false;
+  return selector.classes.every((name) => header.classes.includes(name));
+}
+
+function _findBlock(lines, selector) {
+  for (let start = 0; start < lines.length; start++) {
+    const header = _blockHeader(lines[start]);
+    if (!header || !_matchesBlock(header, selector)) continue;
+
+    for (let y = start + 1; y < lines.length; y++) {
+      const line = String(lines[y] ?? "");
+      const rest = line.startsWith(header.indent)
+        ? line.slice(header.indent.length)
+        : line;
+
+      if (header.kind === "fenced") {
+        const closing = rest.match(/^(`{3,})\s*$/);
+        if (closing && closing[1].length >= header.fenceLength)
+          return { start, end: y, header };
+        continue;
+      }
+
+      if (/^(?:└─|╰─|\+-)\s*$/.test(rest))
+        return { start, end: y, header };
+    }
+    return { start, end: lines.length, header };
+  }
+  return null;
+}
+
+function _blockValue(lines, selector) {
+  const block = _findBlock(lines, selector);
+  if (!block) return undefined;
+  const value = [];
+  for (let y = block.start + 1; y < block.end; y++) {
+    const line = String(lines[y] ?? "");
+    const rest = line.startsWith(block.header.indent)
+      ? line.slice(block.header.indent.length)
+      : line;
+    if (block.header.kind === "fenced") value.push(rest);
+    else {
+      const body = rest.match(/^(?:│|\|)(?: ?)(.*)$/);
+      value.push(body ? body[1] : rest);
+    }
+  }
+  return value.join("\n");
+}
+
+function _spliceBufferLines(buffer, start, deleteCount, replacement) {
+  const oldCursor = buffer.cursor ? { ...buffer.cursor } : null;
+  buffer.lines.splice(start, deleteCount, ...replacement);
+
+  if (Array.isArray(buffer._ansiStyleLines)) {
+    const template = buffer._ansiStyleLines[start] ?? null;
+    buffer._ansiStyleLines.splice(
+      start,
+      deleteCount,
+      ...replacement.map(() => template),
+    );
+  }
+
+  if (typeof buffer._mdcuiAnsiText === "string") {
+    const ansiLines = buffer._mdcuiAnsiText.split("\n");
+    ansiLines.splice(start, deleteCount, ...replacement);
+    buffer._mdcuiAnsiText = ansiLines.join("\n");
+  }
+
+  buffer.invalidateHighlightFrom?.(start, { force: replacement.length !== deleteCount });
+  if (oldCursor) {
+    const oldEnd = start + deleteCount;
+    if (oldCursor.y >= oldEnd) {
+      buffer.cursor.y = oldCursor.y + replacement.length - deleteCount;
+    } else if (oldCursor.y >= start) {
+      const relativeY = Math.min(oldCursor.y - start, Math.max(0, replacement.length - 1));
+      buffer.cursor.y = start + relativeY;
+    }
+  }
+  buffer.modified = true;
+  buffer.ensureCursor?.();
+}
+
+function _setBlockValue(buffer, selector, value) {
+  const lines = buffer.lines;
+  const block = _findBlock(lines, selector);
+  if (!block) return false;
+
+  const values = String(value ?? "").replace(/\r\n?/g, "\n").split("\n");
+  const contentStart = block.start + 1;
+  const capacity = Math.max(0, block.end - contentStart);
+
+  if (block.header.kind === "fenced") {
+    const replacement = values.map((line) => block.header.indent + line);
+    _spliceBufferLines(buffer, contentStart, capacity, replacement);
+    return true;
+  }
+
+  const rowPrefix = block.header.indent + block.header.bodyMarker + " ";
+  const replacement = values.map((line) => rowPrefix + line);
+  _spliceBufferLines(buffer, contentStart, capacity, replacement);
+  return true;
+}
+
+export function createTuiSelector(getBuffer) {
+  return function $(selector) {
+    const parsedSelector = _parseBlockIdentity(selector, { selector: true });
+    const selection = {
+      val(...args) {
+        try {
+          if (!parsedSelector) return args.length > 0 ? selection : "";
+          const buffer = getBuffer?.();
+          if (!buffer) return args.length > 0 ? selection : "";
+          const lines = Array.isArray(buffer.lines)
+            ? buffer.lines
+            : String(buffer).replace(/\r\n?/g, "\n").split("\n");
+          if (args.length > 0) {
+            if (Array.isArray(buffer.lines))
+              _setBlockValue(buffer, parsedSelector, args[0]);
+            return selection;
+          }
+          return _blockValue(lines, parsedSelector) ?? "";
+        } catch {
+          return args.length > 0 ? selection : "";
+        }
+      },
+    };
+    return selection;
+  };
+}
+
 // ── micro global object ───────────────────────────────────────────────────────
 
 export function buildMicroGlobal(jsManager) {
   const getApp = () => jsManager._app;
   const getCtx = () => jsManager._ctx;
+  const $ = createTuiSelector(() => getApp()?.buffer);
 
   // Converts cmd args to a safe command string for handleCommand
   function buildCmdString(name, args) {
@@ -921,6 +1088,7 @@ export function buildMicroGlobal(jsManager) {
   };
 
   globalThis.micro = micro;
+  globalThis.$ = $;
   return micro;
 }
 

package/testapp.md

@@ -9,6 +9,20 @@
 - [Print process.argv](javascript:pav())
 - [Calculator🧮計算機](javascript:calc())
   * Use cos sin PI directly
+- [Show ↓ text](javascript:alert($('text').val()))
+
+```text
+Text edit. TUI: Click ↙ to inc lines ↖ to dec
+可編輯文字框 TUI：按↙擴充行數 ↖減少行數
+```
+## Question 問題
+- What is 1+2+3+4+..+..+∞
+
+```text#ans
+-1/12
+```
+- [Submit 提交](javascript:checkAns())
+
 ## Task list
 - [X] task1
 - [ ] task2
@@ -43,6 +57,15 @@ export async function calc()
     
   );
 }
+
+export function checkAns()
+{
+  if($('#ans').val().trim()=='-1/12')
+    $('#ans').val('答對🥳Right!');
+  else
+    $('#ans').val('答錯😫Wrong!');
+}
+
 ```