xterm-input-panel 1.0.0

package/src/input-panel-settings.ts

@@ -0,0 +1,245 @@
+import { LitElement, css, html } from 'lit'
+
+const SETTINGS_KEY = 'xtermInputPanelSettings'
+
+function mergeSettings(updates: Record<string, unknown>) {
+  try {
+    const existing = JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}')
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify({ ...existing, ...updates }))
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * InputPanel settings — height/width sliders and vibration intensity.
+ *
+ * Dispatches `input-panel:settings-change` CustomEvent with updated values.
+ */
+export class InputPanelSettings extends LitElement {
+  static get properties() {
+    return {
+      fixedHeight: { type: Number, attribute: 'fixed-height' },
+      floatingWidth: { type: Number, attribute: 'floating-width' },
+      floatingHeight: { type: Number, attribute: 'floating-height' },
+      vibrationIntensity: { type: Number, attribute: 'vibration-intensity' },
+      historyLimit: { type: Number, attribute: 'history-limit' },
+      visible: { type: Boolean },
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      height: 100%;
+      min-height: 0;
+    }
+
+    .overlay {
+      display: none;
+      position: relative;
+      height: 100%;
+      min-height: 0;
+      background: var(--terminal, #1a1a1a);
+      flex-direction: column;
+      padding: 12px;
+      gap: 16px;
+      overflow-y: auto;
+    }
+
+    :host([visible]) .overlay {
+      display: flex;
+    }
+
+    .setting {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .setting-label {
+      font-size: 11px;
+      color: var(--muted-foreground, #888);
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .setting-value {
+      color: var(--foreground, #fff);
+      font-weight: 600;
+    }
+
+    input[type='range'] {
+      width: 100%;
+      accent-color: var(--primary, #e04a2f);
+    }
+  `
+
+  declare fixedHeight: number
+  declare floatingWidth: number
+  declare floatingHeight: number
+  declare vibrationIntensity: number
+  declare historyLimit: number
+  declare visible: boolean
+
+  constructor() {
+    super()
+    this.fixedHeight = 250
+    this.floatingWidth = 60
+    this.floatingHeight = 30
+    this.vibrationIntensity = 50
+    this.historyLimit = 50
+    this.visible = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    try {
+      const raw = localStorage.getItem(SETTINGS_KEY)
+      if (raw) {
+        const data = JSON.parse(raw)
+        if (typeof data.fixedHeight === 'number') this.fixedHeight = data.fixedHeight
+        if (typeof data.floatingWidth === 'number') this.floatingWidth = data.floatingWidth
+        if (typeof data.floatingHeight === 'number') {
+          // Backward compat: if > 100, treat as px and convert to vh%
+          if (data.floatingHeight > 100) {
+            this.floatingHeight = Math.round((data.floatingHeight / window.innerHeight) * 100)
+          } else {
+            this.floatingHeight = data.floatingHeight
+          }
+        }
+        if (typeof data.vibrationIntensity === 'number')
+          this.vibrationIntensity = data.vibrationIntensity
+        if (typeof data.historyLimit === 'number') this.historyLimit = data.historyLimit
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  private _emit() {
+    mergeSettings({
+      fixedHeight: this.fixedHeight,
+      floatingWidth: this.floatingWidth,
+      floatingHeight: this.floatingHeight,
+      vibrationIntensity: this.vibrationIntensity,
+      historyLimit: this.historyLimit,
+    })
+    this.dispatchEvent(
+      new CustomEvent('input-panel:settings-change', {
+        detail: {
+          fixedHeight: this.fixedHeight,
+          floatingWidth: this.floatingWidth,
+          floatingHeight: this.floatingHeight,
+          vibrationIntensity: this.vibrationIntensity,
+          historyLimit: this.historyLimit,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private _onFixedHeight(e: Event) {
+    this.fixedHeight = Number((e.target as HTMLInputElement).value)
+    this._emit()
+  }
+
+  private _onFloatingWidth(e: Event) {
+    this.floatingWidth = Number((e.target as HTMLInputElement).value)
+    this._emit()
+  }
+
+  private _onFloatingHeight(e: Event) {
+    this.floatingHeight = Number((e.target as HTMLInputElement).value)
+    this._emit()
+  }
+
+  private _onVibration(e: Event) {
+    this.vibrationIntensity = Number((e.target as HTMLInputElement).value)
+    this._emit()
+  }
+
+  private _onHistoryLimit(e: Event) {
+    this.historyLimit = Number((e.target as HTMLInputElement).value)
+    this._emit()
+  }
+
+  render() {
+    return html`
+      <div class="overlay" part="settings-overlay">
+        <div class="setting">
+          <label class="setting-label">
+            Fixed mode height
+            <span class="setting-value">${this.fixedHeight}px</span>
+          </label>
+          <input
+            type="range"
+            min="150"
+            max="500"
+            .value=${String(this.fixedHeight)}
+            @input=${this._onFixedHeight}
+          />
+        </div>
+
+        <div class="setting">
+          <label class="setting-label">
+            Floating mode width
+            <span class="setting-value">${this.floatingWidth}%</span>
+          </label>
+          <input
+            type="range"
+            min="20"
+            max="95"
+            .value=${String(this.floatingWidth)}
+            @input=${this._onFloatingWidth}
+          />
+        </div>
+
+        <div class="setting">
+          <label class="setting-label">
+            Floating mode height
+            <span class="setting-value">${this.floatingHeight}%</span>
+          </label>
+          <input
+            type="range"
+            min="15"
+            max="85"
+            .value=${String(this.floatingHeight)}
+            @input=${this._onFloatingHeight}
+          />
+        </div>
+
+        <div class="setting">
+          <label class="setting-label">
+            Vibration intensity
+            <span class="setting-value">${this.vibrationIntensity}%</span>
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            .value=${String(this.vibrationIntensity)}
+            @input=${this._onVibration}
+          />
+        </div>
+
+        <div class="setting">
+          <label class="setting-label">
+            History limit
+            <span class="setting-value">${this.historyLimit}</span>
+          </label>
+          <input
+            type="range"
+            min="1"
+            max="1000"
+            .value=${String(this.historyLimit)}
+            @input=${this._onHistoryLimit}
+          />
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define('input-panel-settings', InputPanelSettings)

package/src/input-panel.stories.ts

@@ -0,0 +1,241 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import type { LitElement } from 'lit'
+import { html } from 'lit'
+import { expect, fn } from 'storybook/test'
+
+// Register all custom elements
+import './index.js'
+
+/** Helper to get a Lit element and wait for it to be ready */
+async function getLitElement(container: HTMLElement, selector: string) {
+  const el = container.querySelector(selector) as LitElement
+  await el.updateComplete
+  return el
+}
+
+const meta: Meta = {
+  title: 'InputPanel',
+  tags: ['autodocs'],
+  decorators: [
+    (story) => html`
+      <div
+        style="width: 400px; height: 300px; background: #1a1a1a; color: #fff; font-family: monospace;"
+      >
+        ${story()}
+      </div>
+    `,
+  ],
+}
+
+export default meta
+
+/**
+ * The main InputPanel container with toolbar tabs and content area.
+ * Default tab is "input" (Input Method).
+ */
+export const Default: StoryObj = {
+  render: () => html`
+    <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>
+  `,
+}
+
+/**
+ * InputPanel in floating layout mode (renders as dialog).
+ */
+export const FloatingLayout: 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>
+  `,
+}
+
+/**
+ * InputPanel starts on the "keys" tab (Virtual Keyboard).
+ */
+export const KeysTab: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" active-tab="keys" 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>
+  `,
+}
+
+/**
+ * InputPanel starts on the "trackpad" tab (Virtual Trackpad).
+ */
+export const TrackpadTab: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" active-tab="trackpad" 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>
+  `,
+}
+
+/**
+ * InputPanel starts on the "settings" tab.
+ */
+export const SettingsTab: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" active-tab="settings" 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>
+  `,
+}
+
+/**
+ * Verifies that tab switching works by clicking the "Keys" tab button.
+ * Now expects 5 tab buttons (Input, Keys, Shortcuts, Trackpad, Settings).
+ */
+export const TabSwitching: StoryObj = {
+  render: () => html`
+    <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>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+
+    const shadow = panel.shadowRoot!
+    const tabButtons = shadow.querySelectorAll('.tab-btn')
+    expect(tabButtons.length).toBe(5)
+
+    // Click "Keys" tab
+    const keysTab = tabButtons[1] as HTMLButtonElement
+    keysTab.click()
+    await panel.updateComplete
+
+    // Verify the active attribute changed
+    expect(keysTab.hasAttribute('data-active')).toBe(true)
+  },
+}
+
+/**
+ * Verifies that the close button dispatches the `input-panel:close` event.
+ */
+export const CloseEvent: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" style="height: 100%;">
+      <input-method-tab slot="input"></input-method-tab>
+    </input-panel>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+
+    const closeHandler = fn()
+    panel.addEventListener('input-panel:close', closeHandler)
+
+    const shadow = panel.shadowRoot!
+    const closeBtn = shadow.querySelector('.icon-btn:last-child') as HTMLButtonElement
+    closeBtn.click()
+
+    expect(closeHandler).toHaveBeenCalledTimes(1)
+    panel.removeEventListener('input-panel:close', closeHandler)
+  },
+}
+
+/**
+ * Verifies that the layout toggle dispatches the `input-panel:layout-change` event.
+ * Pin/float button is now icon-only (no text label).
+ */
+export const LayoutToggle: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" style="height: 100%;">
+      <input-method-tab slot="input"></input-method-tab>
+    </input-panel>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+
+    let receivedLayout = ''
+    panel.addEventListener('input-panel:layout-change', ((e: CustomEvent) => {
+      receivedLayout = e.detail.layout
+    }) as EventListener)
+
+    const shadow = panel.shadowRoot!
+    // Pin/float is first icon-btn in action-group
+    const layoutBtn = shadow.querySelector('.action-group .icon-btn') as HTMLButtonElement
+
+    layoutBtn.click()
+    await panel.updateComplete
+
+    expect(receivedLayout).toBe('floating')
+  },
+}
+
+/**
+ * Floating layout with resize handles visible at the four corners.
+ */
+export const FloatingResize: 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
+    expect(dialog).toBeTruthy()
+
+    const handles = shadow.querySelectorAll('.resize-handle')
+    expect(handles.length).toBe(4)
+
+    // Verify each corner class exists
+    expect(shadow.querySelector('.resize-tl')).toBeTruthy()
+    expect(shadow.querySelector('.resize-tr')).toBeTruthy()
+    expect(shadow.querySelector('.resize-bl')).toBeTruthy()
+    expect(shadow.querySelector('.resize-br')).toBeTruthy()
+  },
+}
+
+/**
+ * Verifies Fixed mode height slider updates InputPanel internal style variable.
+ */
+export const FixedHeightSync: StoryObj = {
+  render: () => html`
+    <input-panel layout="fixed" active-tab="settings">
+      <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>
+  `,
+  play: async ({ canvasElement }) => {
+    const panel = await getLitElement(canvasElement, 'input-panel')
+    const settings = panel.shadowRoot?.querySelector('input-panel-settings') as LitElement
+    await settings.updateComplete
+
+    const slider = settings.shadowRoot?.querySelector('input[type="range"]') as HTMLInputElement
+    slider.value = '320'
+    slider.dispatchEvent(new Event('input', { bubbles: true }))
+
+    await settings.updateComplete
+    await panel.updateComplete
+
+    expect(panel.style.getPropertyValue('--input-panel-fixed-height').trim()).toBe('320px')
+  },
+}