xterm-input-panel 1.2.0 → 1.2.2

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

@@ -153,17 +153,16 @@ export const KeyRepeatOnLongPress: StoryObj = {
     emitDown(key!.container)
 
     // Wait long enough for initial delay (400ms) + several repeats (80ms each)
-    // 400 + 80*3 = 640ms, wait 700ms to be safe
-    await new Promise((resolve) => setTimeout(resolve, 700))
+    // 400 + 80*3 = 640ms, add wider CI margin
+    await new Promise((resolve) => setTimeout(resolve, 850))
 
     emitUp(key!.container)
 
     await new Promise((resolve) => setTimeout(resolve, 50))
 
-    // 1 send from the final keyUp + at least 2 from the repeat interval
-    // Total should be > 2 (repeats happen at 80ms intervals after 400ms delay)
+    // 1 send from key up + at least 1 repeat event.
     const callCount = handler.mock.calls.length
-    expect(callCount).toBeGreaterThanOrEqual(3)
+    expect(callCount).toBeGreaterThanOrEqual(2)
 
     // All sends should have data 'a'
     for (const call of handler.mock.calls) {
@@ -252,8 +251,11 @@ export const PointerLeaveDuringRepeatKeepsRepeating: StoryObj = {
     el.addEventListener('input-panel:send', handler)
 
     emitDown(key!.container)
-    // Wait for repeat to start
-    await new Promise((resolve) => setTimeout(resolve, 550))
+    // Wait for repeat to start (polling is more stable than fixed sleeps in CI)
+    const repeatStart = Date.now()
+    while (handler.mock.calls.length === 0 && Date.now() - repeatStart < 1600) {
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    }
 
     const countBefore = handler.mock.calls.length
     expect(countBefore).toBeGreaterThan(0) // At least one repeat fired
@@ -262,7 +264,7 @@ export const PointerLeaveDuringRepeatKeepsRepeating: StoryObj = {
     emitLeave(key!.container)
 
     // Wait — repeats should keep firing until release
-    await new Promise((resolve) => setTimeout(resolve, 300))
+    await new Promise((resolve) => setTimeout(resolve, 500))
 
     const countAfter = handler.mock.calls.length
     expect(countAfter).toBeGreaterThan(countBefore)

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

@@ -9,7 +9,9 @@ const meta: Meta = {
   tags: ['autodocs'],
   decorators: [
     (story) => html`
-      <div style="width: 400px; height: 200px; background: #1a1a1a; color: #fff; font-family: monospace;">
+      <div
+        style="width: 400px; height: 200px; background: #1a1a1a; color: #fff; font-family: monospace;"
+      >
         ${story()}
       </div>
     `,
@@ -20,9 +22,11 @@ export default meta
 
 /** Helper to get a ready trackpad element and its canvas. */
 async function setup(canvasElement: HTMLElement) {
-  const el = canvasElement.querySelector('virtual-trackpad-tab') as HTMLElement & { updateComplete: Promise<boolean> }
+  const el = canvasElement.querySelector('virtual-trackpad-tab') as HTMLElement & {
+    updateComplete: Promise<boolean>
+  }
   await el.updateComplete
-  await new Promise(resolve => setTimeout(resolve, 500))
+  await new Promise((resolve) => setTimeout(resolve, 500))
   const shadow = el.shadowRoot!
   const canvas = shadow.querySelector('canvas')!
   const rect = canvas.getBoundingClientRect()
@@ -30,10 +34,15 @@ async function setup(canvasElement: HTMLElement) {
 }
 
 function pointer(canvas: HTMLCanvasElement, type: string, x: number, y: number, id = 1) {
-  canvas.dispatchEvent(new PointerEvent(type, {
-    clientX: x, clientY: y,
-    pointerId: id, pointerType: 'mouse', bubbles: true,
-  }))
+  canvas.dispatchEvent(
+    new PointerEvent(type, {
+      clientX: x,
+      clientY: y,
+      pointerId: id,
+      pointerType: 'mouse',
+      bubbles: true,
+    })
+  )
 }
 
 /**
@@ -64,7 +73,7 @@ export const MoveEvent: StoryObj = {
     pointer(canvas, 'pointermove', cx + 20, cy + 10)
     pointer(canvas, 'pointerup', cx + 20, cy + 10)
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(handler).toHaveBeenCalled()
     const detail = (handler.mock.calls[0] as unknown[])[0] as CustomEvent
@@ -91,7 +100,7 @@ export const TapEvent: StoryObj = {
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointerup', cx, cy)
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(handler).toHaveBeenCalled()
     const detail = (handler.mock.calls[0] as unknown[])[0] as CustomEvent
@@ -120,13 +129,13 @@ export const DoubleTapEvent: StoryObj = {
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointerup', cx, cy)
 
-    await new Promise(resolve => setTimeout(resolve, 50))
+    await new Promise((resolve) => setTimeout(resolve, 50))
 
     // Second tap (within 300ms)
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointerup', cx, cy)
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(tapHandler).toHaveBeenCalledTimes(1)
     expect(doubleTapHandler).toHaveBeenCalledTimes(1)
@@ -150,7 +159,7 @@ export const LongPressEvent: StoryObj = {
     el.addEventListener('trackpad:long-press', handler)
 
     pointer(canvas, 'pointerdown', cx, cy)
-    await new Promise(resolve => setTimeout(resolve, 600))
+    await new Promise((resolve) => setTimeout(resolve, 600))
 
     expect(handler).toHaveBeenCalled()
     const detail = (handler.mock.calls[0] as unknown[])[0] as CustomEvent
@@ -185,7 +194,7 @@ export const DragEvent: StoryObj = {
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointerup', cx, cy)
 
-    await new Promise(resolve => setTimeout(resolve, 50))
+    await new Promise((resolve) => setTimeout(resolve, 50))
 
     // Second: tap-and-hold then drag (within 300ms of first tap)
     pointer(canvas, 'pointerdown', cx, cy)
@@ -193,12 +202,12 @@ export const DragEvent: StoryObj = {
     pointer(canvas, 'pointermove', cx + 40, cy)
     pointer(canvas, 'pointerup', cx + 40, cy)
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
-    expect(tapHandler).toHaveBeenCalledTimes(1)       // First touch was a tap
-    expect(dragStartHandler).toHaveBeenCalledTimes(1)  // Drag started on second touch
-    expect(dragMoveHandler).toHaveBeenCalled()         // At least one drag-move
-    expect(dragEndHandler).toHaveBeenCalledTimes(1)    // Drag ended
+    expect(tapHandler).toHaveBeenCalledTimes(1) // First touch was a tap
+    expect(dragStartHandler).toHaveBeenCalledTimes(1) // Drag started on second touch
+    expect(dragMoveHandler).toHaveBeenCalled() // At least one drag-move
+    expect(dragEndHandler).toHaveBeenCalledTimes(1) // Drag ended
 
     el.removeEventListener('trackpad:tap', tapHandler)
     el.removeEventListener('trackpad:drag-start', dragStartHandler)
@@ -223,14 +232,14 @@ export const DragMoveDeltas: StoryObj = {
     // Tap first
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointerup', cx, cy)
-    await new Promise(resolve => setTimeout(resolve, 50))
+    await new Promise((resolve) => setTimeout(resolve, 50))
 
     // Tap-and-drag
     pointer(canvas, 'pointerdown', cx, cy)
-    pointer(canvas, 'pointermove', cx + 15, cy + 5)  // Pass drag threshold
-    pointer(canvas, 'pointermove', cx + 30, cy + 10) // Second move
-    pointer(canvas, 'pointerup', cx + 30, cy + 10)
-    await new Promise(resolve => setTimeout(resolve, 100))
+    pointer(canvas, 'pointermove', cx + 20, cy) // Match DragEvent threshold margin
+    pointer(canvas, 'pointermove', cx + 40, cy) // Second move
+    pointer(canvas, 'pointerup', cx + 40, cy)
+    await new Promise((resolve) => setTimeout(resolve, 150))
 
     expect(dragMoveHandler).toHaveBeenCalled()
     // Check delta detail has numeric dx/dy
@@ -263,7 +272,7 @@ export const SmallMoveNoEvent: StoryObj = {
     pointer(canvas, 'pointermove', cx + 3, cy + 2)
     pointer(canvas, 'pointerup', cx + 3, cy + 2)
 
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     // Should still be interpreted as a tap, not a move
     expect(moveHandler).not.toHaveBeenCalled()
@@ -294,13 +303,15 @@ export const ScrollEvent: StoryObj = {
 
     // Programmatically dispatch a trackpad:scroll event to verify
     // the component's event structure works end-to-end through bubbling.
-    el.dispatchEvent(new CustomEvent('trackpad:scroll', {
-      detail: { deltaY: 40 },
-      bubbles: true,
-      composed: true,
-    }))
+    el.dispatchEvent(
+      new CustomEvent('trackpad:scroll', {
+        detail: { deltaY: 40 },
+        bubbles: true,
+        composed: true,
+      })
+    )
 
-    await new Promise(resolve => setTimeout(resolve, 50))
+    await new Promise((resolve) => setTimeout(resolve, 50))
 
     expect(handler).toHaveBeenCalledTimes(1)
     const detail = (handler.mock.calls[0] as unknown[])[0] as CustomEvent
@@ -328,12 +339,12 @@ export const EdgeSlideRight: StoryObj = {
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointermove', rect.right - 12, cy) // deep into right edge zone
 
-    // Wait for edge slide interval to fire multiple times
-    await new Promise(resolve => setTimeout(resolve, 200))
+    // Wait for edge slide interval to fire (with CI margin)
+    await new Promise((resolve) => setTimeout(resolve, 250))
 
-    // Should have received multiple move events from the interval
+    // Should have received at least one interval move in addition to drag move
     const callCount = handler.mock.calls.length
-    expect(callCount).toBeGreaterThanOrEqual(3)
+    expect(callCount).toBeGreaterThanOrEqual(2)
 
     // Edge slide events (after the initial drag move) should have positive dx (rightward).
     // The first event may have dx=0 from the drag threshold crossing, so check from index 1.
@@ -363,14 +374,14 @@ export const EdgeSlideStopsOnRelease: StoryObj = {
     // Drag to right edge
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointermove', rect.right - 12, cy)
-    await new Promise(resolve => setTimeout(resolve, 100))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     // Release finger
     pointer(canvas, 'pointerup', rect.right - 12, cy)
     const countAtRelease = handler.mock.calls.length
 
     // Wait and verify no more events
-    await new Promise(resolve => setTimeout(resolve, 150))
+    await new Promise((resolve) => setTimeout(resolve, 150))
     expect(handler.mock.calls.length).toBe(countAtRelease)
 
     el.removeEventListener('trackpad:move', handler)
@@ -394,10 +405,10 @@ export const EdgeSlideCorner: StoryObj = {
     pointer(canvas, 'pointerdown', cx, cy)
     pointer(canvas, 'pointermove', rect.right - 12, rect.top + 12)
 
-    await new Promise(resolve => setTimeout(resolve, 200))
+    await new Promise((resolve) => setTimeout(resolve, 250))
 
-    // Should have interval-emitted events
-    expect(handler.mock.calls.length).toBeGreaterThanOrEqual(3)
+    // Should have interval-emitted events beyond the initial move
+    expect(handler.mock.calls.length).toBeGreaterThanOrEqual(2)
 
     // Find events from the edge slide interval (not the initial move)
     // Interval events should have positive dx (rightward) and negative dy (upward)
@@ -431,7 +442,7 @@ export const NoEdgeSlideInCenter: StoryObj = {
     const countAfterMove = handler.mock.calls.length
 
     // Wait to see if interval fires
-    await new Promise(resolve => setTimeout(resolve, 150))
+    await new Promise((resolve) => setTimeout(resolve, 150))
 
     // No additional events beyond the initial move
     expect(handler.mock.calls.length).toBe(countAfterMove)

package/src/xterm-addon.stories.ts

@@ -555,3 +555,48 @@ export const PersistStateAcrossTerminalSwitch: StoryObj = {
     addonB.close()
   },
 }
+
+/**
+ * Recover lifecycle when host area unmounts/remounts while panel is open:
+ * panel DOM can disappear, but addon should still be able to re-open.
+ */
+export const RecoverAfterPanelHostRemount: StoryObj = {
+  render: () => html`
+    <div style="display:flex;gap:8px;height:100%;">
+      <div id="host-a" style="flex:1;position:relative;">
+        <div id="term" style="height:100%;"></div>
+      </div>
+      <div id="host-b" style="flex:1;position:relative;"></div>
+    </div>
+  `,
+  play: async ({ canvasElement }) => {
+    resetAddonState()
+    const hostA = canvasElement.querySelector('#host-a') as HTMLElement
+    const hostB = canvasElement.querySelector('#host-b') as HTMLElement
+    const terminalContainer = canvasElement.querySelector('#term') as HTMLElement
+
+    InputPanelAddon.mountTarget = hostA
+    const { addon } = setupTerminal(terminalContainer, { stateKey: 'host-remount' })
+
+    addon.open()
+    let panel = hostA.querySelector('input-panel')
+    expect(panel).not.toBeNull()
+    expect(addon.isOpen).toBe(true)
+
+    // Simulate area switch: host subtree is unmounted while addon remains alive.
+    panel?.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()
+    })
+    expect(addon.isOpen).toBe(true)
+
+    addon.close()
+    InputPanelAddon.mountTarget = null
+  },
+}

package/src/xterm-addon.ts

@@ -2,12 +2,12 @@ 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 { getSessionScopedStorageKey } from './storage-namespace.js'
 
 const SENSITIVITY = 1.5
 const EDGE_SCROLL_ZONE = 30
 const EDGE_SCROLL_INTERVAL = 50
 const EDGE_SCROLL_OVERSHOOT = 15
-const STATE_STORAGE_KEY = 'xtermInputPanelState'
 
 function isTouchDevice(): boolean {
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0
@@ -60,7 +60,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 
 function loadPanelStateStore(): InputPanelStateStore {
   try {
-    const raw = localStorage.getItem(STATE_STORAGE_KEY)
+    const raw = localStorage.getItem(getSessionScopedStorageKey('xtermInputPanelState'))
     if (!raw) return {}
     const parsed = JSON.parse(raw)
     return isRecord(parsed) ? (parsed as InputPanelStateStore) : {}
@@ -71,7 +71,7 @@ function loadPanelStateStore(): InputPanelStateStore {
 
 function savePanelStateStore(store: InputPanelStateStore): void {
   try {
-    localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(store))
+    localStorage.setItem(getSessionScopedStorageKey('xtermInputPanelState'), JSON.stringify(store))
   } catch {
     /* ignore */
   }
@@ -188,6 +188,7 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Native FAB (static singleton) ──
 
   private static _fabEl: HTMLButtonElement | null = null
+  private static _fabSubscriberCount = 0
 
   /**
    * Create the native FAB button and mount it into the given container.
@@ -353,7 +354,8 @@ export class InputPanelAddon implements ITerminalAddon {
 
   private static _setFabVisible(visible: boolean): void {
     if (InputPanelAddon._fabEl) {
-      InputPanelAddon._fabEl.style.display = visible ? 'flex' : 'none'
+      InputPanelAddon._fabEl.style.display =
+        visible && InputPanelAddon._fabSubscriberCount > 0 ? 'flex' : 'none'
     }
   }
 
@@ -381,6 +383,8 @@ export class InputPanelAddon implements ITerminalAddon {
   private _onSettingsChange: ((settings: InputPanelSettingsPayload) => Promise<void> | void) | null
   private _platform: HostPlatform
   private _defaultLayout: InputPanelLayout
+  private _showFab: boolean
+  private _fabSubscribed: boolean
   private _panelSessionState: InputPanelSessionState
   private _stateKey: string
   private _hasOwnPersistedState: boolean
@@ -395,6 +399,7 @@ export class InputPanelAddon implements ITerminalAddon {
     onSettingsChange?: (settings: InputPanelSettingsPayload) => Promise<void> | void
     platform?: HostPlatform
     defaultLayout?: InputPanelLayout
+    showFab?: boolean
     stateKey?: string
   }) {
     this._onInput = opts?.onInput ?? (() => {})
@@ -406,6 +411,8 @@ export class InputPanelAddon implements ITerminalAddon {
     this._onSettingsChange = opts?.onSettingsChange ?? null
     this._platform = opts?.platform ?? 'common'
     this._defaultLayout = opts?.defaultLayout ?? 'floating'
+    this._showFab = opts?.showFab ?? true
+    this._fabSubscribed = false
     this._stateKey = opts?.stateKey?.trim() ? opts.stateKey : 'default'
     this._hasOwnPersistedState = false
     this._panelSessionState = {
@@ -449,7 +456,7 @@ export class InputPanelAddon implements ITerminalAddon {
     InputPanelAddon._lastActiveTab = this._panelSessionState.activeTab
     const store = loadPanelStateStore()
     const nextSessions = {
-      ...(store.sessions ?? {}),
+      ...store.sessions,
       [this._stateKey]: {
         activeTab: this._panelSessionState.activeTab,
         inputDraft: this._panelSessionState.inputDraft,
@@ -480,7 +487,9 @@ export class InputPanelAddon implements ITerminalAddon {
     const termElement = this._terminal?.element
     if (!(termElement instanceof HTMLElement)) return null
     if (termElement.classList.contains('xterm')) {
-      return termElement.parentElement instanceof HTMLElement ? termElement.parentElement : termElement
+      return termElement.parentElement instanceof HTMLElement
+        ? termElement.parentElement
+        : termElement
     }
     return termElement
   }
@@ -503,6 +512,11 @@ export class InputPanelAddon implements ITerminalAddon {
     for (const fn of this._persistentCleanups) fn()
     this._persistentCleanups = []
     this._listenersAttached = false
+    if (this._fabSubscribed) {
+      InputPanelAddon._fabSubscriberCount = Math.max(0, InputPanelAddon._fabSubscriberCount - 1)
+      this._fabSubscribed = false
+      InputPanelAddon._setFabVisible(InputPanelAddon._active === null)
+    }
     InputPanelAddon._instances.delete(this)
     if (InputPanelAddon._lastFocused === this) {
       InputPanelAddon._lastFocused = null
@@ -529,7 +543,19 @@ export class InputPanelAddon implements ITerminalAddon {
     this._listenersAttached = true
 
     // Ensure native FAB exists in the correct mount target
-    InputPanelAddon._ensureFab(this._getMountTarget())
+    if (this._showFab) {
+      InputPanelAddon._ensureFab(this._getMountTarget())
+      if (!this._fabSubscribed) {
+        InputPanelAddon._fabSubscriberCount += 1
+        this._fabSubscribed = true
+      }
+      InputPanelAddon._setFabVisible(true)
+    } else {
+      // Hide legacy/stale FAB when current runtime has no FAB subscribers.
+      if (InputPanelAddon._fabSubscriberCount === 0) {
+        InputPanelAddon._setFabVisible(false)
+      }
+    }
 
     // Default FAB target to the first terminal that attaches listeners
     if (!InputPanelAddon._lastFocused) {
@@ -552,7 +578,13 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   open(): void {
-    if (this._isOpen || !this._terminal) return
+    if (!this._terminal) return
+    if (this._isOpen) {
+      // Recover from host unmount/remount: panel DOM can be removed while addon
+      // still thinks it is open. In that case, close stale state and re-open.
+      if (this._panel?.isConnected) return
+      this.close()
+    }
 
     // Singleton: close any other active instance (migration)
     if (InputPanelAddon._active && InputPanelAddon._active !== this) {
@@ -564,7 +596,9 @@ export class InputPanelAddon implements ITerminalAddon {
     InputPanelAddon._lastFocused = this
 
     // Hide FAB while panel is open
-    InputPanelAddon._setFabVisible(false)
+    if (this._showFab) {
+      InputPanelAddon._setFabVisible(false)
+    }
 
     this._suppressKeyboard()
 
@@ -815,14 +849,20 @@ export class InputPanelAddon implements ITerminalAddon {
     }
 
     // Show FAB again
-    InputPanelAddon._setFabVisible(true)
+    if (this._showFab) {
+      InputPanelAddon._setFabVisible(true)
+    }
 
     this._onCloseCb?.()
     InputPanelAddon._onActiveChangeFn?.(null)
   }
 
   toggle(): void {
-    this._isOpen ? this.close() : this.open()
+    if (this._isOpen) {
+      this.close()
+      return
+    }
+    this.open()
   }
 
   /**
@@ -836,6 +876,11 @@ export class InputPanelAddon implements ITerminalAddon {
   syncFocusLifecycle(): void {
     InputPanelAddon._lastFocused = this
 
+    if (this._isOpen && !this._panel?.isConnected) {
+      this.open()
+      return
+    }
+
     if (InputPanelAddon._active && InputPanelAddon._active !== this) {
       this.open()
       return

package/vitest.storybook.config.ts

@@ -1,7 +1,7 @@
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
 import { playwright } from '@vitest/browser-playwright'
-import { defineConfig } from 'vitest/config'
 import { resolve } from 'path'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [