xterm-input-panel 1.2.3 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # xterm-input-panel
 
+## 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.4",
   "type": "module",
   "main": "src/index.ts",
   "scripts": {

package/src/input-panel.stories.ts

@@ -13,6 +13,24 @@ 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,
+      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 +76,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
@@ -214,6 +244,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 +257,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) {
@@ -469,6 +570,9 @@ export class InputPanel extends LitElement {
 
   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 +584,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 +597,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 +613,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 +626,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 +646,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 +678,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 +850,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(
@@ -778,7 +892,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 +918,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/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/xterm-addon.stories.ts

@@ -52,6 +52,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 +99,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 +183,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()
   },
@@ -303,10 +308,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 +346,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 +581,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 +600,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/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: {