buninu-linux 0.2.0

package/initramfs/buninu/apps/jsmdcui/cdp-maze.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env bun
+
+// Generated from llm-maze.txt instructions.
+// Start the maze TUI first:
+//   bun src/index.js --remote-debugging-port=9222 demos/maze.md
+// Then run:
+//   bun cdp-maze.js
+
+const DEFAULT_CDP_URL = "ws://127.0.0.1:9222/devtools/browser/cdp-server";
+
+const dirs = [
+  [1, 0, "ArrowDown"],
+  [-1, 0, "ArrowUp"],
+  [0, 1, "ArrowRight"],
+  [0, -1, "ArrowLeft"],
+];
+
+function parseMaze(text) {
+  return text.trimEnd().split("\n").map(line => {
+    const cells = [];
+
+    for (let i = 0; i < line.length;) {
+      const ch = String.fromCodePoint(line.codePointAt(i));
+
+      if (ch === "🧱" || ch === "😀") {
+        cells.push(ch);
+        i += ch.length;
+      } else if (line[i] === " ") {
+        cells.push(" ");
+        i += 2;
+      } else {
+        cells.push(ch);
+        i += ch.length;
+      }
+    }
+
+    return cells;
+  });
+}
+
+function solveMaze(grid) {
+  let start;
+
+  for (let row = 0; row < grid.length; row++) {
+    for (let col = 0; col < grid[row].length; col++) {
+      if (grid[row][col] === "😀") start = [row, col];
+    }
+  }
+
+  if (!start) throw new Error("Maze start not found");
+
+  const queue = [{ row: start[0], col: start[1], path: [] }];
+  const seen = new Set([start.join(",")]);
+
+  while (queue.length) {
+    const { row, col, path } = queue.shift();
+
+    for (const [dr, dc, key] of dirs) {
+      const nextRow = row + dr;
+      const nextCol = col + dc;
+
+      if (
+        nextRow < 0 ||
+        nextRow >= grid.length ||
+        nextCol < 0 ||
+        nextCol >= grid[row].length
+      ) {
+        if (path.length > 0) return path.concat(key);
+        continue;
+      }
+
+      if (nextCol >= grid[nextRow].length) continue;
+      if (grid[nextRow][nextCol] === "🧱") continue;
+
+      const id = `${nextRow},${nextCol}`;
+      if (seen.has(id)) continue;
+
+      seen.add(id);
+      queue.push({
+        row: nextRow,
+        col: nextCol,
+        path: path.concat(key),
+      });
+    }
+  }
+
+  throw new Error("No path found");
+}
+
+export async function runCdpMaze(cdpUrl = DEFAULT_CDP_URL) {
+  const view = new Bun.WebView({
+    backend: {
+      type: "chrome",
+      url: cdpUrl,
+    },
+  });
+
+  try {
+    const control = 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(control.x, control.y);
+    await view.press("r", { modifiers: ["Control"] });
+    await Bun.sleep(100);
+
+    const mazeText = await view.evaluate(`$("#character").val()`);
+    const path = solveMaze(parseMaze(mazeText));
+
+    for (const key of path) {
+      await view.press(key);
+      await Bun.sleep(100);
+
+      const status = await view.evaluate(`$("#last-key").val()`);
+      if (status.includes("Escaped the maze")) break;
+      if (status.includes("Wall")) {
+        throw new Error(`Hit a wall after ${key}: ${status}`);
+      }
+    }
+
+    const result = await view.evaluate(`$("#last-key").val()`);
+    if (!process.stdin.isRaw) console.log(result);
+    return result;
+  } finally {
+    view.close();
+  }
+}
+
+if (import.meta.main) {
+  await runCdpMaze(Bun.argv[2] ?? DEFAULT_CDP_URL);
+}

package/initramfs/buninu/apps/jsmdcui/clean.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+sd=$(dirname "$0")
+
+rm "$sd"/*.md.* "$sd"/*.md-* 2>/dev/null
+rm "$sd"/demos/*.md.* "$sd"/demos/*.md-* 2>/dev/null
+rm "$sd"/tests/*.md.* "$sd"/tests/*.md-* 2>/dev/null
+
+echo "Removed all *.md.* *.md-* from repo root and demos/ folder"

package/initramfs/buninu/apps/jsmdcui/demos/chinese.md

@@ -0,0 +1,32 @@
+#!/usr/bin/env jsmdcui
+
+# 純中文程式
+- 目的是要可以輸入文字 然後送出
+
+```text#輸入 @keydown="handle(event)"
+Dr. John (醫者小智)
+```
+
+- [Submit 提交](javascript:handle())
+
+```js front
+export function handle(e)
+{
+  if(!e)
+  {
+    alert( "Hello from Submit!\n  "+$('#輸入').val() )
+    return
+  }
+
+  //alert("***"+e?.key+"***");
+  
+  if(e.key=="Enter")
+  {
+    e.preventDefault()
+    
+    alert( "Hello from Enter!\n  "+e.target?.value)
+    return
+  }
+  
+}
+```

package/initramfs/buninu/apps/jsmdcui/demos/event.md

@@ -0,0 +1,170 @@
+#!/usr/bin/env jsmdcui
+
+#### top
+
+# Event Context Demo
+
+This app demonstrates the same event-facing API in the TUI and WUI.
+Activate links with the mouse, `Enter`, or `Space`, and put the cursor in the
+keyboard field to inspect key events.
+
+## Link Events
+
+- Outputs appear in the bottom console
+  * [**Jump to Output Console**](#output-console)
+- .
+- [Inspect this link](javascript:inspectLink(this,event))
+- [Inspect another link](javascript:inspectLink(this,event))
+- [**Inspect rich link content**](javascript:inspectLink(this,event))
+- [Increment heading data](javascript:incrementHeadingData(this,event))
+- [Inspect a multiply wrapped selection](javascript:inspectNestedSelection(this,event))
+
+The link handler reads:
+
+```js
+$(this).text()
+$(event.target).text()
+$(this).html()
+event.type
+event.key
+event.target === this
+event.currentTarget === this
+```
+
+## Keyboard Events
+
+- Outputs appear in the bottom console
+  * [**Jump to Output Console**](#output-console)
+
+```text#event-keyboard @keydown.prevent="inspectKey(this,event)"
+Put the cursor here and press any key
+```
+
+The keyboard handler reads the control through `$(this).val()` and reports the
+native-style `event.type`, `event.key`, modifier keys, and target identity.
+
+## Heading References
+
+The `$()` selection exposes its stable heading id and may be wrapped repeatedly:
+
+```js
+const selection = $($($(('#heading-references'))))
+selection.id
+selection.text()
+selection.data()
+```
+
+- [Toggle the Details heading](javascript:$('#details').toggle())
+- [Show the Details heading](javascript:$('#details').show())
+- [Hide the Details heading](javascript:$('#details').hide())
+
+You can also activate the first visible character of a heading with mouse,
+`Enter`, or `Space` to toggle its section.
+
+### Details
+
+This content is controlled by `$('#details').show()`, `.hide()`, and `.toggle()`.
+The heading itself remains visible.
+
+- [**Jump to Top**](#top)
+- .
+- [Jump to key event](#keyboard-events)
+
+## Output Console
+
+```text#event-result
+No event yet
+```
+
+
+
+
+
+```js front
+const EVENT_HEADING_ID = 'event-context-demo';
+
+function text(value) {
+  return String(value ?? '');
+}
+
+function keyLabel(event) {
+  if (event?.key === ' ') return 'Space';
+  return text(event?.key) || '(none)';
+}
+
+function writeResult(title, fields) {
+  const lines = [
+    `
+✓✓✓ Success ✓✓✓
+
+${title}`,
+    ...Object.entries(fields).map(([key, value]) =>
+      `${key}: ${typeof value === 'string' ? value : JSON.stringify(value)}`
+    ),
+  ];
+  $('#event-result').val(lines.join('\n'));
+}
+
+export function inspectLink(target, event) {
+  const wrappedThis = $(target);
+  const wrappedTarget = $(event.target);
+
+  writeResult('Link event', {
+    '$(this).text()': wrappedThis.text(),
+    '$(event.target).text()': wrappedTarget.text(),
+    '$(this).html()': wrappedThis.html(),
+    'this.tagName': text(target.tagName),
+    'this.href': text(target.href),
+    'event.type': text(event.type),
+    'event.key': keyLabel(event),
+    'event.target === this': event.target === target,
+    'event.currentTarget === this': event.currentTarget === target,
+  });
+}
+
+export function inspectKey(target, event) {
+  writeResult('Keyboard event', {
+    '$(this).val()': $(target).val(),
+    'this.id': text(target.id),
+    'this.tagName': text(target.tagName),
+    'event.type': text(event.type),
+    'event.key': keyLabel(event),
+    'event.code': text(event.code),
+    'event.ctrlKey': Boolean(event.ctrlKey),
+    'event.shiftKey': Boolean(event.shiftKey),
+    'event.altKey': Boolean(event.altKey),
+    'event.metaKey': Boolean(event.metaKey),
+    'event.target === this': event.target === target,
+    'event.currentTarget === this': event.currentTarget === target,
+  });
+}
+
+export function incrementHeadingData(target, event) {
+  const heading = $('#' + EVENT_HEADING_ID);
+  const data = heading.data();
+  data.activations = Number(data.activations || 0) + 1;
+
+  writeResult('ID-centered heading data', {
+    'activated by': $(target).text(),
+    'event.type': text(event.type),
+    'heading.id': heading.id,
+    'heading.text()': heading.text(),
+    'heading.data() identity stable': heading.data() === data,
+    activations: data.activations,
+  });
+}
+
+export function inspectNestedSelection(target, event) {
+  const original = $('#heading-references');
+  const nested = $($($(original)));
+
+  writeResult('Multiply wrapped selection', {
+    'activated by': $(target).text(),
+    'event.type': text(event.type),
+    'original.id': original.id,
+    'nested.id': nested.id,
+    'nested.text()': nested.text(),
+    'same data object': nested.data() === original.data(),
+  });
+}
+```