@qodalis/react-cli 2.0.0-beta.8 → 2.0.0-rc.1

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/Cli.tsx
 import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { resolveCliHostConfig } from "@qodalis/cli";
 
 // src/CliContext.tsx
 import { createContext, useContext } from "react";
@@ -17,17 +18,16 @@ function useCliConfig() {
 }
 function CliConfigProvider({
   modules,
-  processors,
   options,
   services,
   children
 }) {
-  return /* @__PURE__ */ jsx(CliConfigCtx.Provider, { value: { modules, processors, options, services }, children });
+  return /* @__PURE__ */ jsx(CliConfigCtx.Provider, { value: { modules, options, services }, children });
 }
 
 // src/useCliEngine.ts
 import { useRef, useEffect, useState } from "react";
-import { CliEngine } from "@qodalis/cli";
+import { createCliEngine } from "@qodalis/cli";
 function useCliEngine(containerRef, config) {
   const [engine, setEngine] = useState(null);
   const engineRef = useRef(null);
@@ -38,19 +38,7 @@ function useCliEngine(containerRef, config) {
     initTimerRef.current = setTimeout(() => {
       initTimerRef.current = null;
       if (!container) return;
-      const e = new CliEngine(container, config?.options);
-      e.registerService("cli-framework", "React");
-      if (config?.services) {
-        for (const [token, value] of Object.entries(config.services)) {
-          e.registerService(token, value);
-        }
-      }
-      if (config?.modules) {
-        e.registerModules(config.modules);
-      }
-      if (config?.processors) {
-        e.registerProcessors(config.processors);
-      }
+      const e = createCliEngine(container, { ...config, framework: "React" });
       engineRef.current = e;
       e.start().then(() => setEngine(e));
     }, 0);
@@ -74,7 +62,6 @@ function useCliEngine(containerRef, config) {
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function Cli({
   modules,
-  processors,
   options,
   services,
   snapshot,
@@ -86,16 +73,9 @@ function Cli({
   const config = useCliConfig();
   const containerRef = useRef2(null);
   const hasProvider = !!ctx.engine;
-  const mergedModules = modules ?? config.modules;
-  const mergedProcessors = processors ?? config.processors;
-  const mergedOptions = options ?? config.options;
-  const mergedServices = services ?? config.services;
-  const optionsWithSnapshot = snapshot ? { ...mergedOptions, snapshot } : mergedOptions;
   const standaloneEngine = useCliEngine(containerRef, {
-    modules: mergedModules,
-    processors: mergedProcessors,
-    options: optionsWithSnapshot,
-    services: mergedServices,
+    ...resolveCliHostConfig({ modules, options, services }, config),
+    snapshot,
     disabled: hasProvider
   });
   const engine = ctx.engine ?? standaloneEngine;
@@ -118,503 +98,150 @@ function Cli({
 }
 
 // src/CliPanel.tsx
-import React3, { useState as useState2, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
-import { derivePanelThemeStyles, loadPanelPosition, savePanelPosition } from "@qodalis/cli-core";
+import React3, { useEffect as useEffect3, useLayoutEffect, useState as useState2, useSyncExternalStore } from "react";
+import {
+  CliPanelController,
+  CLOSE_GLYPH,
+  CLOSE_ICON,
+  HIDE_ICON,
+  HIDE_TAB_TERMINAL_ICON,
+  MAXIMIZE_ICON,
+  PANEL_LABELS,
+  RESTORE_ICON,
+  TERMINAL_ICON,
+  collapseChevronIcon,
+  contextMenuItems,
+  contextMenuStyle,
+  glowLineClass,
+  handleRenameKey,
+  hideTabChevronIcon,
+  joinClasses,
+  mergeCliOptions,
+  openStatusDropdown,
+  paneClass,
+  paneStyle,
+  panelTabClass,
+  panelTabDotClass,
+  panelWrapperClass,
+  panelWrapperStyle,
+  panesContainerClass,
+  panesContainerWidth,
+  positionIcon,
+  positionOptions,
+  resolveCliHostConfig as resolveCliHostConfig2,
+  runContextMenuAction,
+  statusIndicators,
+  svgAttrs
+} from "@qodalis/cli";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
-var MIN_PANE_WIDTH_PERCENT = 10;
-var TerminalIcon = () => /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "4 17 10 11 4 5" }),
-  /* @__PURE__ */ jsx3("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-] });
-var MaximizeIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ jsx3("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ jsx3("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-] });
-var RestoreIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ jsx3("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ jsx3("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-] });
-var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] });
-var HideIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("line", { x1: "5", y1: "18", x2: "19", y2: "18" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "9 14 12 17 15 14" })
-] });
-function CollapseChevron({ position, isCollapsed }) {
-  let points;
-  switch (position) {
-    case "top":
-      points = isCollapsed ? "6 9 12 15 18 9" : "18 15 12 9 6 15";
-      break;
-    case "left":
-      points = isCollapsed ? "9 18 15 12 9 6" : "15 6 9 12 15 18";
-      break;
-    case "right":
-      points = isCollapsed ? "15 6 9 12 15 18" : "9 18 15 12 9 6";
-      break;
-    default:
-      points = isCollapsed ? "18 15 12 9 6 15" : "6 9 12 15 18 9";
-      break;
+function reactSvgProps(attrs) {
+  const props = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    props[key.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
   }
-  return /* @__PURE__ */ jsx3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points }) });
+  return props;
 }
-function HideTabChevron({ position }) {
-  let points;
-  switch (position) {
-    case "top":
-      points = "6 9 12 15 18 9";
-      break;
-    case "left":
-      points = "9 18 15 12 9 6";
-      break;
-    case "right":
-      points = "15 6 9 12 15 18";
-      break;
-    default:
-      points = "18 15 12 9 6 15";
-      break;
-  }
-  return /* @__PURE__ */ jsx3("svg", { className: "cli-panel-hide-tab-arrow", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points }) });
+function Icon({ icon, className }) {
+  return /* @__PURE__ */ jsx3("svg", { className, ...reactSvgProps(svgAttrs(icon)), children: icon.shapes.map((shape, i) => React3.createElement(shape.tag, { key: i, ...reactSvgProps(shape.attrs) })) });
 }
-function PositionIcon({ position, size = 20 }) {
-  let fillRect;
-  switch (position) {
-    case "top":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "left":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "right":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "15", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    default:
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "15", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
+var focusAndSelect = (input) => {
+  if (input && document.activeElement !== input) {
+    input.focus();
+    input.select();
   }
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx3("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    fillRect
-  ] });
-}
-function CliPanel({ options: optionsProp, modules: modulesProp, processors: processorsProp, services: servicesProp, onClose, style, className }) {
+};
+var asStyle = (style) => style;
+var CliPanel = React3.forwardRef(function CliPanel2(props, ref) {
   const config = useCliConfig();
-  const options = optionsProp ?? config.options;
-  const modules = modulesProp ?? config.modules;
-  const processors = processorsProp ?? config.processors;
-  const services = servicesProp ?? config.services;
-  const [position, setPosition] = useState2(
-    () => loadPanelPosition() ?? options?.position ?? "bottom"
-  );
-  const closable = options?.closable ?? true;
-  const resizable = options?.resizable ?? true;
-  const isHorizontal = position === "left" || position === "right";
-  const hideable = options?.hideable ?? true;
-  const hideAlignment = options?.hideAlignment ?? "center";
-  const syncTheme = options?.syncTheme ?? false;
-  const [visible, setVisible] = useState2(true);
-  const [collapsed, setCollapsed] = useState2(options?.isCollapsed ?? true);
-  const [maximized, setMaximized] = useState2(false);
-  const [panelHeight, setPanelHeight] = useState2(600);
-  const [panelWidth, setPanelWidth] = useState2(400);
-  const [initialized, setInitialized] = useState2(false);
-  const [hidden, setHidden] = useState2(options?.isHidden ?? false);
-  const preHideCollapsedRef = useRef3(true);
-  const [themeStyles, setThemeStyles] = useState2({});
-  const wrapperRef = useRef3(null);
-  const [tabs, setTabs] = useState2([]);
-  const [activeTabId, setActiveTabId] = useState2(0);
-  const [activePaneId, setActivePaneId] = useState2(0);
-  const nextIdRef = useRef3({ tab: 1, pane: 1 });
-  const [contextMenu, setContextMenu] = useState2({ visible: false, x: 0, y: 0, tabId: 0 });
-  const engineMapRef = useRef3(/* @__PURE__ */ new Map());
-  const [paneResizing, setPaneResizing] = useState2(false);
-  const paneResizeRef = useRef3({ tabId: 0, dividerIndex: 0, startX: 0, startWidths: [], containerWidth: 0 });
-  const [panelResizing, setPanelResizing] = useState2(false);
-  const panelResizeRef = useRef3({ startY: 0, startHeight: 0, startX: 0, startWidth: 0 });
-  const prevHeightRef = useRef3(600);
-  const prevWidthRef = useRef3(400);
-  const addTab = useCallback(() => {
-    const paneId = nextIdRef.current.pane++;
-    const tabId = nextIdRef.current.tab++;
-    const pane = { id: paneId, widthPercent: 100 };
-    const tab = { id: tabId, title: `Terminal ${tabId}`, isEditing: false, panes: [pane] };
-    setTabs((prev) => [...prev, tab]);
-    setActiveTabId(tabId);
-    setActivePaneId(paneId);
-  }, []);
-  const toggle = useCallback(() => {
-    setCollapsed((prev) => {
-      const next = !prev;
-      if (!next && !initialized) {
-        setInitialized(true);
-        const paneId = nextIdRef.current.pane++;
-        const tabId = nextIdRef.current.tab++;
-        const pane = { id: paneId, widthPercent: 100 };
-        const tab = { id: tabId, title: `Terminal ${tabId}`, isEditing: false, panes: [pane] };
-        setTabs([tab]);
-        setActiveTabId(tabId);
-        setActivePaneId(paneId);
+  const options = mergeCliOptions(props.options, config.options);
+  const { modules, services } = resolveCliHostConfig2(props, config);
+  const [controller] = useState2(
+    () => new CliPanelController({
+      config: options,
+      controlled: {
+        collapsed: props.collapsed,
+        hidden: props.hidden,
+        maximized: props.maximized,
+        activeTabId: props.activeTabId,
+        position: props.position,
+        height: props.height,
+        width: props.width
       }
-      return next;
-    });
-  }, [initialized]);
-  const closeTab = useCallback((id) => {
-    setTabs((prev) => {
-      const tab = prev.find((t) => t.id === id);
-      if (tab) {
-        tab.panes.forEach((p) => engineMapRef.current.delete(p.id));
-      }
-      const next = prev.filter((t) => t.id !== id);
-      if (next.length === 0) {
-        setInitialized(false);
-        setCollapsed(true);
-        return [];
-      }
-      setActiveTabId((current) => {
-        if (current === id) {
-          const oldIdx = prev.findIndex((t) => t.id === id);
-          const newIdx = Math.min(oldIdx, next.length - 1);
-          return next[newIdx].id;
-        }
-        return current;
-      });
-      return next;
-    });
-  }, []);
-  const selectTab = useCallback((id) => {
-    setActiveTabId(id);
-    setTabs((prev) => {
-      const tab = prev.find((t) => t.id === id);
-      if (tab && tab.panes.length > 0) {
-        setActivePaneId(tab.panes[0].id);
-      }
-      return prev;
-    });
-  }, []);
-  const normalizePanes = (panes) => {
-    const total = panes.reduce((s, p) => s + p.widthPercent, 0);
-    if (total === 0) return;
-    const scale = 100 / total;
-    panes.forEach((p) => {
-      p.widthPercent *= scale;
+    })
+  );
+  const s = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const [rootElement, setRootElement] = useState2(null);
+  useLayoutEffect(() => {
+    controller.setCallbacks({
+      onCollapsedChange: props.onCollapsedChange,
+      onHiddenChange: props.onHiddenChange,
+      onMaximizedChange: props.onMaximizedChange,
+      onActiveTabIdChange: props.onActiveTabIdChange,
+      onPositionChange: props.onPositionChange,
+      onHeightChange: props.onHeightChange,
+      onWidthChange: props.onWidthChange,
+      onClose: props.onClose,
+      onTabAdded: props.onTabAdded,
+      onTabClosed: props.onTabClosed,
+      onPaneSplit: props.onPaneSplit,
+      onPaneClosed: props.onPaneClosed
     });
-  };
-  const splitRight = useCallback((tabId, afterPaneId) => {
-    setTabs((prev) => {
-      const next = prev.map((t) => ({ ...t, panes: t.panes.map((p) => ({ ...p })) }));
-      const tab = next.find((t) => t.id === (tabId ?? activeTabId));
-      if (!tab) return prev;
-      const targetPaneId = afterPaneId ?? activePaneId;
-      const idx = tab.panes.findIndex((p) => p.id === targetPaneId);
-      const insertIdx = idx === -1 ? tab.panes.length : idx + 1;
-      const newPaneId = nextIdRef.current.pane++;
-      const newPane = { id: newPaneId, widthPercent: 0 };
-      tab.panes.splice(insertIdx, 0, newPane);
-      const evenWidth = 100 / tab.panes.length;
-      tab.panes.forEach((p) => {
-        p.widthPercent = evenWidth;
-      });
-      normalizePanes(tab.panes);
-      setActivePaneId(newPaneId);
-      return next;
+    controller.setControlled({
+      collapsed: props.collapsed,
+      hidden: props.hidden,
+      maximized: props.maximized,
+      activeTabId: props.activeTabId,
+      position: props.position,
+      height: props.height,
+      width: props.width
     });
-  }, [activeTabId, activePaneId]);
-  const closePane = useCallback((tabId, paneId) => {
-    setTabs((prev) => {
-      const tab = prev.find((t) => t.id === tabId);
-      if (!tab) return prev;
-      if (tab.panes.length <= 1) {
-        const next2 = prev.filter((t) => t.id !== tabId);
-        if (next2.length === 0) {
-          setInitialized(false);
-          setCollapsed(true);
-          return [];
-        }
-        return next2;
-      }
-      const next = prev.map((t) => ({ ...t, panes: t.panes.map((p) => ({ ...p })) }));
-      const updatedTab = next.find((t) => t.id === tabId);
-      const idx = updatedTab.panes.findIndex((p) => p.id === paneId);
-      if (idx === -1) return prev;
-      updatedTab.panes.splice(idx, 1);
-      const totalRemaining = updatedTab.panes.reduce((s, p) => s + p.widthPercent, 0);
-      if (totalRemaining > 0) {
-        updatedTab.panes.forEach((p) => {
-          p.widthPercent = p.widthPercent / totalRemaining * 100;
-        });
-      }
-      normalizePanes(updatedTab.panes);
-      setActivePaneId((curr) => {
-        if (curr === paneId) {
-          const newIdx = Math.min(idx, updatedTab.panes.length - 1);
-          return updatedTab.panes[newIdx].id;
-        }
-        return curr;
-      });
-      return next;
-    });
-  }, []);
-  const startRename = useCallback((tabId) => {
-    setTabs((prev) => prev.map((t) => ({ ...t, isEditing: t.id === tabId })));
-  }, []);
-  const commitRename = useCallback((tabId, value) => {
-    const trimmed = value.trim();
-    setTabs((prev) => prev.map(
-      (t) => t.id === tabId ? { ...t, title: trimmed || t.title, isEditing: false } : t
-    ));
-  }, []);
-  const closeContextMenu = useCallback(() => {
-    setContextMenu((prev) => ({ ...prev, visible: false }));
-  }, []);
-  useEffect3(() => {
-    if (!contextMenu.visible) return;
-    const handler = () => closeContextMenu();
-    document.addEventListener("click", handler);
-    return () => document.removeEventListener("click", handler);
-  }, [contextMenu.visible, closeContextMenu]);
-  const onPanelResizeStart = useCallback((e) => {
-    if (!resizable) return;
-    e.preventDefault();
-    if (collapsed) {
-      toggle();
-    }
-    setPanelResizing(true);
-    panelResizeRef.current = {
-      startY: e.clientY,
-      startHeight: panelHeight,
-      startX: e.clientX,
-      startWidth: panelWidth
-    };
-  }, [collapsed, toggle, panelHeight, panelWidth, resizable]);
-  useEffect3(() => {
-    if (!panelResizing) return;
-    const onMove = (e) => {
-      if (isHorizontal) {
-        const deltaX = position === "left" ? e.clientX - panelResizeRef.current.startX : panelResizeRef.current.startX - e.clientX;
-        let next = Math.max(100, panelResizeRef.current.startWidth + deltaX);
-        if (next > window.innerWidth) next = window.innerWidth;
-        setPanelWidth(next);
-      } else {
-        const deltaY = position === "top" ? e.clientY - panelResizeRef.current.startY : panelResizeRef.current.startY - e.clientY;
-        let next = Math.max(100, panelResizeRef.current.startHeight + deltaY);
-        if (next > window.innerHeight) next = window.innerHeight;
-        setPanelHeight(next);
-      }
-    };
-    const onUp = () => setPanelResizing(false);
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-    return () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-  }, [panelResizing, isHorizontal, position]);
-  const onPaneResizeStart = useCallback((e, tabId, dividerIndex) => {
-    e.preventDefault();
-    const tab = tabs.find((t) => t.id === tabId);
-    if (!tab) return;
-    setPaneResizing(true);
-    const container = e.target.closest(".cli-panel-panes-container");
-    paneResizeRef.current = {
-      tabId,
-      dividerIndex,
-      startX: e.clientX,
-      startWidths: tab.panes.map((p) => p.widthPercent),
-      containerWidth: container ? container.clientWidth : 1
-    };
-  }, [tabs]);
-  useEffect3(() => {
-    if (!paneResizing) return;
-    const onMove = (e) => {
-      const ref = paneResizeRef.current;
-      const deltaX = e.clientX - ref.startX;
-      const deltaPct = deltaX / ref.containerWidth * 100;
-      const i = ref.dividerIndex;
-      let leftWidth = ref.startWidths[i] + deltaPct;
-      let rightWidth = ref.startWidths[i + 1] - deltaPct;
-      if (leftWidth < MIN_PANE_WIDTH_PERCENT) {
-        leftWidth = MIN_PANE_WIDTH_PERCENT;
-        rightWidth = ref.startWidths[i] + ref.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-      }
-      if (rightWidth < MIN_PANE_WIDTH_PERCENT) {
-        rightWidth = MIN_PANE_WIDTH_PERCENT;
-        leftWidth = ref.startWidths[i] + ref.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-      }
-      setTabs((prev) => {
-        const next = prev.map((t) => ({ ...t, panes: t.panes.map((p) => ({ ...p })) }));
-        const tab = next.find((t) => t.id === ref.tabId);
-        if (tab) {
-          tab.panes[i].widthPercent = leftWidth;
-          tab.panes[i + 1].widthPercent = rightWidth;
-        }
-        return next;
-      });
-    };
-    const onUp = () => {
-      setPaneResizing(false);
-      document.body.classList.remove("cli-pane-resizing");
-    };
-    document.body.classList.add("cli-pane-resizing");
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-    return () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-  }, [paneResizing]);
-  useEffect3(() => {
-    if (!syncTheme || !initialized) return;
-    const syncFromEngine = () => {
-      const engine = engineMapRef.current.values().next().value;
-      if (!engine) return;
-      const theme = engine.getTerminal().options.theme;
-      if (theme) setThemeStyles(derivePanelThemeStyles(theme));
-    };
-    const timer = setTimeout(() => {
-      syncFromEngine();
-      const container = wrapperRef.current?.querySelector(".terminal-container");
-      if (!container) return;
-      const observer = new MutationObserver(syncFromEngine);
-      observer.observe(container, { attributes: true, attributeFilter: ["style"] });
-      return () => observer.disconnect();
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [syncTheme, initialized]);
-  const toggleMaximize = useCallback(() => {
-    setMaximized((prev) => {
-      if (!prev) {
-        if (isHorizontal) {
-          prevWidthRef.current = panelWidth;
-          setPanelWidth(window.innerWidth);
-        } else {
-          prevHeightRef.current = panelHeight;
-          setPanelHeight(window.innerHeight);
-        }
-      } else {
-        if (isHorizontal) {
-          setPanelWidth(prevWidthRef.current);
-        } else {
-          setPanelHeight(prevHeightRef.current);
-        }
-      }
-      return !prev;
-    });
-  }, [panelHeight, panelWidth, isHorizontal]);
-  const handleClose = useCallback(() => {
-    setVisible(false);
-    onClose?.();
-  }, [onClose]);
-  const handleHide = useCallback(() => {
-    preHideCollapsedRef.current = collapsed;
-    setHidden(true);
-  }, [collapsed]);
-  const handleUnhide = useCallback(() => {
-    setHidden(false);
-    setCollapsed(preHideCollapsedRef.current);
-  }, []);
-  const [positionDropdownOpen, setPositionDropdownOpen] = useState2(false);
-  const closePositionDropdown = useCallback(() => setPositionDropdownOpen(false), []);
-  useEffect3(() => {
-    if (!positionDropdownOpen) return;
-    document.addEventListener("click", closePositionDropdown);
-    return () => document.removeEventListener("click", closePositionDropdown);
-  }, [positionDropdownOpen, closePositionDropdown]);
-  const handlePositionButtonClick = useCallback((e) => {
-    e.stopPropagation();
-    setPositionDropdownOpen((prev) => !prev);
-  }, []);
-  const selectPosition = useCallback((pos) => {
-    setPositionDropdownOpen(false);
-    setPosition(pos);
-    savePanelPosition(pos);
-  }, []);
-  if (!visible) return null;
-  const wrapperStyle = {
-    ...isHorizontal ? { width: `${panelWidth}px` } : { height: `${panelHeight}px` },
-    ...hidden ? { display: "none" } : {},
-    ...themeStyles,
-    ...style
-  };
+    controller.setOptions(options);
+  });
+  useEffect3(() => controller.setRootElement(rootElement), [controller, rootElement]);
+  useEffect3(() => () => controller.destroy(), [controller]);
+  React3.useImperativeHandle(ref, () => controller, [controller]);
+  if (!s.visible) return null;
   return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    hidden && /* @__PURE__ */ jsxs(
+    s.hidden && /* @__PURE__ */ jsxs(
       "button",
       {
         className: "cli-panel-hide-tab",
-        "data-position": position,
-        "data-hide-align": hideAlignment,
-        style: themeStyles,
-        title: "Show CLI",
-        onClick: handleUnhide,
+        "data-position": s.position,
+        "data-hide-align": s.hideAlignment,
+        style: asStyle(s.themeStyles),
+        title: PANEL_LABELS.showCli,
+        onClick: () => controller.unhide(),
         children: [
-          /* @__PURE__ */ jsxs("svg", { className: "cli-panel-hide-tab-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx3("polyline", { points: "4 17 10 11 4 5" }),
-            /* @__PURE__ */ jsx3("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-          ] }),
-          /* @__PURE__ */ jsx3("span", { className: "cli-panel-hide-tab-label", children: "CLI" }),
-          /* @__PURE__ */ jsx3(HideTabChevron, { position })
+          /* @__PURE__ */ jsx3(Icon, { icon: HIDE_TAB_TERMINAL_ICON, className: "cli-panel-hide-tab-icon" }),
+          /* @__PURE__ */ jsx3("span", { className: "cli-panel-hide-tab-label", children: PANEL_LABELS.title }),
+          /* @__PURE__ */ jsx3(Icon, { icon: hideTabChevronIcon(s.position), className: "cli-panel-hide-tab-arrow" })
         ]
       }
     ),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: wrapperRef,
-        className: `cli-panel-wrapper ${collapsed ? "collapsed" : ""} ${maximized ? "maximized" : ""} ${panelResizing ? "resizing" : ""} ${className ?? ""}`,
-        style: wrapperStyle,
-        "data-position": position,
-        "data-resizable": String(resizable),
-        "data-closable": String(closable),
-        "data-hideable": String(hideable),
+        ref: setRootElement,
+        className: panelWrapperClass(s, props.className),
+        style: { ...asStyle(panelWrapperStyle(s)), ...props.style },
+        "data-position": s.position,
+        "data-resizable": String(s.resizable),
+        "data-closable": String(s.closable),
+        "data-hideable": String(s.hideable),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "cli-panel-header", children: [
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-bar", onMouseDown: onPanelResizeStart, children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-grip" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "cli-panel-header-content", children: [
-              /* @__PURE__ */ jsxs("p", { className: "cli-panel-title", children: [
-                /* @__PURE__ */ jsx3("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ jsx3(TerminalIcon, {}) }),
-                "CLI"
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-action-buttons", children: [
-                /* @__PURE__ */ jsxs("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
-                  /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-position", title: "Move panel", onClick: handlePositionButtonClick, children: /* @__PURE__ */ jsx3(PositionIcon, { position }) }),
-                  positionDropdownOpen && /* @__PURE__ */ jsx3("div", { className: "cli-panel-position-dropdown", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      className: `cli-panel-position-dropdown-item${position === pos ? " active" : ""}`,
-                      onClick: () => selectPosition(pos),
-                      children: [
-                        /* @__PURE__ */ jsx3(PositionIcon, { position: pos, size: 16 }),
-                        pos.charAt(0).toUpperCase() + pos.slice(1)
-                      ]
-                    },
-                    pos
-                  )) })
-                ] }),
-                hideable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-hide", title: "Hide", onClick: handleHide, children: /* @__PURE__ */ jsx3(HideIcon, {}) }),
-                /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: maximized ? "Restore" : "Maximize", disabled: collapsed, onClick: toggleMaximize, children: maximized ? /* @__PURE__ */ jsx3(RestoreIcon, {}) : /* @__PURE__ */ jsx3(MaximizeIcon, {}) }),
-                /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: collapsed ? "Expand" : "Collapse", onClick: toggle, children: /* @__PURE__ */ jsx3(CollapseChevron, { position, isCollapsed: collapsed }) }),
-                closable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-close", title: "Close", onClick: handleClose, children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
-              ] })
-            ] })
-          ] }),
-          initialized && /* @__PURE__ */ jsxs("div", { className: "cli-panel-content", style: collapsed ? { display: "none" } : void 0, children: [
+          /* @__PURE__ */ jsx3(PanelHeader, { controller, s }),
+          s.initialized && /* @__PURE__ */ jsxs("div", { className: "cli-panel-content", style: s.collapsed ? { display: "none" } : void 0, children: [
             /* @__PURE__ */ jsxs("div", { className: "cli-panel-tabs", children: [
-              /* @__PURE__ */ jsx3("ul", { className: "cli-panel-tab-list", children: tabs.map((tab) => /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx3("ul", { className: "cli-panel-tab-list", children: s.tabs.map((tab) => /* @__PURE__ */ jsx3(
                 "li",
                 {
-                  className: `cli-panel-tab ${tab.id === activeTabId ? "active" : ""}`,
-                  onClick: () => selectTab(tab.id),
-                  onDoubleClick: () => startRename(tab.id),
+                  className: panelTabClass(s, tab),
+                  onClick: () => controller.selectTab(tab.id),
+                  onDoubleClick: () => controller.startRename(tab.id),
                   onContextMenu: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, tabId: tab.id });
+                    controller.openContextMenu(tab.id, e.clientX, e.clientY);
                   },
                   children: tab.isEditing ? /* @__PURE__ */ jsx3(
                     "input",
@@ -622,57 +249,62 @@ function CliPanel({ options: optionsProp, modules: modulesProp, processors: proc
                       className: "cli-panel-tab-rename-input",
                       type: "text",
                       defaultValue: tab.title,
-                      autoFocus: true,
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter") commitRename(tab.id, e.target.value);
-                        else if (e.key === "Escape") setTabs((prev) => prev.map((t) => ({ ...t, isEditing: false })));
-                      },
-                      onBlur: (e) => commitRename(tab.id, e.target.value),
+                      ref: focusAndSelect,
+                      onKeyDown: (e) => handleRenameKey(controller, tab.id, e.key, e.currentTarget.value),
+                      onBlur: (e) => controller.commitRename(tab.id, e.target.value),
                       onClick: (e) => e.stopPropagation(),
                       onDoubleClick: (e) => e.stopPropagation()
                     }
                   ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    /* @__PURE__ */ jsx3("span", { className: panelTabDotClass(s, tab) }),
                     /* @__PURE__ */ jsx3("span", { className: "cli-panel-tab-title", children: tab.title }),
                     /* @__PURE__ */ jsx3(
                       "button",
                       {
                         className: "cli-panel-tab-close-btn",
-                        title: "Close tab",
+                        title: PANEL_LABELS.closeTab,
                         onClick: (e) => {
                           e.stopPropagation();
-                          closeTab(tab.id);
+                          controller.closeTab(tab.id);
                         },
-                        children: "\xD7"
+                        children: CLOSE_GLYPH
                       }
                     )
                   ] })
                 },
                 tab.id
               )) }),
-              /* @__PURE__ */ jsx3("button", { className: "cli-panel-add-tab", title: "New terminal", onClick: addTab, children: "+" })
+              /* @__PURE__ */ jsx3("button", { className: "cli-panel-add-tab", title: PANEL_LABELS.newTerminal, onClick: () => controller.addTab(), children: "+" })
             ] }),
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-instances", children: tabs.map((tab) => /* @__PURE__ */ jsx3("div", { className: "cli-panel-instance", style: { display: tab.id === activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ jsx3("div", { className: `cli-panel-panes-container ${paneResizing ? "resizing" : ""}`, children: tab.panes.map((pane, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-              i > 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider", onMouseDown: (e) => onPaneResizeStart(e, tab.id, i - 1), children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider-grip" }) }),
-              /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-instances", children: s.tabs.map((tab) => /* @__PURE__ */ jsx3("div", { className: "cli-panel-instance", style: { display: tab.id === s.activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ jsx3("div", { className: panesContainerClass(s), children: tab.panes.map((pane, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx3(
                 "div",
                 {
-                  className: `cli-panel-pane ${pane.id === activePaneId && tab.id === activeTabId ? "active-pane" : ""}`,
-                  style: { flex: `${pane.widthPercent} 1 0` },
-                  onClick: () => {
-                    setActivePaneId(pane.id);
-                    setActiveTabId(tab.id);
+                  className: "cli-panel-pane-divider",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    controller.startPaneResize(tab.id, i - 1, e.clientX, panesContainerWidth(e.target));
                   },
+                  children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider-grip" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: paneClass(s, tab.id, pane.id),
+                  style: paneStyle(pane.widthPercent),
+                  onClick: () => controller.activatePane(tab.id, pane.id),
                   children: [
                     tab.panes.length > 1 && /* @__PURE__ */ jsx3(
                       "button",
                       {
                         className: "cli-panel-pane-close-btn",
+                        title: PANEL_LABELS.closePane,
                         onClick: (e) => {
                           e.stopPropagation();
-                          closePane(tab.id, pane.id);
+                          controller.closePane(pane.id);
                         },
-                        title: "Close pane",
-                        children: "\xD7"
+                        children: CLOSE_GLYPH
                       }
                     ),
                     /* @__PURE__ */ jsx3(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ jsx3(
@@ -680,10 +312,9 @@ function CliPanel({ options: optionsProp, modules: modulesProp, processors: proc
                       {
                         options,
                         modules,
-                        processors,
                         services,
                         snapshot: pane.snapshot,
-                        onReady: (engine) => engineMapRef.current.set(pane.id, engine)
+                        onReady: (engine) => controller.registerEngine(tab.id, pane.id, engine)
                       }
                     ) })
                   ]
@@ -694,91 +325,134 @@ function CliPanel({ options: optionsProp, modules: modulesProp, processors: proc
         ]
       }
     ),
-    contextMenu.visible && /* @__PURE__ */ jsxs(
+    s.contextMenu.visible && /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu", style: asStyle(contextMenuStyle(s)), onClick: (e) => e.stopPropagation(), children: contextMenuItems(s).map((item) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: joinClasses("cli-panel-context-menu-item", item.destructive && "destructive"),
+          disabled: item.disabled,
+          onClick: () => runContextMenuAction(controller, item.action),
+          children: item.label
+        }
+      )
+    ] }, item.action)) }),
+    /* @__PURE__ */ jsx3(StatusDropdown, { s })
+  ] });
+});
+function StatusDropdown({ s }) {
+  const dropdown = openStatusDropdown(s);
+  if (!dropdown) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown", style: asStyle(dropdown.style), onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: dropdown.header }),
+    /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: dropdown.rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
+      /* @__PURE__ */ jsx3("span", { className: row.dotClass }),
+      /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: row.name }),
+        row.description && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: row.description })
+      ] }),
+      dropdown.kind === "servers" ? /* @__PURE__ */ jsxs("div", { className: "cli-panel-srv-meta", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: row.status }),
+        row.meta.map((m) => /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: m }, m))
+      ] }) : /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: row.status })
+    ] }, row.key)) }),
+    dropdown.rows.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: dropdown.emptyText })
+  ] });
+}
+function PanelHeader({ controller, s }) {
+  const indicators = statusIndicators(s);
+  const openDropdown = (e, dropdown) => {
+    if (!dropdown) return;
+    e.stopPropagation();
+    if (dropdown === "services") controller.toggleServicesDropdown(e.currentTarget);
+    else controller.toggleServersDropdown(e.currentTarget);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cli-panel-header", children: [
+    /* @__PURE__ */ jsx3(
       "div",
       {
-        className: "cli-panel-context-menu",
-        style: { left: contextMenu.x, top: contextMenu.y },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            startRename(contextMenu.tabId);
-          }, children: "Rename" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            const tab = tabs.find((t) => t.id === contextMenu.tabId);
-            if (!tab) return;
-            const sourceEngine = engineMapRef.current.get(tab.panes[0]?.id);
-            const snapshot = sourceEngine?.snapshot();
-            const paneId = nextIdRef.current.pane++;
-            const tabId = nextIdRef.current.tab++;
-            const pane = { id: paneId, widthPercent: 100, snapshot };
-            const newTab = { id: tabId, title: `${tab.title} (copy)`, isEditing: false, panes: [pane] };
-            const idx = tabs.indexOf(tab);
-            setTabs((prev) => {
-              const next = [...prev];
-              next.splice(idx + 1, 0, newTab);
-              return next;
-            });
-            setActiveTabId(tabId);
-            setActivePaneId(paneId);
-          }, children: "Duplicate" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            splitRight(contextMenu.tabId);
-          }, children: "Split Right" }),
-          /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            closeTab(contextMenu.tabId);
-          }, children: "Close" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", disabled: tabs.length <= 1, onClick: () => {
-            closeContextMenu();
-            setTabs((prev) => prev.filter((t) => t.id === contextMenu.tabId));
-            setActiveTabId(contextMenu.tabId);
-          }, children: "Close Others" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            const id = contextMenu.tabId;
-            closeContextMenu();
-            setTabs((prev) => {
-              const idx = prev.findIndex((t) => t.id === id);
-              if (idx === -1) return prev;
-              return prev.slice(0, idx + 1);
-            });
-          }, children: "Close to the Right" }),
-          /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
-          /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item destructive", onClick: () => {
-            closeContextMenu();
-            setTabs([]);
-            setInitialized(false);
-            setCollapsed(true);
-          }, children: "Close All" })
-        ]
+        className: "cli-panel-resize-bar",
+        onMouseDown: (e) => {
+          if (!s.resizable) return;
+          e.preventDefault();
+          controller.startPanelResize(e.clientX, e.clientY);
+        },
+        children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-grip" })
       }
-    )
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "cli-panel-header-content", children: [
+      /* @__PURE__ */ jsxs("p", { className: "cli-panel-title", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ jsx3(Icon, { icon: TERMINAL_ICON }) }),
+        PANEL_LABELS.title
+      ] }),
+      s.showStatusIndicators && /* @__PURE__ */ jsx3("div", { className: "cli-panel-status-indicators", children: indicators.map((item) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: joinClasses("cli-panel-status-item", item.itemClass),
+          onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0,
+          children: [
+            item.dotClass && /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${item.dotClass}` }),
+            item.icon && /* @__PURE__ */ jsx3("span", { className: joinClasses("cli-panel-status-icon", item.iconClass), children: item.icon }),
+            /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: item.label })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsx3("div", { className: "cli-panel-status-indicators-compact", children: indicators.map((item) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: joinClasses("cli-panel-status-compact-item", item.compactClass),
+          title: item.title,
+          onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0,
+          children: [
+            item.compactDotClass && /* @__PURE__ */ jsx3("span", { className: item.compactDotClass }),
+            item.dotClass && /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${item.dotClass}` }),
+            item.icon && /* @__PURE__ */ jsx3("span", { className: joinClasses("cli-panel-status-icon", item.iconClass), children: item.icon })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "cli-panel-action-buttons", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-position", title: PANEL_LABELS.movePanel, onClick: () => controller.togglePositionDropdown(), children: /* @__PURE__ */ jsx3(Icon, { icon: positionIcon(s.position) }) }),
+          s.positionDropdownOpen && /* @__PURE__ */ jsx3("div", { className: "cli-panel-position-dropdown", children: positionOptions(s).map((opt) => /* @__PURE__ */ jsxs("button", { className: opt.className, onClick: () => controller.setPosition(opt.position), children: [
+            /* @__PURE__ */ jsx3(Icon, { icon: positionIcon(opt.position, 16) }),
+            opt.label
+          ] }, opt.position)) })
+        ] }),
+        s.hideable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-hide", title: PANEL_LABELS.hide, onClick: () => controller.hide(), children: /* @__PURE__ */ jsx3(Icon, { icon: HIDE_ICON }) }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "cli-panel-btn",
+            title: s.maximized ? PANEL_LABELS.restore : PANEL_LABELS.maximize,
+            disabled: s.collapsed,
+            onClick: () => controller.toggleMaximize(),
+            children: /* @__PURE__ */ jsx3(Icon, { icon: s.maximized ? RESTORE_ICON : MAXIMIZE_ICON })
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: s.collapsed ? PANEL_LABELS.expand : PANEL_LABELS.collapse, onClick: () => controller.toggle(), children: /* @__PURE__ */ jsx3(Icon, { icon: collapseChevronIcon(s.position, s.collapsed) }) }),
+        s.closable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-close", title: PANEL_LABELS.close, onClick: () => controller.close(), children: /* @__PURE__ */ jsx3(Icon, { icon: CLOSE_ICON }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: glowLineClass(s) })
   ] });
 }
 
 // src/CliProvider.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef3 } from "react";
+import { resolveCliHostConfig as resolveCliHostConfig3 } from "@qodalis/cli";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function CliProvider({
   modules,
-  processors,
   options,
   services,
   children,
   style
 }) {
   const config = useCliConfig();
-  const containerRef = useRef4(null);
-  const engine = useCliEngine(containerRef, {
-    modules: modules ?? config.modules,
-    processors: processors ?? config.processors,
-    options: options ?? config.options,
-    services: services ?? config.services
-  });
+  const containerRef = useRef3(null);
+  const engine = useCliEngine(containerRef, resolveCliHostConfig3({ modules, options, services }, config));
   return /* @__PURE__ */ jsxs2(CliContext.Provider, { value: { engine }, children: [
     /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { height: "100%", ...style } }),
     children
@@ -786,12 +460,12 @@ function CliProvider({
 }
 
 // src/index.tsx
-import { CliEngine as CliEngine2 } from "@qodalis/cli";
+import { CliEngine as CliEngine4 } from "@qodalis/cli";
 export {
   Cli,
   CliConfigProvider,
   CliContext,
-  CliEngine2 as CliEngine,
+  CliEngine4 as CliEngine,
   CliPanel,
   CliProvider,
   useCli,