lit-shell.js 0.1.3

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * lit-shell.js UI exports
+ */
+export { LitShellTerminal } from './lit-shell-terminal.js';
+export { sharedStyles, buttonStyles, themeStyles } from './styles.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+/**
+ * lit-shell.js UI exports
+ */
+export { LitShellTerminal } from './lit-shell-terminal.js';
+export { sharedStyles, buttonStyles, themeStyles } from './styles.js';
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/ui/lit-shell-terminal.d.ts

@@ -0,0 +1,105 @@
+/**
+ * lit-shell-terminal web component
+ *
+ * A ready-to-use terminal component that wraps xterm.js and
+ * connects to a lit-shell server via WebSocket.
+ *
+ * Usage:
+ * ```html
+ * <lit-shell-terminal
+ *   url="ws://localhost:3000/terminal"
+ *   shell="/bin/bash"
+ *   cwd="/home/user"
+ *   theme="dark"
+ * ></lit-shell-terminal>
+ * ```
+ */
+import { LitElement } from 'lit';
+import type { TerminalOptions } from '../shared/types.js';
+export declare class LitShellTerminal extends LitElement {
+    static styles: import("lit").CSSResult[];
+    url: string;
+    shell: string;
+    cwd: string;
+    cols: number;
+    rows: number;
+    theme: 'dark' | 'light' | 'auto';
+    noHeader: boolean;
+    autoConnect: boolean;
+    autoSpawn: boolean;
+    fontSize: number;
+    fontFamily: string;
+    private client;
+    private terminal;
+    private fitAddon;
+    private connected;
+    private sessionActive;
+    private loading;
+    private error;
+    private sessionInfo;
+    private xtermModule;
+    private fitAddonModule;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Load xterm.js dynamically
+     */
+    private loadXterm;
+    /**
+     * Load xterm.css into the shadow DOM
+     * This is necessary because CSS loaded in the main document doesn't apply inside shadow DOM
+     */
+    private loadXtermStyles;
+    /**
+     * Connect to the terminal server
+     */
+    connect(): Promise<void>;
+    /**
+     * Disconnect from the server
+     */
+    disconnect(): void;
+    /**
+     * Spawn a terminal session
+     */
+    spawn(options?: TerminalOptions): Promise<void>;
+    /**
+     * Initialize xterm.js UI
+     */
+    private initTerminalUI;
+    /**
+     * Get terminal theme based on component theme
+     */
+    private getTerminalTheme;
+    /**
+     * Kill the current session
+     */
+    kill(): void;
+    /**
+     * Clear the terminal
+     */
+    clear(): void;
+    /**
+     * Write data to the terminal (display only, not sent to server)
+     */
+    write(data: string): void;
+    /**
+     * Write line to the terminal (display only, not sent to server)
+     */
+    writeln(data: string): void;
+    /**
+     * Focus the terminal
+     */
+    focus(): void;
+    /**
+     * Cleanup resources
+     */
+    private cleanup;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-shell-terminal': LitShellTerminal;
+    }
+}
+//# sourceMappingURL=lit-shell-terminal.d.ts.map

package/dist/ui/lit-shell-terminal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-shell-terminal.d.ts","sourceRoot":"","sources":["../../src/ui/lit-shell-terminal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,oBAAoB,CAAC;AAsBvE,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAwGpB;IAG0B,GAAG,SAAM;IACT,KAAK,SAAM;IACX,GAAG,SAAM;IACT,IAAI,SAAM;IACV,IAAI,SAAM;IACK,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IAChC,QAAQ,UAAS;IACd,WAAW,UAAS;IACtB,SAAS,UAAS;IAGpB,QAAQ,SAAM;IACZ,UAAU,SACpB;IAGnC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,WAAW,CAA4B;IAGxD,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,cAAc,CAA+B;IAE5C,iBAAiB;IAQjB,oBAAoB;IAK7B;;OAEG;YACW,SAAS;IAyBvB;;;OAGG;YACW,eAAe;IAyB7B;;OAEG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAuE9B;;OAEG;IACH,UAAU,IAAI,IAAI;IASlB;;OAEG;IACG,KAAK,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAoCrD;;OAEG;YACW,cAAc;IA4D5B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAMzB;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM3B;;OAEG;IACM,KAAK,IAAI,IAAI;IAMtB;;OAEG;IACH,OAAO,CAAC,OAAO;IAmBN,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/ui/lit-shell-terminal.js

@@ -0,0 +1,570 @@
+/**
+ * lit-shell-terminal web component
+ *
+ * A ready-to-use terminal component that wraps xterm.js and
+ * connects to a lit-shell server via WebSocket.
+ *
+ * Usage:
+ * ```html
+ * <lit-shell-terminal
+ *   url="ws://localhost:3000/terminal"
+ *   shell="/bin/bash"
+ *   cwd="/home/user"
+ *   theme="dark"
+ * ></lit-shell-terminal>
+ * ```
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { sharedStyles, buttonStyles, themeStyles } from './styles.js';
+import { TerminalClient } from '../client/terminal-client.js';
+let LitShellTerminal = class LitShellTerminal extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Connection properties
+        this.url = '';
+        this.shell = '';
+        this.cwd = '';
+        this.cols = 80;
+        this.rows = 24;
+        this.theme = 'dark';
+        this.noHeader = false;
+        this.autoConnect = false;
+        this.autoSpawn = false;
+        // Terminal appearance
+        this.fontSize = 14;
+        this.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
+        // State
+        this.client = null;
+        this.terminal = null;
+        this.fitAddon = null;
+        this.connected = false;
+        this.sessionActive = false;
+        this.loading = false;
+        this.error = null;
+        this.sessionInfo = null;
+        // xterm.js module (loaded dynamically)
+        this.xtermModule = null;
+        this.fitAddonModule = null;
+        this.resizeObserver = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.autoConnect && this.url) {
+            this.connect();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup();
+    }
+    /**
+     * Load xterm.js dynamically
+     */
+    async loadXterm() {
+        if (this.xtermModule)
+            return;
+        try {
+            // Try to import from CDN
+            // @ts-ignore - Dynamic import from CDN
+            this.xtermModule = await import('https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm');
+            // @ts-ignore - Dynamic import from CDN
+            this.fitAddonModule = await import('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/+esm');
+        }
+        catch (e) {
+            // Fallback to npm package if available
+            try {
+                // @ts-ignore - Optional peer dependency
+                this.xtermModule = await import('xterm');
+                // @ts-ignore - Optional peer dependency
+                this.fitAddonModule = await import('xterm-addon-fit');
+            }
+            catch {
+                throw new Error('Failed to load xterm.js. Make sure it is available.');
+            }
+        }
+        // Load xterm.css into shadow DOM (CSS doesn't penetrate shadow boundaries)
+        await this.loadXtermStyles();
+    }
+    /**
+     * Load xterm.css into the shadow DOM
+     * This is necessary because CSS loaded in the main document doesn't apply inside shadow DOM
+     */
+    async loadXtermStyles() {
+        if (!this.shadowRoot)
+            return;
+        // Check if styles are already loaded
+        if (this.shadowRoot.querySelector('#xterm-styles'))
+            return;
+        try {
+            // Fetch xterm.css from CDN
+            const response = await fetch('https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css');
+            if (!response.ok) {
+                throw new Error(`Failed to fetch xterm.css: ${response.status}`);
+            }
+            const cssText = await response.text();
+            // Create style element and inject into shadow DOM
+            const style = document.createElement('style');
+            style.id = 'xterm-styles';
+            style.textContent = cssText;
+            this.shadowRoot.appendChild(style);
+        }
+        catch (error) {
+            console.warn('[lit-shell] Failed to load xterm.css:', error);
+            // Terminal will still work but may have visual issues
+        }
+    }
+    /**
+     * Connect to the terminal server
+     */
+    async connect() {
+        if (!this.url) {
+            this.error = 'No URL specified';
+            return;
+        }
+        this.loading = true;
+        this.error = null;
+        try {
+            // Load xterm.js
+            await this.loadXterm();
+            // Create client
+            this.client = new TerminalClient({ url: this.url });
+            this.client.onConnect(() => {
+                this.connected = true;
+                this.dispatchEvent(new CustomEvent('connect', { bubbles: true, composed: true }));
+                if (this.autoSpawn) {
+                    this.spawn();
+                }
+            });
+            this.client.onDisconnect(() => {
+                this.connected = false;
+                this.sessionActive = false;
+                this.dispatchEvent(new CustomEvent('disconnect', { bubbles: true, composed: true }));
+            });
+            this.client.onError((err) => {
+                this.error = err.message;
+                this.dispatchEvent(new CustomEvent('error', { detail: { error: err }, bubbles: true, composed: true }));
+            });
+            this.client.onData((data) => {
+                if (this.terminal) {
+                    this.terminal.write(data);
+                }
+            });
+            this.client.onExit((code) => {
+                this.sessionActive = false;
+                this.sessionInfo = null;
+                if (this.terminal) {
+                    this.terminal.writeln('');
+                    this.terminal.writeln(`\x1b[1;33m[Process exited with code: ${code}]\x1b[0m`);
+                }
+                this.dispatchEvent(new CustomEvent('exit', { detail: { exitCode: code }, bubbles: true, composed: true }));
+            });
+            this.client.onSpawned((info) => {
+                this.sessionInfo = info;
+                this.dispatchEvent(new CustomEvent('spawned', { detail: { session: info }, bubbles: true, composed: true }));
+            });
+            await this.client.connect();
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Connection failed';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /**
+     * Disconnect from the server
+     */
+    disconnect() {
+        if (this.client) {
+            this.client.disconnect();
+            this.client = null;
+        }
+        this.connected = false;
+        this.sessionActive = false;
+    }
+    /**
+     * Spawn a terminal session
+     */
+    async spawn(options) {
+        if (!this.client || !this.connected) {
+            throw new Error('Not connected to server');
+        }
+        this.loading = true;
+        this.error = null;
+        try {
+            // Initialize terminal UI if needed
+            await this.initTerminalUI();
+            // Spawn session
+            const spawnOptions = {
+                shell: options?.shell || this.shell || undefined,
+                cwd: options?.cwd || this.cwd || undefined,
+                cols: this.terminal?.cols || this.cols,
+                rows: this.terminal?.rows || this.rows,
+                env: options?.env,
+            };
+            const info = await this.client.spawn(spawnOptions);
+            this.sessionActive = true;
+            this.sessionInfo = info;
+            // Focus terminal
+            if (this.terminal) {
+                this.terminal.focus();
+            }
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to spawn session';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /**
+     * Initialize xterm.js UI
+     */
+    async initTerminalUI() {
+        if (this.terminal)
+            return;
+        await this.loadXterm();
+        await this.updateComplete;
+        const container = this.shadowRoot?.querySelector('.terminal-container');
+        if (!container)
+            return;
+        // Get theme colors
+        const terminalTheme = this.getTerminalTheme();
+        // Create terminal
+        const Terminal = this.xtermModule.Terminal;
+        const term = new Terminal({
+            cursorBlink: true,
+            fontSize: this.fontSize,
+            fontFamily: this.fontFamily,
+            theme: terminalTheme,
+            cols: this.cols,
+            rows: this.rows,
+        });
+        // Create fit addon
+        const FitAddon = this.fitAddonModule.FitAddon;
+        const fit = new FitAddon();
+        // Store references
+        this.terminal = term;
+        this.fitAddon = fit;
+        term.loadAddon(fit);
+        // Open terminal
+        term.open(container);
+        fit.fit();
+        // Handle user input
+        term.onData((data) => {
+            if (this.client && this.sessionActive) {
+                this.client.write(data);
+            }
+        });
+        // Handle resize
+        term.onResize(({ cols, rows }) => {
+            if (this.client && this.sessionActive) {
+                this.client.resize(cols, rows);
+            }
+        });
+        // Setup resize observer
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.fitAddon) {
+                this.fitAddon.fit();
+            }
+        });
+        this.resizeObserver.observe(container);
+    }
+    /**
+     * Get terminal theme based on component theme
+     */
+    getTerminalTheme() {
+        // These will be overridden by CSS variables in the actual implementation
+        // For now, provide sensible defaults based on theme attribute
+        if (this.theme === 'light') {
+            return {
+                background: '#ffffff',
+                foreground: '#1f2937',
+                cursor: '#1f2937',
+                selection: '#b4d5fe',
+            };
+        }
+        return {
+            background: '#1e1e1e',
+            foreground: '#cccccc',
+            cursor: '#ffffff',
+            selection: '#264f78',
+        };
+    }
+    /**
+     * Kill the current session
+     */
+    kill() {
+        if (this.client) {
+            this.client.kill();
+        }
+        this.sessionActive = false;
+        this.sessionInfo = null;
+    }
+    /**
+     * Clear the terminal
+     */
+    clear() {
+        if (this.terminal) {
+            this.terminal.clear();
+        }
+    }
+    /**
+     * Write data to the terminal (display only, not sent to server)
+     */
+    write(data) {
+        if (this.terminal) {
+            this.terminal.write(data);
+        }
+    }
+    /**
+     * Write line to the terminal (display only, not sent to server)
+     */
+    writeln(data) {
+        if (this.terminal) {
+            this.terminal.writeln(data);
+        }
+    }
+    /**
+     * Focus the terminal
+     */
+    focus() {
+        if (this.terminal) {
+            this.terminal.focus();
+        }
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.terminal) {
+            this.terminal.dispose();
+            this.terminal = null;
+        }
+        if (this.client) {
+            this.client.disconnect();
+            this.client = null;
+        }
+        this.fitAddon = null;
+    }
+    render() {
+        return html `
+      ${this.noHeader
+            ? nothing
+            : html `
+            <div class="header">
+              <div class="header-title">
+                <span>Terminal</span>
+                ${this.sessionInfo
+                ? html `<span style="font-weight: normal; font-size: 12px; color: var(--ls-text-muted)">
+                      ${this.sessionInfo.shell}
+                    </span>`
+                : nothing}
+              </div>
+              <div class="header-actions">
+                ${!this.connected
+                ? html `<button @click=${this.connect} ?disabled=${this.loading}>
+                      ${this.loading ? 'Connecting...' : 'Connect'}
+                    </button>`
+                : !this.sessionActive
+                    ? html `<button @click=${() => this.spawn()} ?disabled=${this.loading}>
+                      ${this.loading ? 'Spawning...' : 'Start'}
+                    </button>`
+                    : html `<button @click=${this.kill}>Stop</button>`}
+                <button @click=${this.clear} ?disabled=${!this.sessionActive}>Clear</button>
+                <div class="status">
+                  <span class="status-dot ${this.connected ? 'connected' : ''}"></span>
+                  <span>${this.connected ? 'Connected' : 'Disconnected'}</span>
+                </div>
+              </div>
+            </div>
+          `}
+
+      <div class="terminal-container">
+        ${this.loading && !this.terminal
+            ? html `<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>`
+            : this.error && !this.terminal
+                ? html `<div class="error">❌ ${this.error}</div>`
+                : nothing}
+      </div>
+    `;
+    }
+};
+LitShellTerminal.styles = [
+    sharedStyles,
+    themeStyles,
+    buttonStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 200px;
+        border: 1px solid var(--ls-border);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: var(--ls-bg-header);
+        border-bottom: 1px solid var(--ls-border);
+      }
+
+      .header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .status {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        color: var(--ls-text-muted);
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--ls-status-disconnected);
+      }
+
+      .status-dot.connected {
+        background: var(--ls-status-connected);
+      }
+
+      .terminal-container {
+        flex: 1;
+        padding: 4px;
+        background: var(--ls-terminal-bg);
+        overflow: hidden;
+      }
+
+      .terminal-container .xterm {
+        height: 100%;
+      }
+
+      .terminal-container .xterm-viewport {
+        overflow-y: auto;
+      }
+
+      .loading,
+      .error {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 20px;
+        text-align: center;
+        color: var(--ls-text-muted);
+      }
+
+      .error {
+        color: #ef4444;
+      }
+
+      .loading-spinner {
+        animation: spin 1s linear infinite;
+        margin-right: 8px;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* Hide header if requested */
+      :host([no-header]) .header {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "url", void 0);
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "shell", void 0);
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "cwd", void 0);
+__decorate([
+    property({ type: Number })
+], LitShellTerminal.prototype, "cols", void 0);
+__decorate([
+    property({ type: Number })
+], LitShellTerminal.prototype, "rows", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LitShellTerminal.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-header' })
+], LitShellTerminal.prototype, "noHeader", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-connect' })
+], LitShellTerminal.prototype, "autoConnect", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-spawn' })
+], LitShellTerminal.prototype, "autoSpawn", void 0);
+__decorate([
+    property({ type: Number, attribute: 'font-size' })
+], LitShellTerminal.prototype, "fontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'font-family' })
+], LitShellTerminal.prototype, "fontFamily", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "client", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "terminal", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "fitAddon", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "connected", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "sessionActive", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "loading", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "error", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "sessionInfo", void 0);
+LitShellTerminal = __decorate([
+    customElement('lit-shell-terminal')
+], LitShellTerminal);
+export { LitShellTerminal };
+//# sourceMappingURL=lit-shell-terminal.js.map