@qodalis/react-cli 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/index.js

@@ -247,562 +247,690 @@ function PositionIcon({ position, size = 20 }) {
     fillRect
   ] });
 }
-function CliPanel({ options: optionsProp, modules: modulesProp, processors: processorsProp, services: servicesProp, onClose, style, className }) {
-  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] = (0, import_react5.useState)(
-    () => (0, import_cli_core.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] = (0, import_react5.useState)(true);
-  const [collapsed, setCollapsed] = (0, import_react5.useState)(options?.isCollapsed ?? true);
-  const [maximized, setMaximized] = (0, import_react5.useState)(false);
-  const [panelHeight, setPanelHeight] = (0, import_react5.useState)(600);
-  const [panelWidth, setPanelWidth] = (0, import_react5.useState)(400);
-  const [initialized, setInitialized] = (0, import_react5.useState)(false);
-  const [hidden, setHidden] = (0, import_react5.useState)(options?.isHidden ?? false);
-  const preHideCollapsedRef = (0, import_react5.useRef)(true);
-  const [themeStyles, setThemeStyles] = (0, import_react5.useState)({});
-  const wrapperRef = (0, import_react5.useRef)(null);
-  const [tabs, setTabs] = (0, import_react5.useState)([]);
-  const [activeTabId, setActiveTabId] = (0, import_react5.useState)(0);
-  const [activePaneId, setActivePaneId] = (0, import_react5.useState)(0);
-  const nextIdRef = (0, import_react5.useRef)({ tab: 1, pane: 1 });
-  const [contextMenu, setContextMenu] = (0, import_react5.useState)({ visible: false, x: 0, y: 0, tabId: 0 });
-  const engineMapRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const [paneResizing, setPaneResizing] = (0, import_react5.useState)(false);
-  const paneResizeRef = (0, import_react5.useRef)({ tabId: 0, dividerIndex: 0, startX: 0, startWidths: [], containerWidth: 0 });
-  const [panelResizing, setPanelResizing] = (0, import_react5.useState)(false);
-  const panelResizeRef = (0, import_react5.useRef)({ startY: 0, startHeight: 0, startX: 0, startWidth: 0 });
-  const prevHeightRef = (0, import_react5.useRef)(600);
-  const prevWidthRef = (0, import_react5.useRef)(400);
-  const addTab = (0, import_react5.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 = (0, import_react5.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);
-      }
-      return next;
-    });
-  }, [initialized]);
-  const closeTab = (0, import_react5.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;
+var CliPanel = import_react5.default.forwardRef(
+  function CliPanel2(props, ref) {
+    const { options: optionsProp, modules: modulesProp, processors: processorsProp, services: servicesProp, onClose, style, className } = props;
+    const config = useCliConfig();
+    const options = optionsProp ?? config.options;
+    const modules = modulesProp ?? config.modules;
+    const processors = processorsProp ?? config.processors;
+    const services = servicesProp ?? config.services;
+    const [internalPosition, setInternalPosition] = (0, import_react5.useState)(
+      () => (0, import_cli_core.loadPanelPosition)() ?? options?.position ?? "bottom"
+    );
+    const [internalCollapsed, setInternalCollapsed] = (0, import_react5.useState)(options?.isCollapsed ?? true);
+    const [internalHidden, setInternalHidden] = (0, import_react5.useState)(options?.isHidden ?? false);
+    const [internalMaximized, setInternalMaximized] = (0, import_react5.useState)(false);
+    const [internalHeight, setInternalHeight] = (0, import_react5.useState)(600);
+    const [internalWidth, setInternalWidth] = (0, import_react5.useState)(400);
+    const [internalActiveTabId, setInternalActiveTabId] = (0, import_react5.useState)(0);
+    const position = props.position !== void 0 ? props.position : internalPosition;
+    const collapsed = props.collapsed !== void 0 ? props.collapsed : internalCollapsed;
+    const hidden = props.hidden !== void 0 ? props.hidden : internalHidden;
+    const maximized = props.maximized !== void 0 ? props.maximized : internalMaximized;
+    const panelHeight = props.height !== void 0 ? props.height : internalHeight;
+    const panelWidth = props.width !== void 0 ? props.width : internalWidth;
+    const activeTabId = props.activeTabId !== void 0 ? props.activeTabId : internalActiveTabId;
+    const updateCollapsed = (0, import_react5.useCallback)((value) => {
+      setInternalCollapsed(value);
+      props.onCollapsedChange?.(value);
+    }, [props.onCollapsedChange]);
+    const updateHidden = (0, import_react5.useCallback)((value) => {
+      setInternalHidden(value);
+      props.onHiddenChange?.(value);
+    }, [props.onHiddenChange]);
+    const updateMaximized = (0, import_react5.useCallback)((value) => {
+      setInternalMaximized(value);
+      props.onMaximizedChange?.(value);
+    }, [props.onMaximizedChange]);
+    const updateHeight = (0, import_react5.useCallback)((value) => {
+      setInternalHeight(value);
+      props.onHeightChange?.(value);
+    }, [props.onHeightChange]);
+    const updateWidth = (0, import_react5.useCallback)((value) => {
+      setInternalWidth(value);
+      props.onWidthChange?.(value);
+    }, [props.onWidthChange]);
+    const updateActiveTabId = (0, import_react5.useCallback)((value) => {
+      setInternalActiveTabId(value);
+      props.onActiveTabIdChange?.(value);
+    }, [props.onActiveTabIdChange]);
+    const updatePosition = (0, import_react5.useCallback)((value) => {
+      setInternalPosition(value);
+      (0, import_cli_core.savePanelPosition)(value);
+      props.onPositionChange?.(value);
+    }, [props.onPositionChange]);
+    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] = (0, import_react5.useState)(true);
+    const [initialized, setInitialized] = (0, import_react5.useState)(false);
+    const preHideCollapsedRef = (0, import_react5.useRef)(true);
+    const [themeStyles, setThemeStyles] = (0, import_react5.useState)({});
+    const wrapperRef = (0, import_react5.useRef)(null);
+    const [tabs, setTabs] = (0, import_react5.useState)([]);
+    const [activePaneId, setActivePaneId] = (0, import_react5.useState)(0);
+    const nextIdRef = (0, import_react5.useRef)({ tab: 1, pane: 1 });
+    const [contextMenu, setContextMenu] = (0, import_react5.useState)({ visible: false, x: 0, y: 0, tabId: 0 });
+    const engineMapRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+    const activeTabIdRef = (0, import_react5.useRef)(activeTabId);
+    activeTabIdRef.current = activeTabId;
+    const activePaneIdRef = (0, import_react5.useRef)(activePaneId);
+    activePaneIdRef.current = activePaneId;
+    const [paneResizing, setPaneResizing] = (0, import_react5.useState)(false);
+    const paneResizeRef = (0, import_react5.useRef)({ tabId: 0, dividerIndex: 0, startX: 0, startWidths: [], containerWidth: 0 });
+    const [panelResizing, setPanelResizing] = (0, import_react5.useState)(false);
+    const panelResizeRef = (0, import_react5.useRef)({ startY: 0, startHeight: 0, startX: 0, startWidth: 0 });
+    const prevHeightRef = (0, import_react5.useRef)(600);
+    const prevWidthRef = (0, import_react5.useRef)(400);
+    const normalizePanes = (0, import_react5.useCallback)((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;
       });
-      return next;
-    });
-  }, []);
-  const selectTab = (0, import_react5.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);
+    }, []);
+    const addTab = (0, import_react5.useCallback)((title) => {
+      const tabId = nextIdRef.current.tab++;
+      const paneId = nextIdRef.current.pane++;
+      const pane = { id: paneId, widthPercent: 100 };
+      const tab = { id: tabId, title: title ?? `Terminal ${tabId}`, isEditing: false, panes: [pane] };
+      setTabs((prev) => [...prev, tab]);
+      updateActiveTabId(tabId);
+      setActivePaneId(paneId);
+      props.onTabAdded?.({ tabId });
+      return tabId;
+    }, [updateActiveTabId, props.onTabAdded]);
+    const toggle = (0, import_react5.useCallback)(() => {
+      if (collapsed) {
+        updateCollapsed(false);
+        if (!initialized) {
+          setInitialized(true);
+          addTab();
+        }
+      } else {
+        updateCollapsed(true);
       }
-      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 splitRight = (0, import_react5.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;
-    });
-  }, [activeTabId, activePaneId]);
-  const closePane = (0, import_react5.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) {
+    }, [collapsed, initialized, updateCollapsed, addTab]);
+    const closeTab = (0, import_react5.useCallback)((id) => {
+      setTabs((prev) => {
+        const tab = prev.find((t) => t.id === id);
+        if (tab) {
+          tab.panes.forEach((p) => {
+            engineMapRef.current.get(p.id)?.destroy();
+            engineMapRef.current.delete(p.id);
+          });
+        }
+        const next = prev.filter((t) => t.id !== id);
+        if (next.length === 0) {
           setInitialized(false);
-          setCollapsed(true);
+          updateCollapsed(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;
+        if (activeTabIdRef.current === id) {
+          const oldIdx = prev.findIndex((t) => t.id === id);
+          const newIdx = Math.min(oldIdx, next.length - 1);
+          updateActiveTabId(next[newIdx].id);
         }
-        return curr;
+        return next;
       });
-      return next;
-    });
-  }, []);
-  const startRename = (0, import_react5.useCallback)((tabId) => {
-    setTabs((prev) => prev.map((t) => ({ ...t, isEditing: t.id === tabId })));
-  }, []);
-  const commitRename = (0, import_react5.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 = (0, import_react5.useCallback)(() => {
-    setContextMenu((prev) => ({ ...prev, visible: false }));
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    if (!contextMenu.visible) return;
-    const handler = () => closeContextMenu();
-    document.addEventListener("click", handler);
-    return () => document.removeEventListener("click", handler);
-  }, [contextMenu.visible, closeContextMenu]);
-  const onPanelResizeStart = (0, import_react5.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]);
-  (0, import_react5.useEffect)(() => {
-    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 = (0, import_react5.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]);
-  (0, import_react5.useEffect)(() => {
-    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;
-      }
+      props.onTabClosed?.({ tabId: id });
+    }, [updateCollapsed, updateActiveTabId, props.onTabClosed]);
+    const selectTab = (0, import_react5.useCallback)((id) => {
+      updateActiveTabId(id);
       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;
+        const tab = prev.find((t) => t.id === id);
+        if (tab && tab.panes.length > 0) {
+          setActivePaneId(tab.panes[0].id);
         }
-        return next;
+        return prev;
       });
-    };
-    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]);
-  (0, import_react5.useEffect)(() => {
-    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((0, import_cli_core.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 = (0, import_react5.useCallback)(() => {
-    setMaximized((prev) => {
-      if (!prev) {
+    }, [updateActiveTabId]);
+    const renameTab = (0, import_react5.useCallback)((tabId, title) => {
+      setTabs((prev) => prev.map((t) => t.id === tabId ? { ...t, title } : t));
+    }, []);
+    const startRename = (0, import_react5.useCallback)((tabId) => {
+      setTabs((prev) => prev.map((t) => ({ ...t, isEditing: t.id === tabId })));
+    }, []);
+    const commitRename = (0, import_react5.useCallback)((tabId, value) => {
+      const trimmed = value.trim();
+      setTabs((prev) => prev.map(
+        (t) => t.id === tabId ? { ...t, title: trimmed || t.title, isEditing: false } : t
+      ));
+    }, []);
+    const splitPane = (0, import_react5.useCallback)((tabId) => {
+      const targetTabId = tabId ?? activeTabIdRef.current;
+      const paneId = nextIdRef.current.pane++;
+      setTabs((prev) => prev.map((t) => {
+        if (t.id !== targetTabId) return t;
+        const newPanes = [...t.panes.map((p) => ({ ...p })), { id: paneId, widthPercent: 0 }];
+        normalizePanes(newPanes);
+        return { ...t, panes: newPanes };
+      }));
+      setActivePaneId(paneId);
+      props.onPaneSplit?.({ paneId, tabId: targetTabId });
+      return paneId;
+    }, [normalizePanes, props.onPaneSplit]);
+    const closePane = (0, import_react5.useCallback)((paneId) => {
+      setTabs((prev) => {
+        for (let i = 0; i < prev.length; i++) {
+          const tab = prev[i];
+          const idx = tab.panes.findIndex((p) => p.id === paneId);
+          if (idx === -1) continue;
+          if (tab.panes.length <= 1) {
+            setTimeout(() => closeTab(tab.id), 0);
+            return prev;
+          }
+          const newPanes = tab.panes.filter((p) => p.id !== paneId);
+          normalizePanes(newPanes);
+          const newTabs = [...prev];
+          newTabs[i] = { ...tab, panes: newPanes };
+          engineMapRef.current.get(paneId)?.destroy();
+          engineMapRef.current.delete(paneId);
+          if (activePaneIdRef.current === paneId) {
+            setActivePaneId(newPanes[Math.min(idx, newPanes.length - 1)].id);
+          }
+          props.onPaneClosed?.({ paneId });
+          return newTabs;
+        }
+        return prev;
+      });
+    }, [closeTab, normalizePanes, props.onPaneClosed]);
+    const closeContextMenu = (0, import_react5.useCallback)(() => {
+      setContextMenu((prev) => ({ ...prev, visible: false }));
+    }, []);
+    (0, import_react5.useEffect)(() => {
+      if (!contextMenu.visible) return;
+      const handler = () => closeContextMenu();
+      document.addEventListener("click", handler);
+      return () => document.removeEventListener("click", handler);
+    }, [contextMenu.visible, closeContextMenu]);
+    const onPanelResizeStart = (0, import_react5.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]);
+    (0, import_react5.useEffect)(() => {
+      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;
+          updateWidth(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;
+          updateHeight(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, updateWidth, updateHeight]);
+    const onPaneResizeStart = (0, import_react5.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]);
+    (0, import_react5.useEffect)(() => {
+      if (!paneResizing) return;
+      const onMove = (e) => {
+        const ref2 = paneResizeRef.current;
+        const deltaX = e.clientX - ref2.startX;
+        const deltaPct = deltaX / ref2.containerWidth * 100;
+        const i = ref2.dividerIndex;
+        let leftWidth = ref2.startWidths[i] + deltaPct;
+        let rightWidth = ref2.startWidths[i + 1] - deltaPct;
+        if (leftWidth < MIN_PANE_WIDTH_PERCENT) {
+          leftWidth = MIN_PANE_WIDTH_PERCENT;
+          rightWidth = ref2.startWidths[i] + ref2.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
+        }
+        if (rightWidth < MIN_PANE_WIDTH_PERCENT) {
+          rightWidth = MIN_PANE_WIDTH_PERCENT;
+          leftWidth = ref2.startWidths[i] + ref2.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 === ref2.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]);
+    (0, import_react5.useEffect)(() => {
+      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((0, import_cli_core.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 = (0, import_react5.useCallback)(() => {
+      const nextMaximized = !maximized;
+      if (nextMaximized) {
         if (isHorizontal) {
           prevWidthRef.current = panelWidth;
-          setPanelWidth(window.innerWidth);
+          updateWidth(window.innerWidth);
         } else {
           prevHeightRef.current = panelHeight;
-          setPanelHeight(window.innerHeight);
+          updateHeight(window.innerHeight);
         }
       } else {
         if (isHorizontal) {
-          setPanelWidth(prevWidthRef.current);
+          updateWidth(prevWidthRef.current);
         } else {
-          setPanelHeight(prevHeightRef.current);
+          updateHeight(prevHeightRef.current);
         }
       }
-      return !prev;
-    });
-  }, [panelHeight, panelWidth, isHorizontal]);
-  const handleClose = (0, import_react5.useCallback)(() => {
-    setVisible(false);
-    onClose?.();
-  }, [onClose]);
-  const handleHide = (0, import_react5.useCallback)(() => {
-    preHideCollapsedRef.current = collapsed;
-    setHidden(true);
-  }, [collapsed]);
-  const handleUnhide = (0, import_react5.useCallback)(() => {
-    setHidden(false);
-    setCollapsed(preHideCollapsedRef.current);
-  }, []);
-  const [positionDropdownOpen, setPositionDropdownOpen] = (0, import_react5.useState)(false);
-  const closePositionDropdown = (0, import_react5.useCallback)(() => setPositionDropdownOpen(false), []);
-  (0, import_react5.useEffect)(() => {
-    if (!positionDropdownOpen) return;
-    document.addEventListener("click", closePositionDropdown);
-    return () => document.removeEventListener("click", closePositionDropdown);
-  }, [positionDropdownOpen, closePositionDropdown]);
-  const handlePositionButtonClick = (0, import_react5.useCallback)((e) => {
-    e.stopPropagation();
-    setPositionDropdownOpen((prev) => !prev);
-  }, []);
-  const selectPosition = (0, import_react5.useCallback)((pos) => {
-    setPositionDropdownOpen(false);
-    setPosition(pos);
-    (0, import_cli_core.savePanelPosition)(pos);
-  }, []);
-  if (!visible) return null;
-  const wrapperStyle = {
-    ...isHorizontal ? { width: `${panelWidth}px` } : { height: `${panelHeight}px` },
-    ...hidden ? { display: "none" } : {},
-    ...themeStyles,
-    ...style
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    hidden && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
-      {
-        className: "cli-panel-hide-tab",
-        "data-position": position,
-        "data-hide-align": hideAlignment,
-        style: themeStyles,
-        title: "Show CLI",
-        onClick: handleUnhide,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "4 17 10 11 4 5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-hide-tab-label", children: "CLI" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HideTabChevron, { position })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.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),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-resize-bar", onMouseDown: onPanelResizeStart, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-resize-grip" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-header-content", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "cli-panel-title", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TerminalIcon, {}) }),
-                "CLI"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-action-buttons", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-position", title: "Move panel", onClick: handlePositionButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PositionIcon, { position }) }),
-                  positionDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-position-dropdown", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                    "button",
-                    {
-                      className: `cli-panel-position-dropdown-item${position === pos ? " active" : ""}`,
-                      onClick: () => selectPosition(pos),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PositionIcon, { position: pos, size: 16 }),
-                        pos.charAt(0).toUpperCase() + pos.slice(1)
-                      ]
-                    },
-                    pos
-                  )) })
+      updateMaximized(nextMaximized);
+    }, [maximized, panelHeight, panelWidth, isHorizontal, updateMaximized, updateWidth, updateHeight]);
+    const handleClose = (0, import_react5.useCallback)(() => {
+      setVisible(false);
+      onClose?.();
+    }, [onClose]);
+    const handleHide = (0, import_react5.useCallback)(() => {
+      preHideCollapsedRef.current = collapsed;
+      updateHidden(true);
+    }, [collapsed, updateHidden]);
+    const handleUnhide = (0, import_react5.useCallback)(() => {
+      updateHidden(false);
+      updateCollapsed(preHideCollapsedRef.current);
+    }, [updateHidden, updateCollapsed]);
+    const [positionDropdownOpen, setPositionDropdownOpen] = (0, import_react5.useState)(false);
+    const closePositionDropdown = (0, import_react5.useCallback)(() => setPositionDropdownOpen(false), []);
+    (0, import_react5.useEffect)(() => {
+      if (!positionDropdownOpen) return;
+      document.addEventListener("click", closePositionDropdown);
+      return () => document.removeEventListener("click", closePositionDropdown);
+    }, [positionDropdownOpen, closePositionDropdown]);
+    const handlePositionButtonClick = (0, import_react5.useCallback)((e) => {
+      e.stopPropagation();
+      setPositionDropdownOpen((prev) => !prev);
+    }, []);
+    const selectPosition = (0, import_react5.useCallback)((pos) => {
+      setPositionDropdownOpen(false);
+      updatePosition(pos);
+    }, [updatePosition]);
+    const getEngine = (0, import_react5.useCallback)((paneId) => {
+      const targetId = paneId ?? activePaneIdRef.current;
+      return engineMapRef.current.get(targetId);
+    }, []);
+    const getState = (0, import_react5.useCallback)(() => ({
+      collapsed,
+      hidden,
+      maximized,
+      position,
+      height: panelHeight,
+      width: panelWidth,
+      activeTabId,
+      activePaneId,
+      tabs: tabs.map((t) => ({
+        id: t.id,
+        title: t.title,
+        panes: t.panes.map((p) => ({ id: p.id, widthPercent: p.widthPercent }))
+      }))
+    }), [collapsed, hidden, maximized, position, panelHeight, panelWidth, activeTabId, activePaneId, tabs]);
+    import_react5.default.useImperativeHandle(ref, () => ({
+      open: () => {
+        if (!visible) {
+          setVisible(true);
+        }
+        if (hidden) {
+          updateHidden(false);
+        }
+        if (collapsed) {
+          updateCollapsed(false);
+          if (!initialized) {
+            setInitialized(true);
+            addTab();
+          }
+        }
+      },
+      collapse: () => {
+        if (!collapsed) updateCollapsed(true);
+      },
+      toggleCollapse: () => {
+        if (collapsed) {
+          updateCollapsed(false);
+          if (!initialized) {
+            setInitialized(true);
+            addTab();
+          }
+        } else {
+          updateCollapsed(true);
+        }
+      },
+      hide: () => {
+        if (!hidden) updateHidden(true);
+      },
+      unhide: () => {
+        if (hidden) updateHidden(false);
+      },
+      toggleHide: () => {
+        updateHidden(!hidden);
+      },
+      close: handleClose,
+      maximize: () => {
+        if (!maximized) updateMaximized(true);
+      },
+      restore: () => {
+        if (maximized) updateMaximized(false);
+      },
+      toggleMaximize: () => {
+        updateMaximized(!maximized);
+      },
+      resize: (dims) => {
+        if (dims.height !== void 0) updateHeight(dims.height);
+        if (dims.width !== void 0) updateWidth(dims.width);
+      },
+      setPosition: updatePosition,
+      addTab,
+      closeTab,
+      selectTab,
+      renameTab,
+      splitPane,
+      closePane,
+      getEngine,
+      getState
+    }), [
+      collapsed,
+      hidden,
+      maximized,
+      initialized,
+      updateCollapsed,
+      updateHidden,
+      updateMaximized,
+      updateHeight,
+      updateWidth,
+      updatePosition,
+      handleClose,
+      addTab,
+      closeTab,
+      selectTab,
+      renameTab,
+      splitPane,
+      closePane,
+      getEngine,
+      getState
+    ]);
+    if (!visible) return null;
+    const wrapperStyle = {
+      ...isHorizontal ? { width: `${panelWidth}px` } : { height: `${panelHeight}px` },
+      ...hidden ? { display: "none" } : {},
+      ...themeStyles,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      hidden && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          className: "cli-panel-hide-tab",
+          "data-position": position,
+          "data-hide-align": hideAlignment,
+          style: themeStyles,
+          title: "Show CLI",
+          onClick: handleUnhide,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "4 17 10 11 4 5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-hide-tab-label", children: "CLI" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HideTabChevron, { position })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.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),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-resize-bar", onMouseDown: onPanelResizeStart, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-resize-grip" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-header-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "cli-panel-title", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TerminalIcon, {}) }),
+                  "CLI"
                 ] }),
-                hideable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-hide", title: "Hide", onClick: handleHide, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HideIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn", title: maximized ? "Restore" : "Maximize", disabled: collapsed, onClick: toggleMaximize, children: maximized ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MaximizeIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn", title: collapsed ? "Expand" : "Collapse", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapseChevron, { position, isCollapsed: collapsed }) }),
-                closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-close", title: "Close", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {}) })
-              ] })
-            ] })
-          ] }),
-          initialized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-content", style: collapsed ? { display: "none" } : void 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-tabs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "cli-panel-tab-list", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "li",
-                {
-                  className: `cli-panel-tab ${tab.id === activeTabId ? "active" : ""}`,
-                  onClick: () => selectTab(tab.id),
-                  onDoubleClick: () => startRename(tab.id),
-                  onContextMenu: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, tabId: tab.id });
-                  },
-                  children: tab.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "input",
-                    {
-                      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),
-                      onClick: (e) => e.stopPropagation(),
-                      onDoubleClick: (e) => e.stopPropagation()
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-tab-title", children: tab.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-action-buttons", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-position", title: "Move panel", onClick: handlePositionButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PositionIcon, { position }) }),
+                    positionDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-position-dropdown", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                       "button",
                       {
-                        className: "cli-panel-tab-close-btn",
-                        title: "Close tab",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          closeTab(tab.id);
-                        },
-                        children: "\xD7"
-                      }
-                    )
-                  ] })
-                },
-                tab.id
-              )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-add-tab", title: "New terminal", onClick: addTab, children: "+" })
+                        className: `cli-panel-position-dropdown-item${position === pos ? " active" : ""}`,
+                        onClick: () => selectPosition(pos),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PositionIcon, { position: pos, size: 16 }),
+                          pos.charAt(0).toUpperCase() + pos.slice(1)
+                        ]
+                      },
+                      pos
+                    )) })
+                  ] }),
+                  hideable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-hide", title: "Hide", onClick: handleHide, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HideIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn", title: maximized ? "Restore" : "Maximize", disabled: collapsed, onClick: toggleMaximize, children: maximized ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MaximizeIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn", title: collapsed ? "Expand" : "Collapse", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapseChevron, { position, isCollapsed: collapsed }) }),
+                  closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-btn cli-panel-btn-close", title: "Close", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {}) })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-instances", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-instance", style: { display: tab.id === activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `cli-panel-panes-container ${paneResizing ? "resizing" : ""}`, children: tab.panes.map((pane, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.default.Fragment, { children: [
-              i > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-pane-divider", onMouseDown: (e) => onPaneResizeStart(e, tab.id, i - 1), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-pane-divider-grip" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                "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);
-                  },
-                  children: [
-                    tab.panes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "button",
+            initialized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-content", style: collapsed ? { display: "none" } : void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cli-panel-tabs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "cli-panel-tab-list", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "li",
+                  {
+                    className: `cli-panel-tab ${tab.id === activeTabId ? "active" : ""}`,
+                    onClick: () => selectTab(tab.id),
+                    onDoubleClick: () => startRename(tab.id),
+                    onContextMenu: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setContextMenu({ visible: true, x: e.clientX, y: e.clientY, tabId: tab.id });
+                    },
+                    children: tab.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "input",
                       {
-                        className: "cli-panel-pane-close-btn",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          closePane(tab.id, pane.id);
+                        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 })));
                         },
-                        title: "Close pane",
-                        children: "\xD7"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      Cli,
-                      {
-                        options,
-                        modules,
-                        processors,
-                        services,
-                        snapshot: pane.snapshot,
-                        onReady: (engine) => engineMapRef.current.set(pane.id, engine)
+                        onBlur: (e) => commitRename(tab.id, e.target.value),
+                        onClick: (e) => e.stopPropagation(),
+                        onDoubleClick: (e) => e.stopPropagation()
                       }
-                    ) })
-                  ]
-                }
-              )
-            ] }, pane.id)) }) }, tab.id)) })
-          ] })
-        ]
-      }
-    ),
-    contextMenu.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: "cli-panel-context-menu",
-        style: { left: contextMenu.x, top: contextMenu.y },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            startRename(contextMenu.tabId);
-          }, children: "Rename" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            splitRight(contextMenu.tabId);
-          }, children: "Split Right" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-context-menu-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
-            closeContextMenu();
-            closeTab(contextMenu.tabId);
-          }, children: "Close" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-context-menu-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item destructive", onClick: () => {
-            closeContextMenu();
-            setTabs([]);
-            setInitialized(false);
-            setCollapsed(true);
-          }, children: "Close All" })
-        ]
-      }
-    )
-  ] });
-}
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cli-panel-tab-title", children: tab.title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: "cli-panel-tab-close-btn",
+                          title: "Close tab",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            closeTab(tab.id);
+                          },
+                          children: "\xD7"
+                        }
+                      )
+                    ] })
+                  },
+                  tab.id
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-add-tab", title: "New terminal", onClick: () => addTab(), children: "+" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-instances", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-instance", style: { display: tab.id === activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `cli-panel-panes-container ${paneResizing ? "resizing" : ""}`, children: tab.panes.map((pane, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.default.Fragment, { children: [
+                i > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-pane-divider", onMouseDown: (e) => onPaneResizeStart(e, tab.id, i - 1), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-pane-divider-grip" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `cli-panel-pane ${pane.id === activePaneId && tab.id === activeTabId ? "active-pane" : ""}`,
+                    style: { flex: `${pane.widthPercent} 1 0` },
+                    onClick: () => {
+                      setActivePaneId(pane.id);
+                      updateActiveTabId(tab.id);
+                    },
+                    children: [
+                      tab.panes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: "cli-panel-pane-close-btn",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            closePane(pane.id);
+                          },
+                          title: "Close pane",
+                          children: "\xD7"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        Cli,
+                        {
+                          options,
+                          modules,
+                          processors,
+                          services,
+                          snapshot: pane.snapshot,
+                          onReady: (engine) => engineMapRef.current.set(pane.id, engine)
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ] }, pane.id)) }) }, tab.id)) })
+            ] })
+          ]
+        }
+      ),
+      contextMenu.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: "cli-panel-context-menu",
+          style: { left: contextMenu.x, top: contextMenu.y },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
+              closeContextMenu();
+              startRename(contextMenu.tabId);
+            }, children: "Rename" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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;
+              });
+              updateActiveTabId(tabId);
+              setActivePaneId(paneId);
+              props.onTabAdded?.({ tabId });
+            }, children: "Duplicate" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
+              closeContextMenu();
+              splitPane(contextMenu.tabId);
+            }, children: "Split Right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-context-menu-separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", onClick: () => {
+              closeContextMenu();
+              closeTab(contextMenu.tabId);
+            }, children: "Close" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item", disabled: tabs.length <= 1, onClick: () => {
+              closeContextMenu();
+              setTabs((prev) => prev.filter((t) => t.id === contextMenu.tabId));
+              updateActiveTabId(contextMenu.tabId);
+            }, children: "Close Others" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cli-panel-context-menu-separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cli-panel-context-menu-item destructive", onClick: () => {
+              closeContextMenu();
+              setTabs([]);
+              setInitialized(false);
+              updateCollapsed(true);
+            }, children: "Close All" })
+          ]
+        }
+      )
+    ] });
+  }
+);
 
 // src/CliProvider.tsx
 var import_react6 = require("react");