lit-shell.js 0.1.3 → 1.1.0

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

@@ -359,45 +359,45 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
         this.fitAddon = null;
     }
     render() {
-        return html `
+        return html `
       ${this.noHeader
             ? nothing
-            : html `
-            <div class="header">
-              <div class="header-title">
-                <span>Terminal</span>
+            : 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}
+                ? html `<span style="font-weight: normal; font-size: 12px; color: var(--ls-text-muted)">
+                      ${this.sessionInfo.shell}
                     </span>`
-                : nothing}
-              </div>
-              <div class="header-actions">
+                : nothing}
+              </div>
+              <div class="header-actions">
                 ${!this.connected
-                ? html `<button @click=${this.connect} ?disabled=${this.loading}>
-                      ${this.loading ? 'Connecting...' : 'Connect'}
+                ? 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'}
+                    ? 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">
+                    : 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>
+                : nothing}
+      </div>
     `;
     }
 };
@@ -405,105 +405,105 @@ 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;
-      }
+    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([

package/dist/ui/styles.js

@@ -5,121 +5,121 @@ import { css } from 'lit';
 /**
  * Theme styles - sets CSS custom properties based on theme attribute
  */
-export const themeStyles = css `
-  /* Light theme */
-  :host([theme='light']) {
-    --ls-bg: #ffffff;
-    --ls-bg-header: #f5f5f5;
-    --ls-text: #1f2937;
-    --ls-text-muted: #6b7280;
-    --ls-border: #e5e7eb;
-    --ls-terminal-bg: #ffffff;
-    --ls-terminal-fg: #1f2937;
-    --ls-terminal-cursor: #1f2937;
-    --ls-terminal-selection: #b4d5fe;
-    --ls-btn-bg: #e5e7eb;
-    --ls-btn-text: #374151;
-    --ls-btn-hover: #d1d5db;
-    --ls-status-connected: #22c55e;
-    --ls-status-disconnected: #ef4444;
-  }
-
-  /* Dark theme (default) */
-  :host,
-  :host([theme='dark']) {
-    --ls-bg: #1e1e1e;
-    --ls-bg-header: #2d2d2d;
-    --ls-text: #cccccc;
-    --ls-text-muted: #808080;
-    --ls-border: #3e3e3e;
-    --ls-terminal-bg: #1e1e1e;
-    --ls-terminal-fg: #cccccc;
-    --ls-terminal-cursor: #ffffff;
-    --ls-terminal-selection: #264f78;
-    --ls-btn-bg: #3c3c3c;
-    --ls-btn-text: #cccccc;
-    --ls-btn-hover: #4a4a4a;
-    --ls-status-connected: #22c55e;
-    --ls-status-disconnected: #ef4444;
-  }
-
-  /* Auto theme - follows system preference */
-  :host([theme='auto']) {
-    --ls-bg: #1e1e1e;
-    --ls-bg-header: #2d2d2d;
-    --ls-text: #cccccc;
-    --ls-text-muted: #808080;
-    --ls-border: #3e3e3e;
-    --ls-terminal-bg: #1e1e1e;
-    --ls-terminal-fg: #cccccc;
-    --ls-terminal-cursor: #ffffff;
-    --ls-terminal-selection: #264f78;
-    --ls-btn-bg: #3c3c3c;
-    --ls-btn-text: #cccccc;
-    --ls-btn-hover: #4a4a4a;
-    --ls-status-connected: #22c55e;
-    --ls-status-disconnected: #ef4444;
-  }
-
-  @media (prefers-color-scheme: light) {
-    :host([theme='auto']) {
-      --ls-bg: #ffffff;
-      --ls-bg-header: #f5f5f5;
-      --ls-text: #1f2937;
-      --ls-text-muted: #6b7280;
-      --ls-border: #e5e7eb;
-      --ls-terminal-bg: #ffffff;
-      --ls-terminal-fg: #1f2937;
-      --ls-terminal-cursor: #1f2937;
-      --ls-terminal-selection: #b4d5fe;
-      --ls-btn-bg: #e5e7eb;
-      --ls-btn-text: #374151;
-      --ls-btn-hover: #d1d5db;
-    }
-  }
+export const themeStyles = css `
+  /* Light theme */
+  :host([theme='light']) {
+    --ls-bg: #ffffff;
+    --ls-bg-header: #f5f5f5;
+    --ls-text: #1f2937;
+    --ls-text-muted: #6b7280;
+    --ls-border: #e5e7eb;
+    --ls-terminal-bg: #ffffff;
+    --ls-terminal-fg: #1f2937;
+    --ls-terminal-cursor: #1f2937;
+    --ls-terminal-selection: #b4d5fe;
+    --ls-btn-bg: #e5e7eb;
+    --ls-btn-text: #374151;
+    --ls-btn-hover: #d1d5db;
+    --ls-status-connected: #22c55e;
+    --ls-status-disconnected: #ef4444;
+  }
+
+  /* Dark theme (default) */
+  :host,
+  :host([theme='dark']) {
+    --ls-bg: #1e1e1e;
+    --ls-bg-header: #2d2d2d;
+    --ls-text: #cccccc;
+    --ls-text-muted: #808080;
+    --ls-border: #3e3e3e;
+    --ls-terminal-bg: #1e1e1e;
+    --ls-terminal-fg: #cccccc;
+    --ls-terminal-cursor: #ffffff;
+    --ls-terminal-selection: #264f78;
+    --ls-btn-bg: #3c3c3c;
+    --ls-btn-text: #cccccc;
+    --ls-btn-hover: #4a4a4a;
+    --ls-status-connected: #22c55e;
+    --ls-status-disconnected: #ef4444;
+  }
+
+  /* Auto theme - follows system preference */
+  :host([theme='auto']) {
+    --ls-bg: #1e1e1e;
+    --ls-bg-header: #2d2d2d;
+    --ls-text: #cccccc;
+    --ls-text-muted: #808080;
+    --ls-border: #3e3e3e;
+    --ls-terminal-bg: #1e1e1e;
+    --ls-terminal-fg: #cccccc;
+    --ls-terminal-cursor: #ffffff;
+    --ls-terminal-selection: #264f78;
+    --ls-btn-bg: #3c3c3c;
+    --ls-btn-text: #cccccc;
+    --ls-btn-hover: #4a4a4a;
+    --ls-status-connected: #22c55e;
+    --ls-status-disconnected: #ef4444;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :host([theme='auto']) {
+      --ls-bg: #ffffff;
+      --ls-bg-header: #f5f5f5;
+      --ls-text: #1f2937;
+      --ls-text-muted: #6b7280;
+      --ls-border: #e5e7eb;
+      --ls-terminal-bg: #ffffff;
+      --ls-terminal-fg: #1f2937;
+      --ls-terminal-cursor: #1f2937;
+      --ls-terminal-selection: #b4d5fe;
+      --ls-btn-bg: #e5e7eb;
+      --ls-btn-text: #374151;
+      --ls-btn-hover: #d1d5db;
+    }
+  }
 `;
 /**
  * Shared base styles
  */
-export const sharedStyles = css `
-  :host {
-    display: block;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, sans-serif;
-    font-size: 14px;
-    color: var(--ls-text);
-    background: var(--ls-bg);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
+export const sharedStyles = css `
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, sans-serif;
+    font-size: 14px;
+    color: var(--ls-text);
+    background: var(--ls-bg);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
 `;
 /**
  * Button styles
  */
-export const buttonStyles = css `
-  button {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 6px 12px;
-    border: none;
-    border-radius: 4px;
-    background: var(--ls-btn-bg);
-    color: var(--ls-btn-text);
-    font-size: 13px;
-    cursor: pointer;
-    transition: background-color 0.15s;
-  }
-
-  button:hover {
-    background: var(--ls-btn-hover);
-  }
-
-  button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+export const buttonStyles = css `
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    background: var(--ls-btn-bg);
+    color: var(--ls-btn-text);
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  button:hover {
+    background: var(--ls-btn-hover);
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 //# sourceMappingURL=styles.js.map