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

package/dist/index.js

@@ -0,0 +1,974 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Cli: () => Cli,
+  CliConfigProvider: () => CliConfigProvider,
+  CliContext: () => CliContext,
+  CliEngine: () => import_cli2.CliEngine,
+  CliPanel: () => CliPanel,
+  CliProvider: () => CliProvider,
+  useCli: () => useCli,
+  useCliConfig: () => useCliConfig,
+  useCliEngine: () => useCliEngine
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Cli.tsx
+var import_react4 = require("react");
+
+// src/CliContext.tsx
+var import_react = require("react");
+var CliContext = (0, import_react.createContext)({ engine: null });
+function useCli() {
+  return (0, import_react.useContext)(CliContext);
+}
+
+// src/CliConfigContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CliConfigCtx = (0, import_react2.createContext)({});
+function useCliConfig() {
+  return (0, import_react2.useContext)(CliConfigCtx);
+}
+function CliConfigProvider({
+  modules,
+  processors,
+  options,
+  services,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CliConfigCtx.Provider, { value: { modules, processors, options, services }, children });
+}
+
+// src/useCliEngine.ts
+var import_react3 = require("react");
+var import_cli = require("@qodalis/cli");
+function useCliEngine(containerRef, config) {
+  const [engine, setEngine] = (0, import_react3.useState)(null);
+  const engineRef = (0, import_react3.useRef)(null);
+  const initTimerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (config?.disabled || !containerRef.current) return;
+    const container = containerRef.current;
+    initTimerRef.current = setTimeout(() => {
+      initTimerRef.current = null;
+      if (!container) return;
+      const e = new import_cli.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Cli({
+  modules,
+  processors,
+  options,
+  services,
+  snapshot,
+  onReady,
+  style,
+  className
+}) {
+  const ctx = useCli();
+  const config = useCliConfig();
+  const containerRef = (0, import_react4.useRef)(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;
+  (0, import_react4.useEffect)(() => {
+    if (engine && onReady) {
+      onReady(engine);
+    }
+  }, [engine, onReady]);
+  if (hasProvider) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      style: { height: "100%", ...style },
+      className
+    }
+  );
+}
+
+// src/CliPanel.tsx
+var import_react5 = __toESM(require("react"));
+var import_cli_core = require("@qodalis/cli-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MIN_PANE_WIDTH_PERCENT = 10;
+var TerminalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "22", height: "22", 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" })
+] });
+var MaximizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var RestoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var HideIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "5", y1: "18", x2: "19", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("polyline", { points }) });
+}
+function PositionIcon({ position, size = 20 }) {
+  let fillRect;
+  switch (position) {
+    case "top":
+      fillRect = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "4", y: "4", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    case "left":
+      fillRect = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "4", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    case "right":
+      fillRect = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "15", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    default:
+      fillRect = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "4", y: "15", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    fillRect
+  ] });
+}
+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;
+      });
+    }, []);
+    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);
+      }
+    }, [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);
+          updateCollapsed(true);
+          return [];
+        }
+        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 next;
+      });
+      props.onTabClosed?.({ tabId: id });
+    }, [updateCollapsed, updateActiveTabId, props.onTabClosed]);
+    const selectTab = (0, import_react5.useCallback)((id) => {
+      updateActiveTabId(id);
+      setTabs((prev) => {
+        const tab = prev.find((t) => t.id === id);
+        if (tab && tab.panes.length > 0) {
+          setActivePaneId(tab.panes[0].id);
+        }
+        return 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;
+          updateWidth(window.innerWidth);
+        } else {
+          prevHeightRef.current = panelHeight;
+          updateHeight(window.innerHeight);
+        }
+      } else {
+        if (isHorizontal) {
+          updateWidth(prevWidthRef.current);
+        } else {
+          updateHeight(prevHeightRef.current);
+        }
+      }
+      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"
+                ] }),
+                /* @__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
+                    )) })
+                  ] }),
+                  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)(
+                        "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");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CliProvider({
+  modules,
+  processors,
+  options,
+  services,
+  children,
+  style
+}) {
+  const config = useCliConfig();
+  const containerRef = (0, import_react6.useRef)(null);
+  const engine = useCliEngine(containerRef, {
+    modules: modules ?? config.modules,
+    processors: processors ?? config.processors,
+    options: options ?? config.options,
+    services: services ?? config.services
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(CliContext.Provider, { value: { engine }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { height: "100%", ...style } }),
+    children
+  ] });
+}
+
+// src/index.tsx
+var import_cli2 = require("@qodalis/cli");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Cli,
+  CliConfigProvider,
+  CliContext,
+  CliEngine,
+  CliPanel,
+  CliProvider,
+  useCli,
+  useCliConfig,
+  useCliEngine
+});
+//# sourceMappingURL=index.js.map