xterm-input-panel 1.1.0 → 1.2.1

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

@@ -17,10 +17,11 @@ function resetAddonState() {
 
   // Remove any <input-panel> elements leaked into body or containers
   document.querySelectorAll('input-panel').forEach((el) => el.remove())
+  localStorage.removeItem('xtermInputPanelState')
 }
 
 /** Create a real xterm Terminal + InputPanelAddon, mount into container */
-function setupTerminal(container: HTMLElement) {
+function setupTerminal(container: HTMLElement, opts?: { stateKey?: string }) {
   const terminal = new Terminal({
     cols: 80,
     rows: 10,
@@ -29,7 +30,7 @@ function setupTerminal(container: HTMLElement) {
   })
 
   const inputHandler = fn()
-  const addon = new InputPanelAddon({ onInput: inputHandler })
+  const addon = new InputPanelAddon({ onInput: inputHandler, stateKey: opts?.stateKey })
   terminal.loadAddon(addon)
   terminal.open(container)
 
@@ -108,8 +109,8 @@ export const SingletonMigration: StoryObj = {
     resetAddonState()
     const containerA = canvasElement.querySelector('#term-a') as HTMLElement
     const containerB = canvasElement.querySelector('#term-b') as HTMLElement
-    const { addon: addonA } = setupTerminal(containerA)
-    const { addon: addonB } = setupTerminal(containerB)
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'story-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'story-term-b' })
 
     // Open A — panel should be inside container A
     addonA.open()
@@ -382,8 +383,8 @@ export const SharedMountTarget: StoryObj = {
     // Set shared mount target BEFORE creating terminals
     InputPanelAddon.mountTarget = wrapper
 
-    const { addon: addonA } = setupTerminal(containerA)
-    const { addon: addonB } = setupTerminal(containerB)
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'switch-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'switch-term-b' })
 
     // Open A — panel should be in the shared wrapper, NOT container A
     addonA.open()
@@ -411,3 +412,191 @@ export const SharedMountTarget: StoryObj = {
     InputPanelAddon.mountTarget = null
   },
 }
+
+/**
+ * Persist panel runtime state between close/open cycles:
+ * - active tab (input mode)
+ * - input draft text in Input tab
+ */
+export const PersistPanelSessionState: 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 { addon } = setupTerminal(container)
+
+    addon.open()
+    const panel = container.querySelector('input-panel') as HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await panel.updateComplete
+
+    const inputTab = panel.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTab.updateComplete
+    const textarea = inputTab.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    textarea.value = 'echo keep'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await inputTab.updateComplete
+
+    const keysBtn = panel.shadowRoot.querySelectorAll('.tab-btn')[1] as HTMLButtonElement
+    keysBtn.click()
+    await panel.updateComplete
+    expect(panel.activeTab).toBe('keys')
+
+    addon.close()
+    addon.open()
+
+    const reopened = container.querySelector('input-panel') as HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+    }
+    await reopened.updateComplete
+    expect(reopened.activeTab).toBe('keys')
+
+    const reopenedInputTab = reopened.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await reopenedInputTab.updateComplete
+    const reopenedTextarea = reopenedInputTab.shadowRoot.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement
+    expect(reopenedTextarea.value).toBe('echo keep')
+
+    addon.close()
+  },
+}
+
+/**
+ * Persist session state across terminal-instance switching:
+ * A(input draft + keys) -> B -> A should restore A state.
+ */
+export const PersistStateAcrossTerminalSwitch: StoryObj = {
+  render: () => html`
+    <div style="display:flex;gap:8px;height:100%;">
+      <div id="term-a" style="flex:1;"></div>
+      <div id="term-b" style="flex:1;"></div>
+    </div>
+  `,
+  play: async ({ canvasElement }) => {
+    type PanelEl = HTMLElement & {
+      activeTab: string
+      updateComplete: Promise<void>
+    }
+
+    resetAddonState()
+    const containerA = canvasElement.querySelector('#term-a') as HTMLElement
+    const containerB = canvasElement.querySelector('#term-b') as HTMLElement
+    const { addon: addonA } = setupTerminal(containerA, { stateKey: 'switch-term-a' })
+    const { addon: addonB } = setupTerminal(containerB, { stateKey: 'switch-term-b' })
+
+    addonA.open()
+    let panelA = containerA.querySelector('input-panel') as PanelEl
+    expect(panelA).not.toBeNull()
+    await panelA.updateComplete
+
+    const inputTabA = panelA.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTabA.updateComplete
+    const textareaA = inputTabA.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    textareaA.value = 'echo keep-on-a'
+    textareaA.dispatchEvent(new Event('input', { bubbles: true }))
+    await inputTabA.updateComplete
+
+    const keysBtnA = panelA.shadowRoot!.querySelectorAll('.tab-btn')[1] as HTMLButtonElement
+    keysBtnA.click()
+    await panelA.updateComplete
+    expect(panelA.activeTab).toBe('keys')
+    const persistedRaw = localStorage.getItem('xtermInputPanelState')
+    expect(persistedRaw).not.toBeNull()
+    const persisted = JSON.parse(persistedRaw ?? '{}') as {
+      sessions?: Record<string, { activeTab?: string; inputDraft?: string }>
+    }
+    expect(persisted.sessions?.['switch-term-a']?.activeTab).toBe('keys')
+    expect(persisted.sessions?.['switch-term-a']?.inputDraft).toBe('echo keep-on-a')
+
+    addonB.syncFocusLifecycle()
+    const panelB = containerB.querySelector('input-panel') as PanelEl
+    expect(panelB).not.toBeNull()
+    await panelB.updateComplete
+    expect(panelB.activeTab).toBe('keys')
+    const inputTabB = panelB.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await inputTabB.updateComplete
+    const textareaB = inputTabB.shadowRoot.querySelector('textarea') as HTMLTextAreaElement
+    expect(textareaB.value).toBe('')
+
+    addonA.syncFocusLifecycle()
+    panelA = containerA.querySelector('input-panel') as PanelEl
+    expect(panelA).not.toBeNull()
+    await panelA.updateComplete
+    expect(panelA.activeTab).toBe('keys')
+
+    const reopenedInputTabA = panelA.querySelector('input-method-tab') as HTMLElement & {
+      updateComplete: Promise<void>
+      shadowRoot: ShadowRoot
+    }
+    await reopenedInputTabA.updateComplete
+    const reopenedTextareaA = reopenedInputTabA.shadowRoot.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement
+    expect(reopenedTextareaA.value).toBe('echo keep-on-a')
+
+    addonA.close()
+    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
+  },
+}