@qodalis/vue-cli 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/index.mjs

@@ -0,0 +1,1116 @@
+// src/Cli.ts
+import {
+  defineComponent as defineComponent2,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  inject
+} from "vue";
+import { CliEngine } from "@qodalis/cli";
+
+// src/cliInjection.ts
+var CliInjectionKey = /* @__PURE__ */ Symbol("qodalis-cli");
+
+// src/CliConfigProvider.ts
+import { defineComponent, provide } from "vue";
+var CliConfigKey = /* @__PURE__ */ Symbol("qodalis-cli-config");
+var CliConfigProvider = defineComponent({
+  name: "CliConfigProvider",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    provide(CliConfigKey, {
+      modules: props.modules,
+      processors: props.processors,
+      options: props.options,
+      services: props.services
+    });
+    return () => slots.default?.();
+  }
+});
+
+// src/Cli.ts
+var Cli = defineComponent2({
+  name: "Cli",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    },
+    snapshot: {
+      type: Object,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["ready"],
+  setup(props, { emit }) {
+    const containerRef = ref(null);
+    const ctx = inject(CliInjectionKey, null);
+    const config = inject(CliConfigKey, null);
+    let engine = null;
+    if (ctx) {
+      return () => null;
+    }
+    const modules = props.modules ?? config?.modules;
+    const processors = props.processors ?? config?.processors;
+    const options = props.options ?? config?.options;
+    const services = props.services ?? config?.services;
+    onMounted(async () => {
+      if (!containerRef.value) return;
+      const engineOptions = props.snapshot ? { ...options, snapshot: props.snapshot } : options;
+      engine = new CliEngine(containerRef.value, engineOptions);
+      engine.registerService("cli-framework", "Vue");
+      if (services) {
+        for (const [token, value] of Object.entries(services)) {
+          engine.registerService(token, value);
+        }
+      }
+      if (modules) {
+        engine.registerModules(modules);
+      }
+      if (processors) {
+        engine.registerProcessors(processors);
+      }
+      await engine.start();
+      emit("ready", engine);
+    });
+    onBeforeUnmount(() => {
+      engine?.destroy();
+      engine = null;
+    });
+    return () => h("div", {
+      ref: containerRef,
+      style: { height: "100%", ...props.style },
+      class: props.class
+    });
+  }
+});
+
+// src/CliPanel.ts
+import {
+  defineComponent as defineComponent3,
+  ref as ref2,
+  computed,
+  inject as inject2,
+  h as h2,
+  onMounted as onMounted2,
+  onBeforeUnmount as onBeforeUnmount2
+} from "vue";
+import { derivePanelThemeStyles, loadPanelPosition, savePanelPosition } from "@qodalis/cli-core";
+var MIN_PANE_WIDTH_PERCENT = 10;
+function 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;
+  });
+}
+var svgAttrs = {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "1.8",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var terminalIcon = () => h2("svg", { ...svgAttrs, width: "22", height: "22", "stroke-width": "2" }, [
+  h2("polyline", { points: "4 17 10 11 4 5" }),
+  h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+]);
+var maximizeIcon = () => h2("svg", svgAttrs, [
+  h2("polyline", { points: "15 3 21 3 21 9" }),
+  h2("polyline", { points: "9 21 3 21 3 15" }),
+  h2("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  h2("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+]);
+var restoreIcon = () => h2("svg", svgAttrs, [
+  h2("polyline", { points: "4 14 10 14 10 20" }),
+  h2("polyline", { points: "20 10 14 10 14 4" }),
+  h2("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  h2("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+]);
+var closeIcon = () => h2("svg", svgAttrs, [
+  h2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  h2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+]);
+var hideIcon = () => h2("svg", svgAttrs, [
+  h2("line", { x1: "5", y1: "18", x2: "19", y2: "18" }),
+  h2("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 h2("svg", svgAttrs, [h2("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 h2("svg", { class: "cli-panel-hide-tab-arrow", ...svgAttrs, width: "14", height: "14", "stroke-width": "2.5" }, [
+    h2("polyline", { points })
+  ]);
+}
+function positionIcon(pos, size = 20) {
+  let fillRect;
+  switch (pos) {
+    case "top":
+      fillRect = h2("rect", { x: "4", y: "4", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    case "left":
+      fillRect = h2("rect", { x: "4", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    case "right":
+      fillRect = h2("rect", { x: "15", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+    default:
+      fillRect = h2("rect", { x: "4", y: "15", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
+      break;
+  }
+  return h2("svg", { ...svgAttrs, width: String(size), height: String(size) }, [
+    h2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    fillRect
+  ]);
+}
+var CliPanel = defineComponent3({
+  name: "CliPanel",
+  props: {
+    options: {
+      type: Object,
+      default: void 0
+    },
+    modules: { type: Array, default: void 0 },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    },
+    onClose: {
+      type: Function,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    class: { type: String, default: void 0 }
+  },
+  setup(props) {
+    const config = inject2(CliConfigKey, null);
+    const mergedOptions = computed(() => props.options ?? config?.options);
+    const mergedModules = computed(() => props.modules ?? config?.modules);
+    const mergedProcessors = computed(() => props.processors ?? config?.processors);
+    const mergedServices = computed(() => props.services ?? config?.services);
+    const visible = ref2(true);
+    const collapsed = ref2(mergedOptions.value?.isCollapsed ?? true);
+    const maximized = ref2(false);
+    const panelHeight = ref2(600);
+    const panelWidth = ref2(400);
+    const prevHeight = ref2(600);
+    const prevWidth = ref2(400);
+    const initialized = ref2(false);
+    const hidden = ref2(props.options?.isHidden ?? false);
+    let preHideCollapsed = true;
+    const position = ref2(loadPanelPosition() ?? mergedOptions.value?.position ?? "bottom");
+    const closable = computed(() => mergedOptions.value?.closable ?? true);
+    const resizable = computed(() => mergedOptions.value?.resizable ?? true);
+    const isHorizontal = computed(() => position.value === "left" || position.value === "right");
+    const hideable = computed(() => mergedOptions.value?.hideable ?? true);
+    const hideAlignment = computed(() => mergedOptions.value?.hideAlignment ?? "center");
+    const syncTheme = computed(() => mergedOptions.value?.syncTheme ?? false);
+    const themeStyles = ref2({});
+    const tabs = ref2([]);
+    const activeTabId = ref2(0);
+    const activePaneId = ref2(0);
+    let nextTabId = 1;
+    let nextPaneId = 1;
+    const contextMenu = ref2({
+      visible: false,
+      x: 0,
+      y: 0,
+      tabId: 0
+    });
+    const engineMap = /* @__PURE__ */ new Map();
+    const paneResizing = ref2(false);
+    let paneResizeState = {
+      tabId: 0,
+      dividerIndex: 0,
+      startX: 0,
+      startWidths: [],
+      containerWidth: 0
+    };
+    const panelResizing = ref2(false);
+    let panelResizeState = { startY: 0, startHeight: 0, startX: 0, startWidth: 0 };
+    function addTab() {
+      const paneId = nextPaneId++;
+      const tabId = nextTabId++;
+      const pane = { id: paneId, widthPercent: 100 };
+      const tab = {
+        id: tabId,
+        title: `Terminal ${tabId}`,
+        isEditing: false,
+        panes: [pane]
+      };
+      tabs.value.push(tab);
+      activeTabId.value = tabId;
+      activePaneId.value = paneId;
+    }
+    let themeObserver;
+    function syncThemeFromEngine() {
+      const engine = engineMap.values().next().value;
+      if (!engine) return;
+      const theme = engine.getTerminal().options.theme;
+      if (theme) themeStyles.value = derivePanelThemeStyles(theme);
+    }
+    function setupThemeSync() {
+      if (!syncTheme.value) return;
+      setTimeout(() => {
+        syncThemeFromEngine();
+        const container = document.querySelector(".cli-panel-wrapper .terminal-container");
+        if (!container) return;
+        themeObserver?.disconnect();
+        themeObserver = new MutationObserver(syncThemeFromEngine);
+        themeObserver.observe(container, { attributes: true, attributeFilter: ["style"] });
+      }, 200);
+    }
+    onMounted2(() => {
+      document.addEventListener("click", closePositionDropdown);
+    });
+    onBeforeUnmount2(() => {
+      themeObserver?.disconnect();
+      document.removeEventListener("click", closePositionDropdown);
+    });
+    function toggle() {
+      collapsed.value = !collapsed.value;
+      if (!collapsed.value && !initialized.value) {
+        initialized.value = true;
+        addTab();
+        setupThemeSync();
+      }
+    }
+    function closeTab(id) {
+      const idx = tabs.value.findIndex((t) => t.id === id);
+      if (idx === -1) return;
+      tabs.value.splice(idx, 1);
+      if (tabs.value.length === 0) {
+        initialized.value = false;
+        collapsed.value = true;
+        return;
+      }
+      if (activeTabId.value === id) {
+        const newIdx = Math.min(idx, tabs.value.length - 1);
+        selectTab(tabs.value[newIdx].id);
+      }
+    }
+    function selectTab(id) {
+      activeTabId.value = id;
+      const tab = tabs.value.find((t) => t.id === id);
+      if (tab && tab.panes.length > 0) {
+        activePaneId.value = tab.panes[0].id;
+      }
+    }
+    function splitRight(tabId) {
+      const tab = tabs.value.find(
+        (t) => t.id === (tabId ?? activeTabId.value)
+      );
+      if (!tab) return;
+      const idx = tab.panes.findIndex((p) => p.id === activePaneId.value);
+      const insertIdx = idx === -1 ? tab.panes.length : idx + 1;
+      const newPaneId = nextPaneId++;
+      tab.panes.splice(insertIdx, 0, { id: newPaneId, widthPercent: 0 });
+      const evenWidth = 100 / tab.panes.length;
+      tab.panes.forEach((p) => {
+        p.widthPercent = evenWidth;
+      });
+      normalizePanes(tab.panes);
+      activePaneId.value = newPaneId;
+    }
+    function closePane(tabId, paneId) {
+      const tab = tabs.value.find((t) => t.id === tabId);
+      if (!tab) return;
+      if (tab.panes.length <= 1) {
+        closeTab(tabId);
+        return;
+      }
+      const idx = tab.panes.findIndex((p) => p.id === paneId);
+      if (idx === -1) return;
+      tab.panes.splice(idx, 1);
+      const total = tab.panes.reduce((s, p) => s + p.widthPercent, 0);
+      if (total > 0)
+        tab.panes.forEach((p) => {
+          p.widthPercent = p.widthPercent / total * 100;
+        });
+      normalizePanes(tab.panes);
+      if (activePaneId.value === paneId) {
+        activePaneId.value = tab.panes[Math.min(idx, tab.panes.length - 1)].id;
+      }
+    }
+    function startRename(tabId) {
+      tabs.value.forEach((t) => {
+        t.isEditing = t.id === tabId;
+      });
+    }
+    function commitRename(tabId, value) {
+      const trimmed = value.trim();
+      const tab = tabs.value.find((t) => t.id === tabId);
+      if (tab) {
+        if (trimmed) tab.title = trimmed;
+        tab.isEditing = false;
+      }
+    }
+    function closeContextMenu() {
+      contextMenu.value = { ...contextMenu.value, visible: false };
+    }
+    function onDocClick() {
+      if (contextMenu.value.visible) closeContextMenu();
+    }
+    onMounted2(() => document.addEventListener("click", onDocClick));
+    onBeforeUnmount2(
+      () => document.removeEventListener("click", onDocClick)
+    );
+    function onPanelResizeStart(e) {
+      if (!resizable.value) return;
+      e.preventDefault();
+      if (collapsed.value) toggle();
+      panelResizing.value = true;
+      panelResizeState = {
+        startY: e.clientY,
+        startHeight: panelHeight.value,
+        startX: e.clientX,
+        startWidth: panelWidth.value
+      };
+    }
+    function onPanelResizeMove(e) {
+      if (!panelResizing.value) return;
+      if (isHorizontal.value) {
+        const deltaX = position.value === "left" ? e.clientX - panelResizeState.startX : panelResizeState.startX - e.clientX;
+        let next = Math.max(100, panelResizeState.startWidth + deltaX);
+        if (next > window.innerWidth) next = window.innerWidth;
+        panelWidth.value = next;
+      } else {
+        const deltaY = position.value === "top" ? e.clientY - panelResizeState.startY : panelResizeState.startY - e.clientY;
+        let next = Math.max(100, panelResizeState.startHeight + deltaY);
+        if (next > window.innerHeight) next = window.innerHeight;
+        panelHeight.value = next;
+      }
+    }
+    function onPanelResizeEnd() {
+      panelResizing.value = false;
+    }
+    onMounted2(() => {
+      document.addEventListener("mousemove", onPanelResizeMove);
+      document.addEventListener("mouseup", onPanelResizeEnd);
+    });
+    onBeforeUnmount2(() => {
+      document.removeEventListener("mousemove", onPanelResizeMove);
+      document.removeEventListener("mouseup", onPanelResizeEnd);
+    });
+    function onPaneResizeStart(e, tabId, dividerIndex) {
+      e.preventDefault();
+      const tab = tabs.value.find((t) => t.id === tabId);
+      if (!tab) return;
+      paneResizing.value = true;
+      const container = e.target.closest(
+        ".cli-panel-panes-container"
+      );
+      paneResizeState = {
+        tabId,
+        dividerIndex,
+        startX: e.clientX,
+        startWidths: tab.panes.map((p) => p.widthPercent),
+        containerWidth: container ? container.clientWidth : 1
+      };
+      document.body.classList.add("cli-pane-resizing");
+    }
+    function onPaneResizeMove(e) {
+      if (!paneResizing.value) return;
+      const s = paneResizeState;
+      const deltaPct = (e.clientX - s.startX) / s.containerWidth * 100;
+      const i = s.dividerIndex;
+      let leftW = s.startWidths[i] + deltaPct;
+      let rightW = s.startWidths[i + 1] - deltaPct;
+      if (leftW < MIN_PANE_WIDTH_PERCENT) {
+        leftW = MIN_PANE_WIDTH_PERCENT;
+        rightW = s.startWidths[i] + s.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
+      }
+      if (rightW < MIN_PANE_WIDTH_PERCENT) {
+        rightW = MIN_PANE_WIDTH_PERCENT;
+        leftW = s.startWidths[i] + s.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
+      }
+      const tab = tabs.value.find((t) => t.id === s.tabId);
+      if (tab) {
+        tab.panes[i].widthPercent = leftW;
+        tab.panes[i + 1].widthPercent = rightW;
+      }
+    }
+    function onPaneResizeEnd() {
+      if (!paneResizing.value) return;
+      paneResizing.value = false;
+      document.body.classList.remove("cli-pane-resizing");
+    }
+    onMounted2(() => {
+      document.addEventListener("mousemove", onPaneResizeMove);
+      document.addEventListener("mouseup", onPaneResizeEnd);
+    });
+    onBeforeUnmount2(() => {
+      document.removeEventListener("mousemove", onPaneResizeMove);
+      document.removeEventListener("mouseup", onPaneResizeEnd);
+    });
+    function toggleMaximize() {
+      if (!maximized.value) {
+        if (isHorizontal.value) {
+          prevWidth.value = panelWidth.value;
+          panelWidth.value = window.innerWidth;
+        } else {
+          prevHeight.value = panelHeight.value;
+          panelHeight.value = window.innerHeight;
+        }
+      } else {
+        if (isHorizontal.value) {
+          panelWidth.value = prevWidth.value;
+        } else {
+          panelHeight.value = prevHeight.value;
+        }
+      }
+      maximized.value = !maximized.value;
+    }
+    function handleClose() {
+      visible.value = false;
+      props.onClose?.();
+    }
+    function handleHide() {
+      preHideCollapsed = collapsed.value;
+      hidden.value = true;
+    }
+    function handleUnhide() {
+      hidden.value = false;
+      collapsed.value = preHideCollapsed;
+    }
+    const positionDropdownOpen = ref2(false);
+    function closePositionDropdown() {
+      positionDropdownOpen.value = false;
+    }
+    function togglePositionDropdown(e) {
+      e.stopPropagation();
+      positionDropdownOpen.value = !positionDropdownOpen.value;
+    }
+    function selectPosition(pos) {
+      positionDropdownOpen.value = false;
+      position.value = pos;
+      savePanelPosition(pos);
+    }
+    return () => {
+      if (!visible.value) return null;
+      const wrapperClass = [
+        "cli-panel-wrapper",
+        collapsed.value && "collapsed",
+        maximized.value && "maximized",
+        panelResizing.value && "resizing",
+        props.class
+      ].filter(Boolean).join(" ");
+      const wrapperStyle = {
+        ...isHorizontal.value ? { width: `${panelWidth.value}px` } : { height: `${panelHeight.value}px` },
+        ...hidden.value ? { display: "none" } : {},
+        ...themeStyles.value,
+        ...props.style
+      };
+      const headerEl = h2("div", { class: "cli-panel-header" }, [
+        h2(
+          "div",
+          {
+            class: "cli-panel-resize-bar",
+            onMousedown: onPanelResizeStart
+          },
+          [h2("div", { class: "cli-panel-resize-grip" })]
+        ),
+        h2("div", { class: "cli-panel-header-content" }, [
+          h2("p", { class: "cli-panel-title" }, [
+            h2("span", { class: "cli-panel-title-icon" }, [
+              terminalIcon()
+            ]),
+            "CLI"
+          ]),
+          h2("div", { class: "cli-panel-action-buttons" }, [
+            h2("div", {
+              class: "cli-panel-btn-position-wrapper",
+              onClick: (e) => e.stopPropagation()
+            }, [
+              h2("button", {
+                class: "cli-panel-btn cli-panel-btn-position",
+                title: "Move panel",
+                onClick: togglePositionDropdown
+              }, [positionIcon(position.value)]),
+              positionDropdownOpen.value ? h2(
+                "div",
+                { class: "cli-panel-position-dropdown" },
+                ["bottom", "top", "left", "right"].map(
+                  (pos) => h2("button", {
+                    class: ["cli-panel-position-dropdown-item", position.value === pos ? "active" : ""].filter(Boolean).join(" "),
+                    onClick: () => selectPosition(pos)
+                  }, [
+                    positionIcon(pos, 16),
+                    pos.charAt(0).toUpperCase() + pos.slice(1)
+                  ])
+                )
+              ) : null
+            ]),
+            hideable.value ? h2("button", {
+              class: "cli-panel-btn cli-panel-btn-hide",
+              title: "Hide",
+              onClick: handleHide
+            }, [hideIcon()]) : null,
+            h2(
+              "button",
+              {
+                class: "cli-panel-btn",
+                title: maximized.value ? "Restore" : "Maximize",
+                disabled: collapsed.value,
+                onClick: toggleMaximize
+              },
+              [maximized.value ? restoreIcon() : maximizeIcon()]
+            ),
+            h2(
+              "button",
+              {
+                class: "cli-panel-btn",
+                title: collapsed.value ? "Expand" : "Collapse",
+                onClick: toggle
+              },
+              [collapseChevron(position.value, collapsed.value)]
+            ),
+            closable.value ? h2(
+              "button",
+              {
+                class: "cli-panel-btn cli-panel-btn-close",
+                title: "Close",
+                onClick: handleClose
+              },
+              [closeIcon()]
+            ) : null
+          ])
+        ])
+      ]);
+      const contentEl = initialized.value ? h2("div", { class: "cli-panel-content", style: collapsed.value ? { display: "none" } : void 0 }, [
+        // Tab bar
+        h2("div", { class: "cli-panel-tabs" }, [
+          h2(
+            "ul",
+            { class: "cli-panel-tab-list" },
+            tabs.value.map(
+              (tab) => h2(
+                "li",
+                {
+                  key: tab.id,
+                  class: [
+                    "cli-panel-tab",
+                    tab.id === activeTabId.value && "active"
+                  ].filter(Boolean).join(" "),
+                  onClick: () => selectTab(tab.id),
+                  onDblclick: () => startRename(tab.id),
+                  onContextmenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    contextMenu.value = {
+                      visible: true,
+                      x: e.clientX,
+                      y: e.clientY,
+                      tabId: tab.id
+                    };
+                  }
+                },
+                tab.isEditing ? [
+                  h2("input", {
+                    class: "cli-panel-tab-rename-input",
+                    type: "text",
+                    value: tab.title,
+                    onKeydown: (e) => {
+                      if (e.key === "Enter")
+                        commitRename(
+                          tab.id,
+                          e.target.value
+                        );
+                      else if (e.key === "Escape") {
+                        tab.isEditing = false;
+                      }
+                    },
+                    onBlur: (e) => commitRename(
+                      tab.id,
+                      e.target.value
+                    ),
+                    onClick: (e) => e.stopPropagation(),
+                    onDblclick: (e) => e.stopPropagation()
+                  })
+                ] : [
+                  h2(
+                    "span",
+                    {
+                      class: "cli-panel-tab-title"
+                    },
+                    tab.title
+                  ),
+                  h2(
+                    "button",
+                    {
+                      class: "cli-panel-tab-close-btn",
+                      title: "Close tab",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        closeTab(
+                          tab.id
+                        );
+                      }
+                    },
+                    "\xD7"
+                  )
+                ]
+              )
+            )
+          ),
+          h2(
+            "button",
+            {
+              class: "cli-panel-add-tab",
+              title: "New terminal",
+              onClick: addTab
+            },
+            "+"
+          )
+        ]),
+        // Terminal instances
+        h2(
+          "div",
+          { class: "cli-panel-instances" },
+          tabs.value.map(
+            (tab) => h2(
+              "div",
+              {
+                key: tab.id,
+                class: "cli-panel-instance",
+                style: {
+                  display: tab.id === activeTabId.value ? void 0 : "none"
+                }
+              },
+              [
+                h2(
+                  "div",
+                  {
+                    class: [
+                      "cli-panel-panes-container",
+                      paneResizing.value && "resizing"
+                    ].filter(Boolean).join(" ")
+                  },
+                  tab.panes.flatMap((pane, i) => {
+                    const nodes = [];
+                    if (i > 0) {
+                      nodes.push(
+                        h2(
+                          "div",
+                          {
+                            class: "cli-panel-pane-divider",
+                            onMousedown: (e) => onPaneResizeStart(
+                              e,
+                              tab.id,
+                              i - 1
+                            )
+                          },
+                          [
+                            h2("div", {
+                              class: "cli-panel-pane-divider-grip"
+                            })
+                          ]
+                        )
+                      );
+                    }
+                    nodes.push(
+                      h2(
+                        "div",
+                        {
+                          class: [
+                            "cli-panel-pane",
+                            pane.id === activePaneId.value && tab.id === activeTabId.value && "active-pane"
+                          ].filter(
+                            Boolean
+                          ).join(" "),
+                          style: {
+                            flex: `${pane.widthPercent} 1 0`
+                          },
+                          onClick: () => {
+                            activePaneId.value = pane.id;
+                            activeTabId.value = tab.id;
+                          }
+                        },
+                        [
+                          tab.panes.length > 1 ? h2(
+                            "button",
+                            {
+                              class: "cli-panel-pane-close-btn",
+                              title: "Close pane",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                closePane(
+                                  tab.id,
+                                  pane.id
+                                );
+                              }
+                            },
+                            "\xD7"
+                          ) : null,
+                          h2(Cli, {
+                            options: mergedOptions.value,
+                            modules: mergedModules.value,
+                            processors: mergedProcessors.value,
+                            services: mergedServices.value,
+                            snapshot: pane.snapshot,
+                            style: {
+                              height: "100%"
+                            },
+                            onReady: (engine) => {
+                              engineMap.set(pane.id, engine);
+                            }
+                          })
+                        ]
+                      )
+                    );
+                    return nodes;
+                  })
+                )
+              ]
+            )
+          )
+        )
+      ]) : null;
+      const contextMenuEl = contextMenu.value.visible ? h2(
+        "div",
+        {
+          class: "cli-panel-context-menu",
+          style: {
+            left: `${contextMenu.value.x}px`,
+            top: `${contextMenu.value.y}px`
+          },
+          onClick: (e) => e.stopPropagation()
+        },
+        [
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              onClick: () => {
+                closeContextMenu();
+                startRename(contextMenu.value.tabId);
+              }
+            },
+            "Rename"
+          ),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              onClick: () => {
+                const tab = tabs.value.find(
+                  (t) => t.id === contextMenu.value.tabId
+                );
+                closeContextMenu();
+                if (!tab) return;
+                const sourceEngine = engineMap.get(tab.panes[0]?.id);
+                const snapshot = sourceEngine?.snapshot();
+                const paneId = nextPaneId++;
+                const tabId = nextTabId++;
+                const idx = tabs.value.indexOf(tab);
+                tabs.value.splice(idx + 1, 0, {
+                  id: tabId,
+                  title: `${tab.title} (copy)`,
+                  isEditing: false,
+                  panes: [
+                    { id: paneId, widthPercent: 100, snapshot }
+                  ]
+                });
+                activeTabId.value = tabId;
+                activePaneId.value = paneId;
+              }
+            },
+            "Duplicate"
+          ),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              onClick: () => {
+                closeContextMenu();
+                splitRight(contextMenu.value.tabId);
+              }
+            },
+            "Split Right"
+          ),
+          h2("div", {
+            class: "cli-panel-context-menu-separator"
+          }),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              onClick: () => {
+                closeContextMenu();
+                closeTab(contextMenu.value.tabId);
+              }
+            },
+            "Close"
+          ),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              disabled: tabs.value.length <= 1,
+              onClick: () => {
+                const id = contextMenu.value.tabId;
+                closeContextMenu();
+                tabs.value = tabs.value.filter(
+                  (t) => t.id === id
+                );
+                activeTabId.value = id;
+              }
+            },
+            "Close Others"
+          ),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item",
+              onClick: () => {
+                const id = contextMenu.value.tabId;
+                closeContextMenu();
+                const idx = tabs.value.findIndex(
+                  (t) => t.id === id
+                );
+                if (idx !== -1)
+                  tabs.value = tabs.value.slice(
+                    0,
+                    idx + 1
+                  );
+              }
+            },
+            "Close to the Right"
+          ),
+          h2("div", {
+            class: "cli-panel-context-menu-separator"
+          }),
+          h2(
+            "button",
+            {
+              class: "cli-panel-context-menu-item destructive",
+              onClick: () => {
+                closeContextMenu();
+                tabs.value = [];
+                initialized.value = false;
+                collapsed.value = true;
+              }
+            },
+            "Close All"
+          )
+        ]
+      ) : null;
+      const hideTabEl = hidden.value ? h2("button", {
+        class: "cli-panel-hide-tab",
+        "data-position": position.value,
+        "data-hide-align": hideAlignment.value,
+        style: themeStyles.value,
+        title: "Show CLI",
+        onClick: handleUnhide
+      }, [
+        h2("svg", { class: "cli-panel-hide-tab-icon", ...svgAttrs, width: "16", height: "16", "stroke-width": "2" }, [
+          h2("polyline", { points: "4 17 10 11 4 5" }),
+          h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+        ]),
+        h2("span", { class: "cli-panel-hide-tab-label" }, "CLI"),
+        hideTabChevron(position.value)
+      ]) : null;
+      return h2("div", {}, [
+        hideTabEl,
+        h2(
+          "div",
+          {
+            class: wrapperClass,
+            style: wrapperStyle,
+            "data-position": position.value,
+            "data-resizable": String(resizable.value),
+            "data-closable": String(closable.value),
+            "data-hideable": String(hideable.value)
+          },
+          [headerEl, contentEl]
+        ),
+        contextMenuEl
+      ]);
+    };
+  }
+});
+
+// src/CliProvider.ts
+import { defineComponent as defineComponent4, ref as ref4, h as h3, provide as provide2 } from "vue";
+
+// src/useCliEngine.ts
+import { onMounted as onMounted3, onBeforeUnmount as onBeforeUnmount3, shallowRef } from "vue";
+import { CliEngine as CliEngine2 } from "@qodalis/cli";
+function useCliEngine(containerRef, config) {
+  const engine = shallowRef(null);
+  onMounted3(async () => {
+    if (!containerRef.value) return;
+    const e = new CliEngine2(containerRef.value, config?.options);
+    e.registerService("cli-framework", "Vue");
+    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);
+    }
+    await e.start();
+    engine.value = e;
+  });
+  onBeforeUnmount3(() => {
+    engine.value?.destroy();
+    engine.value = null;
+  });
+  return engine;
+}
+
+// src/CliProvider.ts
+var CliProvider = defineComponent4({
+  name: "CliProvider",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["ready"],
+  setup(props, { slots, emit }) {
+    const containerRef = ref4(null);
+    const engine = useCliEngine(containerRef, {
+      modules: props.modules,
+      processors: props.processors,
+      options: props.options,
+      services: props.services
+    });
+    provide2(CliInjectionKey, { engine });
+    return () => h3("div", { style: { height: "100%" } }, [
+      h3("div", {
+        ref: containerRef,
+        style: { height: "100%", ...props.style }
+      }),
+      slots.default?.()
+    ]);
+  }
+});
+
+// src/useCli.ts
+import { inject as inject3 } from "vue";
+function useCli() {
+  const ctx = inject3(CliInjectionKey);
+  if (!ctx) {
+    throw new Error(
+      "useCli() must be used inside a <CliProvider> component"
+    );
+  }
+  return ctx;
+}
+
+// src/index.ts
+import { CliEngine as CliEngine3 } from "@qodalis/cli";
+export {
+  Cli,
+  CliConfigKey,
+  CliConfigProvider,
+  CliEngine3 as CliEngine,
+  CliInjectionKey,
+  CliPanel,
+  CliProvider,
+  useCli,
+  useCliEngine
+};
+//# sourceMappingURL=index.mjs.map