jsmdcui 0.6.3 → 0.8.0

package/runtime/help/help.md

@@ -47,9 +47,10 @@ On other platforms, follow the [official Bun installation guide](https://bun.com
 Choose either of these two ways to run jsmdcui.
 
 > **Important:** Opening or rendering a local `.md` file writes or overwrites
-> 5 generated files beside it. Starting `--wui` without a file writes the
-> 5 files generated from `testapp.md` in the current directory. The source
-> Markdown is not changed, but you should run the demo in a directory where
+> 5 generated files beside it. 
+> Starting `--wui` without a file or starting all the `--demo`s writes the
+> 5 files generated from `testapp.md` in the current directory. 
+> The source Markdown is not changed, but you should run the demo in a directory where
 > overwriting generated files is safe.
 
 ### Route 1: Run with npx
@@ -72,9 +73,10 @@ npx jsmdcui
 npx jsmdcui --demo
 ```
 
+List every bundled demo and its command-line option:
+
 ```sh
-# Heading and task-list selector demo
-npx jsmdcui --demo-select
+npx jsmdcui --demo-list
 ```
 
 ```sh
@@ -87,6 +89,11 @@ npx jsmdcui --demo-imgtool
 npx jsmdcui --demo-imgtool-zh
 ```
 
+```sh
+# Maze game demo
+npx jsmdcui --demo-maze
+```
+
 ```sh
 # WUI(Web User Interface) Demo
 npx jsmdcui --wui
@@ -121,22 +128,31 @@ bun src/index.js --wui testapp.md
 
 ### Usage table
 
-- The command table below uses the cloned-source form. 
+- The command table below assumes you're running from a cloned repository 
 - If you use npx, replace `bun src/index.js` with `npx jsmdcui`
 
+- I've also provided short aliases
+  * bun ./tui = bun src/index.js
+  * bun ./wui = bun src/index.js --wui
+
 | Command | Result |
 | --- | --- |
 | `bun src/index.js app.md` | Render `app.md` as a read-only terminal UI and write five generated files beside it. |
+| `bun src/index.js --kitty app.md` | Display Markdown images with Kitty graphics and the jsgotty MIME extension. |
+| `bun src/index.js --kitty-compat app.md` | Convert Markdown images to PNG with `Bun.Image` and display them using the standard Kitty graphics protocol without the non-standard MIME `U` field. |
+| `bun src/index.js --kitty --allow-url URL.md` | Download trusted HTTP(S) Markdown and its HTTP(S) images, then display supported images with Kitty graphics. |
+| `JSMDCUI_KITTY_DEBUG=1 bun src/index.js --kitty app.md` | Enable Kitty image placement logging to `kitty-placement.log`. |
 | `bun src/index.js --check app.md` | Check heading and fenced-block IDs for collisions, print line-by-line details, and exit. |
 | `bun src/index.js --edit app.md` | Open `app.md` as editable UTF-8 source, overriding automatic Markdown UI detection. |
 | `bun src/index.js --cat app.md` | Render the terminal version to stdout, write five generated files beside it, and exit. |
 | `bun src/index.js --testapp.md` | Write the bundled `testapp.md` source to stdout and exit. |
 | `bun src/index.js --export-readme` | Write or overwrite `./README.md` with the bundled README source and exit. |
+| `bun src/index.js --demo-list` | List `testapp.md` and every bundled `demos/*.md` example with its command-line option, then exit. |
 | `bun src/index.js --demo` | Use local `testapp.md` when present, otherwise write the bundled demo; open it in the terminal UI and write five generated files beside it. |
-| `bun src/index.js --demo-select` | Use local `select.md` when present, otherwise write the bundled selector demo; open it in the terminal UI and write five generated files beside it. |
-| `bun src/index.js --demo-imgtool` | Use local `image-processor.md` when present, otherwise write the bundled Bun.Image processor; open it in the terminal UI and write five generated files beside it. |
-| `bun src/index.js --demo-imgtool-zh` | Use local `image-processor.zh-TW.md` when present, otherwise write the bundled Traditional Chinese Bun.Image processor; open it in the terminal UI and write five generated files beside it. |
-| `bun src/index.js --allow-url URL.md` | Download HTTP(S) Markdown to the current directory, write 5 generated files, and allow its embedded code to run. Only use trusted URLs. |
+| `bun src/index.js --demo-<filename>` | Load `demos/<filename>.md`; preserve an existing local copy or write the bundled copy, then open it and generate its five companion files. New files added under `demos/` work automatically. |
+| `bun src/index.js --demo-imgtool` | Compatibility alias for `--demo-image-processor`. |
+| `bun src/index.js --demo-imgtool-zh` | Compatibility alias for `--demo-image-processor.zh-TW`. |
+| `bun src/index.js --allow-url URL.md` | Download HTTP(S) Markdown to the current directory and, with Kitty mode enabled, download its HTTP(S) images; write 5 generated files and allow embedded code to run. Only use trusted URLs. |
 | `bun src/index.js --wui` | Use local `testapp.md` when present, otherwise write the bundled demo; write five generated files in the current directory, then print and serve a random URL. |
 | `bun src/index.js --wui app.md` | Write five generated files beside `app.md`, then print and serve a random URL. |
 | `PORT=8080 bun src/index.js --wui app.md` | Start the browser UI on another port. |
@@ -228,20 +244,90 @@ 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 TUI, `text` remains a single-line control while `textarea` supports
+native multiline editing. Enter splits the current body row and grows the
+frame, Backspace at the start of a later row joins it to the previous row, and
+Delete at the end of a row joins the following row. When the expanded control
+does not fit on screen, the document viewport scrolls to keep the cursor
+visible. The closing border and following Markdown content move with the
+resized control.
+
+A named `text` or `textarea` block can run inline front-end code before it
+handles a key by placing a quoted HTML-style `@keydown` attribute after its
+identity:
+
+````md
+```text#command.field @keydown="handleCommand(event)"
+Initial value
+```
+
+```js front
+export function handleCommand(event) {
+  if (event.key !== 'Enter') return;
+  event.preventDefault();
+  alert(`Command: ${$('#command').val()}`);
+}
+```
+````
+
+The block must have a unique ID. In the WUI, jsmdcui writes the code directly
+to the generated textarea's native `onkeydown` attribute. Mobile browsers may
+report ordinary software-keyboard letters as `Unidentified`, so the WUI also
+generates an `onbeforeinput` fallback. The unidentified event is hidden from
+the handler; `beforeinput.data` becomes `event.key`, then the same keydown code
+runs once. The fallback also preserves `ctrlKey`, `shiftKey`, `altKey`, and
+`metaKey` from the unidentified keydown. A short zero-delay timer distinguishes
+it from the `beforeinput` that normally follows an already identified keydown,
+preventing duplicate calls.
+
+On Android browsers, `Alt-E`, `Alt-N`, `Alt-U`, and `Alt-I` may be consumed or
+transformed by the software keyboard and therefore cannot always be observed
+reliably by a keydown handler. Avoid relying on these combinations for portable
+WUI controls.
+
+In the TUI, the full source info string is kept in an event table before Bun
+renders it. The keydown statements run with a synthetic `event` before the
+text control handles the key. Both interfaces expose `event.key`, modifier
+flags, `event.target.id`, and `event.target.value`. Use `event`, the native
+inline-handler variable, rather than Vue's `$event` alias. Double quotes
+delimit the handler; use single-quoted JavaScript strings inside it or escape
+an embedded double quote as `\"`.
+
+Both interfaces add a non-enumerable `event.toJSON()` method with matching
+keyboard, modifier, prevention, and target fields. `JSON.stringify(event)`
+calls it automatically, so the resulting JSON is portable between the TUI and
+WUI.
+
+A keydown handler can call `event.preventDefault()` to stop text insertion or
+cursor movement. The `.prevent` modifier applies this automatically:
+
+````md
+```text#command @keydown.prevent="handleCommand(event)"
+```
+````
+
+`@keydown` is the only keyboard event exposed by jsmdcui. Traditional terminal
+input does not report physical key releases reliably, so jsmdcui does not
+provide or emulate `@keyup` in either interface.
+
 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.
+be edited, and the frame prefix cannot be deleted. Multiline paste remains
+blocked. For single-line `text` controls, 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.
+
+TUI text-control changes made through `.val(value)` participate in the same
+history as direct editing. `Ctrl-Z` undoes the replacement and `Ctrl-Y` redoes
+it, including multiline frame resizing and its associated rendered metadata.
 
 ### Heading task lists and selector API
 
 Headings can act as form-group selectors. jsmdcui uses the IDs generated by
 `Bun.markdown.html(..., { headings: { ids: true } })`; for example,
-`## Select Color` becomes `#select-color`. A heading selection reads the first
-task list directly following that heading and stops at the next heading. Nested
-task items are not included in the outer list's value.
+`## Select Color` becomes `#select-color`. A heading selection reads direct
+task items from the first list following that heading and stops at the next
+heading. In the TUI, the first rendered `☐` or `☒` establishes that list and
+its indentation. Nested task items are not included in the outer list's value.
 
 Heading IDs share the same selector namespace as all explicitly named fenced
 blocks, not only `text` and `textarea`, so avoid name collisions between them.
@@ -306,14 +392,65 @@ $('#select-color').val() // "Green"
 $('#features').val()     // ["Search", "Offline mode"]
 ```
 
-The bundled `select.md` is a multilevel runnable example. Use `--demo-select`
+The first direct task list belonging to a heading can also be changed with
+Array-style methods. String arguments create unchecked items. Pass an object
+to choose the initial checked state:
+
+```js
+$('#features').push('Export')
+$('#features').unshift({ value: 'Import', checked: true })
+$('#features').splice(1, 2, 'Replacement')
+$('#features').slice(0, 2)
+$('#features').pop()
+$('#features').shift()
+```
+
+Like the corresponding `Array.prototype` methods, `.push(...items)` and
+`.unshift(...items)` accept multiple items and return the new number of direct
+items. `.pop()` and `.shift()` return the removed item's visible label, or
+`undefined` when the list is empty. Nested task items are part of their parent
+item: they are not counted separately, and are removed together with that
+parent. These methods change the rendered TUI/WUI state; they do not rewrite
+the source Markdown file. A heading must already have a task list before items
+can be added.
+
+`.splice(start, deleteCount, ...items)` follows `Array.prototype.splice()`:
+negative indexes count from the end, omitting `deleteCount` removes through the
+end, and the return value is an array containing the removed visible labels.
+
+`.slice(start, end)` is read-only and follows `Array.prototype.slice()`. It
+returns fresh item snapshots, including unchecked items, so changing the
+returned array or its objects does not change the rendered list:
+
+```js
+$('#features').slice()
+// [
+//   { value: 'Search', checked: true },
+//   { value: 'Notifications', checked: false },
+// ]
+```
+
+`demos/todo.md` and `demos/todo-zh.md` are runnable Todo examples that
+demonstrate `.push()`,
+`.splice()`, `.slice()`, and `{ value, checked }` snapshots using editable text
+controls instead of `prompt()` dialogs. Materialize one in the current
+directory with its demo flag, or open the source-tree copy directly:
+
+```sh
+bun src/index.js --demo-todo
+bun src/index.js --demo-todo-zh
+bun src/index.js demos/todo.md
+bun src/index.js --wui demos/todo-zh.md
+```
+
+The bundled `demos/select.md` is a multilevel runnable example. Use `--demo-select`
 to write it into the current directory when missing and open it in the TUI, or
 open it explicitly in either interface:
 
 ```sh
 bun src/index.js --demo-select
-bun src/index.js select.md
-bun src/index.js --wui select.md
+bun src/index.js demos/select.md
+bun src/index.js --wui demos/select.md
 ```
 
 The available selector methods are:
@@ -321,23 +458,29 @@ The available selector methods are:
 | Method | TUI | WUI |
 | --- | --- | --- |
 | `.val()` | Read text blocks or heading task-list values. | Read textareas/controls or heading task-list values. |
-| `.val(value)` | Replace text-block contents and resize multiline values. | Set textarea/control values and resize textareas. |
+| `.val(value)` | Replace text-block contents, resize multiline values, and record Undo/Redo history. | Set textarea/control values and resize textareas. |
 | `.html()` | Return a selected heading's inner HTML. | Return any successfully selected DOM element's `innerHTML`. |
 | `.line()` | Return a heading's current 1-based TUI row, or `0` if missing. | Not available. |
+| `.push(...items)` | Append unchecked strings or `{ value, checked }` task items; return the new direct-item count. | Same. |
+| `.pop()` | Remove and return the last direct task item's label, or `undefined`. | Same. |
+| `.shift()` | Remove and return the first direct task item's label, or `undefined`. | Same. |
+| `.unshift(...items)` | Prepend unchecked strings or `{ value, checked }` task items; return the new direct-item count. | Same. |
+| `.splice(start, deleteCount, ...items)` | Remove and insert direct task items; return the removed labels as an array. | Same. |
+| `.slice(start, end)` | Return `{ value, checked }` snapshots without changing the direct task items. | Same. |
 
 TUI heading rows are recalculated after text-block rows are added, removed, or
 replaced with multiline `.val(value)` content.
 
-The three UI building blocks are:
+The 3 UI building blocks are:
 
-- Regular Markdown provides headings, text, lists, task checkboxes, code, and
+- 1. `Regular Markdown` provides headings, text, lists, task checkboxes, code, and
   links.
-- A `js front` block contains UI code. Exported functions can use
+- 2. `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,
+  * 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.
+- 3. `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
   `await rpc.functionName(arg1, arg2)`.
@@ -398,6 +541,19 @@ The terminal automatically reflows the Markdown when its width changes.
 Only `javascript:` links execute in the TUI; ordinary web links behave as
 normal links in the browser.
 
+Local Markdown images are displayed automatically in terminals that support
+the Kitty graphics protocol. Relative image paths are resolved from the
+Markdown file's directory. jsmdcui reads the image dimensions, reserves the
+corresponding terminal rows, and updates the placement when the document is
+scrolled, resized, or shown in a split pane. Unsupported or missing images, as
+well as remote images not authorized with `--allow-url`, retain Bun's normal
+linked `📷` fallback. To download trusted remote Markdown and display its
+supported HTTP(S) images with Kitty graphics, combine the options:
+
+```sh
+bun src/index.js --kitty --allow-url https://example.com/app.md
+```
+
 ## Browser interaction
 
 The WUI uses normal browser mouse and keyboard behavior. Clicking a
@@ -407,15 +563,35 @@ its associated text. `alert`, `confirm`, and `prompt` use the browser's built-in
 dialogs. Checkbox changes exist only in the current page: refreshing does not
 preserve them and does not update the Markdown file.
 
-The WUI uses port `3000` by default and accepts connections through the
-machine's available network interfaces. The printed `localhost` URL is for the
-same machine. From another device on the same network, replace `localhost` with
-the server machine's IP address and keep the same port and full path.
+The WUI first tries port `3000` and accepts connections through the machine's
+available network interfaces. If port `3000` is already in use, the operating
+system selects an available port instead; the printed URL always contains the
+actual port. Set `PORT` to request another fixed port. The printed `localhost`
+URL is for the same machine. From another device on the same network, replace
+`localhost` with the server machine's IP address and keep the printed port and
+full path.
 
 Each server start prints a new random path. The old URL stops working after the
 server is stopped or restarted. Keep the process running while using the page,
 and press `Ctrl-C` in its terminal to stop it.
 
+## Editing Markdown source
+
+From a cloned repository, use the `edit` launcher to open a Markdown file as
+ordinary editable UTF-8 source instead of rendering it as a Markdown UI:
+
+```sh
+bun ./edit app.md
+```
+
+This is equivalent to:
+
+```sh
+bun src/index.js --edit app.md
+```
+
+Additional file and cursor arguments are forwarded unchanged.
+
 ## Generated files
 
 Opening a local Markdown UI generates these files beside the source file:
@@ -431,6 +607,13 @@ app.md-server.js
 They are regenerated from `app.md`, so edit the Markdown source rather than the
 generated files. The source directory must be writable.
 
+From the project directory, remove generated `*.md.*` and `*.md-*` companion
+files while keeping the Markdown source files:
+
+```sh
+bun ./clean.sh
+```
+
 ### Generated heading sections
 
 WUI output wraps each h1-h6 and its content in a hierarchical `<section>`.

package/runtime/jsplugins/cdp/cdp.js

@@ -44,7 +44,10 @@ Other micro APIs:
                                  e.g. for command "js 1+1": args.raw = "js 1+1", args.raw.slice(3) = "1+1"
   micro.RegisterAction(name, fn) — register bindable action
   micro.TermMessage(msg)       — show msg in editor status row
-  micro.alert(msg)             — suspend editor, print msg, wait for Enter
+  micro.alert(msg)             — synchronous; suspend editor, print msg, wait for Enter
+                                 e.g. micro.alert("Done") (do not await)
+  micro.confirm(msg)           — synchronous boolean result
+  micro.prompt(msg, default?)  — synchronous string or null result
   micro.Log(...args)           — console.log passthrough
   micro.GetOption(name)        micro.SetOption(name, value)
   micro.cmd.save()             — call any editor command via proxy
@@ -169,7 +172,7 @@ micro.on("init", () => {
       const addr = isPublic ? `0.0.0.0:${port}` : `127.0.0.1:${port}`;
       micro.TermMessage(`CDP@${addr} server running 伺服器啟動了`)
 
-      //await micro.alert(CdpServer)
+      //micro.alert(CdpServer)
     }  //  server not running
     else
     {

package/runtime/jsplugins/chapter/chapter.js

@@ -43,7 +43,10 @@ Other micro APIs:
   micro.MakeCommand(name, fn)  — register Ctrl+E command; fn(bp, args[])
   micro.RegisterAction(name, fn) — register bindable action
   micro.TermMessage(msg)       — show msg in editor status row
-  micro.alert(msg)             — suspend editor, print msg, wait for Enter
+  micro.alert(msg)             — synchronous; suspend editor, print msg, wait for Enter
+                                 e.g. micro.alert("Done") (do not await)
+  micro.confirm(msg)           — synchronous boolean result
+  micro.prompt(msg, default?)  — synchronous string or null result
   micro.Log(...args)           — console.log passthrough
   micro.GetOption(name)        micro.SetOption(name, value)
   micro.cmd.save()             — call any editor command via proxy
@@ -105,4 +108,3 @@ micro.on("init", () => {
 
 });
 
-

package/runtime/jsplugins/example/example.js

@@ -45,7 +45,10 @@ Other micro APIs:
                                  e.g. for command "js 1+1": args.raw = "js 1+1", args.raw.slice(3) = "1+1"
   micro.RegisterAction(name, fn) — register bindable action
   micro.TermMessage(msg)       — show msg in editor status row
-  micro.alert(msg)             — suspend editor, print msg, wait for Enter
+  micro.alert(msg)             — synchronous; suspend editor, print msg, wait for Enter
+                                 e.g. micro.alert("Done") (do not await)
+  micro.confirm(msg)           — synchronous boolean result
+  micro.prompt(msg, default?)  — synchronous string or null result
   micro.Log(...args)           — console.log passthrough
   micro.GetOption(name)        micro.SetOption(name, value)
   micro.cmd.save()             — call any editor command via proxy
@@ -58,14 +61,14 @@ Other micro APIs:
 
 micro.on("init", () => {
   // Register a custom Ctrl+E command
-  micro.MakeCommand("showpath", async (bp, args) =>
+  micro.MakeCommand("showpath", (bp, args) =>
   {
     //micro.TermMessage("Hello from JS plugin! Args: " + args.join(", "));
 
-    //await micro.alert(micro.getLine())
+    //micro.alert(micro.getLine())
     const path = bp?.Buf?.Path || "(no path)";
     const loc = bp?.CursorLocation?.() || "+1.0:1";
-    await micro.alert(`${path}\n${loc}`)
+    micro.alert(`${path}\n${loc}`)
     
   });
   
@@ -75,12 +78,12 @@ micro.on("init", () => {
     // args.raw is the full original input string, e.g. "js console.log('hi')"
     // slice(3) skips the "js " prefix (2-char name + 1 space)
     const scriptText = args.raw?.slice(3) ?? args.join(" ");
-    await micro.alert(await eval(scriptText));
+    micro.alert(await eval(scriptText));
   });
   
 
   // greet: shows a message via micro.alert (leaves editor, shows text, Enter returns)
-  micro.MakeCommand("greet", async (bp, args) => 
+  micro.MakeCommand("greet", (bp, args) =>
   {
     const name = args.length ? 
                args.join(" ") : "world";
@@ -89,7 +92,7 @@ micro.on("init", () => {
       '# Hello\n- '+name
     );
     
-    await micro.alert(s);
+    micro.alert(s);
   });
 
   // Register a custom action (can be bound to a key in keybindings.json)

package/runtime/syntax/markdown.yaml

@@ -52,6 +52,7 @@ rules:
 # keywords
 # javascript alert confirm prompt rpc 
 # front back 
+# export function keydown 
 # console log error JSON stringify parse
 # async await Promise 
 # textarea text password search 

package/single-exe/packAssets.sh

@@ -4,4 +4,4 @@ sd=$(dirname "$0")
 
 cd "$sd"/..
 
-tar -cvf single-exe/assets.tar runtime README.md CHANGELOG.md src/cui/server.mjs src/cui/rpc.mjs testapp.md select.md image-processor.md image-processor.zh-TW.md
+tar -cvf single-exe/assets.tar demos runtime README.md CHANGELOG.md src/cui/server.mjs src/cui/rpc.mjs testapp.md

package/src/cui/fence-events.mjs

@@ -0,0 +1,106 @@
+const IDENTITY_RE = /^([A-Za-z_][\w:-]*)(?:#([A-Za-z_][\w:-]*))?((?:\.[A-Za-z_][\w:-]*)*)$/;
+
+function parseIdentity(value) {
+  const match = String(value ?? "").match(IDENTITY_RE);
+  if (!match) return null;
+  return {
+    tag: match[1],
+    id: match[2] || null,
+    classes: match[3] ? match[3].slice(1).split(".") : [],
+  };
+}
+
+function parseEventAttributes(text) {
+  const events = new Map();
+  let offset = 0;
+  while (offset < text.length) {
+    while (/\s/.test(text[offset] ?? "")) offset++;
+    if (offset >= text.length || text[offset] !== "@") break;
+    offset++;
+    const nameStart = offset;
+    while (/[A-Za-z0-9_.:-]/.test(text[offset] ?? "")) offset++;
+    const name = text.slice(nameStart, offset);
+    while (/\s/.test(text[offset] ?? "")) offset++;
+    if (!name || text[offset] !== "=") break;
+    offset++;
+    while (/\s/.test(text[offset] ?? "")) offset++;
+    if (text[offset] !== '"') break;
+    offset++;
+
+    let code = "";
+    let closed = false;
+    while (offset < text.length) {
+      const ch = text[offset++];
+      if (ch === '"') {
+        closed = true;
+        break;
+      }
+      if (ch === "\\" && offset < text.length) {
+        const next = text[offset++];
+        code += next === '"' || next === "\\" ? next : `\\${next}`;
+      } else {
+        code += ch;
+      }
+    }
+    if (!closed) break;
+    const [eventName, ...modifiers] = name.split(".");
+    if (eventName === "keydown")
+      events.set(eventName, { code, modifiers: [...new Set(modifiers.filter(Boolean))] });
+  }
+  return events;
+}
+
+export function parseFenceDeclarations(markdown) {
+  const lines = String(markdown ?? "").split(/\r?\n/);
+  const declarations = [];
+  let fence = null;
+
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    if (fence) {
+      const closing = line.match(/^ {0,3}(`{3,}|~{3,})\s*$/);
+      if (closing && closing[1][0] === fence.marker && closing[1].length >= fence.length)
+        fence = null;
+      continue;
+    }
+
+    const opening = line.match(/^ {0,3}(`{3,}|~{3,})([^]*)$/);
+    if (!opening) continue;
+    fence = { marker: opening[1][0], length: opening[1].length };
+    const info = String(opening[2] ?? "").trim();
+    const firstSpace = info.search(/\s/);
+    const identityText = firstSpace < 0 ? info : info.slice(0, firstSpace);
+    const attributesText = firstSpace < 0 ? "" : info.slice(firstSpace);
+    const identity = parseIdentity(identityText);
+    if (!identity) continue;
+    declarations.push({
+      ...identity,
+      identity: identityText,
+      events: parseEventAttributes(attributesText),
+      line: index + 1,
+      source: line.trim(),
+    });
+  }
+
+  return declarations;
+}
+
+export function fenceEventMap(markdown) {
+  const result = new Map();
+  for (const declaration of parseFenceDeclarations(markdown)) {
+    if (
+      !["text", "textarea"].includes(declaration.tag)
+      || !declaration.id
+      || declaration.events.size === 0
+      || result.has(declaration.id)
+    ) continue;
+    result.set(declaration.id, declaration);
+  }
+  return result;
+}
+
+export function inlineFenceEventCode(handler) {
+  if (!handler) return "";
+  const prefix = handler.modifiers.includes("prevent") ? "event.preventDefault();" : "";
+  return prefix + handler.code;
+}

package/src/cui/id-collision.mjs

@@ -1,3 +1,5 @@
+import { parseFenceDeclarations } from "./fence-events.mjs";
+
 function markdownHeadingDeclarations(markdown) {
   const lines = String(markdown).split(/\r?\n/);
   const declarations = [];
@@ -51,34 +53,14 @@ function markdownHeadingDeclarations(markdown) {
 }
 
 function fencedBlockDeclarations(markdown) {
-  const lines = String(markdown).split(/\r?\n/);
-  const declarations = [];
-  let fence = null;
-
-  for (let index = 0; index < lines.length; index++) {
-    const line = lines[index];
-    if (!fence) {
-      const opening = line.match(/^ {0,3}(`{3,}|~{3,})\s*(\S+)?\s*$/);
-      if (!opening) continue;
-      fence = { marker: opening[1][0], length: opening[1].length };
-      const identity = String(opening[2] ?? "").match(/^([A-Za-z_][\w:-]*)(?:#([A-Za-z_][\w:-]*))?(?:\.[A-Za-z_][\w:-]*)*$/);
-      if (identity?.[2]) {
-        declarations.push({
-          id: identity[2],
-          kind: `${identity[1]} fenced block`,
-          line: index + 1,
-          source: line.trim(),
-        });
-      }
-      continue;
-    }
-
-    const closing = line.match(/^ {0,3}(`{3,}|~{3,})\s*$/);
-    if (closing && closing[1][0] === fence.marker && closing[1].length >= fence.length)
-      fence = null;
-  }
-
-  return declarations;
+  return parseFenceDeclarations(markdown)
+    .filter((declaration) => declaration.id)
+    .map((declaration) => ({
+      id: declaration.id,
+      kind: `${declaration.tag} fenced block`,
+      line: declaration.line,
+      source: declaration.source,
+    }));
 }
 
 export function checkMarkdownIdCollisions(markdown) {

package/src/cui/kitty-debug.mjs

@@ -0,0 +1,25 @@
+import { appendFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+export const KITTY_DEBUG_LOG = resolve(import.meta.dir, "../..", "kitty-placement.log");
+export const KITTY_DEBUG_ENABLED = /^(1|true|yes|on)$/i.test(
+  String(process.env.JSMDCUI_KITTY_DEBUG ?? ""),
+);
+
+if (KITTY_DEBUG_ENABLED) {
+  try {
+    writeFileSync(KITTY_DEBUG_LOG, "");
+  } catch {}
+}
+
+export function logKittyPlacement(stage, details = {}) {
+  if (!KITTY_DEBUG_ENABLED) return;
+  try {
+    appendFileSync(KITTY_DEBUG_LOG, JSON.stringify({
+      time: new Date().toISOString(),
+      pid: process.pid,
+      stage,
+      ...details,
+    }) + "\n");
+  } catch {}
+}