xterm-input-panel 1.1.0 → 1.2.1

package/src/xterm-addon.ts

@@ -1,12 +1,13 @@
 import type { ITerminalAddon, Terminal } from '@xterm/xterm'
 import { iconKeyboard, iconMousePointer2 } from './icons.js'
-import type { InputPanelLayout } from './input-panel.js'
+import type { InputPanelLayout, InputPanelTab } from './input-panel.js'
 import type { HostPlatform } from './platform.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
@@ -25,6 +26,84 @@ export interface InputPanelSettingsPayload {
   historyLimit: number
 }
 
+interface InputPanelSessionState {
+  activeTab: InputPanelTab
+  inputDraft: string
+}
+
+interface InputMethodTabElement extends HTMLElement {
+  value: string
+}
+
+interface InputPanelElement extends HTMLElement {
+  activeTab: InputPanelTab
+}
+
+function isInputPanelTab(value: unknown): value is InputPanelTab {
+  return (
+    value === 'input' ||
+    value === 'keys' ||
+    value === 'shortcuts' ||
+    value === 'trackpad' ||
+    value === 'settings'
+  )
+}
+
+interface InputPanelStateStore {
+  lastActiveTab?: InputPanelTab
+  sessions?: Record<string, Partial<InputPanelSessionState>>
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function loadPanelStateStore(): InputPanelStateStore {
+  try {
+    const raw = localStorage.getItem(STATE_STORAGE_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    return isRecord(parsed) ? (parsed as InputPanelStateStore) : {}
+  } catch {
+    return {}
+  }
+}
+
+function savePanelStateStore(store: InputPanelStateStore): void {
+  try {
+    localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    /* ignore */
+  }
+}
+
+function loadPanelSessionState(sessionKey: string): InputPanelSessionState | null {
+  const store = loadPanelStateStore()
+  const sessions = store.sessions
+  if (!sessions) return null
+  const rawState = sessions[sessionKey]
+  if (!isRecord(rawState)) return null
+
+  const state: InputPanelSessionState = {
+    activeTab: 'input',
+    inputDraft: '',
+  }
+
+  if (isInputPanelTab(rawState.activeTab)) {
+    state.activeTab = rawState.activeTab
+  }
+  if (typeof rawState.inputDraft === 'string') {
+    state.inputDraft = rawState.inputDraft
+  }
+
+  return state
+}
+
+function loadLastActiveTab(): InputPanelTab {
+  const store = loadPanelStateStore()
+  return isInputPanelTab(store.lastActiveTab) ? store.lastActiveTab : 'input'
+}
+
 /**
  * xterm.js addon that provides full InputPanel integration.
  *
@@ -56,6 +135,7 @@ export interface InputPanelSettingsPayload {
  * ```
  */
 export class InputPanelAddon implements ITerminalAddon {
+  private static _lastActiveTab: InputPanelTab = 'input'
   // ── Singleton state ──
 
   /** The currently active (open) addon instance, or null. */
@@ -108,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.
@@ -273,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'
     }
   }
 
@@ -301,6 +383,11 @@ 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
 
   constructor(opts?: {
     onInput?: (data: string) => void
@@ -312,6 +399,8 @@ export class InputPanelAddon implements ITerminalAddon {
     onSettingsChange?: (settings: InputPanelSettingsPayload) => Promise<void> | void
     platform?: HostPlatform
     defaultLayout?: InputPanelLayout
+    showFab?: boolean
+    stateKey?: string
   }) {
     this._onInput = opts?.onInput ?? (() => {})
     this._onOpenCb = opts?.onOpen ?? null
@@ -322,6 +411,21 @@ 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 = {
+      activeTab: 'input',
+      inputDraft: '',
+    }
+    const persistedState = loadPanelSessionState(this._stateKey)
+    if (persistedState) {
+      this._panelSessionState = persistedState
+      this._hasOwnPersistedState = true
+    } else {
+      this._panelSessionState.activeTab = InputPanelAddon._lastActiveTab || loadLastActiveTab()
+    }
   }
 
   get isOpen(): boolean {
@@ -348,12 +452,54 @@ export class InputPanelAddon implements ITerminalAddon {
     this._defaultLayout = layout
   }
 
+  private _persistPanelState(): void {
+    InputPanelAddon._lastActiveTab = this._panelSessionState.activeTab
+    const store = loadPanelStateStore()
+    const nextSessions = {
+      ...store.sessions,
+      [this._stateKey]: {
+        activeTab: this._panelSessionState.activeTab,
+        inputDraft: this._panelSessionState.inputDraft,
+      },
+    }
+    savePanelStateStore({
+      ...store,
+      lastActiveTab: this._panelSessionState.activeTab,
+      sessions: nextSessions,
+    })
+  }
+
   /**
    * Resolve the mount target for this addon instance.
    * Priority: static mountTarget > terminal container > document.body
    */
   private _getMountTarget(): HTMLElement {
-    return InputPanelAddon._mountTarget ?? this._terminal?.element?.parentElement ?? document.body
+    return InputPanelAddon._mountTarget ?? this._getTerminalHostElement() ?? document.body
+  }
+
+  /**
+   * Resolve the visual host element used for overlay UI (cursor/panel).
+   *
+   * xterm renderer usually exposes `.xterm` as `terminal.element`, while
+   * ghostty may expose the mount container itself.
+   */
+  private _getTerminalHostElement(): HTMLElement | null {
+    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
+  }
+
+  private _detectTerminalEngine(): 'xterm' | 'non-xterm' {
+    const termElement = this._terminal?.element
+    if (termElement instanceof HTMLElement && termElement.classList.contains('xterm')) {
+      return 'xterm'
+    }
+    return 'non-xterm'
   }
 
   activate(terminal: Terminal): void {
@@ -366,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
@@ -392,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) {
@@ -415,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) {
@@ -427,17 +596,27 @@ 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()
 
+    if (!this._hasOwnPersistedState) {
+      const fallbackActiveTab = loadLastActiveTab()
+      this._panelSessionState.activeTab = fallbackActiveTab
+      InputPanelAddon._lastActiveTab = fallbackActiveTab
+    }
+
     // Build the element tree
-    const panel = document.createElement('input-panel')
+    const panel = document.createElement('input-panel') as InputPanelElement
     panel.setAttribute('layout', this._defaultLayout)
     this._applyPanelThemeBindings(panel)
+    panel.activeTab = this._panelSessionState.activeTab
 
-    const inputTab = document.createElement('input-method-tab')
+    const inputTab = document.createElement('input-method-tab') as InputMethodTabElement
     inputTab.setAttribute('slot', 'input')
+    inputTab.value = this._panelSessionState.inputDraft
     panel.appendChild(inputTab)
 
     const keysTab = document.createElement('virtual-keyboard-tab')
@@ -498,8 +677,21 @@ export class InputPanelAddon implements ITerminalAddon {
         }
       }
     })
+    this._on(inputTab, 'input-panel:input-change', (e) => {
+      const value = (e as CustomEvent).detail?.value
+      if (typeof value === 'string') {
+        this._panelSessionState.inputDraft = value
+        this._hasOwnPersistedState = true
+        this._persistPanelState()
+      }
+    })
     this._on(panel, 'input-panel:tab-change', (e) => {
       const tab = (e as CustomEvent).detail?.tab
+      if (isInputPanelTab(tab)) {
+        this._panelSessionState.activeTab = tab
+        this._hasOwnPersistedState = true
+        this._persistPanelState()
+      }
       if (tab === 'trackpad') this._showCursor()
       else this._hideCursor()
     })
@@ -590,7 +782,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _applyPanelThemeBindings(panel: HTMLElement): void {
-    const scope = this._terminal?.element?.parentElement ?? this._getMountTarget()
+    const scope = this._getTerminalHostElement() ?? this._getMountTarget()
     const style = getComputedStyle(scope)
 
     const background = this._readThemeVar(
@@ -657,14 +849,46 @@ 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()
+  }
+
+  /**
+   * Sync addon singleton state when host marks this terminal as active.
+   *
+   * Lifecycle:
+   * 1) Always refresh `_lastFocused` so FAB targets the current terminal.
+   * 2) If another terminal owns an open panel, migrate panel ownership here.
+   * 3) If this panel is already open, keep terminal focus in sync.
+   */
+  syncFocusLifecycle(): void {
+    InputPanelAddon._lastFocused = this
+
+    if (this._isOpen && !this._panel?.isConnected) {
+      this.open()
+      return
+    }
+
+    if (InputPanelAddon._active && InputPanelAddon._active !== this) {
+      this.open()
+      return
+    }
+
+    if (this._isOpen) {
+      this._focusTerminal()
+    }
   }
 
   // ── Terminal focus ──
@@ -681,10 +905,13 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Cursor overlay ──
 
   private _createCursor(): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return
 
     const el = document.createElement('div')
+    el.setAttribute('data-input-panel-cursor', 'virtual-mouse')
+    el.setAttribute('data-terminal-engine', this._detectTerminalEngine())
+    el.setAttribute('aria-hidden', 'true')
     el.style.cssText =
       'position:absolute;z-index:10;pointer-events:none;opacity:0;transition:opacity 0.15s;color:#fff;'
     const pointer = iconMousePointer2(20)
@@ -707,7 +934,7 @@ export class InputPanelAddon implements ITerminalAddon {
   private _showCursor(): void {
     if (!this._cursorEl) this._createCursor()
     if (this._cursorEl) {
-      const container = this._terminal?.element?.parentElement
+      const container = this._getTerminalHostElement()
       if (container) {
         const rect = container.getBoundingClientRect()
         this._cursorPos = { x: rect.width / 2, y: rect.height / 2 }
@@ -722,7 +949,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _moveCursor(dx: number, dy: number): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return
     const rect = container.getBoundingClientRect()
     this._cursorPos.x = Math.max(0, Math.min(rect.width, this._cursorPos.x + dx * SENSITIVITY))
@@ -733,7 +960,7 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Mouse event dispatch ──
 
   private _getClientCoords(): { clientX: number; clientY: number } | null {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return null
     const rect = container.getBoundingClientRect()
     return {
@@ -743,7 +970,7 @@ export class InputPanelAddon implements ITerminalAddon {
   }
 
   private _resolveTarget(clientX: number, clientY: number): Element {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container) return document.body
     const el = document.elementFromPoint(clientX, clientY)
     if (el && container.contains(el)) return el
@@ -814,7 +1041,7 @@ export class InputPanelAddon implements ITerminalAddon {
   // ── Edge scroll (during drag selection) ──
 
   private _updateEdgeScroll(): void {
-    const container = this._terminal?.element?.parentElement
+    const container = this._getTerminalHostElement()
     if (!container || !this._isDragging) {
       this._stopEdgeScroll()
       return
@@ -829,7 +1056,7 @@ export class InputPanelAddon implements ITerminalAddon {
 
     this._stopEdgeScroll()
     this._edgeScrollTimer = setInterval(() => {
-      const container = this._terminal?.element?.parentElement
+      const container = this._getTerminalHostElement()
       if (!container || !this._isDragging) {
         this._stopEdgeScroll()
         return
@@ -914,7 +1141,7 @@ export class InputPanelAddon implements ITerminalAddon {
       button.style.border = '1px solid transparent'
       button.style.borderRadius = '4px'
       button.style.background = 'transparent'
-      button.style.color = 'var(--muted-foreground, #888)'
+      button.style.color = 'var(--foreground, #fff)'
       button.style.fontFamily = 'inherit'
       button.style.fontSize = '12px'
       button.style.textAlign = 'left'

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: [