@qodalis/cli 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qodalis/cli",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Framework-agnostic CLI engine for @qodalis terminal applications.",
   "author": "Nicolae Lupei, Qodalis Solutions",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "./assets/*": "./assets/*"
   },
   "dependencies": {
-    "@qodalis/cli-core": "2.5.0",
+    "@qodalis/cli-core": "2.5.1",
     "@xterm/xterm": "^6.0.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",

package/public-api.d.mts

@@ -165,7 +165,7 @@ declare const CliKeyValueStore_TOKEN: any;
  */
 declare const SyntaxHighlighterRegistry_TOKEN: any;
 
-declare const LIBRARY_VERSION = "2.5.0";
+declare const LIBRARY_VERSION = "2.5.1";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -2889,6 +2889,14 @@ interface CliEngineOptions extends CliOptions {
      * @default true
      */
     autoFocus?: boolean;
+    /**
+     * Scroll the scrollback with a finger on touch screens (xterm.js has no
+     * touch scrolling, so a drag would scroll the page instead). Paused while
+     * a full-screen command runs. Turn it off when the host scrolls the
+     * terminal itself.
+     * @default true
+     */
+    touchScroll?: boolean;
 }
 declare class CliEngine {
     private readonly container;
@@ -2903,6 +2911,7 @@ declare class CliEngine {
     private resizeObserver?;
     private resizeListener?;
     private wheelListener?;
+    private disposeTouchScroll?;
     private resizeVersion;
     private resizeScheduled;
     private bootService?;
@@ -4165,6 +4174,11 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     private readonly onSystemSchemeChange;
     /** A terminal in the panel changed theme: follow the first one. */
     private readonly onTerminalTheme;
+    /**
+     * A wheel over the panel chrome (header, icon strip, empty pane) would
+     * scroll the page behind it; the terminals already keep their own wheel.
+     */
+    private readonly onPanelWheel;
     /**
      * Phone browsers open the keyboard over the page and shrink only the visual
      * viewport; follow it so the panel stays above the keyboard.

package/public-api.d.ts

@@ -165,7 +165,7 @@ declare const CliKeyValueStore_TOKEN: any;
  */
 declare const SyntaxHighlighterRegistry_TOKEN: any;
 
-declare const LIBRARY_VERSION = "2.5.0";
+declare const LIBRARY_VERSION = "2.5.1";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -2889,6 +2889,14 @@ interface CliEngineOptions extends CliOptions {
      * @default true
      */
     autoFocus?: boolean;
+    /**
+     * Scroll the scrollback with a finger on touch screens (xterm.js has no
+     * touch scrolling, so a drag would scroll the page instead). Paused while
+     * a full-screen command runs. Turn it off when the host scrolls the
+     * terminal itself.
+     * @default true
+     */
+    touchScroll?: boolean;
 }
 declare class CliEngine {
     private readonly container;
@@ -2903,6 +2911,7 @@ declare class CliEngine {
     private resizeObserver?;
     private resizeListener?;
     private wheelListener?;
+    private disposeTouchScroll?;
     private resizeVersion;
     private resizeScheduled;
     private bootService?;
@@ -4165,6 +4174,11 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     private readonly onSystemSchemeChange;
     /** A terminal in the panel changed theme: follow the first one. */
     private readonly onTerminalTheme;
+    /**
+     * A wheel over the panel chrome (header, icon strip, empty pane) would
+     * scroll the page behind it; the terminals already keep their own wheel.
+     */
+    private readonly onPanelWheel;
     /**
      * Phone browsers open the keyboard over the page and shrink only the visual
      * viewport; follow it so the panel stays above the keyboard.

package/public-api.js

@@ -519,7 +519,7 @@ var CliKeyValueStore_TOKEN = cliCore.createCliToken("cli-key-value-store");
 var SyntaxHighlighterRegistry_TOKEN = cliCore.createCliToken("syntax-highlighter-registry");
 
 // src/lib/version.ts
-var LIBRARY_VERSION = "2.5.0";
+var LIBRARY_VERSION = "2.5.1";
 var API_VERSION = 2;
 var ANONYMOUS = "\0anonymous";
 function aliasOwner(context2) {
@@ -23865,6 +23865,143 @@ function createCompletionProviders(deps) {
   return [...fromPlugins, ...builtIn];
 }
 
+// src/lib/engine/cli-touch-scroll.ts
+var SLOP_PX = 8;
+var MIN_FLING = 0.15;
+var FRICTION = 0.997;
+var VELOCITY_WINDOW_MS = 100;
+var KEYBOARD_HOLD_MS = 400;
+function enableTouchScroll(terminal, paused = () => false) {
+  const element = terminal.element;
+  if (!element) {
+    return () => {
+    };
+  }
+  let startY = 0;
+  let lastY = 0;
+  let scrolling = false;
+  let carry = 0;
+  let moves = [];
+  let frame = 0;
+  let holdTimer = 0;
+  let holding = false;
+  const textarea = terminal.textarea;
+  const keyboardOpen = () => window.innerHeight < screen.height * 0.75;
+  const holdKeyboard = () => {
+    clearTimeout(holdTimer);
+    if (holding || !textarea || textarea.hasAttribute("inputmode") || keyboardOpen()) {
+      return;
+    }
+    holding = true;
+    textarea.setAttribute("inputmode", "none");
+  };
+  const releaseKeyboard = () => {
+    clearTimeout(holdTimer);
+    if (holding) {
+      holding = false;
+      textarea?.removeAttribute("inputmode");
+    }
+  };
+  const rowHeight = () => {
+    const screen2 = element.querySelector(".xterm-screen");
+    return (screen2?.clientHeight || element.clientHeight) / terminal.rows || 16;
+  };
+  const scrollBy = (pixels) => {
+    carry += pixels;
+    const height = rowHeight();
+    const rows = Math.trunc(carry / height);
+    if (rows === 0) {
+      return true;
+    }
+    carry -= rows * height;
+    const buffer = terminal.buffer.active;
+    const before = buffer.viewportY;
+    terminal.scrollLines(-rows);
+    const moved = buffer.viewportY !== before;
+    if (!moved) {
+      carry = 0;
+    }
+    return moved;
+  };
+  const stopGlide = () => {
+    cancelAnimationFrame(frame);
+    frame = 0;
+  };
+  const glide = (velocity) => {
+    let previous = performance.now();
+    const step = (now) => {
+      const elapsed = Math.min(now - previous, 50);
+      previous = now;
+      velocity *= Math.pow(FRICTION, elapsed);
+      if (Math.abs(velocity) < 0.02 || !scrollBy(velocity * elapsed)) {
+        frame = 0;
+        return;
+      }
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+  };
+  const onStart = (e) => {
+    stopGlide();
+    scrolling = false;
+    if (e.touches.length !== 1 || paused()) {
+      return;
+    }
+    holdKeyboard();
+    startY = lastY = e.touches[0].clientY;
+    carry = 0;
+    moves = [{ y: startY, time: e.timeStamp }];
+  };
+  const onMove = (e) => {
+    if (e.touches.length !== 1 || paused() || moves.length === 0) {
+      return;
+    }
+    const y = e.touches[0].clientY;
+    if (!scrolling && Math.abs(y - startY) < SLOP_PX) {
+      return;
+    }
+    scrolling = true;
+    e.preventDefault();
+    scrollBy(y - lastY);
+    lastY = y;
+    moves.push({ y, time: e.timeStamp });
+    while (moves.length > 2 && e.timeStamp - moves[0].time > VELOCITY_WINDOW_MS) {
+      moves.shift();
+    }
+  };
+  const onEnd = (e) => {
+    if (!scrolling) {
+      releaseKeyboard();
+      moves = [];
+      return;
+    }
+    e.preventDefault();
+    scrolling = false;
+    holdTimer = window.setTimeout(releaseKeyboard, KEYBOARD_HOLD_MS);
+    const first = moves[0];
+    const last = moves[moves.length - 1];
+    moves = [];
+    const elapsed = last.time - first.time;
+    const velocity = elapsed > 0 && e.timeStamp - last.time < VELOCITY_WINDOW_MS ? (last.y - first.y) / elapsed : 0;
+    if (Math.abs(velocity) >= MIN_FLING) {
+      glide(velocity);
+    }
+  };
+  const options = { passive: false, capture: true };
+  element.addEventListener("touchstart", onStart, options);
+  element.addEventListener("touchmove", onMove, options);
+  element.addEventListener("touchend", onEnd, options);
+  element.addEventListener("touchcancel", onEnd, options);
+  return () => {
+    stopGlide();
+    releaseKeyboard();
+    element.removeEventListener("touchstart", onStart, options);
+    element.removeEventListener("touchmove", onMove, options);
+    element.removeEventListener("touchend", onEnd, options);
+    element.removeEventListener("touchcancel", onEnd, options);
+  };
+}
+
 // src/lib/engine/cli-engine.ts
 var CliEngine = class {
   constructor(container, options) {
@@ -23976,6 +24113,12 @@ var CliEngine = class {
     this.serializeAddon = setup.serializeAddon;
     this.dragDropService = setup.dragDropService;
     this.wheelListener = setup.wheelListener;
+    if (this.options?.touchScroll !== false) {
+      this.disposeTouchScroll = enableTouchScroll(
+        this.terminal,
+        () => !!this.executionContext?.contextProcessor
+      );
+    }
     this.handleResize();
   }
   /** 2. Service container, boot service, executor and execution context. */
@@ -24205,6 +24348,7 @@ var CliEngine = class {
     if (this.wheelListener) {
       this.container.removeEventListener("wheel", this.wheelListener);
     }
+    this.disposeTouchScroll?.();
     this.resizeVersion = -1;
     this.resizeScheduled = false;
     this.resizeObserver?.disconnect();
@@ -25113,6 +25257,21 @@ var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
 function asEventTarget(node) {
   return node && typeof node.addEventListener === "function" ? node : null;
 }
+function canScrollWithin(target, root, dx, dy) {
+  for (let el = target; el && el !== root; el = el.parentElement) {
+    if (!(el instanceof HTMLElement)) continue;
+    const style = getComputedStyle(el);
+    const scrollsY = /auto|scroll/.test(style.overflowY) && el.scrollHeight > el.clientHeight;
+    const scrollsX = /auto|scroll/.test(style.overflowX) && el.scrollWidth > el.clientWidth;
+    if (dy !== 0 && scrollsY) {
+      if (dy < 0 ? el.scrollTop > 0 : el.scrollTop + el.clientHeight < el.scrollHeight) return true;
+    }
+    if (dx !== 0 && scrollsX) {
+      if (dx < 0 ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true;
+    }
+  }
+  return false;
+}
 function followsSystem(input) {
   return input === "auto" || typeof input === "object" && input !== null && input.base === "auto";
 }
@@ -25194,6 +25353,16 @@ var CliPanelController = class {
       if (event.target !== first) return;
       this.syncThemeFromEngine(event.detail);
     };
+    /**
+     * A wheel over the panel chrome (header, icon strip, empty pane) would
+     * scroll the page behind it; the terminals already keep their own wheel.
+     */
+    this.onPanelWheel = (event) => {
+      const wheel = event;
+      const root = this.rootElement;
+      if (!root || canScrollWithin(wheel.target, root, wheel.deltaX, wheel.deltaY)) return;
+      wheel.preventDefault();
+    };
     this.onVisualViewportChange = () => {
       const fields = visualViewportFields();
       const s = this.snapshot;
@@ -25302,9 +25471,13 @@ var CliPanelController = class {
   /** Element containing the terminals, used for theme sync. */
   setRootElement(element) {
     if (element === this.rootElement) return;
-    asEventTarget(this.rootElement)?.removeEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
+    const previous = asEventTarget(this.rootElement);
+    previous?.removeEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
+    previous?.removeEventListener("wheel", this.onPanelWheel);
     this.rootElement = element;
-    asEventTarget(element)?.addEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
+    const next = asEventTarget(element);
+    next?.addEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
+    next?.addEventListener("wheel", this.onPanelWheel, { passive: false });
     if (element && this.followsTerminalTheme) this.startThemeSync();
   }
   /**