xterm-input-panel 1.0.0

package/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|ts)'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+}
+
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/web-components-vite'
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'terminal',
+      values: [
+        { name: 'terminal', value: '#1a1a1a' },
+        { name: 'light', value: '#ffffff' },
+      ],
+    },
+  },
+}
+
+export default preview

package/.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import { beforeAll } from 'vitest'
+import { setProjectAnnotations } from 'storybook/preview-api'
+import * as rendererAnnotations from '@storybook/web-components/entry-preview'
+import * as previewAnnotations from './preview'
+
+const annotations = setProjectAnnotations([rendererAnnotations, previewAnnotations])
+
+beforeAll(annotations.beforeAll)

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# xterm-input-panel
+
+## 1.0.0
+
+### Major Changes
+
+- Release all workspace packages to `1.0.0` for the new major release.

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "xterm-input-panel",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "lit": "^3.3.2",
+    "lucide": "^0.472.0",
+    "pixi.js": "^8.16.0"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": ">=5.0.0 || >=6.0.0-beta.0"
+  },
+  "peerDependenciesMeta": {
+    "@xterm/xterm": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/web-components": "^10.2.8",
+    "@storybook/web-components-vite": "^10.2.8",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@xterm/xterm": "6.1.0-beta.152",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.8",
+    "typescript": "^5.7.2",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6007",
+    "test:browser": "vitest run --config vitest.storybook.config.ts",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/icons.ts

@@ -0,0 +1,77 @@
+import type { IconNode } from 'lucide'
+import {
+  Combine,
+  createElement,
+  Keyboard,
+  MousePointer2,
+  Move,
+  Pin,
+  PinOff,
+  SendHorizontal,
+  SlidersHorizontal,
+  Type,
+  X,
+} from 'lucide'
+
+/**
+ * Icon helpers for InputPanel components.
+ * Uses the `lucide` package for consistent, high-quality SVG icons.
+ * Each function returns an SVGElement that Lit can render directly in templates.
+ */
+
+function createIcon(icon: IconNode, size: number): SVGElement {
+  const el = createElement(icon)
+  el.setAttribute('width', String(size))
+  el.setAttribute('height', String(size))
+  return el
+}
+
+/** X / Close icon */
+export function iconX(size = 16) {
+  return createIcon(X, size)
+}
+
+/** Settings / Sliders icon */
+export function iconSettings(size = 16) {
+  return createIcon(SlidersHorizontal, size)
+}
+
+/** Send icon */
+export function iconSend(size = 16) {
+  return createIcon(SendHorizontal, size)
+}
+
+/** Text cursor / Type icon — for Input tab */
+export function iconType(size = 12) {
+  return createIcon(Type, size)
+}
+
+/** Keyboard icon — for Keys tab */
+export function iconKeyboard(size = 12) {
+  return createIcon(Keyboard, size)
+}
+
+/** Touchpad / Move icon — for Trackpad tab */
+export function iconMove(size = 12) {
+  return createIcon(Move, size)
+}
+
+/** Mouse pointer icon — for cursor overlay */
+export function iconMousePointer2(size = 12) {
+  return createIcon(MousePointer2, size)
+}
+
+/** Combine icon — for Shortcuts tab */
+export function iconCombine(size = 12) {
+  return createIcon(Combine, size)
+}
+
+/** Pin icon — for Fixed layout */
+export function iconPin(size = 12) {
+  return createIcon(Pin, size)
+}
+
+/** PinOff icon — for Floating layout */
+export function iconPinOff(size = 12) {
+  return createIcon(PinOff, size)
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+// Side-effect imports — registers all InputPanel custom elements
+import './input-method-tab.js'
+import './input-panel-settings.js'
+import './input-panel.js'
+import './shortcut-tab.js'
+import './virtual-keyboard-tab.js'
+import './virtual-trackpad-tab.js'
+
+export type { InputPanelLayout, InputPanelTab } from './input-panel.js'
+export { blendHex, cssColorToHex, onThemeChange, resolvePixiTheme } from './pixi-theme.js'
+export type { PixiTheme } from './pixi-theme.js'
+export {
+  InputPanelAddon,
+  type InputPanelHistoryItem,
+  type InputPanelSettingsPayload,
+} from './xterm-addon.js'

package/src/input-method-tab.stories.ts

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import type { LitElement } from 'lit'
+import { html } from 'lit'
+import { expect, fn } from 'storybook/test'
+
+import './input-method-tab.js'
+
+async function getLitElement(container: HTMLElement, selector: string) {
+  const el = container.querySelector(selector) as LitElement
+  await el.updateComplete
+  return el
+}
+
+const meta: Meta = {
+  title: 'InputMethodTab',
+  tags: ['autodocs'],
+  decorators: [
+    (story) => html`
+      <div style="width: 400px; height: 250px; background: #1a1a1a; color: #fff; font-family: monospace;">
+        ${story()}
+      </div>
+    `,
+  ],
+}
+
+export default meta
+
+/**
+ * Default Input Method tab with textarea, send button, and empty history slot.
+ */
+export const Default: StoryObj = {
+  render: () => html`<input-method-tab style="height: 100%;"></input-method-tab>`,
+}
+
+/**
+ * Verifies that typing and clicking Send dispatches `input-panel:send`.
+ */
+export const SendInput: StoryObj = {
+  render: () => html`<input-method-tab style="height: 100%;"></input-method-tab>`,
+  play: async ({ canvasElement }) => {
+    const tab = await getLitElement(canvasElement, 'input-method-tab')
+
+    const sendHandler = fn()
+    tab.addEventListener('input-panel:send', sendHandler)
+
+    const shadow = tab.shadowRoot!
+    const textarea = shadow.querySelector('textarea') as HTMLTextAreaElement
+    const sendBtn = shadow.querySelector('.send-btn') as HTMLButtonElement
+
+    // Type into the textarea
+    textarea.value = 'echo test'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await tab.updateComplete
+
+    // Click send
+    sendBtn.click()
+
+    // Wait for _send to complete
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    expect(sendHandler).toHaveBeenCalledTimes(1)
+    const detail = (sendHandler.mock.calls[0] as unknown[])[0] as CustomEvent
+    expect(detail.detail.data).toBe('echo test\n')
+
+    tab.removeEventListener('input-panel:send', sendHandler)
+  },
+}
+
+/**
+ * Verifies that Ctrl+Enter triggers send.
+ */
+export const CtrlEnterSend: StoryObj = {
+  render: () => html`<input-method-tab style="height: 100%;"></input-method-tab>`,
+  play: async ({ canvasElement }) => {
+    const tab = await getLitElement(canvasElement, 'input-method-tab')
+
+    const sendHandler = fn()
+    tab.addEventListener('input-panel:send', sendHandler)
+
+    const shadow = tab.shadowRoot!
+    const textarea = shadow.querySelector('textarea') as HTMLTextAreaElement
+
+    // Type and trigger Ctrl+Enter
+    textarea.value = 'ls -la'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await tab.updateComplete
+
+    textarea.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      ctrlKey: true,
+      bubbles: true,
+    }))
+
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    expect(sendHandler).toHaveBeenCalledTimes(1)
+    const detail = (sendHandler.mock.calls[0] as unknown[])[0] as CustomEvent
+    expect(detail.detail.data).toBe('ls -la\n')
+
+    tab.removeEventListener('input-panel:send', sendHandler)
+  },
+}
+
+/**
+ * Verifies that slotted history content renders inside the component.
+ */
+export const HistorySlot: StoryObj = {
+  render: () => html`
+    <input-method-tab style="height: 100%;">
+      <div slot="history" class="slotted-history">
+        <div style="padding: 4px 6px; color: #888; font-size: 12px; cursor: pointer;">
+          <span style="font-size: 10px; opacity: 0.6;">14:30</span>
+          <span>echo hello world</span>
+        </div>
+        <div style="padding: 4px 6px; color: #888; font-size: 12px; cursor: pointer;">
+          <span style="font-size: 10px; opacity: 0.6;">14:25</span>
+          <span>ls -la</span>
+        </div>
+      </div>
+    </input-method-tab>
+  `,
+  play: async ({ canvasElement }) => {
+    await getLitElement(canvasElement, 'input-method-tab')
+
+    // Verify slotted content is visible
+    const slottedHistory = canvasElement.querySelector('.slotted-history')
+    expect(slottedHistory).not.toBeNull()
+    expect(slottedHistory!.textContent).toContain('echo hello world')
+    expect(slottedHistory!.textContent).toContain('ls -la')
+  },
+}

package/src/input-method-tab.ts

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from 'lit'
+import { iconSend } from './icons.js'
+
+/**
+ * Input Method tab — textarea + send button + slotted history.
+ *
+ * Dispatches `input-panel:send` CustomEvent<{ data: string }>.
+ * History is decoupled — use `<slot name="history">` to provide history content.
+ */
+export class InputMethodTab extends LitElement {
+  static get properties() {
+    return {
+      _inputValue: { state: true },
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .input-area {
+      display: flex;
+      gap: 6px;
+      padding: 8px;
+      border-bottom: 1px solid var(--border, #333);
+    }
+
+    textarea {
+      flex: 1;
+      min-height: 60px;
+      max-height: 120px;
+      resize: vertical;
+      background: var(--background, #000);
+      color: var(--foreground, #fff);
+      border: 1px solid var(--border, #333);
+      border-radius: 3px;
+      padding: 6px 8px;
+      font-family: inherit;
+      font-size: 13px;
+      outline: none;
+    }
+
+    textarea:focus {
+      border-color: var(--primary, #e04a2f);
+    }
+
+    .send-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      align-self: flex-end;
+      padding: 6px 16px;
+      background: var(--primary, #e04a2f);
+      color: var(--primary-foreground, #fff);
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      transition: opacity 0.15s;
+    }
+
+    .send-btn:hover {
+      opacity: 0.85;
+    }
+
+    .history-list {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 4px 8px;
+      scrollbar-width: thin;
+    }
+
+    .empty-state {
+      padding: 16px;
+      text-align: center;
+      color: var(--muted-foreground, #888);
+      font-size: 12px;
+    }
+  `
+
+  declare _inputValue: string
+
+  constructor() {
+    super()
+    this._inputValue = ''
+  }
+
+  private _onInput(e: Event) {
+    this._inputValue = (e.target as HTMLTextAreaElement).value
+  }
+
+  private _onKeyDown(e: KeyboardEvent) {
+    // Ctrl/Cmd+Enter to send
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      this._send()
+    }
+  }
+
+  private _send() {
+    const text = this._inputValue.trim()
+    if (!text) return
+
+    // Dispatch to terminal
+    this.dispatchEvent(
+      new CustomEvent('input-panel:send', {
+        detail: { data: text + '\n' },
+        bubbles: true,
+        composed: true,
+      })
+    )
+
+    this._inputValue = ''
+  }
+
+  render() {
+    return html`
+      <div class="input-area">
+        <textarea
+          placeholder="Type command and press Ctrl+Enter to send..."
+          .value=${this._inputValue}
+          @input=${this._onInput}
+          @keydown=${this._onKeyDown}
+        ></textarea>
+        <button class="send-btn" @click=${this._send}>${iconSend(14)} Send</button>
+      </div>
+      <div class="history-list">
+        <slot name="history">
+          <div class="empty-state">No history</div>
+        </slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('input-method-tab', InputMethodTab)

package/src/input-panel-settings.stories.ts

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+import { expect, fn } from 'storybook/test'
+
+import './input-panel-settings.js'
+
+const meta: Meta = {
+  title: 'InputPanelSettings',
+  tags: ['autodocs'],
+  decorators: [
+    (story) => html`
+      <div
+        style="width: 300px; height: 250px; background: #1a1a1a; color: #fff; font-family: monospace; position: relative;"
+      >
+        ${story()}
+      </div>
+    `,
+  ],
+}
+
+export default meta
+
+/**
+ * Settings panel with height sliders and vibration intensity.
+ */
+export const Default: StoryObj = {
+  render: () => html`
+    <input-panel-settings
+      visible
+      fixed-height="250"
+      floating-height="200"
+      vibration-intensity="50"
+    ></input-panel-settings>
+  `,
+}
+
+/**
+ * Verifies that changing a slider dispatches `input-panel:settings-change`.
+ */
+export const SliderChange: StoryObj = {
+  render: () => html`
+    <input-panel-settings
+      visible
+      fixed-height="250"
+      floating-height="200"
+      vibration-intensity="50"
+    ></input-panel-settings>
+  `,
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('input-panel-settings') as HTMLElement & {
+      updateComplete: Promise<boolean>
+    }
+    await el.updateComplete
+
+    const settingsHandler = fn()
+    el.addEventListener('input-panel:settings-change', settingsHandler)
+
+    const shadow = el.shadowRoot!
+    const ranges = shadow.querySelectorAll('input[type="range"]')
+    expect(ranges.length).toBe(5)
+
+    // Change the first slider (fixed height)
+    const fixedSlider = ranges[0] as HTMLInputElement
+    fixedSlider.value = '300'
+    fixedSlider.dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(settingsHandler).toHaveBeenCalledTimes(1)
+    const detail = (settingsHandler.mock.calls[0] as unknown[])[0] as CustomEvent
+    expect(detail.detail.fixedHeight).toBe(300)
+
+    el.removeEventListener('input-panel:settings-change', settingsHandler)
+  },
+}