@qodalis/cli 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qodalis/cli",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Framework-agnostic CLI engine for @qodalis terminal applications.",
   "author": "Nicolae Lupei, Qodalis Solutions",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "./assets/*": "./assets/*"
   },
   "dependencies": {
-    "@qodalis/cli-core": "2.1.1",
+    "@qodalis/cli-core": "2.2.0",
     "@xterm/xterm": "^6.0.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",

package/public-api.d.mts

@@ -1,4 +1,4 @@
-import { ICliCommandProcessor, ICliCommandParameterDescriptor as ICliCommandParameterDescriptor$1, ICliCommandProcessorRegistry, ICliCommandChildProcessor, CliProcessorMetadata, CliStateConfiguration, ICliExecutionContext, CliProcessCommand, ICliCommandAuthor, ICliCommandControls, CliThemeInfo, ICliExecutionProcess, ICliUserSession, ICliSpinner, ICliPercentageProgressBar, ICliTextAnimator, ICliTerminalWriter, ICliCommandExecutorService, ICliClipboard, ICliStateStore, CliOptions, ICliLogger, ICliServiceProvider, ICliTranslationService, ICliInputReader, ICliBackgroundServiceRegistry, ICliHttpClient, ICliNotifier, ICliManagedInterval, ICliManagedTimer, ICliEventBus, ICliKeyValueStore, CliStateStoreOptions, ICliCompletionProvider, ICliFilePickerProvider, CliFullScreenOptions, ICliProcessRegistry, ICliBackgroundService, ICliServiceContext, ICliBackgroundServiceInfo, ICliServiceLogEntry, CliServiceEventHandler, ICliGlobalParameterHandler, CliForegroundColor, CliBackgroundColor, CliToken, CliProvider, CliTableOptions, CliLogLevel, CliPercentageProgressBarUpdateValueOptions, CliTextAnimatorOptions, ICliModule, CliModuleRegistry, Package, ICliPingServerService, CliLineOptions, CliSelectOption, CliSelectOptions, CliMultiSelectOption, CliMultiSelectOptions, CliNumberOptions, CliDateOptions, CliFilePickerOptions, CliFileResult, ICliProcessRegisterOptions, ICliProcessEntry, ICliDragDropService, CliHttpRequestOptions, CliNotification, ICliPermissionRegistry, CliPermissionDefinition, CliBranding, CliState, CliEngineSnapshot, CliEvent, CliEventType, CliEventMap, CliEmitOptions, CustomEventType, CliEventHandler, CliServerConfig, ICliServerAuthService, CliServerCommandDescriptor, CliServerCapabilities, CliServerResponse, CliServerOutput, CliPanelPosition, CliPanelConfig, CliPanelHideAlignment, ICliPanelRef, CliPanelState } from '@qodalis/cli-core';
+import { ICliCommandProcessor, ICliCommandParameterDescriptor as ICliCommandParameterDescriptor$1, ICliCommandProcessorRegistry, ICliCommandChildProcessor, CliProcessorMetadata, CliStateConfiguration, ICliExecutionContext, CliProcessCommand, ICliCommandAuthor, ICliCommandControls, CliThemeInfo, ICliExecutionProcess, ICliUserSession, ICliSpinner, ICliPercentageProgressBar, ICliTextAnimator, ICliTerminalWriter, ICliCommandExecutorService, ICliClipboard, ICliStateStore, CliOptions, ICliLogger, ICliServiceProvider, ICliTranslationService, ICliInputReader, ICliBackgroundServiceRegistry, ICliHttpClient, ICliNotifier, ICliManagedInterval, ICliManagedTimer, ICliEventBus, ICliKeyValueStore, CliStateStoreOptions, ICliCompletionProvider, ICliFilePickerProvider, CliFullScreenOptions, ICliProcessRegistry, ICliBackgroundService, ICliServiceContext, ICliBackgroundServiceInfo, ICliServiceLogEntry, CliServiceEventHandler, ICliGlobalParameterHandler, CliForegroundColor, CliBackgroundColor, CliToken, CliProvider, CliTableOptions, CliLogLevel, CliPercentageProgressBarUpdateValueOptions, CliTextAnimatorOptions, ICliModule, CliModuleRegistry, Package, ICliPingServerService, CliLineOptions, CliSelectOption, CliSelectOptions, CliMultiSelectOption, CliMultiSelectOptions, CliNumberOptions, CliDateOptions, CliFilePickerOptions, CliFileResult, ICliProcessRegisterOptions, ICliProcessEntry, ICliDragDropService, CliHttpRequestOptions, CliNotification, ICliPermissionRegistry, CliPermissionDefinition, CliBranding, CliState, CliEngineSnapshot, CliEvent, CliEventType, CliEventMap, CliEmitOptions, CustomEventType, CliEventHandler, CliServerConfig, ICliServerAuthService, CliServerCommandDescriptor, CliServerCapabilities, CliServerResponse, CliServerOutput, CliPanelPosition, CliPanelConfig, CliPanelHideAlignment, ICliPanelRef, CliPanelThemeInput, CliPanelState } from '@qodalis/cli-core';
 export { ICliUserSessionService_TOKEN, ICliUsersStoreService_TOKEN } from '@qodalis/cli-core';
 import { ITheme, Terminal, ITerminalAddon, ITerminalOptions, ITerminalInitOnlyOptions } from '@xterm/xterm';
 import * as rxjs from 'rxjs';
@@ -165,7 +165,7 @@ declare const CliKeyValueStore_TOKEN: any;
  */
 declare const SyntaxHighlighterRegistry_TOKEN: any;
 
-declare const LIBRARY_VERSION = "2.1.1";
+declare const LIBRARY_VERSION = "2.2.0";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -2977,6 +2977,11 @@ declare class CliEngine {
      * Focus the terminal and fit to container.
      */
     focus(): void;
+    /**
+     * Restyle the terminal: its colors and the background around it.
+     * The `theme` command can still change it afterwards.
+     */
+    setTheme(theme: ITheme): void;
     /**
      * Get the underlying xterm.js Terminal instance.
      */
@@ -3695,7 +3700,19 @@ interface CliPanelSnapshot {
     /** Status text is shown in the header for top/bottom, compact dots otherwise. */
     showStatusIndicators: boolean;
     panelResizing: boolean;
+    /** CSS custom properties of the theme, for the wrapper and the hide tab. */
     themeStyles: Record<string, string>;
+    /** Whether the panel is light or dark. */
+    scheme: 'light' | 'dark';
+    /** Theme the host set for the terminals; undefined leaves them alone. */
+    terminalTheme?: ITheme;
+    /**
+     * Height of the on-screen keyboard over the page (0 when closed), from the
+     * visual viewport: the panel moves above it.
+     */
+    keyboardInset: number;
+    /** Height of the visible area (visual viewport), 0 when unknown; caps the panel's height. */
+    visibleHeight: number;
     closable: boolean;
     resizable: boolean;
     hideable: boolean;
@@ -3828,11 +3845,21 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     private documentListenersAttached;
     private rootElement;
     private themeObserver?;
+    /** The host's theme (`config.theme`); undefined leaves the terminals' own theme alone. */
+    private themeInput?;
+    private resolvedTheme;
+    private schemeQuery?;
+    private visualViewport?;
     constructor(options?: CliPanelControllerOptions);
     readonly subscribe: (listener: () => void) => (() => void);
     readonly getSnapshot: () => CliPanelSnapshot;
-    /** Apply a new panel configuration (chrome buttons, theme sync). */
+    /** Apply a new panel configuration (chrome buttons, theme, theme sync). */
     setOptions(config: CliPanelConfig | undefined): void;
+    /**
+     * Restyle the panel and every terminal in it (see `CliPanelConfig.theme`).
+     * `undefined` returns to the default palette and leaves the terminals' theme alone.
+     */
+    setTheme(theme: CliPanelThemeInput | undefined): void;
     /** Replace the change callbacks (wrappers call this when their props change). */
     setCallbacks(callbacks: CliPanelCallbacks): void;
     /** Update host-controlled values. Unchanged values are ignored. */
@@ -3892,9 +3919,9 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     toggleServersDropdown(anchor?: Element | null): void;
     /** Close the context menu and every dropdown. */
     closeMenus(): void;
-    /** Mouse down on the panel's resize bar. */
+    /** Pointer (mouse, touch or pen) down on the panel's resize bar. */
     startPanelResize(clientX: number, clientY: number): void;
-    /** Mouse down on the divider before pane `dividerIndex + 1` of a tab. */
+    /** Pointer down on the divider before pane `dividerIndex + 1` of a tab. */
     startPaneResize(tabId: number, dividerIndex: number, clientX: number, containerWidth: number): void;
     private readonly onPanelResizeMove;
     private readonly onPanelResizeEnd;
@@ -3914,6 +3941,17 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
      * Engines are registered after they start, so their theme is set.
      */
     private startThemeSync;
+    private applyTheme;
+    /** Follow the system's light/dark setting while the theme is 'auto'. */
+    private watchSystemScheme;
+    private readonly onSystemSchemeChange;
+    /**
+     * Phone browsers open the keyboard over the page and shrink only the visual
+     * viewport; follow it so the panel stays above the keyboard.
+     */
+    private watchVisualViewport;
+    private unwatchVisualViewport;
+    private readonly onVisualViewportChange;
     private stopThemeSync;
     private ensureInitialized;
     private updateCollapsed;
@@ -4017,6 +4055,7 @@ declare function positionDropdownItemClass(s: CliPanelSnapshot, position: CliPan
 /** Size, visibility and theme variables of the panel wrapper. */
 declare function panelWrapperStyle(s: CliPanelSnapshot): Record<string, string>;
 declare function paneStyle(widthPercent: number): Record<string, string>;
+/** Menus render outside the panel element, so they carry the theme's variables themselves. */
 declare function contextMenuStyle(s: CliPanelSnapshot): Record<string, string>;
 interface PanelStatusIndicator {
     key: 'execution' | 'services' | 'lastCommand' | 'servers' | 'uptime' | 'notification';

package/public-api.d.ts

@@ -1,4 +1,4 @@
-import { ICliCommandProcessor, ICliCommandParameterDescriptor as ICliCommandParameterDescriptor$1, ICliCommandProcessorRegistry, ICliCommandChildProcessor, CliProcessorMetadata, CliStateConfiguration, ICliExecutionContext, CliProcessCommand, ICliCommandAuthor, ICliCommandControls, CliThemeInfo, ICliExecutionProcess, ICliUserSession, ICliSpinner, ICliPercentageProgressBar, ICliTextAnimator, ICliTerminalWriter, ICliCommandExecutorService, ICliClipboard, ICliStateStore, CliOptions, ICliLogger, ICliServiceProvider, ICliTranslationService, ICliInputReader, ICliBackgroundServiceRegistry, ICliHttpClient, ICliNotifier, ICliManagedInterval, ICliManagedTimer, ICliEventBus, ICliKeyValueStore, CliStateStoreOptions, ICliCompletionProvider, ICliFilePickerProvider, CliFullScreenOptions, ICliProcessRegistry, ICliBackgroundService, ICliServiceContext, ICliBackgroundServiceInfo, ICliServiceLogEntry, CliServiceEventHandler, ICliGlobalParameterHandler, CliForegroundColor, CliBackgroundColor, CliToken, CliProvider, CliTableOptions, CliLogLevel, CliPercentageProgressBarUpdateValueOptions, CliTextAnimatorOptions, ICliModule, CliModuleRegistry, Package, ICliPingServerService, CliLineOptions, CliSelectOption, CliSelectOptions, CliMultiSelectOption, CliMultiSelectOptions, CliNumberOptions, CliDateOptions, CliFilePickerOptions, CliFileResult, ICliProcessRegisterOptions, ICliProcessEntry, ICliDragDropService, CliHttpRequestOptions, CliNotification, ICliPermissionRegistry, CliPermissionDefinition, CliBranding, CliState, CliEngineSnapshot, CliEvent, CliEventType, CliEventMap, CliEmitOptions, CustomEventType, CliEventHandler, CliServerConfig, ICliServerAuthService, CliServerCommandDescriptor, CliServerCapabilities, CliServerResponse, CliServerOutput, CliPanelPosition, CliPanelConfig, CliPanelHideAlignment, ICliPanelRef, CliPanelState } from '@qodalis/cli-core';
+import { ICliCommandProcessor, ICliCommandParameterDescriptor as ICliCommandParameterDescriptor$1, ICliCommandProcessorRegistry, ICliCommandChildProcessor, CliProcessorMetadata, CliStateConfiguration, ICliExecutionContext, CliProcessCommand, ICliCommandAuthor, ICliCommandControls, CliThemeInfo, ICliExecutionProcess, ICliUserSession, ICliSpinner, ICliPercentageProgressBar, ICliTextAnimator, ICliTerminalWriter, ICliCommandExecutorService, ICliClipboard, ICliStateStore, CliOptions, ICliLogger, ICliServiceProvider, ICliTranslationService, ICliInputReader, ICliBackgroundServiceRegistry, ICliHttpClient, ICliNotifier, ICliManagedInterval, ICliManagedTimer, ICliEventBus, ICliKeyValueStore, CliStateStoreOptions, ICliCompletionProvider, ICliFilePickerProvider, CliFullScreenOptions, ICliProcessRegistry, ICliBackgroundService, ICliServiceContext, ICliBackgroundServiceInfo, ICliServiceLogEntry, CliServiceEventHandler, ICliGlobalParameterHandler, CliForegroundColor, CliBackgroundColor, CliToken, CliProvider, CliTableOptions, CliLogLevel, CliPercentageProgressBarUpdateValueOptions, CliTextAnimatorOptions, ICliModule, CliModuleRegistry, Package, ICliPingServerService, CliLineOptions, CliSelectOption, CliSelectOptions, CliMultiSelectOption, CliMultiSelectOptions, CliNumberOptions, CliDateOptions, CliFilePickerOptions, CliFileResult, ICliProcessRegisterOptions, ICliProcessEntry, ICliDragDropService, CliHttpRequestOptions, CliNotification, ICliPermissionRegistry, CliPermissionDefinition, CliBranding, CliState, CliEngineSnapshot, CliEvent, CliEventType, CliEventMap, CliEmitOptions, CustomEventType, CliEventHandler, CliServerConfig, ICliServerAuthService, CliServerCommandDescriptor, CliServerCapabilities, CliServerResponse, CliServerOutput, CliPanelPosition, CliPanelConfig, CliPanelHideAlignment, ICliPanelRef, CliPanelThemeInput, CliPanelState } from '@qodalis/cli-core';
 export { ICliUserSessionService_TOKEN, ICliUsersStoreService_TOKEN } from '@qodalis/cli-core';
 import { ITheme, Terminal, ITerminalAddon, ITerminalOptions, ITerminalInitOnlyOptions } from '@xterm/xterm';
 import * as rxjs from 'rxjs';
@@ -165,7 +165,7 @@ declare const CliKeyValueStore_TOKEN: any;
  */
 declare const SyntaxHighlighterRegistry_TOKEN: any;
 
-declare const LIBRARY_VERSION = "2.1.1";
+declare const LIBRARY_VERSION = "2.2.0";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -2977,6 +2977,11 @@ declare class CliEngine {
      * Focus the terminal and fit to container.
      */
     focus(): void;
+    /**
+     * Restyle the terminal: its colors and the background around it.
+     * The `theme` command can still change it afterwards.
+     */
+    setTheme(theme: ITheme): void;
     /**
      * Get the underlying xterm.js Terminal instance.
      */
@@ -3695,7 +3700,19 @@ interface CliPanelSnapshot {
     /** Status text is shown in the header for top/bottom, compact dots otherwise. */
     showStatusIndicators: boolean;
     panelResizing: boolean;
+    /** CSS custom properties of the theme, for the wrapper and the hide tab. */
     themeStyles: Record<string, string>;
+    /** Whether the panel is light or dark. */
+    scheme: 'light' | 'dark';
+    /** Theme the host set for the terminals; undefined leaves them alone. */
+    terminalTheme?: ITheme;
+    /**
+     * Height of the on-screen keyboard over the page (0 when closed), from the
+     * visual viewport: the panel moves above it.
+     */
+    keyboardInset: number;
+    /** Height of the visible area (visual viewport), 0 when unknown; caps the panel's height. */
+    visibleHeight: number;
     closable: boolean;
     resizable: boolean;
     hideable: boolean;
@@ -3828,11 +3845,21 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     private documentListenersAttached;
     private rootElement;
     private themeObserver?;
+    /** The host's theme (`config.theme`); undefined leaves the terminals' own theme alone. */
+    private themeInput?;
+    private resolvedTheme;
+    private schemeQuery?;
+    private visualViewport?;
     constructor(options?: CliPanelControllerOptions);
     readonly subscribe: (listener: () => void) => (() => void);
     readonly getSnapshot: () => CliPanelSnapshot;
-    /** Apply a new panel configuration (chrome buttons, theme sync). */
+    /** Apply a new panel configuration (chrome buttons, theme, theme sync). */
     setOptions(config: CliPanelConfig | undefined): void;
+    /**
+     * Restyle the panel and every terminal in it (see `CliPanelConfig.theme`).
+     * `undefined` returns to the default palette and leaves the terminals' theme alone.
+     */
+    setTheme(theme: CliPanelThemeInput | undefined): void;
     /** Replace the change callbacks (wrappers call this when their props change). */
     setCallbacks(callbacks: CliPanelCallbacks): void;
     /** Update host-controlled values. Unchanged values are ignored. */
@@ -3892,9 +3919,9 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
     toggleServersDropdown(anchor?: Element | null): void;
     /** Close the context menu and every dropdown. */
     closeMenus(): void;
-    /** Mouse down on the panel's resize bar. */
+    /** Pointer (mouse, touch or pen) down on the panel's resize bar. */
     startPanelResize(clientX: number, clientY: number): void;
-    /** Mouse down on the divider before pane `dividerIndex + 1` of a tab. */
+    /** Pointer down on the divider before pane `dividerIndex + 1` of a tab. */
     startPaneResize(tabId: number, dividerIndex: number, clientX: number, containerWidth: number): void;
     private readonly onPanelResizeMove;
     private readonly onPanelResizeEnd;
@@ -3914,6 +3941,17 @@ declare class CliPanelController implements ICliPanelRef<CliEngine> {
      * Engines are registered after they start, so their theme is set.
      */
     private startThemeSync;
+    private applyTheme;
+    /** Follow the system's light/dark setting while the theme is 'auto'. */
+    private watchSystemScheme;
+    private readonly onSystemSchemeChange;
+    /**
+     * Phone browsers open the keyboard over the page and shrink only the visual
+     * viewport; follow it so the panel stays above the keyboard.
+     */
+    private watchVisualViewport;
+    private unwatchVisualViewport;
+    private readonly onVisualViewportChange;
     private stopThemeSync;
     private ensureInitialized;
     private updateCollapsed;
@@ -4017,6 +4055,7 @@ declare function positionDropdownItemClass(s: CliPanelSnapshot, position: CliPan
 /** Size, visibility and theme variables of the panel wrapper. */
 declare function panelWrapperStyle(s: CliPanelSnapshot): Record<string, string>;
 declare function paneStyle(widthPercent: number): Record<string, string>;
+/** Menus render outside the panel element, so they carry the theme's variables themselves. */
 declare function contextMenuStyle(s: CliPanelSnapshot): Record<string, string>;
 interface PanelStatusIndicator {
     key: 'execution' | 'services' | 'lastCommand' | 'servers' | 'uptime' | 'notification';

package/public-api.js

@@ -519,7 +519,7 @@ var CliKeyValueStore_TOKEN = cliCore.createCliToken("cli-key-value-store");
 var SyntaxHighlighterRegistry_TOKEN = cliCore.createCliToken("syntax-highlighter-registry");
 
 // src/lib/version.ts
-var LIBRARY_VERSION = "2.1.1";
+var LIBRARY_VERSION = "2.2.0";
 var API_VERSION = 2;
 var ANONYMOUS = "\0anonymous";
 function aliasOwner(context2) {
@@ -12601,6 +12601,7 @@ var CliThemeCommandProcessor = class {
   }
   async initialize(context2) {
     this.defaultTheme = context2.terminal.options.theme;
+    if (context2.options?.theme !== void 0) return;
     this.applySavedTheme(context2, false);
     context2.state.select(
       (state) => JSON.stringify([
@@ -22871,6 +22872,9 @@ var CliEngine = class {
     this.terminalOptions = getTerminalOptions(
       this.options?.terminalOptions
     );
+    if (this.options?.theme !== void 0 && !this.options?.terminalOptions?.theme) {
+      this.terminalOptions.theme = cliCore.resolvePanelTheme(this.options.theme, cliCore.prefersDarkScheme()).terminal;
+    }
     const setup = initializeTerminal(
       this.container,
       this.terminalOptions,
@@ -23123,6 +23127,14 @@ var CliEngine = class {
       this.terminal?.focus();
     });
   }
+  /**
+   * Restyle the terminal: its colors and the background around it.
+   * The `theme` command can still change it afterwards.
+   */
+  setTheme(theme) {
+    if (this.terminal) this.terminal.options.theme = theme;
+    this.container.style.background = theme.background ?? "";
+  }
   /**
    * Get the underlying xterm.js Terminal instance.
    */
@@ -23971,6 +23983,23 @@ function sameJson(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 var PANE_RESIZING_BODY_CLASS = "cli-pane-resizing";
+var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function followsSystem(input) {
+  return input === "auto" || typeof input === "object" && input !== null && input.base === "auto";
+}
+function themeKey(input) {
+  return input === void 0 ? "" : JSON.stringify(input);
+}
+function sameTerminalTheme(a, b) {
+  return !!a && !!b && a.background === b.background && a.foreground === b.foreground && a.cursor === b.cursor;
+}
+var MIN_KEYBOARD_INSET = 80;
+function visualViewportFields() {
+  const vv = typeof window !== "undefined" ? window.visualViewport : null;
+  if (!vv) return { keyboardInset: 0, visibleHeight: 0 };
+  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+  return { keyboardInset: inset >= MIN_KEYBOARD_INSET ? inset : 0, visibleHeight: Math.round(vv.height) };
+}
 function defaultViewport() {
   if (typeof window === "undefined") return { width: 0, height: 0 };
   return { width: window.innerWidth, height: window.innerHeight };
@@ -23989,6 +24018,9 @@ var CliPanelController = class {
     /* ─── Subscription ──────────────────────────────────────── */
     this.subscribe = (listener) => {
       this.listeners.add(listener);
+      this.watchSystemScheme();
+      this.watchVisualViewport();
+      this.onVisualViewportChange();
       return () => {
         this.listeners.delete(listener);
       };
@@ -24025,11 +24057,22 @@ var CliPanelController = class {
       this.closeMenus();
       this.cancelRename();
     };
+    this.onSystemSchemeChange = () => this.applyTheme();
+    this.onVisualViewportChange = () => {
+      const fields = visualViewportFields();
+      const s = this.snapshot;
+      if (fields.keyboardInset === s.keyboardInset && fields.visibleHeight === s.visibleHeight) return;
+      this.commit(fields);
+    };
     const config = options.config ?? {};
     this.callbacks = options.callbacks ?? {};
     this.controlled = options.controlled ?? {};
     this.viewport = options.viewport ?? defaultViewport;
     this.persistPosition = options.persistPosition ?? true;
+    this.themeInput = config.theme;
+    this.resolvedTheme = cliCore.resolvePanelTheme(config.theme, cliCore.prefersDarkScheme());
+    this.watchSystemScheme();
+    this.watchVisualViewport();
     this.internal = {
       collapsed: config.isCollapsed ?? true,
       hidden: config.isHidden ?? false,
@@ -24056,7 +24099,11 @@ var CliPanelController = class {
       isHorizontal: false,
       showStatusIndicators: true,
       panelResizing: false,
-      themeStyles: {},
+      // Without a host theme the stylesheet's colors (and its overrides) apply
+      themeStyles: config.theme === void 0 ? {} : this.resolvedTheme.styles,
+      scheme: this.resolvedTheme.scheme,
+      terminalTheme: config.theme === void 0 ? void 0 : this.resolvedTheme.terminal,
+      ...visualViewportFields(),
       ...this.configFields(config),
       tabs: [],
       activeTabId: 0,
@@ -24074,8 +24121,9 @@ var CliPanelController = class {
       formattedUptime: formatUptime2(0)
     });
   }
-  /** Apply a new panel configuration (chrome buttons, theme sync). */
+  /** Apply a new panel configuration (chrome buttons, theme, theme sync). */
   setOptions(config) {
+    if (themeKey(config?.theme) !== themeKey(this.themeInput)) this.setTheme(config?.theme);
     const fields = this.configFields(config ?? {});
     const s = this.snapshot;
     if (fields.closable === s.closable && fields.resizable === s.resizable && fields.hideable === s.hideable && fields.hideAlignment === s.hideAlignment && fields.syncTheme === s.syncTheme) {
@@ -24085,6 +24133,15 @@ var CliPanelController = class {
     if (fields.syncTheme) this.startThemeSync();
     else this.stopThemeSync();
   }
+  /**
+   * Restyle the panel and every terminal in it (see `CliPanelConfig.theme`).
+   * `undefined` returns to the default palette and leaves the terminals' theme alone.
+   */
+  setTheme(theme) {
+    this.themeInput = theme;
+    this.watchSystemScheme();
+    this.applyTheme();
+  }
   /** Replace the change callbacks (wrappers call this when their props change). */
   setCallbacks(callbacks) {
     this.callbacks = callbacks;
@@ -24110,6 +24167,9 @@ var CliPanelController = class {
   destroy() {
     this.tracker.destroy();
     this.stopThemeSync();
+    this.schemeQuery?.removeEventListener("change", this.onSystemSchemeChange);
+    this.schemeQuery = void 0;
+    this.unwatchVisualViewport();
     this.endPanelResize();
     this.endPaneResize();
     this.detachDocumentListeners();
@@ -24327,6 +24387,7 @@ var CliPanelController = class {
     if (!this.findTab(tabId)) return;
     this.engines.set(paneId, engine);
     this.tracker.registerEngine(tabId, paneId, engine);
+    if (this.snapshot.terminalTheme) engine.setTheme(this.snapshot.terminalTheme);
     if (this.snapshot.syncTheme) this.startThemeSync();
   }
   getEngine(paneId) {
@@ -24404,7 +24465,7 @@ var CliPanelController = class {
     });
   }
   /* ─── Drag resizing ─────────────────────────────────────── */
-  /** Mouse down on the panel's resize bar. */
+  /** Pointer (mouse, touch or pen) down on the panel's resize bar. */
   startPanelResize(clientX, clientY) {
     if (!this.snapshot.resizable || typeof document === "undefined") return;
     if (this.snapshot.collapsed) this.toggle();
@@ -24415,10 +24476,11 @@ var CliPanelController = class {
       startHeight: this.snapshot.height
     };
     this.commit({ panelResizing: true });
-    document.addEventListener("mousemove", this.onPanelResizeMove);
-    document.addEventListener("mouseup", this.onPanelResizeEnd);
+    document.addEventListener("pointermove", this.onPanelResizeMove);
+    document.addEventListener("pointerup", this.onPanelResizeEnd);
+    document.addEventListener("pointercancel", this.onPanelResizeEnd);
   }
-  /** Mouse down on the divider before pane `dividerIndex + 1` of a tab. */
+  /** Pointer down on the divider before pane `dividerIndex + 1` of a tab. */
   startPaneResize(tabId, dividerIndex, clientX, containerWidth) {
     const tab = this.findTab(tabId);
     if (!tab || typeof document === "undefined") return;
@@ -24431,22 +24493,25 @@ var CliPanelController = class {
     };
     this.commit({ paneResizing: true });
     document.body.classList.add(PANE_RESIZING_BODY_CLASS);
-    document.addEventListener("mousemove", this.onPaneResizeMove);
-    document.addEventListener("mouseup", this.onPaneResizeEnd);
+    document.addEventListener("pointermove", this.onPaneResizeMove);
+    document.addEventListener("pointerup", this.onPaneResizeEnd);
+    document.addEventListener("pointercancel", this.onPaneResizeEnd);
   }
   endPanelResize() {
     if (!this.panelDrag) return;
     this.panelDrag = void 0;
-    document.removeEventListener("mousemove", this.onPanelResizeMove);
-    document.removeEventListener("mouseup", this.onPanelResizeEnd);
+    document.removeEventListener("pointermove", this.onPanelResizeMove);
+    document.removeEventListener("pointerup", this.onPanelResizeEnd);
+    document.removeEventListener("pointercancel", this.onPanelResizeEnd);
     this.commit({ panelResizing: false });
   }
   endPaneResize() {
     if (!this.paneDrag) return;
     this.paneDrag = void 0;
     document.body.classList.remove(PANE_RESIZING_BODY_CLASS);
-    document.removeEventListener("mousemove", this.onPaneResizeMove);
-    document.removeEventListener("mouseup", this.onPaneResizeEnd);
+    document.removeEventListener("pointermove", this.onPaneResizeMove);
+    document.removeEventListener("pointerup", this.onPaneResizeEnd);
+    document.removeEventListener("pointercancel", this.onPaneResizeEnd);
     this.commit({ paneResizing: false });
   }
   syncDocumentListeners() {
@@ -24474,7 +24539,7 @@ var CliPanelController = class {
     if (!engine) return;
     const theme = engine.getTerminal().options.theme;
     if (!theme) return;
-    const styles = cliCore.derivePanelThemeStyles(theme);
+    const styles = sameTerminalTheme(theme, this.resolvedTheme.terminal) ? this.resolvedTheme.styles : cliCore.derivePanelThemeStyles(theme);
     if (sameRecord(styles, this.snapshot.themeStyles)) return;
     this.commit({ themeStyles: styles });
   }
@@ -24491,6 +24556,44 @@ var CliPanelController = class {
     this.themeObserver = new MutationObserver(() => this.syncThemeFromEngine());
     this.themeObserver.observe(container, { attributes: true, attributeFilter: ["style"] });
   }
+  applyTheme() {
+    const resolved = cliCore.resolvePanelTheme(this.themeInput, cliCore.prefersDarkScheme());
+    this.resolvedTheme = resolved;
+    const terminalTheme = this.themeInput === void 0 ? void 0 : resolved.terminal;
+    const terminalChanged = !!terminalTheme && !sameTerminalTheme(terminalTheme, this.snapshot.terminalTheme);
+    const themeStyles = this.themeInput === void 0 ? {} : resolved.styles;
+    this.commit({ themeStyles, scheme: resolved.scheme, terminalTheme });
+    if (terminalChanged) this.engines.forEach((engine) => engine.setTheme(terminalTheme));
+    if (this.snapshot.syncTheme) this.syncThemeFromEngine();
+  }
+  /** Follow the system's light/dark setting while the theme is 'auto'. */
+  watchSystemScheme() {
+    const follow = followsSystem(this.themeInput) && typeof window !== "undefined" && !!window.matchMedia;
+    if (follow && !this.schemeQuery) {
+      this.schemeQuery = window.matchMedia(DARK_SCHEME_QUERY);
+      this.schemeQuery.addEventListener?.("change", this.onSystemSchemeChange);
+    } else if (!follow && this.schemeQuery) {
+      this.schemeQuery.removeEventListener?.("change", this.onSystemSchemeChange);
+      this.schemeQuery = void 0;
+    }
+  }
+  /* ─── On-screen keyboard ────────────────────────────────── */
+  /**
+   * Phone browsers open the keyboard over the page and shrink only the visual
+   * viewport; follow it so the panel stays above the keyboard.
+   */
+  watchVisualViewport() {
+    const vv = typeof window !== "undefined" ? window.visualViewport : null;
+    if (!vv || this.visualViewport) return;
+    this.visualViewport = vv;
+    vv.addEventListener("resize", this.onVisualViewportChange);
+    vv.addEventListener("scroll", this.onVisualViewportChange);
+  }
+  unwatchVisualViewport() {
+    this.visualViewport?.removeEventListener("resize", this.onVisualViewportChange);
+    this.visualViewport?.removeEventListener("scroll", this.onVisualViewportChange);
+    this.visualViewport = void 0;
+  }
   stopThemeSync() {
     this.themeObserver?.disconnect();
     this.themeObserver = void 0;
@@ -24803,6 +24906,8 @@ function positionDropdownItemClass(s, position) {
 }
 function panelWrapperStyle(s) {
   const style = s.isHorizontal ? { width: `${s.width}px` } : { height: `${s.height}px` };
+  if (s.keyboardInset > 0) style["--cli-panel-keyboard-inset"] = `${s.keyboardInset}px`;
+  if (s.visibleHeight > 0) style["--cli-panel-visible-height"] = `${s.visibleHeight}px`;
   if (s.hidden) style["display"] = "none";
   return { ...style, ...s.themeStyles };
 }
@@ -24810,7 +24915,7 @@ function paneStyle(widthPercent) {
   return { flex: `${widthPercent} 1 0` };
 }
 function contextMenuStyle(s) {
-  return { left: `${s.contextMenu.x}px`, top: `${s.contextMenu.y}px` };
+  return { ...s.themeStyles, left: `${s.contextMenu.x}px`, top: `${s.contextMenu.y}px` };
 }
 function statusIndicators(s) {
   const items = [];
@@ -24927,7 +25032,7 @@ function openStatusDropdown(s) {
       kind: "services",
       header: PANEL_LABELS.servicesHeader,
       emptyText: PANEL_LABELS.servicesEmpty,
-      style: s.servicesDropdownStyle,
+      style: { ...s.themeStyles, ...s.servicesDropdownStyle },
       rows: s.global.serviceDetails.map((svc, i) => ({
         key: `${i}-${svc.name}`,
         dotClass: joinClasses("cli-panel-svc-dot", svc.status === "running" ? "svc-running" : "svc-stopped"),
@@ -24943,7 +25048,7 @@ function openStatusDropdown(s) {
       kind: "servers",
       header: PANEL_LABELS.serversHeader,
       emptyText: PANEL_LABELS.serversEmpty,
-      style: s.serversDropdownStyle,
+      style: { ...s.themeStyles, ...s.serversDropdownStyle },
       rows: s.global.serverDetails.map((srv, i) => ({
         key: `${i}-${srv.name}`,
         dotClass: joinClasses("cli-panel-svc-dot", srv.connected ? "svc-running" : "svc-stopped"),