@qodalis/react-cli 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/index.mjs

@@ -0,0 +1,801 @@
+// src/Cli.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/CliContext.tsx
+import { createContext, useContext } from "react";
+var CliContext = createContext({ engine: null });
+function useCli() {
+  return useContext(CliContext);
+}
+
+// src/CliConfigContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var CliConfigCtx = createContext2({});
+function useCliConfig() {
+  return useContext2(CliConfigCtx);
+}
+function CliConfigProvider({
+  modules,
+  processors,
+  options,
+  services,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CliConfigCtx.Provider, { value: { modules, processors, options, services }, children });
+}
+
+// src/useCliEngine.ts
+import { useRef, useEffect, useState } from "react";
+import { CliEngine } from "@qodalis/cli";
+function useCliEngine(containerRef, config) {
+  const [engine, setEngine] = useState(null);
+  const engineRef = useRef(null);
+  const initTimerRef = useRef(null);
+  useEffect(() => {
+    if (config?.disabled || !containerRef.current) return;
+    const container = containerRef.current;
+    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);
+      }
+      engineRef.current = e;
+      e.start().then(() => setEngine(e));
+    }, 0);
+    return () => {
+      if (initTimerRef.current !== null) {
+        clearTimeout(initTimerRef.current);
+        initTimerRef.current = null;
+        return;
+      }
+      if (engineRef.current) {
+        engineRef.current.destroy();
+        engineRef.current = null;
+        setEngine(null);
+      }
+    };
+  }, []);
+  return engine;
+}
+
+// src/Cli.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function Cli({
+  modules,
+  processors,
+  options,
+  services,
+  snapshot,
+  onReady,
+  style,
+  className
+}) {
+  const ctx = useCli();
+  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,
+    disabled: hasProvider
+  });
+  const engine = ctx.engine ?? standaloneEngine;
+  useEffect2(() => {
+    if (engine && onReady) {
+      onReady(engine);
+    }
+  }, [engine, onReady]);
+  if (hasProvider) {
+    return /* @__PURE__ */ jsx2(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      style: { height: "100%", ...style },
+      className
+    }
+  );
+}
+
+// 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 { 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;
+  }
+  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 }) });
+}
+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 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;
+  }
+  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 }) {
+  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);
+      }
+      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 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;
+    });
+  }, [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
+  };
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    hidden && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "cli-panel-hide-tab",
+        "data-position": position,
+        "data-hide-align": hideAlignment,
+        style: themeStyles,
+        title: "Show CLI",
+        onClick: handleUnhide,
+        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__ */ 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__ */ 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__ */ jsxs("div", { className: "cli-panel-tabs", children: [
+              /* @__PURE__ */ jsx3("ul", { className: "cli-panel-tab-list", children: tabs.map((tab) => /* @__PURE__ */ jsx3(
+                "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__ */ jsx3(
+                    "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__ */ jsxs(Fragment2, { children: [
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-tab-title", children: tab.title }),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        className: "cli-panel-tab-close-btn",
+                        title: "Close tab",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          closeTab(tab.id);
+                        },
+                        children: "\xD7"
+                      }
+                    )
+                  ] })
+                },
+                tab.id
+              )) }),
+              /* @__PURE__ */ jsx3("button", { className: "cli-panel-add-tab", title: "New terminal", onClick: 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(
+                "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__ */ jsx3(
+                      "button",
+                      {
+                        className: "cli-panel-pane-close-btn",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          closePane(tab.id, pane.id);
+                        },
+                        title: "Close pane",
+                        children: "\xD7"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ jsx3(
+                      Cli,
+                      {
+                        options,
+                        modules,
+                        processors,
+                        services,
+                        snapshot: pane.snapshot,
+                        onReady: (engine) => engineMapRef.current.set(pane.id, engine)
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] }, pane.id)) }) }, tab.id)) })
+          ] })
+        ]
+      }
+    ),
+    contextMenu.visible && /* @__PURE__ */ jsxs(
+      "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" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/CliProvider.tsx
+import { useRef as useRef4 } from "react";
+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
+  });
+  return /* @__PURE__ */ jsxs2(CliContext.Provider, { value: { engine }, children: [
+    /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { height: "100%", ...style } }),
+    children
+  ] });
+}
+
+// src/index.tsx
+import { CliEngine as CliEngine2 } from "@qodalis/cli";
+export {
+  Cli,
+  CliConfigProvider,
+  CliContext,
+  CliEngine2 as CliEngine,
+  CliPanel,
+  CliProvider,
+  useCli,
+  useCliConfig,
+  useCliEngine
+};
+//# sourceMappingURL=index.mjs.map