buninu 0.1.1

package/apps/jsmdcui/demos/select.md

@@ -0,0 +1,63 @@
+#!/usr/bin/env jsmdcui
+
+# Select and Task List Demo
+
+Use `Enter` or `Space` to toggle a task item in the TUI, then activate these
+links to read the values under headings at different levels.
+
+- [Read primary color (h2 single value)](javascript:showHeadingValue('select-primary-color'))
+- [Read enabled features (h3 array)](javascript:showHeadingValue('enabled-features'))
+- [Read log level (h4 single value)](javascript:showHeadingValue('select-log-level'))
+- [Read permissions (h2 array)](javascript:showHeadingValue('permissions'))
+- [Read every group](javascript:showAllHeadingValues())
+
+## Select Primary Color
+
+- [ ] Red
+- [x] Green
+  - [x] Nested green detail (ignored)
+  - [ ] Another nested detail (ignored)
+- [x] Blue (ignored because select returns the first checked value)
+
+### Enabled Features
+
+- [x] Search
+- [ ] Notifications
+  - [x] Nested notification option (ignored)
+- [x] Offline mode
+- [x] Sync
+
+#### Select Log Level
+
+- [ ] Debug
+- [x] Info
+- [ ] Warning
+- [ ] Error
+
+## Permissions
+
+- [x] Read
+- [x] Write
+  - [x] Write temporary files (ignored)
+  - [ ] Write system files (ignored)
+- [ ] Execute
+- [x] Share
+
+```js front
+export function showHeadingValue(id)
+{
+  const value = $('#'+id).val();
+  alert(id+': '+JSON.stringify(value));
+}
+
+export function showAllHeadingValues()
+{
+  const values = {
+    primaryColor: $('#select-primary-color').val(),
+    enabledFeatures: $('#enabled-features').val(),
+    logLevel: $('#select-log-level').val(),
+    permissions: $('#permissions').val(),
+  };
+  alert(JSON.stringify(values, null, 2));
+}
+```

package/apps/jsmdcui/demos/todo-zh.md

@@ -0,0 +1,190 @@
+#!/usr/bin/env jsmdcui
+
+# Todo List
+
+## Todos
+
+- [ ] canvas support
+- [x] push/pop/splice/slice list items
+- [x] image by --kitty
+- [ ] clean up codebase
+
+## Actions
+
+```text#todo-input
+Fly to the moon
+```
+
+在上方輸入 Todo 文字，再選擇新增或移除。移除會刪除第一個文字完全相同的項目。
+
+- [新增 Todo](javascript:addTodo())
+- .
+- [移除 Todo](javascript:removeTodo())
+- .
+- [顯示已完成](javascript:showCompleted())
+- .
+- [顯示未完成](javascript:showPending())
+
+## 存檔／讀檔
+
+```text#todo-file
+todo_list.json
+```
+
+在上方輸入 JSON 檔案路徑。存檔會寫入人類可讀的 JSON；讀檔會在確認後取代目前的 Todo 清單。
+
+- [儲存 Todos](javascript:saveTodos())
+- .
+- [讀取 Todos](javascript:loadTodos())
+
+## 操作結果：
+
+```text#todo-status
+尚未操作
+```
+
+## Filtered Result
+
+```text#todo-result
+點按「顯示已完成」或「顯示未完成」查看結果
+```
+
+```js front
+function todoText() {
+  return $('#todo-input').val().trim();
+}
+
+function showItems(title, checked) {
+  const items = $('#todos')
+    .slice()
+    .filter(item => item.checked === checked);
+
+  const output = items.length
+    ? items.map(item => `${item.checked ? '✓' : '○'} ${item.value}`).join('\n')
+    : '（沒有項目）';
+  $('#todo-result').val(`${title}\n${output}`);
+  $('#todo-status').val(`找到 ${items.length} 個${title}項目`);
+}
+
+function todoFile() {
+  return $('#todo-file').val().trim();
+}
+
+function describeError(error) {
+  return error?.message || String(error);
+}
+
+export function addTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('新增失敗：請先輸入 Todo 文字');
+    return;
+  }
+
+  const length = $('#todos').push(value);
+  $('#todo-input').val('');
+  $('#todo-status').val(`已新增「${value}」，目前共有 ${length} 個 Todo`);
+}
+
+export function removeTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('移除失敗：請輸入要移除的 Todo 文字');
+    return;
+  }
+
+  const items = $('#todos').slice();
+  const index = items.findIndex(item => item.value === value);
+  if (index < 0) {
+    $('#todo-status').val(`移除失敗：找不到「${value}」`);
+    return;
+  }
+
+  const removed = $('#todos').splice(index, 1);
+  $('#todo-input').val('');
+  $('#todo-status').val(`已移除「${removed[0]}」`);
+}
+
+export function showCompleted() {
+  showItems('已完成', true);
+}
+
+export function showPending() {
+  showItems('未完成', false);
+}
+
+export async function saveTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('存檔失敗：請先輸入 JSON 檔案路徑');
+    return;
+  }
+
+  try {
+    const obj = { todos: $('#todos').slice() };
+    const result = await rpc.saveTodoList(file, obj);
+    $('#todo-status').val(`已將 ${obj.todos.length} 個 Todo 儲存至 ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`存檔失敗：${describeError(error)}`);
+  }
+}
+
+export async function loadTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('讀檔失敗：請先輸入 JSON 檔案路徑');
+    return;
+  }
+  try {
+    const result = await rpc.loadTodoList(file);
+    const json = JSON.stringify(result.obj, null, 1);
+    if (!confirm(`要用「${file}」中的以下 JSON 取代目前的 Todo 清單嗎？\n\n${json}`)) {
+      $('#todo-status').val('已取消讀檔，目前的 Todos 未變更');
+      return;
+    }
+    const current = $('#todos').slice();
+    $('#todos').splice(0, current.length, ...result.obj.todos);
+    $('#todo-status').val(`已從 ${result.path} 讀取 ${result.obj.todos.length} 個 Todo`);
+  } catch (error) {
+    $('#todo-status').val(`讀檔失敗：${describeError(error)}`);
+  }
+}
+```
+
+```js back
+import { resolve } from 'node:path';
+
+function todoPath(input) {
+  const value = String(input ?? '').trim();
+  if (!value) throw new Error('請先輸入 JSON 檔案路徑');
+  return resolve(value);
+}
+
+function validateTodoObject(obj) {
+  if (!obj || typeof obj !== 'object' || !Array.isArray(obj.todos))
+    throw new Error('Todo JSON 必須是包含 todos 陣列的物件');
+
+  return {
+    todos: obj.todos.map((item, index) => {
+      if (!item || typeof item !== 'object' || typeof item.value !== 'string')
+        throw new Error(`第 ${index + 1} 個 Todo 項目必須包含字串 value`);
+      return { value: item.value, checked: Boolean(item.checked) };
+    }),
+  };
+}
+
+export async function saveTodoList(input, obj) {
+  const path = todoPath(input);
+  const validated = validateTodoObject(obj);
+  await Bun.write(path, JSON.stringify(validated, null, 1) + '\n');
+  return { path };
+}
+
+export async function loadTodoList(input) {
+  const path = todoPath(input);
+  const file = Bun.file(path);
+  if (!await file.exists()) throw new Error(`找不到 Todo 檔案：${path}`);
+  const obj = validateTodoObject(JSON.parse(await file.text()));
+  return { path, obj };
+}
+```

package/apps/jsmdcui/demos/todo.md

@@ -0,0 +1,191 @@
+#!/usr/bin/env jsmdcui
+
+# Todo List
+
+## Todos
+
+- [ ] canvas support
+- [x] push/pop/splice/slice list items
+- [x] image by --kitty
+- [ ] clean up codebase
+
+## Actions
+
+```text#todo-input
+Fly to the moon
+```
+
+Enter Todo text above, then choose Add or Remove. Remove deletes the first item whose text matches exactly.
+
+- [Add Todo](javascript:addTodo())
+- .
+- [Remove Todo](javascript:removeTodo())
+- .
+- [Show Completed](javascript:showCompleted())
+- .
+- [Show Pending](javascript:showPending())
+
+## Save / Load
+
+```text#todo-file
+todo_list.json
+```
+
+Enter a JSON file path above. Saving writes human-readable JSON; loading replaces the current Todo list after confirmation.
+
+- [Save Todos](javascript:saveTodos())
+- .
+- [Load Todos](javascript:loadTodos())
+
+## Operation Result
+
+```text#todo-status
+No action yet
+```
+
+## Filtered Result
+
+```text#todo-result
+Select “Show Completed” or “Show Pending” to view matching items
+```
+
+```js front
+function todoText() {
+  return $('#todo-input').val().trim();
+}
+
+function showItems(title, checked) {
+  const items = $('#todos')
+    .slice()
+    .filter(item => item.checked === checked);
+
+  const output = items.length
+    ? items.map(item => `${item.checked ? '✓' : '○'} ${item.value}`).join('\n')
+    : '(No items)';
+  const noun = items.length === 1 ? 'item' : 'items';
+  $('#todo-result').val(`${title}\n${output}`);
+  $('#todo-status').val(`Found ${items.length} ${title.toLowerCase()} ${noun}`);
+}
+
+function todoFile() {
+  return $('#todo-file').val().trim();
+}
+
+function describeError(error) {
+  return error?.message || String(error);
+}
+
+export function addTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('Add failed: enter Todo text first');
+    return;
+  }
+
+  const length = $('#todos').push(value);
+  $('#todo-input').val('');
+  $('#todo-status').val(`Added “${value}”; ${length} Todos total`);
+}
+
+export function removeTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('Remove failed: enter the Todo text to remove');
+    return;
+  }
+
+  const items = $('#todos').slice();
+  const index = items.findIndex(item => item.value === value);
+  if (index < 0) {
+    $('#todo-status').val(`Remove failed: could not find “${value}”`);
+    return;
+  }
+
+  const removed = $('#todos').splice(index, 1);
+  $('#todo-input').val('');
+  $('#todo-status').val(`Removed “${removed[0]}”`);
+}
+
+export function showCompleted() {
+  showItems('Completed', true);
+}
+
+export function showPending() {
+  showItems('Pending', false);
+}
+
+export async function saveTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('Save failed: enter a JSON file path first');
+    return;
+  }
+
+  try {
+    const obj = { todos: $('#todos').slice() };
+    const result = await rpc.saveTodoList(file, obj);
+    $('#todo-status').val(`Saved ${obj.todos.length} Todos to ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`Save failed: ${describeError(error)}`);
+  }
+}
+
+export async function loadTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('Load failed: enter a JSON file path first');
+    return;
+  }
+  try {
+    const result = await rpc.loadTodoList(file);
+    const json = JSON.stringify(result.obj, null, 1);
+    if (!confirm(`Replace the current Todo list with this JSON from “${file}”?\n\n${json}`)) {
+      $('#todo-status').val('Load cancelled; current Todos were not changed');
+      return;
+    }
+    const current = $('#todos').slice();
+    $('#todos').splice(0, current.length, ...result.obj.todos);
+    $('#todo-status').val(`Loaded ${result.obj.todos.length} Todos from ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`Load failed: ${describeError(error)}`);
+  }
+}
+```
+
+```js back
+import { resolve } from 'node:path';
+
+function todoPath(input) {
+  const value = String(input ?? '').trim();
+  if (!value) throw new Error('Enter a JSON file path first');
+  return resolve(value);
+}
+
+function validateTodoObject(obj) {
+  if (!obj || typeof obj !== 'object' || !Array.isArray(obj.todos))
+    throw new Error('Todo JSON must be an object containing a todos array');
+
+  return {
+    todos: obj.todos.map((item, index) => {
+      if (!item || typeof item !== 'object' || typeof item.value !== 'string')
+        throw new Error(`Todo item ${index + 1} must contain a string value`);
+      return { value: item.value, checked: Boolean(item.checked) };
+    }),
+  };
+}
+
+export async function saveTodoList(input, obj) {
+  const path = todoPath(input);
+  const validated = validateTodoObject(obj);
+  await Bun.write(path, JSON.stringify(validated, null, 1) + '\n');
+  return { path };
+}
+
+export async function loadTodoList(input) {
+  const path = todoPath(input);
+  const file = Bun.file(path);
+  if (!await file.exists()) throw new Error(`Todo file not found: ${path}`);
+  const obj = validateTodoObject(JSON.parse(await file.text()));
+  return { path, obj };
+}
+```

package/apps/jsmdcui/edit

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

package/apps/jsmdcui/jsmdcui.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+sd=$(dirname "$(realpath "$0")")
+
+exec bun "$sd"/tui --mdcui "$@"

package/apps/jsmdcui/llm-maze.txt

@@ -0,0 +1,94 @@
+你正在透過 Bun.WebView 操作 jsmdcui TUI App。
+
+CDP 連線位址：
+
+ws://127.0.0.1:9222/devtools/browser/cdp-server
+
+可用操作：
+
+1. 取得完整純文字 UI：
+
+   await view.evaluate("micro.getAllText()")
+
+2. 取得包含 ANSI 樣式與 OSC 8 link 的完整 UI：
+
+   await view.evaluate("micro.getAllAnsiText()")
+
+3. 點擊 buffer 座標：
+
+   await view.click(column, line)
+
+   column 與 line 都是 1-based。
+   這是整份 buffer 的座標，不是螢幕 pixel。
+   不支援 selector click。
+
+4. 發送真正的鍵盤事件：
+
+   await view.press("ArrowUp")
+   await view.press("ArrowDown")
+   await view.press("ArrowLeft")
+   await view.press("ArrowRight")
+   await view.press("r", { modifiers: ["Control"] })
+
+5. 每次 click 或 press 後，重新取得 UI 快照確認結果。
+
+Maze 操作方式：
+
+先在 micro.getAllText() 中找到包含 "Put the cursor here" 的行，計算該文字的
+1-based column/line，然後 click 該位置，讓 Maze controls 取得焦點。
+
+Maze controls 取得焦點後：
+
+- ArrowUp：上
+- ArrowDown：下
+- ArrowLeft：左
+- ArrowRight：右
+- Ctrl-R：重新開始
+
+每次移動後可讀取狀態：
+
+await view.evaluate("$('#last-key').val()")
+
+取得完整迷宮畫面：
+
+await view.evaluate("$('#character').val()")
+
+看到狀態包含 "Escaped the maze" 代表成功。抵達終點時不會呼叫 alert；大型
+慶祝內容會直接顯示在 character 區域，並提示使用 Ctrl-R 重新開始。
+
+初始化與聚焦 controls 的範例：
+
+const view = new Bun.WebView({
+  backend: {
+    type: "chrome",
+    url: "ws://127.0.0.1:9222/devtools/browser/cdp-server",
+  },
+});
+
+const cell = await view.evaluate(`
+  (() => {
+    const lines = micro.getAllText().split("\\n");
+    const y = lines.findIndex(line =>
+      line.includes("Put the cursor here")
+    );
+
+    return {
+      x: lines[y].indexOf("Put the cursor here") + 1,
+      y: y + 1,
+    };
+  })()
+`);
+
+await view.click(cell.x, cell.y);
+await view.press("r", { modifiers: ["Control"] });
+
+alert 注意事項：
+
+Maze 抵達終點不會觸發 alert。不過 jsmdcui 其他操作若呼叫同步 alert()，CDP
+operation 會等待使用者直接在實際 terminal 按 Enter 關閉；alert 阻塞期間，無法
+再透過 view.press("Enter") 關閉它。無人值守自動化應避免觸發同步 alert，或預先
+提供替代的 dialog handling。
+
+操作完成後呼叫：
+
+view.close();

package/apps/jsmdcui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "jsmdcui",
+  "version": "0.17.3",
+  "description": "Markdown as a Common UI for Terminals and Web Browsers",
+  "type": "module",
+  "main": "./src/index.js",
+  "license": "MIT",
+  "bin": {
+    "jsmdcui": "./src/index.js"
+  },
+  "scripts": {
+    "start": "bun ./src/index.js --demo",
+    "tui": "bun ./tui",
+    "wui": "bun ./wui",
+    "edit": "bun ./edit",
+    "check": "bun ./src/index.js --check",
+    "clean": "bun ./clean.sh"
+  }
+}

package/apps/jsmdcui/project_structure.txt

@@ -0,0 +1,35 @@
+                         testapp.md
+                              │
+               ┌──────────────┴──────────────┐
+               │                             │
+               ▼                             ▼
+          Browser HTML                    TUI ANSI
+               │                             │
+      javascript:foo()             extract javascript:
+               │                             │
+               ▼                             ▼
+       window.frontFunc()          evalFront(frontMod, text)
+               │                             │
+               └──────────────┬──────────────┘
+                              ▼
+                    testapp.md.front.js
+                              │
+                         rpc.someFunc()
+                  ┌───────────┴───────────┐
+                  │                       │
+               Browser                   TUI
+                  │                       │
+           RPC Proxy client       import * as rpc
+                  │               from back module
+                  ▼                       │
+              fetch rpc                   │
+                  │                       │
+                  ▼                       │
+             server.mjs                   │
+                  │                       │
+                  ▼                       │
+       evalBack(backMod, reqjson)         │
+                  │                       │
+                  └───────────┬───────────┘
+                              ▼
+                    testapp.md.back.js