buninu-browser 0.3.0 → 0.5.0

package/frontends/wayland/casty/hints.js

@@ -0,0 +1,334 @@
+// Vimium-style hint mode
+// Alt+F or Ctrl+L shows labels on clickable/focusable elements, select by typing the label
+
+import { dispatchClick } from './click.js';
+
+const HINT_CHARS = ['a', 's', 'd', 'f', 'j', 'k', 'l'];
+const MAX_HINTS = HINT_CHARS.length * HINT_CHARS.length; // 49
+
+// Collect elements + generate labels + inject overlay in a single evaluate call
+function makeCollectAndOverlayScript(hintChars, maxHints) {
+  return `(() => {
+  try {
+    const old = document.getElementById('__casty_hints');
+    if (old) old.remove();
+    for (const el of document.querySelectorAll('[data-casty-hint-id]')) {
+      el.removeAttribute('data-casty-hint-id');
+    }
+
+    const CLICKABLE = 'a, button, [role="button"], [onclick], summary, [role="link"], [role="tab"], [tabindex]';
+    const FOCUSABLE = 'input, textarea, select, [contenteditable]';
+    const all = document.querySelectorAll(CLICKABLE + ', ' + FOCUSABLE);
+
+    const elems = [];
+    for (const el of all) {
+      if (elems.length >= ${maxHints}) break;
+      const style = getComputedStyle(el);
+      if (style.display === 'none' || style.visibility === 'hidden'
+          || style.pointerEvents === 'none' || Number(style.opacity) === 0) continue;
+
+      // getClientRects handles wrapped links better than one large bounding
+      // box whose centre may be whitespace or belong to another element.
+      const rects = [...el.getClientRects()];
+      if (!rects.length && el.firstElementChild) rects.push(...el.firstElementChild.getClientRects());
+      let point = null;
+      for (const rect of rects) {
+        const left = Math.max(0, rect.left);
+        const top = Math.max(0, rect.top);
+        const right = Math.min(innerWidth, rect.right);
+        const bottom = Math.min(innerHeight, rect.bottom);
+        if (right <= left || bottom <= top) continue;
+        const cx = Math.round((left + right) / 2);
+        const cy = Math.round((top + bottom) / 2);
+        const hit = document.elementFromPoint(cx, cy);
+        if (hit === el || el.contains(hit)) {
+          point = { x: Math.round(left), y: Math.round(top), cx, cy };
+          break;
+        }
+      }
+      if (!point) continue;
+
+      const isFocusable = el.matches('input, textarea, select, [contenteditable]');
+      const id = String(elems.length);
+      el.setAttribute('data-casty-hint-id', id);
+      elems.push({
+        id,
+        ...point,
+        type: isFocusable ? 'focus' : 'click',
+      });
+    }
+
+    if (elems.length === 0) return JSON.stringify([]);
+
+    // Generate labels
+    const chars = ${JSON.stringify(hintChars)};
+    const labels = [];
+    if (elems.length <= chars.length) {
+      for (let i = 0; i < elems.length; i++) labels.push(chars[i]);
+    } else {
+      for (const c1 of chars) {
+        for (const c2 of chars) {
+          labels.push(c1 + c2);
+          if (labels.length >= elems.length) break;
+        }
+        if (labels.length >= elems.length) break;
+      }
+    }
+
+    // Inject overlay
+    const container = document.createElement('div');
+    container.id = '__casty_hints';
+    container.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;';
+    for (let i = 0; i < elems.length; i++) {
+      const h = elems[i];
+      h.label = labels[i];
+      const span = document.createElement('span');
+      span.textContent = labels[i].toUpperCase();
+      span.dataset.label = labels[i];
+      span.style.cssText = 'position:fixed;background:#FFEE00;color:#000;font:bold 12px monospace;border:1px solid #C38A00;border-radius:3px;padding:0 2px;z-index:2147483647;pointer-events:none;line-height:1.4;'
+        + 'left:' + h.x + 'px;top:' + h.y + 'px;';
+      container.appendChild(span);
+    }
+    document.documentElement.appendChild(container);
+
+    return JSON.stringify(elems);
+  } catch (e) {
+    return JSON.stringify([]);
+  }
+})()`;
+}
+
+const COLLECT_OVERLAY_SCRIPT = makeCollectAndOverlayScript(HINT_CHARS, MAX_HINTS);
+
+// Dim non-matching labels
+function makeDimScript(buffer) {
+  return `(() => {
+    const c = document.getElementById('__casty_hints');
+    if (!c) return;
+    for (const span of c.children) {
+      const label = span.dataset.label;
+      span.style.opacity = label.startsWith('${buffer}') ? '1' : '0.2';
+    }
+  })()`;
+}
+
+// Remove overlay script
+const REMOVE_OVERLAY_SCRIPT = `(() => {
+  const el = document.getElementById('__casty_hints');
+  if (el) el.remove();
+})()`;
+
+const CLEANUP_HINTS_SCRIPT = `(() => {
+  const overlay = document.getElementById('__casty_hints');
+  if (overlay) overlay.remove();
+  for (const el of document.querySelectorAll('[data-casty-hint-id]')) {
+    el.removeAttribute('data-casty-hint-id');
+  }
+})()`;
+
+// Re-resolve the selected element after the overlay is gone. Wait for a
+// stable, unobscured point so animations and late layout do not leave us
+// clicking the coordinates captured when hint mode began.
+function makeResolveHintScript(id, focus) {
+  return `(async () => {
+    const deadline = performance.now() + 2000;
+    let previous = null;
+    for (;;) {
+      const el = document.querySelector('[data-casty-hint-id="${id}"]');
+      if (!el) throw new Error('hint target disappeared');
+      const style = getComputedStyle(el);
+      if (style.display !== 'none' && style.visibility !== 'hidden'
+          && style.pointerEvents !== 'none' && Number(style.opacity) !== 0) {
+        const rects = [...el.getClientRects()];
+        if (!rects.length && el.firstElementChild) rects.push(...el.firstElementChild.getClientRects());
+        for (const rect of rects) {
+          const left = Math.max(0, rect.left), top = Math.max(0, rect.top);
+          const right = Math.min(innerWidth, rect.right), bottom = Math.min(innerHeight, rect.bottom);
+          if (right <= left || bottom <= top) continue;
+          const x = (left + right) / 2, y = (top + bottom) / 2;
+          const hit = document.elementFromPoint(x, y);
+          const stable = previous && previous.x === x && previous.y === y;
+          previous = { x, y };
+          if (stable && (hit === el || el.contains(hit))) {
+            ${focus ? 'el.focus();' : ''}
+            const anchor = el.closest('a[target="_blank"]');
+            if (anchor) anchor.target = '_self';
+            const form = el.closest('form[target="_blank"]');
+            if (form) form.target = '_self';
+            // Layout coordinates to input (visual viewport) coordinates:
+            // they differ when the page is zoomed (pinch zoom, or buninu-browser --mobile).
+            const viewport = window.visualViewport;
+            const scale = viewport?.scale || 1;
+            return { x: (x - (viewport?.offsetLeft || 0)) * scale, y: (y - (viewport?.offsetTop || 0)) * scale };
+          }
+          break;
+        }
+      }
+      if (performance.now() >= deadline) throw new Error('hint target is not actionable');
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+  })()`;
+}
+
+export class HintMode {
+  constructor(forceCapture) {
+    this.active = false;
+    this.buffer = '';
+    this._resolve = null;
+    this._client = null;
+    this._hints = [];
+    this._rawForceCapture = forceCapture || (() => {});
+  }
+
+  // Ensure frame capture after DOM changes (immediate + delayed retry)
+  _forceCapture() {
+    this._rawForceCapture();
+    setTimeout(() => this._rawForceCapture(), 200);
+  }
+
+  // Start hint mode — waits until user selects or cancels
+  async start(client) {
+    this._client = client;
+    this.buffer = '';
+
+    // Single evaluate: collect elements + generate labels + inject overlay
+    let hints;
+    try {
+      const { result } = await client.send('Runtime.evaluate', {
+        expression: COLLECT_OVERLAY_SCRIPT,
+      });
+      hints = JSON.parse(result.value);
+    } catch (e) {
+      console.error(`casty: hints failed: ${e.message}`);
+      return;
+    }
+
+    if (!hints || hints.length === 0) {
+      console.error('casty: hints: no elements found');
+      return;
+    }
+
+    console.error(`casty: hints: ${hints.length} elements`);
+    this._hints = hints;
+    this.active = true;
+    this._forceCapture();
+
+    let resolve;
+    const promise = new Promise(r => { resolve = r; });
+    this._resolve = resolve;
+    return promise;
+  }
+
+  // Handle input (only called while active)
+  async handleInput(str) {
+    if (!this.active) return false;
+
+    // Escape → cancel
+    if (str === '\x1b') {
+      await this._cancel();
+      return true;
+    }
+
+    // Backspace → remove last buffer char
+    if (str === '\x7f' || str === '\x08') {
+      if (this.buffer.length > 0) {
+        this.buffer = this.buffer.slice(0, -1);
+        await this._updateDim();
+      }
+      return true;
+    }
+
+    // Ignore non-hint characters
+    const ch = str.toLowerCase();
+    if (ch.length !== 1 || !HINT_CHARS.includes(ch)) {
+      return true;
+    }
+
+    this.buffer += ch;
+
+    // Exact match check
+    const exact = this._hints.find(h => h.label === this.buffer);
+    if (exact) {
+      await this._selectHint(exact);
+      return true;
+    }
+
+    // Prefix match check
+    const partial = this._hints.some(h => h.label.startsWith(this.buffer));
+    if (!partial) {
+      this.buffer = '';
+      await this._updateDim();
+      return true;
+    }
+
+    // Partial match — dim non-matching labels
+    await this._updateDim();
+    return true;
+  }
+
+  async _updateDim() {
+    try {
+      await this._client.send('Runtime.evaluate', {
+        expression: this.buffer ? makeDimScript(this.buffer) : makeDimScript(''),
+      });
+      this._forceCapture();
+    } catch {}
+  }
+
+  async _selectHint(hint) {
+    await this._removeOverlay();
+
+    try {
+      const { result, exceptionDetails } = await this._client.send('Runtime.evaluate', {
+        expression: makeResolveHintScript(hint.id, hint.type === 'focus'),
+        awaitPromise: true,
+        returnByValue: true,
+      });
+      if (exceptionDetails) {
+        throw new Error(exceptionDetails.exception?.description
+          || exceptionDetails.text || 'hint target evaluation failed');
+      }
+      const point = result?.value;
+      if (!point || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+        throw new Error('hint target returned no clickable point');
+      }
+      await dispatchClick(this._client, point.x, point.y, { source: `hint ${hint.label}` });
+    } catch (error) {
+      console.error(`casty: hint click failed: ${error.message}`);
+    } finally {
+      await this._cleanupHints();
+    }
+
+    this._done();
+    this._forceCapture();
+  }
+
+  async _cancel() {
+    await this._cleanupHints();
+    this._done();
+    this._forceCapture();
+  }
+
+  _done() {
+    this.active = false;
+    this.buffer = '';
+    this._hints = [];
+    if (this._resolve) { this._resolve(); this._resolve = null; }
+  }
+
+  async _removeOverlay() {
+    try {
+      await this._client.send('Runtime.evaluate', {
+        expression: REMOVE_OVERLAY_SCRIPT,
+      });
+    } catch {}
+  }
+
+  async _cleanupHints() {
+    try {
+      await this._client.send('Runtime.evaluate', {
+        expression: CLEANUP_HINTS_SCRIPT,
+      });
+    } catch {}
+  }
+}

package/frontends/wayland/casty/keys.js

@@ -0,0 +1,56 @@
+// Key binding configuration
+// Customizable via ~/.casty/keys.json
+// Only defines actions casty intercepts; everything else passes through to Chrome.
+
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { loadJsonFile } from './config.js';
+
+const configPath = join(homedir(), '.casty', 'keys.json');
+
+// Default key bindings
+// Key names: "ctrl+c", "alt+left", "f5", "ctrl+shift+r", etc.
+const DEFAULTS = {
+  'ctrl+q':      'quit',
+  'alt+left':    'back',
+  'alt+right':   'forward',
+  'ctrl+u':      'back',
+  'ctrl+k':      'forward',
+  'alt+l':       'url_bar',
+  'alt+c':       'copy',
+  'ctrl+v':      'paste',
+  'alt+f':       'hints',
+  'ctrl+l':      'hints',
+  'ctrl+e':      'command',
+};
+// Other actions for keys.json: reload, home, copy_url, paste_url, download, eruda, zoom_in, zoom_out, zoom_reset
+
+// Load bindings (falls back to defaults)
+export function loadKeyBindings() {
+  return { ...DEFAULTS, ...loadJsonFile(configPath, {}) };
+}
+
+// Build a human-readable key name from parsed input
+// { key: 'ArrowLeft', modifiers: 1 } → "alt+left"
+// { key: 'r', modifiers: 2 }        → "ctrl+r"
+// { key: 'F5', modifiers: 0 }       → "f5"
+export function toKeyName(info) {
+  const parts = [];
+  if (info.modifiers & 2) parts.push('ctrl');
+  if (info.modifiers & 1) parts.push('alt');
+  if (info.modifiers & 8) parts.push('shift');
+  if (info.modifiers & 4) parts.push('meta');
+
+  // Normalize key name
+  const k = info.key;
+  const normalized =
+    k === 'ArrowUp'    ? 'up' :
+    k === 'ArrowDown'  ? 'down' :
+    k === 'ArrowLeft'  ? 'left' :
+    k === 'ArrowRight' ? 'right' :
+    k === ' '          ? 'space' :
+    k.toLowerCase();
+
+  parts.push(normalized);
+  return parts.join('+');
+}

package/frontends/wayland/casty/page-commands.js

@@ -0,0 +1,80 @@
+// Extracted unchanged from Casty lib/input.js (MIT), except exporting the helpers.
+export const FIND_SCRIPT = `(query) => {
+  const state = window.__castyFind || (window.__castyFind = { text: '', index: -1 });
+  if (query) { if (query !== state.text) state.index = -1; state.text = query; }
+  if (!state.text) return { error: 'Usage: find <text>' };
+  // Search the concatenated text, so a match may span nodes (pages that wrap
+  // each letter in its own element, for one)
+  const nodes = [], starts = [];
+  let all = '';
+  const walk = (node) => {
+    for (const child of node.childNodes) {
+      if (child.nodeType === 3) { nodes.push(child); starts.push(all.length); all += child.data; }
+      else if (child.nodeType === 1 && !/^(SCRIPT|STYLE|NOSCRIPT|TEMPLATE)$/i.test(child.tagName)) walk(child);
+    }
+  };
+  if (document.body) walk(document.body);
+  const haystack = all.toLowerCase(), needle = state.text.toLowerCase();
+  const matches = [];
+  for (let at = haystack.indexOf(needle); at >= 0; at = haystack.indexOf(needle, at + needle.length)) matches.push(at);
+  if (!matches.length) return { text: state.text, total: 0, index: -1 };
+  state.index = (state.index + 1) % matches.length;
+  // Text node and offset holding character \`at\` (the last node starting at or before it)
+  const locate = (at, end) => {
+    let i = 0;
+    while (i + 1 < nodes.length && (starts[i + 1] < at || (!end && starts[i + 1] === at))) i++;
+    return [nodes[i], at - starts[i]];
+  };
+  const from = matches[state.index];
+  const [startNode, startOffset] = locate(from, false);
+  const [endNode, endOffset] = locate(from + needle.length, true);
+  try {
+    const range = document.createRange();
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  } catch {}
+  startNode.parentElement?.scrollIntoView?.({ block: 'center' });
+  return { text: state.text, total: matches.length, index: state.index };
+}`;
+
+export async function findInPage(client, query) {
+  const { result, exceptionDetails } = await client.send('Runtime.evaluate', {
+    expression: `(${FIND_SCRIPT})(${JSON.stringify(query)})`,
+    returnByValue: true,
+  });
+  if (exceptionDetails) return { error: 'Find failed' };
+  return result?.value ?? { error: 'Find failed' };
+}
+
+// Ported from ../exeapk's ERUDA_TOGGLE_JS: loads eruda (github.com/liriliri/eruda)
+// from a CDN on first use, then only shows or hides it. Resolves to a status
+// instead of alert()ing, which would block a headless page.
+const ERUDA_SCRIPT = `new Promise(resolve => {
+  const toggle = () => {
+    window.__erudaShown = !window.__erudaShown;
+    if (window.__erudaShown) eruda.show(); else eruda.hide();
+    resolve(window.__erudaShown ? 'Eruda shown' : 'Eruda hidden');
+  };
+  if (window.eruda) { toggle(); return; }
+  const s = document.createElement('script');
+  s.src = 'https://cdn.jsdelivr.net/npm/eruda';
+  s.onload = () => {
+    try { eruda.init(); window.__erudaShown = false; toggle(); }
+    catch (e) { resolve('Eruda failed: ' + e.message); }
+  };
+  s.onerror = () => resolve('Eruda load failed (need network, or blocked by the page)');
+  (document.body || document.documentElement).appendChild(s);
+})`;
+
+export async function toggleEruda(client) {
+  const { result, exceptionDetails } = await client.send('Runtime.evaluate', {
+    expression: ERUDA_SCRIPT,
+    awaitPromise: true,
+    returnByValue: true,
+  });
+  if (exceptionDetails) return 'Eruda failed';
+  return result?.value ?? 'Eruda failed';
+}

package/frontends/wayland/casty/prompt-width.js

@@ -0,0 +1,148 @@
+// Terminal display widths for the address bar, copied from jsmdcui's command
+// prompt (MIT, Copyright (c) 2016-2020 Zachary Yedidia, et al.; Copyright (c)
+// 2026 Dr. John). Indices are UTF-16 code units, as in jsmdcui.
+
+function isWideCodePoint(cp) {
+  if (cp < 0x1100) return false;
+  return (
+    cp <= 0x115F ||
+    cp === 0x2329 || cp === 0x232A ||
+    (cp >= 0x2E80 && cp <= 0x303E) ||
+    (cp >= 0x3040 && cp <= 0x33FF) ||
+    (cp >= 0x3400 && cp <= 0x4DBF) ||
+    (cp >= 0x4E00 && cp <= 0xA4C6) ||
+    (cp >= 0xA960 && cp <= 0xA97C) ||
+    (cp >= 0xAC00 && cp <= 0xD7A3) ||
+    (cp >= 0xF900 && cp <= 0xFAFF) ||
+    (cp >= 0xFE10 && cp <= 0xFE19) ||
+    (cp >= 0xFE30 && cp <= 0xFE4F) ||
+    (cp >= 0xFF01 && cp <= 0xFF60) ||
+    (cp >= 0xFFE0 && cp <= 0xFFE6) ||
+    (cp >= 0x1B000 && cp <= 0x1B0FF) ||
+    (cp >= 0x1F004 && cp <= 0x1F0CF) ||
+    (cp >= 0x1F18F && cp <= 0x1F19A) ||
+    (cp >= 0x1F200 && cp <= 0x1F2FF) ||
+    (cp >= 0x1F300 && cp <= 0x1FAFF) ||
+    (cp >= 0x20000 && cp <= 0x2FFFD) ||
+    (cp >= 0x30000 && cp <= 0x3FFFD)
+  );
+}
+
+function isZeroWidthCodePoint(cp) {
+  return (
+    cp === 0x200D ||
+    (cp >= 0x0300 && cp <= 0x036F) ||
+    (cp >= 0x1AB0 && cp <= 0x1AFF) ||
+    (cp >= 0x1DC0 && cp <= 0x1DFF) ||
+    (cp >= 0x20D0 && cp <= 0x20FF) ||
+    (cp >= 0xFE00 && cp <= 0xFE0F) ||
+    (cp >= 0xFE20 && cp <= 0xFE2F) ||
+    (cp >= 0xE0100 && cp <= 0xE01EF)
+  );
+}
+
+function isEmojiVariationBase(cp) {
+  return (
+    cp === 0x00A9 || cp === 0x00AE ||
+    cp === 0x203C || cp === 0x2049 ||
+    cp === 0x2122 || cp === 0x2139 ||
+    (cp >= 0x2194 && cp <= 0x21AA) ||
+    (cp >= 0x231A && cp <= 0x231B) ||
+    cp === 0x2328 || cp === 0x23CF ||
+    (cp >= 0x23E9 && cp <= 0x23F3) ||
+    (cp >= 0x23F8 && cp <= 0x23FA) ||
+    cp === 0x24C2 ||
+    (cp >= 0x25AA && cp <= 0x25AB) ||
+    cp === 0x25B6 || cp === 0x25C0 ||
+    (cp >= 0x25FB && cp <= 0x25FE) ||
+    (cp >= 0x2600 && cp <= 0x27BF) ||
+    (cp >= 0x2934 && cp <= 0x2935) ||
+    (cp >= 0x2B05 && cp <= 0x2B55) ||
+    cp === 0x3030 || cp === 0x303D ||
+    cp === 0x3297 || cp === 0x3299
+  );
+}
+
+const TAB_WIDTH = 4;
+
+export function charWidth(ch) {
+  if (!ch) return 0;
+  const cp = ch.codePointAt(0);
+  if (cp === 9) return TAB_WIDTH;
+  if (cp < 32 || (cp >= 0x7f && cp < 0xa0) || isZeroWidthCodePoint(cp)) return 0;
+  if (isWideCodePoint(cp)) return 2;
+  return 1;
+}
+
+function displayUnitAt(text, idx) {
+  const cp = text.codePointAt(idx);
+  if (cp == null) return { text: '', width: 0, length: 0 };
+  let length = cp > 0xFFFF ? 2 : 1;
+  let unit = String.fromCodePoint(cp);
+  let width = charWidth(unit);
+  const nextCp = text.codePointAt(idx + length);
+  if (nextCp === 0xFE0F && isEmojiVariationBase(cp)) {
+    unit += String.fromCodePoint(nextCp);
+    length += 1;
+    width = 2;
+  }
+  return { text: unit, width, length };
+}
+
+export function displayWidth(text) {
+  let width = 0;
+  for (let i = 0; i < text.length;) {
+    const unit = displayUnitAt(text, i);
+    if (unit.length <= 0) break;
+    width += unit.width;
+    i += unit.length;
+  }
+  return width;
+}
+
+// Convert a screen-column offset (visualCol) into a string char-unit index,
+// starting from startIdx (code-unit index) in line and walking forward.
+// Snaps to the start of a wide character when the click lands on its right cell.
+export function visualColToCharIdx(line, startIdx, visualCol) {
+  let col = 0;
+  let i = startIdx;
+  while (i < line.length) {
+    if (col >= visualCol) break;
+    const cp = line.codePointAt(i);
+    const charLen = cp > 0xFFFF ? 2 : 1;
+    const w = charWidth(String.fromCodePoint(cp));
+    if (col + w > visualCol) break;
+    col += w;
+    i += charLen;
+  }
+  return Math.min(i, line.length);
+}
+
+/**
+ * jsmdcui's prompt line: the label and value scroll horizontally so the
+ * cursor stays on screen. Returns the new scroll offset, the code-unit index
+ * the visible part starts at, and the cursor's screen column (0-based).
+ */
+export function promptView(label, value, cursor, cols, scrollX = 0) {
+  const total = label + value;
+  const cursorInTotal = displayWidth(label) + displayWidth(value.slice(0, cursor));
+  if (cursorInTotal > scrollX + cols - 1) scrollX = cursorInTotal - (cols - 1);
+  if (cursorInTotal < scrollX) scrollX = cursorInTotal;
+  scrollX = Math.max(0, scrollX);
+  let start = scrollX > 0 ? visualColToCharIdx(total, 0, scrollX) : 0;
+  // A wide character cut by the left edge is not drawn: its visible half
+  // becomes a blank column (lead), so the text and cursor columns agree.
+  let lead = 0;
+  const startWidth = displayWidth(total.slice(0, start));
+  if (startWidth < scrollX) {
+    const cp = total.codePointAt(start);
+    start += cp > 0xFFFF ? 2 : 1;
+    lead = startWidth + charWidth(String.fromCodePoint(cp)) - scrollX;
+  }
+  return { scrollX, start, lead, cursorCol: cursorInTotal - scrollX };
+}
+
+/** The leading part of `text` that fits in `cols` columns. */
+export function fitWidth(text, cols) {
+  return text.slice(0, visualColToCharIdx(text, 0, cols));
+}