@qodalis/cli 2.1.1 → 2.2.0

package/public-api.mjs

@@ -1,4 +1,4 @@
-import { createCliToken, CliLogLevel, DefaultThemes, DefaultThemeInfos, CliForegroundColor, DefaultLibraryAuthor, CliIcon, writeWrapped, LIBRARY_VERSION as LIBRARY_VERSION$1, writeUsage, writeExamples, writeHint, joinShellWords, CliKeyData, unquoteRawArgument, resolveConfigurationCategories, ICliTranslationService_TOKEN, splitShellWords, cliAuthorize, CliUsersPermissions, ICliAuthorizationService_TOKEN, quoteShellWord, resolveHeaders, appendQueryParams, buildServerWebSocketUrl, ServerVersionNegotiator, CliHttpError, formatJson, visibleLength, ICliEventBus_TOKEN, stripAnsi, CancellablePromise, isCliAccessDeniedError, getParameterValue, ICliCommandGuard_TOKEN, getRightOfWord, CLI_CONFIGURE_STORE_NAME, CliModuleRegistry, initializeBrowserEnvironment, ICliPermissionRegistry_TOKEN, satisfiesVersionRange, CliServerPermissions, ICliDragDropService_TOKEN, cliAccessMetadataGuards, ICliServerAuthService_TOKEN, loadPanelPosition, savePanelPosition, derivePanelThemeStyles, delay, colorFirstWord, clearTerminalLine, ICliCompletionProvider_TOKEN, ICliServerAuthTokenProvider_TOKEN, truncateToWidth } from '@qodalis/cli-core';
+import { createCliToken, CliLogLevel, DefaultThemes, DefaultThemeInfos, CliForegroundColor, DefaultLibraryAuthor, CliIcon, writeWrapped, LIBRARY_VERSION as LIBRARY_VERSION$1, writeUsage, writeExamples, writeHint, joinShellWords, CliKeyData, unquoteRawArgument, resolveConfigurationCategories, ICliTranslationService_TOKEN, splitShellWords, cliAuthorize, CliUsersPermissions, ICliAuthorizationService_TOKEN, quoteShellWord, resolveHeaders, appendQueryParams, buildServerWebSocketUrl, ServerVersionNegotiator, CliHttpError, formatJson, visibleLength, ICliEventBus_TOKEN, stripAnsi, CancellablePromise, isCliAccessDeniedError, getParameterValue, ICliCommandGuard_TOKEN, getRightOfWord, CLI_CONFIGURE_STORE_NAME, CliModuleRegistry, initializeBrowserEnvironment, ICliPermissionRegistry_TOKEN, satisfiesVersionRange, CliServerPermissions, ICliDragDropService_TOKEN, cliAccessMetadataGuards, resolvePanelTheme, prefersDarkScheme, ICliServerAuthService_TOKEN, loadPanelPosition, savePanelPosition, derivePanelThemeStyles, delay, colorFirstWord, clearTerminalLine, ICliCompletionProvider_TOKEN, ICliServerAuthTokenProvider_TOKEN, truncateToWidth } from '@qodalis/cli-core';
 export { ICliUserSessionService_TOKEN, ICliUsersStoreService_TOKEN } from '@qodalis/cli-core';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
@@ -518,7 +518,7 @@ var CliKeyValueStore_TOKEN = createCliToken("cli-key-value-store");
 var SyntaxHighlighterRegistry_TOKEN = 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) {
@@ -12600,6 +12600,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([
@@ -22870,6 +22871,9 @@ var CliEngine = class {
     this.terminalOptions = getTerminalOptions(
       this.options?.terminalOptions
     );
+    if (this.options?.theme !== void 0 && !this.options?.terminalOptions?.theme) {
+      this.terminalOptions.theme = resolvePanelTheme(this.options.theme, prefersDarkScheme()).terminal;
+    }
     const setup = initializeTerminal(
       this.container,
       this.terminalOptions,
@@ -23122,6 +23126,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.
    */
@@ -23970,6 +23982,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 };
@@ -23988,6 +24017,9 @@ var CliPanelController = class {
     /* ─── Subscription ──────────────────────────────────────── */
     this.subscribe = (listener) => {
       this.listeners.add(listener);
+      this.watchSystemScheme();
+      this.watchVisualViewport();
+      this.onVisualViewportChange();
       return () => {
         this.listeners.delete(listener);
       };
@@ -24024,11 +24056,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 = resolvePanelTheme(config.theme, prefersDarkScheme());
+    this.watchSystemScheme();
+    this.watchVisualViewport();
     this.internal = {
       collapsed: config.isCollapsed ?? true,
       hidden: config.isHidden ?? false,
@@ -24055,7 +24098,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,
@@ -24073,8 +24120,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) {
@@ -24084,6 +24132,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;
@@ -24109,6 +24166,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();
@@ -24326,6 +24386,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) {
@@ -24403,7 +24464,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();
@@ -24414,10 +24475,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;
@@ -24430,22 +24492,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() {
@@ -24473,7 +24538,7 @@ var CliPanelController = class {
     if (!engine) return;
     const theme = engine.getTerminal().options.theme;
     if (!theme) return;
-    const styles = derivePanelThemeStyles(theme);
+    const styles = sameTerminalTheme(theme, this.resolvedTheme.terminal) ? this.resolvedTheme.styles : derivePanelThemeStyles(theme);
     if (sameRecord(styles, this.snapshot.themeStyles)) return;
     this.commit({ themeStyles: styles });
   }
@@ -24490,6 +24555,44 @@ var CliPanelController = class {
     this.themeObserver = new MutationObserver(() => this.syncThemeFromEngine());
     this.themeObserver.observe(container, { attributes: true, attributeFilter: ["style"] });
   }
+  applyTheme() {
+    const resolved = resolvePanelTheme(this.themeInput, 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;
@@ -24802,6 +24905,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 };
 }
@@ -24809,7 +24914,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 = [];
@@ -24926,7 +25031,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"),
@@ -24942,7 +25047,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"),