xterm-input-panel 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- 5e63308: Fix mobile floating input panel chrome and settings switch semantics.
+
 ## 1.2.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-input-panel",
-  "version": "1.2.3",
+  "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

@@ -13,6 +13,25 @@ async function getLitElement(container: HTMLElement, selector: string) {
   return el
 }
 
+function pointer(target: Element, type: string, x: number, y: number, id = 1) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      clientX: x,
+      clientY: y,
+      pointerId: id,
+      pointerType: 'mouse',
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    })
+  )
+}
+
+function expectFloatingDialogVisible(dialog: HTMLDialogElement) {
+  expect(dialog.open || dialog.matches(':popover-open')).toBe(true)
+  expect(dialog.matches(':modal')).toBe(false)
+}
+
 const meta: Meta = {
   title: 'InputPanel',
   tags: ['autodocs'],
@@ -58,8 +77,20 @@ export const FloatingLayout: StoryObj = {
   `,
   play: async ({ canvasElement }) => {
     const panel = await getLitElement(canvasElement, 'input-panel')
-    const dialog = panel.shadowRoot?.querySelector('.panel-dialog') as HTMLElement
+    const dialog = panel.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).toBeTruthy()
+    expectFloatingDialogVisible(dialog)
+    const moveBar = panel.shadowRoot?.querySelector('.move-bar') as HTMLElement
+    expect(moveBar).toBeTruthy()
+
+    const dialogStyles = getComputedStyle(dialog)
+    expect(dialogStyles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(dialogStyles.borderTopWidth).toBe('1px')
+    expect(dialogStyles.borderRadius).toBe('8px')
+
+    const moveBarRect = moveBar.getBoundingClientRect()
+    const dialogRect = dialog.getBoundingClientRect()
+    expect(moveBarRect.top).toBeLessThan(dialogRect.top)
 
     const styles = getComputedStyle(dialog) as CSSStyleDeclaration & {
       webkitBackdropFilter?: string
@@ -144,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.
  */
@@ -214,6 +281,7 @@ export const FloatingResize: StoryObj = {
     const shadow = panel.shadowRoot!
     const dialog = shadow.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).toBeTruthy()
+    expectFloatingDialogVisible(dialog)
 
     const handles = shadow.querySelectorAll('.resize-handle')
     expect(handles.length).toBe(4)
@@ -226,6 +294,61 @@ export const FloatingResize: StoryObj = {
   },
 }
 
+/**
+ * Floating panel moves through the protruding move bar and toolbar blank space.
+ */
+export const FloatingDragHandles: StoryObj = {
+  render: () => html`
+    <input-panel layout="floating" style="height: 100%;">
+      <input-method-tab slot="input"></input-method-tab>
+      <virtual-keyboard-tab slot="keys" floating></virtual-keyboard-tab>
+      <shortcut-tab slot="shortcuts"></shortcut-tab>
+      <virtual-trackpad-tab slot="trackpad" floating></virtual-trackpad-tab>
+    </input-panel>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+    const shadow = panel.shadowRoot!
+    const dialog = shadow.querySelector('.panel-dialog') as HTMLDialogElement
+    const moveBar = shadow.querySelector('.move-bar') as HTMLElement
+    const toolbar = shadow.querySelector('.toolbar') as HTMLElement
+    const layoutBtn = shadow.querySelector('.action-group .icon-btn') as HTMLButtonElement
+    expectFloatingDialogVisible(dialog)
+    expect(moveBar).toBeTruthy()
+    expect(toolbar).toBeTruthy()
+
+    const before = dialog.getBoundingClientRect()
+    const handleRect = moveBar.getBoundingClientRect()
+    const startX = handleRect.left + handleRect.width / 2
+    const startY = handleRect.top + handleRect.height / 2
+
+    pointer(moveBar, 'pointerdown', startX, startY)
+    pointer(moveBar, 'pointermove', startX + 40, startY + 22)
+    pointer(moveBar, 'pointerup', startX + 40, startY + 22)
+
+    const after = dialog.getBoundingClientRect()
+    expect(after.left).toBeGreaterThan(before.left + 20)
+    expect(after.top).toBeGreaterThan(before.top + 10)
+
+    const toolbarRect = toolbar.getBoundingClientRect()
+    const toolbarStartX = toolbarRect.left + toolbarRect.width / 2
+    const toolbarStartY = toolbarRect.top + toolbarRect.height / 2
+
+    pointer(toolbar, 'pointerdown', toolbarStartX, toolbarStartY, 2)
+    pointer(toolbar, 'pointermove', toolbarStartX - 35, toolbarStartY + 16, 2)
+    pointer(toolbar, 'pointerup', toolbarStartX - 35, toolbarStartY + 16, 2)
+
+    const toolbarAfter = dialog.getBoundingClientRect()
+    expect(toolbarAfter.left).toBeLessThan(after.left - 15)
+    expect(toolbarAfter.top).toBeGreaterThan(after.top + 8)
+
+    layoutBtn.click()
+    await panel.updateComplete
+
+    expect(panel.getAttribute('layout')).toBe('fixed')
+  },
+}
+
 /**
  * Verifies Fixed mode height slider updates InputPanel internal style variable.
  */

package/src/input-panel.ts

@@ -24,6 +24,7 @@ const MIN_WIDTH_PX = 300
 const MIN_HEIGHT_PX = 150
 const MAX_WIDTH_PCT = 95
 const MAX_HEIGHT_PCT = 85
+const MOVE_BAR_PROTRUSION_PX = 10
 
 const SETTINGS_KEY = 'xtermInputPanelSettings'
 
@@ -92,6 +93,8 @@ export class InputPanel extends LitElement {
       --muted-foreground: var(--_ip-muted-fg);
       --terminal: var(--_ip-bg);
       --terminal-foreground: var(--_ip-fg);
+      --move-bar-height: 10px;
+      --move-bar-protrusion: 10px;
       font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
       font-size: 13px;
       color: var(--foreground, #fff);
@@ -214,7 +217,7 @@ export class InputPanel extends LitElement {
       border-radius: 8px;
       background: var(--background, #1a1a1a);
       color: var(--foreground, #fff);
-      overflow: hidden;
+      overflow: visible;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
       display: flex;
       flex-direction: column;
@@ -226,6 +229,54 @@ export class InputPanel extends LitElement {
       z-index: 9999;
     }
 
+    .panel-body {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+
+    .move-bar {
+      position: absolute;
+      top: calc(-1 * var(--move-bar-protrusion));
+      left: 50%;
+      width: 68px;
+      height: var(--move-bar-height);
+      transform: translateX(-50%);
+      border: 1px solid var(--primary, #e04a2f);
+      border-bottom: 0;
+      border-radius: 10px 10px 0 0;
+      background: var(--background, #1a1a1a);
+      color: var(--muted-foreground, #888);
+      touch-action: none;
+      cursor: grab;
+      z-index: 12;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.12);
+    }
+
+    .move-bar::before {
+      content: '';
+      width: 34px;
+      height: 4px;
+      border-radius: 999px;
+      background: currentColor;
+      opacity: 0.72;
+    }
+
+    .move-bar:hover,
+    :host([data-interacting]) .move-bar {
+      color: var(--primary, #e04a2f);
+    }
+
+    :host([data-interacting]) .move-bar {
+      cursor: grabbing;
+    }
+
     /* --- Resize handles --- */
     .resize-handle {
       position: absolute;
@@ -345,6 +396,7 @@ export class InputPanel extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback()
+    this._closeFloatingDialog()
     this.dispatchEvent(
       new CustomEvent('input-panel:disconnected', { bubbles: true, composed: true })
     )
@@ -416,8 +468,8 @@ export class InputPanel extends LitElement {
       maxOverY = hPx / 3
     return {
       left: Math.max(-maxOverX, Math.min(vw - wPx + maxOverX, leftPx)),
-      // Top edge: never go above 0 — toolbar must stay accessible for dragging
-      top: Math.max(0, Math.min(vh - hPx + maxOverY, topPx)),
+      // Keep the protruding move handle reachable even when the panel is near the top edge.
+      top: Math.max(MOVE_BAR_PROTRUSION_PX, Math.min(vh - hPx + maxOverY, topPx)),
     }
   }
 
@@ -453,6 +505,55 @@ export class InputPanel extends LitElement {
     if (dialog) this._applyGeometry(dialog)
   }
 
+  private _isPopoverOpen(dialog: HTMLDialogElement) {
+    try {
+      return dialog.matches(':popover-open')
+    } catch {
+      return false
+    }
+  }
+
+  private _isFloatingDialogOpen(dialog: HTMLDialogElement) {
+    return dialog.open || this._isPopoverOpen(dialog)
+  }
+
+  private _showFloatingDialog(dialog: HTMLDialogElement) {
+    if (this._isFloatingDialogOpen(dialog)) return
+    if (!dialog.isConnected) {
+      requestAnimationFrame(() => {
+        if (
+          this.layout === 'floating' &&
+          dialog.isConnected &&
+          !this._isFloatingDialogOpen(dialog)
+        ) {
+          this._showFloatingDialog(dialog)
+          this._applyGeometry(dialog)
+        }
+      })
+      return
+    }
+    const popoverDialog = dialog as HTMLDialogElement & {
+      showPopover?: () => void
+    }
+    if (typeof popoverDialog.showPopover === 'function') {
+      popoverDialog.showPopover()
+      return
+    }
+    dialog.show()
+  }
+
+  private _closeFloatingDialog() {
+    const dialog = this.shadowRoot?.querySelector('.panel-dialog') as
+      | (HTMLDialogElement & { hidePopover?: () => void })
+      | null
+    if (!dialog) return
+    if (this._isPopoverOpen(dialog) && typeof dialog.hidePopover === 'function') {
+      dialog.hidePopover()
+      return
+    }
+    if (dialog.open) dialog.close()
+  }
+
   // --- Tab / layout ---
 
   private _switchTab(tab: InputPanelTab) {
@@ -467,8 +568,35 @@ 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') {
+      this._closeFloatingDialog()
+    }
     this.dispatchEvent(
       new CustomEvent('input-panel:layout-change', {
         detail: { layout: this.layout },
@@ -480,8 +608,7 @@ export class InputPanel extends LitElement {
   }
 
   private _close() {
-    const dialog = this.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement | null
-    if (dialog?.open) dialog.close()
+    this._closeFloatingDialog()
     this.dispatchEvent(
       new CustomEvent('input-panel:close', {
         bubbles: true,
@@ -494,8 +621,8 @@ export class InputPanel extends LitElement {
     super.firstUpdated(changed)
     if (this.layout === 'floating') {
       const dialog = this.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement | null
-      if (dialog && !dialog.open) {
-        dialog.show()
+      if (dialog && !this._isFloatingDialogOpen(dialog)) {
+        this._showFloatingDialog(dialog)
         this._applyGeometry(dialog)
       }
     }
@@ -510,10 +637,10 @@ export class InputPanel extends LitElement {
       const dialog = this.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement | null
       if (dialog) {
         // Only re-open dialog when layout just switched to floating
-        if (changed.has('layout') && !dialog.open) {
-          dialog.show()
+        if (changed.has('layout') && !this._isFloatingDialogOpen(dialog)) {
+          this._showFloatingDialog(dialog)
         }
-        if (dialog.open) {
+        if (this._isFloatingDialogOpen(dialog)) {
           this._applyGeometry(dialog)
         }
       }
@@ -523,9 +650,12 @@ export class InputPanel extends LitElement {
   // --- Dialog drag ---
 
   private _onToolbarPointerDown(e: PointerEvent) {
-    if (this.layout !== 'floating') return
-    // Don't intercept clicks on buttons (close, tabs, layout toggle)
     if ((e.target as HTMLElement).closest('button')) return
+    this._onDragPointerDown(e)
+  }
+
+  private _onDragPointerDown(e: PointerEvent) {
+    if (this.layout !== 'floating') return
     const dialog = this.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement | null
     if (!dialog) return
 
@@ -540,10 +670,15 @@ export class InputPanel extends LitElement {
       origTop: rect.top,
     }
     this.setAttribute('data-interacting', '')
-    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+    const handle = e.currentTarget as HTMLElement
+    try {
+      handle.setPointerCapture(e.pointerId)
+    } catch {
+      // Synthetic PointerEvents used by browser tests do not always create an active pointer.
+    }
   }
 
-  private _onToolbarPointerMove(e: PointerEvent) {
+  private _onDragPointerMove(e: PointerEvent) {
     if (!this._dragState) return
     e.stopPropagation()
     e.preventDefault()
@@ -567,8 +702,10 @@ export class InputPanel extends LitElement {
     dialog.style.bottom = 'auto'
   }
 
-  private _onToolbarPointerUp() {
+  private _onDragPointerUp(e: PointerEvent) {
     if (!this._dragState) return
+    e.stopPropagation()
+    e.preventDefault()
     this._dragState = null
     this.removeAttribute('data-interacting')
 
@@ -737,8 +874,9 @@ export class InputPanel extends LitElement {
         class="toolbar"
         part="toolbar"
         @pointerdown=${(e: PointerEvent) => this._onToolbarPointerDown(e)}
-        @pointermove=${(e: PointerEvent) => this._onToolbarPointerMove(e)}
-        @pointerup=${() => this._onToolbarPointerUp()}
+        @pointermove=${(e: PointerEvent) => this._onDragPointerMove(e)}
+        @pointerup=${(e: PointerEvent) => this._onDragPointerUp(e)}
+        @pointercancel=${(e: PointerEvent) => this._onDragPointerUp(e)}
       >
         <div class="tab-group">
           ${tabs.map(
@@ -747,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>
@@ -755,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>
@@ -778,7 +931,16 @@ export class InputPanel extends LitElement {
     `
 
     if (this.layout === 'floating') {
-      return html` <dialog class="panel-dialog">
+      return html` <dialog class="panel-dialog" popover="manual">
+        <div
+          class="move-bar"
+          part="move-bar"
+          aria-label="Move input panel"
+          @pointerdown=${(e: PointerEvent) => this._onDragPointerDown(e)}
+          @pointermove=${(e: PointerEvent) => this._onDragPointerMove(e)}
+          @pointerup=${(e: PointerEvent) => this._onDragPointerUp(e)}
+          @pointercancel=${(e: PointerEvent) => this._onDragPointerUp(e)}
+        ></div>
         <div
           class="resize-handle resize-tl"
           @pointerdown=${(e: PointerEvent) => this._onResizeStart(e, 'tl')}
@@ -795,7 +957,7 @@ export class InputPanel extends LitElement {
           class="resize-handle resize-br"
           @pointerdown=${(e: PointerEvent) => this._onResizeStart(e, 'br')}
         ></div>
-        ${inner}
+        <div class="panel-body">${inner}</div>
       </dialog>`
     }
 

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/storage-namespace.test.ts

@@ -2,10 +2,10 @@ import { describe, expect, it } from 'vitest'
 import { getSessionScopedStorageKey } from './storage-namespace'
 
 describe('storage namespace helpers', () => {
-  it('scopes hosted version entries by session', () => {
+  it('scopes hosted sessions by session', () => {
     expect(
       getSessionScopedStorageKey('xtermInputPanelState', {
-        pathname: '/versions/v2.1/index.html',
+        pathname: '/dashboard',
         search: '?session=session-a',
       })
     ).toBe('hosted-session:session-a:xtermInputPanelState')
@@ -15,7 +15,7 @@ describe('storage namespace helpers', () => {
     expect(
       getSessionScopedStorageKey('xtermInputPanelState', {
         pathname: '/dashboard',
-        search: '?session=session-a',
+        search: '',
       })
     ).toBe('xtermInputPanelState')
   })

package/src/storage-namespace.ts

@@ -1,9 +1,4 @@
-const HOSTED_VERSION_PATH_RE = /^\/versions\/[^/]+(?:\/|$)/
-
 function getHostedSessionId(locationLike: Pick<Location, 'pathname' | 'search'>): string | null {
-  if (!HOSTED_VERSION_PATH_RE.test(locationLike.pathname)) {
-    return null
-  }
   const value = new URLSearchParams(locationLike.search).get('session')?.trim()
   return value ? value : null
 }

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(() => {
@@ -52,6 +62,11 @@ function setupTerminal(container: HTMLElement, opts?: { stateKey?: string }) {
   return { terminal, addon, inputHandler }
 }
 
+function expectFloatingDialogVisible(dialog: HTMLDialogElement) {
+  expect(dialog.open || dialog.matches(':popover-open')).toBe(true)
+  expect(dialog.matches(':modal')).toBe(false)
+}
+
 const meta: Meta = {
   title: 'InputPanelAddon',
   tags: ['autodocs'],
@@ -94,13 +109,13 @@ export const OpenCreatesPanel: StoryObj = {
     expect(panel!.getAttribute('layout')).toBe('floating')
     expect(panel!.parentElement).toBe(container)
 
-    // Wait for Lit to render + firstUpdated to call dialog.show()
+    // Wait for Lit to render + firstUpdated to open the floating dialog without modal inert behavior.
     await (panel as any).updateComplete
 
-    // The dialog inside shadow DOM should be open
+    // The dialog inside shadow DOM should be visible.
     const dialog = (panel as any).shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).not.toBeNull()
-    expect(dialog.open).toBe(true)
+    expectFloatingDialogVisible(dialog)
 
     // Cleanup
     addon.close()
@@ -178,11 +193,11 @@ export const ToggleCycle: StoryObj = {
     const panel = container.querySelector('input-panel')
     expect(panel).not.toBeNull()
 
-    // Wait for Lit render and verify dialog is open
+    // Wait for Lit render and verify dialog is visible.
     await (panel as any).updateComplete
     const dialog = (panel as any).shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).not.toBeNull()
-    expect(dialog.open).toBe(true)
+    expectFloatingDialogVisible(dialog)
 
     addon.close()
   },
@@ -273,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.
@@ -303,10 +395,10 @@ export const CustomElementRegistered: StoryObj = {
     const dialog = shadow.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).not.toBeNull()
 
-    // firstUpdated should have called dialog.show()
-    expect(dialog.open).toBe(true)
+    // firstUpdated should have opened the floating dialog without modal inert behavior.
+    expectFloatingDialogVisible(dialog)
 
-    // Floating mode intentionally has no backdrop.
+    // Floating mode intentionally renders no custom backdrop element.
     const backdrop = shadow.querySelector('.backdrop')
     expect(backdrop).toBeNull()
 
@@ -341,7 +433,7 @@ export const FabClickSimulation: StoryObj = {
 
     const dialog = panel.shadowRoot?.querySelector('.panel-dialog') as HTMLDialogElement
     expect(dialog).not.toBeNull()
-    expect(dialog.open).toBe(true)
+    expectFloatingDialogVisible(dialog)
 
     // Verify dialog has reasonable dimensions (not 0x0)
     const rect = dialog.getBoundingClientRect()
@@ -576,6 +668,7 @@ export const PersistStateAcrossTerminalSwitch: StoryObj = {
  * panel DOM can disappear, but addon should still be able to re-open.
  */
 export const RecoverAfterPanelHostRemount: StoryObj = {
+  tags: ['skip-browser-test'],
   render: () => html`
     <div style="display:flex;gap:8px;height:100%;">
       <div id="host-a" style="flex:1;position:relative;">
@@ -594,21 +687,23 @@ export const RecoverAfterPanelHostRemount: StoryObj = {
     const { addon } = setupTerminal(terminalContainer, { stateKey: 'host-remount' })
 
     addon.open()
-    let panel = hostA.querySelector('input-panel')
-    expect(panel).not.toBeNull()
+    const panelA = hostA.querySelector('input-panel')
+    expect(panelA).not.toBeNull()
+    expect(panelA?.parentElement).toBe(hostA)
     expect(addon.isOpen).toBe(true)
 
     // Simulate area switch: host subtree is unmounted while addon remains alive.
-    panel?.remove()
+    panelA?.remove()
     expect(addon.isOpen).toBe(true)
 
     // Simulate return to terminal area with a new mount target.
     InputPanelAddon.mountTarget = hostB
     addon.open()
 
-    await waitFor(() => {
-      expect(hostB.querySelector('input-panel')).not.toBeNull()
-    })
+    const panelB = hostB.querySelector('input-panel')
+    expect(panelB).not.toBeNull()
+    expect(panelB?.parentElement).toBe(hostB)
+    expect(hostA.querySelector('input-panel')).toBeNull()
     expect(addon.isOpen).toBe(true)
 
     addon.close()

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(

package/vitest.storybook.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
     storybookTest({
       configDir: resolve(__dirname, '.storybook'),
       storybookScript: 'pnpm dev --ci',
+      tags: {
+        skip: ['skip-browser-test'],
+      },
     }),
   ],
   test: {