xterm-input-panel 1.2.4 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # xterm-input-panel
 
+## 1.2.5
+
+### Patch Changes
+
+- c265719: Add shared terminal keybindings for OS copy/paste behavior, preserve terminal selection when switching InputPanel tabs, and translate terminal touch gestures into mouse events for mobile terminal interaction.
+
 ## 1.2.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-input-panel",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "main": "src/index.ts",
   "scripts": {

package/src/index.ts

@@ -11,6 +11,8 @@ export { blendHex, cssColorToHex, onThemeChange, resolvePixiTheme } from './pixi
 export type { PixiTheme } from './pixi-theme.js'
 export {
   InputPanelAddon,
+  type InputPanelCommand,
+  type InputPanelCommandOptions,
   type InputPanelHistoryItem,
   type InputPanelSettingsPayload,
 } from './xterm-addon.js'

package/src/input-panel.stories.ts

@@ -21,6 +21,7 @@ function pointer(target: Element, type: string, x: number, y: number, id = 1) {
       pointerId: id,
       pointerType: 'mouse',
       bubbles: true,
+      composed: true,
       cancelable: true,
     })
   )
@@ -174,6 +175,42 @@ export const TabSwitching: StoryObj = {
   },
 }
 
+/**
+ * Toolbar controls must not leak pointer events to the terminal host. Terminal
+ * renderers treat outside pointerdown as a selection boundary, so tab switching
+ * must stay inside the panel.
+ */
+export const ToolbarEventBoundary: StoryObj = {
+  render: () => html`
+    <div data-terminal-boundary style="height: 100%;">
+      <input-panel layout="fixed" style="height: 100%;">
+        <input-method-tab slot="input"></input-method-tab>
+        <virtual-keyboard-tab slot="keys"></virtual-keyboard-tab>
+        <shortcut-tab slot="shortcuts"></shortcut-tab>
+        <virtual-trackpad-tab slot="trackpad"></virtual-trackpad-tab>
+      </input-panel>
+    </div>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+    const boundary = canvasElement.querySelector('[data-terminal-boundary]') as HTMLElement
+    const shadow = panel.shadowRoot!
+    const tabButtons = shadow.querySelectorAll('.tab-btn')
+    const keysTab = tabButtons[1] as HTMLButtonElement
+    const boundaryPointerDown = fn()
+
+    boundary.addEventListener('pointerdown', boundaryPointerDown)
+    pointer(keysTab, 'pointerdown', 20, 20)
+    keysTab.click()
+    await panel.updateComplete
+
+    expect(boundaryPointerDown).not.toHaveBeenCalled()
+    expect(keysTab.hasAttribute('data-active')).toBe(true)
+
+    boundary.removeEventListener('pointerdown', boundaryPointerDown)
+  },
+}
+
 /**
  * Verifies that the close button dispatches the `input-panel:close` event.
  */

package/src/input-panel.ts

@@ -568,6 +568,30 @@ export class InputPanel extends LitElement {
     this.requestUpdate()
   }
 
+  private _stopToolbarControlPointer(e: Event) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  private _stopToolbarControlEvent(e: Event) {
+    e.stopPropagation()
+  }
+
+  private _switchTabFromToolbar(e: Event, tab: InputPanelTab) {
+    this._stopToolbarControlEvent(e)
+    this._switchTab(tab)
+  }
+
+  private _toggleLayoutFromToolbar(e: Event) {
+    this._stopToolbarControlEvent(e)
+    this._toggleLayout()
+  }
+
+  private _closeFromToolbar(e: Event) {
+    this._stopToolbarControlEvent(e)
+    this._close()
+  }
+
   private _toggleLayout() {
     this.layout = this.layout === 'fixed' ? 'floating' : 'fixed'
     if (this.layout === 'fixed') {
@@ -861,7 +885,9 @@ export class InputPanel extends LitElement {
                 class="tab-btn"
                 part="tab-btn"
                 ?data-active=${this.activeTab === t.id}
-                @click=${() => this._switchTab(t.id)}
+                @pointerdown=${(e: PointerEvent) => this._stopToolbarControlPointer(e)}
+                @mousedown=${(e: MouseEvent) => this._stopToolbarControlPointer(e)}
+                @click=${(e: Event) => this._switchTabFromToolbar(e, t.id)}
               >
                 ${t.icon} ${this.activeTab === t.id ? t.label : ''}
               </button>
@@ -869,10 +895,23 @@ export class InputPanel extends LitElement {
           )}
         </div>
         <div class="action-group">
-          <button class="icon-btn" @click=${this._toggleLayout} title="Toggle layout mode">
+          <button
+            class="icon-btn"
+            @pointerdown=${(e: PointerEvent) => this._stopToolbarControlPointer(e)}
+            @mousedown=${(e: MouseEvent) => this._stopToolbarControlPointer(e)}
+            @click=${(e: Event) => this._toggleLayoutFromToolbar(e)}
+            title="Toggle layout mode"
+          >
             ${this.layout === 'fixed' ? iconPin(14) : iconPinOff(14)}
           </button>
-          <button class="icon-btn" part="close-btn" @click=${this._close} title="Close panel">
+          <button
+            class="icon-btn"
+            part="close-btn"
+            @pointerdown=${(e: PointerEvent) => this._stopToolbarControlPointer(e)}
+            @mousedown=${(e: MouseEvent) => this._stopToolbarControlPointer(e)}
+            @click=${(e: Event) => this._closeFromToolbar(e)}
+            title="Close panel"
+          >
             ${iconX(14)}
           </button>
         </div>

package/src/shortcut-tab.ts

@@ -427,34 +427,14 @@ export class ShortcutTab extends LitElement {
     )
   }
 
-  private async _handleCommand(command: 'copy' | 'paste' | 'select-all') {
-    if (command === 'copy') {
-      const selection = window.getSelection()?.toString() ?? ''
-      if (!selection) return
-      try {
-        await navigator.clipboard.writeText(selection)
-      } catch {
-        document.execCommand('copy')
-      }
-      return
-    }
-
-    if (command === 'paste') {
-      try {
-        const text = await navigator.clipboard.readText()
-        if (text) this._send(text)
-      } catch {
-        // ignore clipboard permission failures
-      }
-      return
-    }
-
-    const active = document.activeElement
-    if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
-      active.select()
-      return
-    }
-    document.execCommand('selectAll')
+  private _handleCommand(command: 'copy' | 'paste' | 'select-all') {
+    this.dispatchEvent(
+      new CustomEvent('input-panel:command', {
+        detail: { command },
+        bubbles: true,
+        composed: true,
+      })
+    )
   }
 
   private _dpadData(
@@ -477,7 +457,7 @@ export class ShortcutTab extends LitElement {
     return dy < 0 ? '\x1b[A' : '\x1b[B'
   }
 
-  private async _activateShortcut(
+  private _activateShortcut(
     item: ShortcutItem,
     event: FederatedPointerEvent,
     width: number,
@@ -502,7 +482,7 @@ export class ShortcutTab extends LitElement {
       return
     }
 
-    await this._handleCommand(action.command)
+    this._handleCommand(action.command)
   }
 
   private _setActivePage(pageId: string) {

package/src/virtual-keyboard-tab.stories.ts

@@ -362,6 +362,79 @@ export const MacosCapsRow: StoryObj = {
   },
 }
 
+/**
+ * macOS Command+C is an OS clipboard command, not terminal text input.
+ */
+export const MacosCommandCopyCommand: StoryObj = {
+  render: () =>
+    html`<virtual-keyboard-tab platform="macos" style="height: 100%;"></virtual-keyboard-tab>`,
+  play: async ({ canvasElement }) => {
+    const el = await setup(canvasElement)
+    const commandKey = findKey(el, 'Command')
+    expect(commandKey).toBeDefined()
+
+    const commandHandler = fn()
+    const sendHandler = fn()
+    el.addEventListener('input-panel:command', commandHandler)
+    el.addEventListener('input-panel:send', sendHandler)
+
+    emitDown(commandKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const cKey = el._keys.find((k) => k.def.data === 'c')
+    expect(cKey).toBeDefined()
+    emitDown(cKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    emitUp(cKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    expect(sendHandler).toHaveBeenCalledTimes(0)
+    expect(commandHandler).toHaveBeenCalledTimes(1)
+    const detail = (commandHandler.mock.calls[0] as unknown[])[0] as CustomEvent
+    expect(detail.detail).toEqual({ command: 'copy', fallbackData: undefined })
+
+    el.removeEventListener('input-panel:command', commandHandler)
+    el.removeEventListener('input-panel:send', sendHandler)
+  },
+}
+
+/**
+ * Windows/Linux Ctrl+C uses the same command path, with terminal interrupt as
+ * fallback when no terminal selection can be copied.
+ */
+export const CommonCtrlCopyCommandWithFallback: StoryObj = {
+  render: () =>
+    html`<virtual-keyboard-tab platform="common" style="height: 100%;"></virtual-keyboard-tab>`,
+  play: async ({ canvasElement }) => {
+    const el = await setup(canvasElement)
+    const ctrlKey = findKey(el, 'Ctrl')
+    expect(ctrlKey).toBeDefined()
+
+    const commandHandler = fn()
+    const sendHandler = fn()
+    el.addEventListener('input-panel:command', commandHandler)
+    el.addEventListener('input-panel:send', sendHandler)
+
+    emitDown(ctrlKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const cKey = el._keys.find((k) => k.def.data === 'c')
+    expect(cKey).toBeDefined()
+    emitDown(cKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    emitUp(cKey!.container)
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    expect(sendHandler).toHaveBeenCalledTimes(0)
+    expect(commandHandler).toHaveBeenCalledTimes(1)
+    const detail = (commandHandler.mock.calls[0] as unknown[])[0] as CustomEvent
+    expect(detail.detail).toEqual({ command: 'copy', fallbackData: '\x03' })
+
+    el.removeEventListener('input-panel:command', commandHandler)
+    el.removeEventListener('input-panel:send', sendHandler)
+  },
+}
+
 /**
  * Swipe up on a key sends shifted value without pressing Shift key.
  */

package/src/virtual-keyboard-tab.ts

@@ -9,8 +9,9 @@ import {
   TextStyle,
 } from 'pixi.js'
 import { onThemeChange, resolvePixiTheme, type PixiTheme } from './pixi-theme.js'
-import { detectHostPlatform, type PlatformMode } from './platform.js'
+import { detectHostPlatform, type HostPlatform, type PlatformMode } from './platform.js'
 import { LAYOUTS, type KeyDef, type ModifierKey } from './virtual-keyboard-layouts.js'
+import type { InputPanelCommand } from './xterm-addon.js'
 
 const KEY_PADDING = 3
 const KEY_RADIUS = 4
@@ -112,12 +113,14 @@ export class VirtualKeyboardTab extends LitElement {
     this._activePointerId = null
   }
 
+  private _hostPlatform(): HostPlatform {
+    return this.platform === 'windows' || this.platform === 'macos' || this.platform === 'common'
+      ? this.platform
+      : detectHostPlatform()
+  }
+
   private getRows(): KeyDef[][] {
-    const hostPlatform =
-      this.platform === 'windows' || this.platform === 'macos' || this.platform === 'common'
-        ? this.platform
-        : detectHostPlatform()
-    return LAYOUTS[hostPlatform]
+    return LAYOUTS[this._hostPlatform()]
   }
 
   private async _initPixi() {
@@ -566,9 +569,9 @@ export class VirtualKeyboardTab extends LitElement {
     return def.data
   }
 
-  private _sendKey(def: KeyDef, forceShift: boolean) {
+  private _resolveTerminalData(def: KeyDef, forceShift: boolean): string {
     let data = this._resolveOutputData(def, forceShift)
-    if (!data) return
+    if (!data) return ''
 
     if (this._modifiers.ctrl && data.length === 1) {
       const code = data.toUpperCase().charCodeAt(0) - 64
@@ -581,6 +584,47 @@ export class VirtualKeyboardTab extends LitElement {
       data = `\x1b${data}`
     }
 
+    return data
+  }
+
+  private _resolvePrimaryCommand(def: KeyDef): InputPanelCommand | null {
+    if (this._modifiers.alt || this._modifiers.shift) return null
+
+    const platform = this._hostPlatform()
+    const primaryModifierActive =
+      platform === 'macos'
+        ? this._modifiers.meta && !this._modifiers.ctrl
+        : this._modifiers.ctrl && !this._modifiers.meta
+    if (!primaryModifierActive) return null
+
+    const key = def.data.toLowerCase()
+    if (key === 'c') return 'copy'
+    if (key === 'v') return 'paste'
+    if (key === 'a') return 'select-all'
+    return null
+  }
+
+  private _sendCommand(command: InputPanelCommand, fallbackData?: string) {
+    this.dispatchEvent(
+      new CustomEvent('input-panel:command', {
+        detail: { command, fallbackData },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private _sendKey(def: KeyDef, forceShift: boolean) {
+    const data = this._resolveTerminalData(def, forceShift)
+    if (!data) return
+
+    const command = this._resolvePrimaryCommand(def)
+    if (command) {
+      const fallbackData = this._hostPlatform() === 'macos' ? undefined : data
+      this._sendCommand(command, fallbackData)
+      return
+    }
+
     this.dispatchEvent(
       new CustomEvent('input-panel:send', {
         detail: { data },

package/src/xterm-addon.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite'
 import { Terminal } from '@xterm/xterm'
 import { html } from 'lit'
 import { expect, fn, waitFor } from 'storybook/test'
-import { InputPanelAddon } from './xterm-addon.js'
+import { InputPanelAddon, resolveTerminalPointerTarget } from './xterm-addon.js'
 
 // Register all custom elements (critical — xterm-addon.ts does NOT import these)
 import './index.js'
@@ -32,7 +32,13 @@ function resetAddonState() {
 }
 
 /** Create a real xterm Terminal + InputPanelAddon, mount into container */
-function setupTerminal(container: HTMLElement, opts?: { stateKey?: string }) {
+function setupTerminal(
+  container: HTMLElement,
+  opts?: {
+    stateKey?: string
+    onCommand?: (command: 'copy' | 'paste' | 'select-all') => boolean | Promise<boolean>
+  }
+) {
   const terminal = new Terminal({
     cols: 80,
     rows: 10,
@@ -41,7 +47,11 @@ function setupTerminal(container: HTMLElement, opts?: { stateKey?: string }) {
   })
 
   const inputHandler = fn()
-  const addon = new InputPanelAddon({ onInput: inputHandler, stateKey: opts?.stateKey })
+  const addon = new InputPanelAddon({
+    onInput: inputHandler,
+    onCommand: opts?.onCommand,
+    stateKey: opts?.stateKey,
+  })
   terminal.loadAddon(addon)
   terminal.open(container)
   storyCleanups.add(() => {
@@ -278,6 +288,83 @@ export const InputForwarding: StoryObj = {
   },
 }
 
+/**
+ * Command forwarding: input-panel:command events are delegated to the host.
+ * If the host allows the command, the addon writes fallback terminal data.
+ */
+export const CommandForwardingWithFallback: StoryObj = {
+  render: () => html`<div id="term-container" style="width:100%;height:100%;"></div>`,
+  play: async ({ canvasElement }) => {
+    resetAddonState()
+    const container = canvasElement.querySelector('#term-container') as HTMLElement
+    const commandHandler = fn(() => false)
+    const { addon, inputHandler } = setupTerminal(container, { onCommand: commandHandler })
+
+    addon.open()
+    expect(addon.isOpen).toBe(true)
+
+    const panel = container.querySelector('input-panel')!
+    await (panel as any).updateComplete
+
+    panel.dispatchEvent(
+      new CustomEvent('input-panel:command', {
+        detail: { command: 'copy', fallbackData: '\x03' },
+        bubbles: true,
+        composed: true,
+      })
+    )
+
+    await waitFor(() => {
+      expect(commandHandler).toHaveBeenCalledWith('copy', { fallbackData: '\x03' })
+      expect(inputHandler).toHaveBeenCalledWith('\x03')
+    })
+
+    addon.close()
+  },
+}
+
+/**
+ * Mouse target resolution ignores the transparent touch overlay so the virtual
+ * trackpad can still deliver down/move/up events to the terminal screen.
+ */
+export const PointerTargetIgnoresTouchOverlay: StoryObj = {
+  render: () => html`
+    <div id="term-container" style="width:100%;height:100%;position:relative;">
+      <div class="xterm-screen" id="screen" style="position:absolute;inset:0;"></div>
+      <div
+        class="terminal-touch-mouse-overlay"
+        id="overlay"
+        style="position:absolute;inset:0;z-index:20;pointer-events:auto;"
+      ></div>
+    </div>
+  `,
+  play: async ({ canvasElement }) => {
+    const container = canvasElement.querySelector('#term-container') as HTMLElement
+    const screen = canvasElement.querySelector('#screen') as HTMLElement
+    const overlay = canvasElement.querySelector('#overlay') as HTMLElement
+
+    const descriptor = Object.getOwnPropertyDescriptor(document, 'elementFromPoint')
+    let overlayEnabled = true
+    Object.defineProperty(document, 'elementFromPoint', {
+      configurable: true,
+      value: () => (overlayEnabled && overlay.style.pointerEvents !== 'none' ? overlay : screen),
+    })
+
+    try {
+      const target = resolveTerminalPointerTarget(container, 24, 32)
+      overlayEnabled = false
+      expect(target).toBe(screen)
+      expect(overlay.style.pointerEvents).toBe('auto')
+    } finally {
+      if (descriptor) {
+        Object.defineProperty(document, 'elementFromPoint', descriptor)
+      } else {
+        Reflect.deleteProperty(document, 'elementFromPoint')
+      }
+    }
+  },
+}
+
 /**
  * Custom element registration: document.createElement('input-panel')
  * must produce a real InputPanel instance with shadow DOM, not a generic HTMLElement.

package/src/xterm-addon.ts

@@ -2,6 +2,7 @@ import type { ITerminalAddon, Terminal } from '@xterm/xterm'
 import { iconKeyboard, iconMousePointer2 } from './icons.js'
 import type { InputPanelLayout, InputPanelTab } from './input-panel.js'
 import type { HostPlatform } from './platform.js'
+import type { ShortcutCommand } from './shortcut-pages.js'
 import { getSessionScopedStorageKey } from './storage-namespace.js'
 
 const SENSITIVITY = 1.5
@@ -13,6 +14,32 @@ function isTouchDevice(): boolean {
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0
 }
 
+function isTerminalTouchMouseOverlay(element: Element): element is HTMLElement {
+  return (
+    element instanceof HTMLElement && element.classList.contains('terminal-touch-mouse-overlay')
+  )
+}
+
+export function resolveTerminalPointerTarget(
+  container: HTMLElement,
+  clientX: number,
+  clientY: number
+): Element {
+  let element = document.elementFromPoint(clientX, clientY)
+  if (element && isTerminalTouchMouseOverlay(element)) {
+    const overlayElement = element
+    const previousPointerEvents = overlayElement.style.pointerEvents
+    overlayElement.style.pointerEvents = 'none'
+    element = document.elementFromPoint(clientX, clientY)
+    overlayElement.style.pointerEvents = previousPointerEvents
+  }
+
+  if (element && container.contains(element) && !isTerminalTouchMouseOverlay(element)) {
+    return element
+  }
+  return container.querySelector('.xterm-screen') ?? container
+}
+
 export interface InputPanelHistoryItem {
   text: string
   time: number
@@ -26,6 +53,12 @@ export interface InputPanelSettingsPayload {
   historyLimit: number
 }
 
+export type InputPanelCommand = ShortcutCommand
+
+export interface InputPanelCommandOptions {
+  fallbackData?: string
+}
+
 interface InputPanelSessionState {
   activeTab: InputPanelTab
   inputDraft: string
@@ -49,6 +82,10 @@ function isInputPanelTab(value: unknown): value is InputPanelTab {
   )
 }
 
+function isInputPanelCommand(value: unknown): value is InputPanelCommand {
+  return value === 'copy' || value === 'paste' || value === 'select-all'
+}
+
 interface InputPanelStateStore {
   lastActiveTab?: InputPanelTab
   sessions?: Record<string, Partial<InputPanelSessionState>>
@@ -373,6 +410,12 @@ export class InputPanelAddon implements ITerminalAddon {
   private _listenersAttached = false
 
   private _onInput: (data: string) => void
+  private _onCommand:
+    | ((
+        command: InputPanelCommand,
+        options: InputPanelCommandOptions
+      ) => boolean | Promise<boolean>)
+    | null
   private _onOpenCb: (() => void) | null
   private _onCloseCb: (() => void) | null
   private _getHistory: (() => Promise<readonly InputPanelHistoryItem[]>) | null
@@ -391,6 +434,10 @@ export class InputPanelAddon implements ITerminalAddon {
 
   constructor(opts?: {
     onInput?: (data: string) => void
+    onCommand?: (
+      command: InputPanelCommand,
+      options: InputPanelCommandOptions
+    ) => boolean | Promise<boolean>
     onOpen?: () => void
     onClose?: () => void
     getHistory?: () => Promise<readonly InputPanelHistoryItem[]>
@@ -403,6 +450,7 @@ export class InputPanelAddon implements ITerminalAddon {
     stateKey?: string
   }) {
     this._onInput = opts?.onInput ?? (() => {})
+    this._onCommand = opts?.onCommand ?? null
     this._onOpenCb = opts?.onOpen ?? null
     this._onCloseCb = opts?.onClose ?? null
     this._getHistory = opts?.getHistory ?? null
@@ -443,6 +491,17 @@ export class InputPanelAddon implements ITerminalAddon {
     this._onInput = fn
   }
 
+  set onCommand(
+    fn:
+      | ((
+          command: InputPanelCommand,
+          options: InputPanelCommandOptions
+        ) => boolean | Promise<boolean>)
+      | null
+  ) {
+    this._onCommand = fn
+  }
+
   setPlatform(platform: HostPlatform): void {
     this._platform = platform
     this._applyPlatformToPanel()
@@ -677,6 +736,25 @@ export class InputPanelAddon implements ITerminalAddon {
         }
       }
     })
+    this._on(panel, 'input-panel:command', (e) => {
+      const detail = (e as CustomEvent).detail
+      if (!isRecord(detail)) return
+      const command = detail.command
+      if (!isInputPanelCommand(command)) return
+      const fallbackData = typeof detail.fallbackData === 'string' ? detail.fallbackData : undefined
+
+      void Promise.resolve(this._onCommand?.(command, { fallbackData }) ?? false)
+        .then((handled) => {
+          if (!handled && fallbackData) {
+            this._onInput(fallbackData)
+          }
+        })
+        .catch(() => {
+          if (fallbackData) {
+            this._onInput(fallbackData)
+          }
+        })
+    })
     this._on(inputTab, 'input-panel:input-change', (e) => {
       const value = (e as CustomEvent).detail?.value
       if (typeof value === 'string') {
@@ -972,9 +1050,7 @@ export class InputPanelAddon implements ITerminalAddon {
   private _resolveTarget(clientX: number, clientY: number): Element {
     const container = this._getTerminalHostElement()
     if (!container) return document.body
-    const el = document.elementFromPoint(clientX, clientY)
-    if (el && container.contains(el)) return el
-    return container.querySelector('.xterm-screen') ?? container
+    return resolveTerminalPointerTarget(container, clientX, clientY)
   }
 
   private _dispatchMouse(