@valyrianjs/terminal 0.2.3 → 0.2.4

package/src/session.ts

@@ -52,7 +52,7 @@ interface ResolvedRuntimeOptions {
   stdout?: TerminalOutputStream;
   alternateScreen: boolean;
   hideCursor: boolean;
-  mouseReporting: boolean;
+  mouseInput: boolean;
   writesAnsi: boolean;
 }
 
@@ -88,6 +88,7 @@ const KNOWN_TERMINAL_KEY_SEQUENCES = [
 const ESCAPE = "\u001b";
 const CSI_PREFIX = "\u001b[";
 const DOUBLE_PRESS_INTERVAL_MS = 500;
+const MODAL_OVERLAY_HITBOX_ID = "\u0000valyrian-overlay-modal-shield";
 
 function isBracketedPasteStartPrefix(value: string) {
   return value.length > 0 && value.length < BRACKETED_PASTE_START.length && BRACKETED_PASTE_START.startsWith(value);
@@ -148,6 +149,21 @@ function isValidTerminalDimension(value: number | undefined): value is number {
   return Number.isInteger(value) && Number(value) >= 1;
 }
 
+function isModalOverlayShieldHitbox(hitbox: TerminalHitbox | null | undefined) {
+  return hitbox?.id === MODAL_OVERLAY_HITBOX_ID;
+}
+
+function hitboxIsAboveModalShield(hitboxes: TerminalHitbox[], id: string) {
+  const shieldIndex = hitboxes.findIndex((box) => isModalOverlayShieldHitbox(box));
+  if (shieldIndex < 0) {
+    return true;
+  }
+
+  const hitboxIndex = hitboxes.findIndex((box) => box.id === id);
+  return hitboxIndex >= 0 && hitboxIndex < shieldIndex;
+}
+
+
 function getProcessStdin(): TerminalInputStream | undefined {
   const candidate = globalThis.process?.stdin as TerminalInputStream | undefined;
   return candidate && typeof candidate.on === "function" ? candidate : undefined;
@@ -177,7 +193,7 @@ function resolveRuntimeOptions(options: TerminalMountOptions): ResolvedRuntimeOp
     stdout,
     alternateScreen: options.alternateScreen ?? ownsInteractiveTTY,
     hideCursor: options.hideCursor ?? ownsInteractiveTTY,
-    mouseReporting: ownsInteractiveTTY,
+    mouseInput: ownsInteractiveTTY,
     writesAnsi: runtime === "app" && Boolean(stdout)
   };
 }
@@ -339,7 +355,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
     if (runtimeOptions.hideCursor) {
       writes.push(ANSI_HIDE_CURSOR);
     }
-    if (runtimeOptions.mouseReporting) {
+    if (runtimeOptions.mouseInput) {
       writes.push(ANSI_ENABLE_MOUSE_REPORTING);
     }
     if (writes.length > 0) {
@@ -352,7 +368,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
       return;
     }
     const writes: string[] = [];
-    if (runtimeOptions.mouseReporting) {
+    if (runtimeOptions.mouseInput) {
       writes.push(ANSI_DISABLE_MOUSE_REPORTING);
     }
     if (runtimeOptions.hideCursor) {
@@ -863,11 +879,19 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
 
   function hoverAt(x: number, y: number) {
     const hitbox = resolvePointerTarget(currentHitboxes, x, y);
-    if (!hitbox) {
-      if (pointerCaptureId) {
+    if (!hitbox || isModalOverlayShieldHitbox(hitbox)) {
+      if (pointerCaptureId && (!hitbox || hitboxIsAboveModalShield(currentHitboxes, pointerCaptureId))) {
         setSemanticHoverFromHitbox(pointerCaptureId, x, y);
         return rerender();
       }
+      if (pointerCaptureId) {
+        const capturedHitbox = currentHitboxes.find((box) => box.id === pointerCaptureId);
+        const capturedNode = findFocusableById(currentTree, pointerCaptureId);
+        const capturedRow = capturedHitbox && capturedNode
+          ? sourceRowFromHitbox(capturedNode, capturedHitbox, y)
+          : hoveredRowForNode(capturedNode);
+        setPointerCapture(null, "drag", capturedRow, x, y);
+      }
       clearSemanticHover(undefined, x, y);
       return rerender();
     }
@@ -969,7 +993,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
 
   function wheelAt(x: number, y: number, direction: -1 | 1) {
     const hitbox = resolvePointerTarget(currentHitboxes, x, y);
-    if (!hitbox) {
+    if (!hitbox || isModalOverlayShieldHitbox(hitbox)) {
       return currentOutput;
     }
 
@@ -1237,7 +1261,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
     },
     focusAt(x: number, y: number) {
       const hitbox = resolvePointerTarget(currentHitboxes, x, y);
-      if (!hitbox) {
+      if (!hitbox || isModalOverlayShieldHitbox(hitbox)) {
         clearSemanticHover(undefined, x, y);
         return false;
       }
@@ -1297,7 +1321,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
     },
     clickAt(x: number, y: number) {
       const hitbox = resolvePointerTarget(currentHitboxes, x, y);
-      if (!hitbox) {
+      if (!hitbox || isModalOverlayShieldHitbox(hitbox)) {
         clearSemanticHover(undefined, x, y);
         return currentOutput;
       }
@@ -1512,7 +1536,7 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
 
   function contextPressAt(x: number, y: number) {
     const hitbox = resolvePointerTarget(currentHitboxes, x, y);
-    if (!hitbox) {
+    if (!hitbox || isModalOverlayShieldHitbox(hitbox)) {
       clearSemanticHover(undefined, x, y);
       return currentOutput;
     }
@@ -1584,7 +1608,12 @@ export function mountTerminal(input: any, options: TerminalMountOptions = {}): T
         }
       } else if (parsed.action === "drag") {
         if (mouseSelectionId) {
-          setCursorFromHitbox(mouseSelectionId, parsed.x, true);
+          if (!hitboxIsAboveModalShield(currentHitboxes, mouseSelectionId)) {
+            mouseSelectionId = null;
+            hoverAt(parsed.x, parsed.y);
+          } else {
+            setCursorFromHitbox(mouseSelectionId, parsed.x, true);
+          }
         } else {
           hoverAt(parsed.x, parsed.y);
         }

package/src/theme.ts

@@ -80,7 +80,7 @@ export const defaultTerminalTheme: TerminalTheme = {
     list: { base: { color: "#d8dee9" }, selected: { color: "#ffffff", background: "#2e3440" }, current: { color: "#ffffff", background: "#3b4252" }, hover: { color: "#ffffff", background: "#2b3137" }, empty: { color: "#777777" }, expanded: { color: "#b48ead" }, collapsed: { color: "#81a1c1" } },
     scroll: { base: { color: "#d8dee9" }, hover: { color: "#dddddd" } },
     log: { base: { color: "#d8dee9" }, empty: { color: "#777777" }, error: { color: "#bf616a" }, warning: { color: "#ebcb8b" }, success: { color: "#a3be8c" }, muted: { color: "#777777" } },
-    overlay: { base: { background: "#111111" }, dragging: { color: "#b48ead" }, dropTarget: { background: "#243b53" }, capturing: { color: "#d08770" } },
+    overlay: { base: { background: "#111111" }, backdrop: { background: "#000000" }, dragging: { color: "#b48ead" }, dropTarget: { background: "#243b53" }, capturing: { color: "#d08770" } },
     pane: {
       header: { background: "#3a3a3a", color: "#ffffff" },
       transcript: { background: "#303030", color: "#dddddd" },
@@ -107,6 +107,9 @@ export const defaultTerminalTheme: TerminalTheme = {
     focus: {
       background: "#1f2328"
     },
+    "editor.focus": {
+      background: "#161b22"
+    },
     "current-row": reverseVideoToken,
     hover: {
       ansiOpen: "\u001b[4m",

package/src/types.ts

@@ -505,6 +505,7 @@ export interface TerminalOverlayMarginAxes {
 export interface TerminalOverlayProps extends TerminalFocusableProps, TerminalStyleProps {
   margin: TerminalOverlayMarginValue | TerminalOverlayMarginAxes;
   trapFocus?: boolean;
+  backdrop?: boolean | TerminalStyleValue;
 }
 
 export interface TerminalFocusScopeProps {