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

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   h,
   inject
 } from "vue";
-import { CliEngine } from "@qodalis/cli";
+import { createCliEngine, resolveCliHostConfig } from "@qodalis/cli";
 
 // src/cliInjection.ts
 var CliInjectionKey = /* @__PURE__ */ Symbol("qodalis-cli");
@@ -22,10 +22,6 @@ var CliConfigProvider = defineComponent({
       type: Array,
       default: void 0
     },
-    processors: {
-      type: Array,
-      default: void 0
-    },
     options: {
       type: Object,
       default: void 0
@@ -38,7 +34,6 @@ var CliConfigProvider = defineComponent({
   setup(props, { slots }) {
     provide(CliConfigKey, {
       modules: props.modules,
-      processors: props.processors,
       options: props.options,
       services: props.services
     });
@@ -54,10 +49,6 @@ var Cli = defineComponent2({
       type: Array,
       default: void 0
     },
-    processors: {
-      type: Array,
-      default: void 0
-    },
     options: {
       type: Object,
       default: void 0
@@ -88,26 +79,10 @@ var Cli = defineComponent2({
     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;
+    const hostConfig = resolveCliHostConfig(props, config);
     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);
-      }
+      engine = createCliEngine(containerRef.value, { ...hostConfig, snapshot: props.snapshot, framework: "Vue" });
       await engine.start();
       emit("ready", engine);
     });
@@ -124,915 +99,471 @@ var Cli = defineComponent2({
 });
 
 // src/CliPanel.ts
+import { defineComponent as defineComponent3, computed, inject as inject2, watch, h as h2, onBeforeUnmount as onBeforeUnmount2, onMounted as onMounted2, shallowRef, Fragment } from "vue";
 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
-  ]);
+  CliPanelController,
+  CLOSE_GLYPH,
+  CLOSE_ICON,
+  HIDE_ICON,
+  HIDE_TAB_TERMINAL_ICON,
+  MAXIMIZE_ICON,
+  PANEL_LABELS,
+  RESTORE_ICON,
+  TERMINAL_ICON,
+  collapseChevronIcon,
+  contextMenuItems,
+  contextMenuStyle,
+  glowLineClass,
+  handleRenameKey,
+  hideTabChevronIcon,
+  joinClasses,
+  mergeCliOptions,
+  openStatusDropdown,
+  paneClass,
+  paneStyle,
+  panelTabClass,
+  panelTabDotClass,
+  panelWrapperClass,
+  panelWrapperStyle,
+  panesContainerClass,
+  panesContainerWidth,
+  positionIcon,
+  positionOptions,
+  resolveCliHostConfig as resolveCliHostConfig2,
+  runContextMenuAction,
+  statusIndicators,
+  svgAttrs
+} from "@qodalis/cli";
+var PANEL_REF_METHODS = [
+  "open",
+  "collapse",
+  "toggleCollapse",
+  "hide",
+  "unhide",
+  "toggleHide",
+  "close",
+  "maximize",
+  "restore",
+  "toggleMaximize",
+  "resize",
+  "setPosition",
+  "addTab",
+  "closeTab",
+  "selectTab",
+  "renameTab",
+  "splitPane",
+  "closePane",
+  "getEngine",
+  "getState"
+];
+function icon(svg, className) {
+  return h2("svg", { class: className, ...svgAttrs(svg) }, svg.shapes.map((shape) => h2(shape.tag, shape.attrs)));
 }
+var stop = (e) => e.stopPropagation();
 var CliPanel = defineComponent3({
   name: "CliPanel",
   props: {
-    options: {
-      type: Object,
-      default: void 0
-    },
+    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
-    },
+    services: { type: Object, default: void 0 },
+    onClose: { type: Function, default: void 0 },
+    collapsed: { type: Boolean, default: void 0 },
+    hidden: { type: Boolean, default: void 0 },
+    maximized: { type: Boolean, default: void 0 },
+    activeTabId: { type: Number, default: void 0 },
+    position: { type: String, default: void 0 },
+    height: { type: Number, default: void 0 },
+    width: { type: Number, default: void 0 },
+    style: { type: Object, default: void 0 },
     class: { type: String, default: void 0 }
   },
-  setup(props) {
+  emits: [
+    "update:collapsed",
+    "update:hidden",
+    "update:maximized",
+    "update:activeTabId",
+    "update:position",
+    "update:height",
+    "update:width",
+    "close",
+    "tab-added",
+    "tab-closed",
+    "pane-split",
+    "pane-closed"
+  ],
+  setup(props, { expose, emit }) {
     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);
+    const mergedOptions = computed(() => mergeCliOptions(props.options, config?.options));
+    const hostConfig = computed(() => resolveCliHostConfig2(props, config));
+    const controlled = () => ({
+      collapsed: props.collapsed,
+      hidden: props.hidden,
+      maximized: props.maximized,
+      activeTabId: props.activeTabId,
+      position: props.position,
+      height: props.height,
+      width: props.width
     });
-    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;
+    const controller = new CliPanelController({
+      config: mergedOptions.value,
+      controlled: controlled(),
+      callbacks: {
+        onCollapsedChange: (v) => emit("update:collapsed", v),
+        onHiddenChange: (v) => emit("update:hidden", v),
+        onMaximizedChange: (v) => emit("update:maximized", v),
+        onActiveTabIdChange: (v) => emit("update:activeTabId", v),
+        onPositionChange: (v) => emit("update:position", v),
+        onHeightChange: (v) => emit("update:height", v),
+        onWidthChange: (v) => emit("update:width", v),
+        onClose: () => {
+          emit("close");
+          props.onClose?.();
+        },
+        onTabAdded: (e) => emit("tab-added", e),
+        onTabClosed: (e) => emit("tab-closed", e),
+        onPaneSplit: (e) => emit("pane-split", e),
+        onPaneClosed: (e) => emit("pane-closed", e)
       }
-    }
-    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);
+    const state = shallowRef(controller.getSnapshot());
+    const unsubscribe = controller.subscribe(() => {
+      state.value = controller.getSnapshot();
     });
+    watch(controlled, (values) => controller.setControlled(values));
+    watch(mergedOptions, (options) => controller.setOptions(options));
+    const root = shallowRef(null);
+    onMounted2(() => controller.setRootElement(root.value));
     onBeforeUnmount2(() => {
-      document.removeEventListener("mousemove", onPaneResizeMove);
-      document.removeEventListener("mouseup", onPaneResizeEnd);
+      unsubscribe();
+      controller.destroy();
     });
-    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;
+    const exposed = {};
+    for (const method of PANEL_REF_METHODS) {
+      exposed[method] = controller[method].bind(controller);
     }
-    function handleUnhide() {
-      hidden.value = false;
-      collapsed.value = preHideCollapsed;
-    }
-    const positionDropdownOpen = ref2(false);
-    function closePositionDropdown() {
-      positionDropdownOpen.value = false;
-    }
-    function togglePositionDropdown(e) {
+    expose(exposed);
+    const openDropdown = (e, dropdown) => {
+      if (!dropdown) return;
       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" }, [
+      const anchor = e.currentTarget;
+      if (dropdown === "services") controller.toggleServicesDropdown(anchor);
+      else controller.toggleServersDropdown(anchor);
+    };
+    const renderHeader = (s) => {
+      const indicators = statusIndicators(s);
+      return h2("div", { class: "cli-panel-header" }, [
         h2(
           "div",
           {
             class: "cli-panel-resize-bar",
-            onMousedown: onPanelResizeStart
+            onMousedown: (e) => {
+              if (!s.resizable) return;
+              e.preventDefault();
+              controller.startPanelResize(e.clientX, e.clientY);
+            }
           },
           [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("p", { class: "cli-panel-title" }, [h2("span", { class: "cli-panel-title-icon" }, [icon(TERMINAL_ICON)]), PANEL_LABELS.title]),
+          s.showStatusIndicators ? h2(
+            "div",
+            { class: "cli-panel-status-indicators" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-item", item.itemClass),
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null,
+                  h2("span", { class: "cli-panel-status-label" }, item.label)
+                ]
+              )
+            )
+          ) : null,
+          // Compact indicators for left/right positions (CSS controls visibility).
+          h2(
+            "div",
+            { class: "cli-panel-status-indicators-compact" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-compact-item", item.compactClass),
+                  title: item.title,
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.compactDotClass ? h2("span", { class: item.compactDotClass }) : null,
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null
+                ]
+              )
+            )
+          ),
           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(
+            h2("div", { class: "cli-panel-btn-position-wrapper", onClick: stop }, [
+              h2(
+                "button",
+                {
+                  class: "cli-panel-btn cli-panel-btn-position",
+                  title: PANEL_LABELS.movePanel,
+                  onClick: () => controller.togglePositionDropdown()
+                },
+                [icon(positionIcon(s.position))]
+              ),
+              s.positionDropdownOpen ? 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)
-                  ])
+                positionOptions(s).map(
+                  (opt) => h2(
+                    "button",
+                    { key: opt.position, class: opt.className, onClick: () => controller.setPosition(opt.position) },
+                    [icon(positionIcon(opt.position, 16)), opt.label]
+                  )
                 )
               ) : null
             ]),
-            hideable.value ? h2("button", {
-              class: "cli-panel-btn cli-panel-btn-hide",
-              title: "Hide",
-              onClick: handleHide
-            }, [hideIcon()]) : null,
+            s.hideable ? h2("button", { class: "cli-panel-btn cli-panel-btn-hide", title: PANEL_LABELS.hide, onClick: () => controller.hide() }, [icon(HIDE_ICON)]) : null,
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: maximized.value ? "Restore" : "Maximize",
-                disabled: collapsed.value,
-                onClick: toggleMaximize
+                title: s.maximized ? PANEL_LABELS.restore : PANEL_LABELS.maximize,
+                disabled: s.collapsed,
+                onClick: () => controller.toggleMaximize()
               },
-              [maximized.value ? restoreIcon() : maximizeIcon()]
+              [icon(s.maximized ? RESTORE_ICON : MAXIMIZE_ICON)]
             ),
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: collapsed.value ? "Expand" : "Collapse",
-                onClick: toggle
+                title: s.collapsed ? PANEL_LABELS.expand : PANEL_LABELS.collapse,
+                onClick: () => controller.toggle()
               },
-              [collapseChevron(position.value, collapsed.value)]
+              [icon(collapseChevronIcon(s.position, s.collapsed))]
             ),
-            closable.value ? h2(
-              "button",
-              {
-                class: "cli-panel-btn cli-panel-btn-close",
-                title: "Close",
-                onClick: handleClose
-              },
-              [closeIcon()]
-            ) : null
+            s.closable ? h2("button", { class: "cli-panel-btn cli-panel-btn-close", title: PANEL_LABELS.close, onClick: () => controller.close() }, [icon(CLOSE_ICON)]) : null
           ])
-        ])
+        ]),
+        h2("div", { class: glowLineClass(s) })
       ]);
-      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" }, [
+    };
+    const renderTabs = (s) => h2("div", { class: "cli-panel-tabs" }, [
+      h2(
+        "ul",
+        { class: "cli-panel-tab-list" },
+        s.tabs.map(
+          (tab) => h2(
+            "li",
+            {
+              key: tab.id,
+              class: panelTabClass(s, tab),
+              onClick: () => controller.selectTab(tab.id),
+              onDblclick: () => controller.startRename(tab.id),
+              onContextmenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                controller.openContextMenu(tab.id, e.clientX, e.clientY);
+              }
+            },
+            tab.isEditing ? [
+              h2("input", {
+                class: "cli-panel-tab-rename-input",
+                type: "text",
+                value: tab.title,
+                onVnodeMounted: (vnode) => {
+                  const input = vnode.el;
+                  input.focus();
+                  input.select();
+                },
+                onKeydown: (e) => handleRenameKey(controller, tab.id, e.key, e.target.value),
+                onBlur: (e) => controller.commitRename(tab.id, e.target.value),
+                onClick: stop,
+                onDblclick: stop
+              })
+            ] : [
+              h2("span", { class: panelTabDotClass(s, tab) }),
+              h2("span", { class: "cli-panel-tab-title" }, tab.title),
+              h2(
+                "button",
+                {
+                  class: "cli-panel-tab-close-btn",
+                  title: PANEL_LABELS.closeTab,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    controller.closeTab(tab.id);
+                  }
+                },
+                CLOSE_GLYPH
+              )
+            ]
+          )
+        )
+      ),
+      h2("button", { class: "cli-panel-add-tab", title: PANEL_LABELS.newTerminal, onClick: () => controller.addTab() }, "+")
+    ]);
+    const renderInstances = (s) => h2(
+      "div",
+      { class: "cli-panel-instances" },
+      s.tabs.map(
+        (tab) => h2("div", { key: tab.id, class: "cli-panel-instance", style: { display: tab.id === s.activeTabId ? void 0 : "none" } }, [
           h2(
-            "ul",
-            { class: "cli-panel-tab-list" },
-            tabs.value.map(
-              (tab) => h2(
-                "li",
+            "div",
+            { class: panesContainerClass(s) },
+            tab.panes.flatMap((pane, i) => [
+              i > 0 ? h2(
+                "div",
                 {
-                  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) => {
+                  key: `divider-${pane.id}`,
+                  class: "cli-panel-pane-divider",
+                  onMousedown: (e) => {
                     e.preventDefault();
-                    e.stopPropagation();
-                    contextMenu.value = {
-                      visible: true,
-                      x: e.clientX,
-                      y: e.clientY,
-                      tabId: tab.id
-                    };
+                    controller.startPaneResize(tab.id, i - 1, e.clientX, panesContainerWidth(e.target));
                   }
                 },
-                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(
+                [h2("div", { class: "cli-panel-pane-divider-grip" })]
+              ) : null,
+              h2(
+                "div",
+                {
+                  key: pane.id,
+                  class: paneClass(s, tab.id, pane.id),
+                  style: paneStyle(pane.widthPercent),
+                  onClick: () => controller.activatePane(tab.id, pane.id)
+                },
+                [
+                  tab.panes.length > 1 ? h2(
                     "button",
                     {
-                      class: "cli-panel-tab-close-btn",
-                      title: "Close tab",
+                      class: "cli-panel-pane-close-btn",
+                      title: PANEL_LABELS.closePane,
                       onClick: (e) => {
                         e.stopPropagation();
-                        closeTab(
-                          tab.id
-                        );
+                        controller.closePane(pane.id);
                       }
                     },
-                    "\xD7"
-                  )
+                    CLOSE_GLYPH
+                  ) : null,
+                  h2(Cli, {
+                    options: mergedOptions.value,
+                    modules: hostConfig.value.modules,
+                    services: hostConfig.value.services,
+                    snapshot: pane.snapshot,
+                    style: { height: "100%" },
+                    onReady: (engine) => controller.registerEngine(tab.id, pane.id, engine)
+                  })
                 ]
               )
-            )
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-add-tab",
-              title: "New terminal",
-              onClick: addTab
-            },
-            "+"
+            ])
           )
-        ]),
-        // Terminal instances
+        ])
+      )
+    );
+    const renderContextMenu = (s) => h2(
+      "div",
+      { class: "cli-panel-context-menu", style: contextMenuStyle(s), onClick: stop },
+      contextMenuItems(s).flatMap((item) => [
+        item.separatorBefore ? h2("div", { class: "cli-panel-context-menu-separator" }) : null,
+        h2(
+          "button",
+          {
+            class: joinClasses("cli-panel-context-menu-item", item.destructive && "destructive"),
+            disabled: item.disabled,
+            onClick: () => runContextMenuAction(controller, item.action)
+          },
+          item.label
+        )
+      ])
+    );
+    const renderStatusDropdown = (s) => {
+      const dropdown = openStatusDropdown(s);
+      if (!dropdown) return null;
+      return h2("div", { class: "cli-panel-services-dropdown", style: dropdown.style, onClick: stop }, [
+        h2("div", { class: "cli-panel-services-dropdown-header" }, dropdown.header),
         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;
-                  })
-                )
-              ]
-            )
+          { class: "cli-panel-services-dropdown-list" },
+          dropdown.rows.map(
+            (row) => h2("div", { key: row.key, class: "cli-panel-services-dropdown-item" }, [
+              h2("span", { class: row.dotClass }),
+              h2("div", { class: "cli-panel-svc-info" }, [
+                h2("span", { class: "cli-panel-svc-name" }, row.name),
+                row.description ? h2("span", { class: "cli-panel-svc-desc" }, row.description) : null
+              ]),
+              dropdown.kind === "servers" ? h2("div", { class: "cli-panel-srv-meta" }, [
+                h2("span", { class: "cli-panel-svc-status" }, row.status),
+                ...row.meta.map((m) => h2("span", { key: m, class: "cli-panel-svc-desc" }, m))
+              ]) : h2("span", { class: "cli-panel-svc-status" }, row.status)
+            ])
           )
-        )
-      ]) : null;
-      const contextMenuEl = contextMenu.value.visible ? h2(
-        "div",
-        {
-          class: "cli-panel-context-menu",
-          style: {
-            left: `${contextMenu.value.x}px`,
-            top: `${contextMenu.value.y}px`
+        ),
+        dropdown.rows.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, dropdown.emptyText) : null
+      ]);
+    };
+    return () => {
+      const s = state.value;
+      if (!s.visible) return null;
+      return h2(Fragment, [
+        s.hidden ? h2(
+          "button",
+          {
+            class: "cli-panel-hide-tab",
+            "data-position": s.position,
+            "data-hide-align": s.hideAlignment,
+            style: s.themeStyles,
+            title: PANEL_LABELS.showCli,
+            onClick: () => controller.unhide()
           },
-          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,
+          [
+            icon(HIDE_TAB_TERMINAL_ICON, "cli-panel-hide-tab-icon"),
+            h2("span", { class: "cli-panel-hide-tab-label" }, PANEL_LABELS.title),
+            icon(hideTabChevronIcon(s.position), "cli-panel-hide-tab-arrow")
+          ]
+        ) : null,
         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)
+            ref: root,
+            class: panelWrapperClass(s, props.class),
+            style: { ...panelWrapperStyle(s), ...props.style },
+            "data-position": s.position,
+            "data-resizable": String(s.resizable),
+            "data-closable": String(s.closable),
+            "data-hideable": String(s.hideable)
           },
-          [headerEl, contentEl]
+          [
+            renderHeader(s),
+            s.initialized ? h2("div", { class: "cli-panel-content", style: s.collapsed ? { display: "none" } : void 0 }, [
+              renderTabs(s),
+              renderInstances(s)
+            ]) : null
+          ]
         ),
-        contextMenuEl
+        s.contextMenu.visible ? renderContextMenu(s) : null,
+        renderStatusDropdown(s)
       ]);
     };
   }
 });
 
 // src/CliProvider.ts
-import { defineComponent as defineComponent4, ref as ref4, h as h3, provide as provide2 } from "vue";
+import { defineComponent as defineComponent4, ref as ref2, 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";
+import { onMounted as onMounted3, onBeforeUnmount as onBeforeUnmount3, shallowRef as shallowRef2 } from "vue";
+import { createCliEngine as createCliEngine2 } from "@qodalis/cli";
 function useCliEngine(containerRef, config) {
-  const engine = shallowRef(null);
+  const engine = shallowRef2(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);
-    }
+    const e = createCliEngine2(containerRef.value, { ...config, framework: "Vue" });
     await e.start();
     engine.value = e;
   });
@@ -1051,10 +582,6 @@ var CliProvider = defineComponent4({
       type: Array,
       default: void 0
     },
-    processors: {
-      type: Array,
-      default: void 0
-    },
     options: {
       type: Object,
       default: void 0
@@ -1070,10 +597,9 @@ var CliProvider = defineComponent4({
   },
   emits: ["ready"],
   setup(props, { slots, emit }) {
-    const containerRef = ref4(null);
+    const containerRef = ref2(null);
     const engine = useCliEngine(containerRef, {
       modules: props.modules,
-      processors: props.processors,
       options: props.options,
       services: props.services
     });
@@ -1101,12 +627,12 @@ function useCli() {
 }
 
 // src/index.ts
-import { CliEngine as CliEngine3 } from "@qodalis/cli";
+import { CliEngine as CliEngine4 } from "@qodalis/cli";
 export {
   Cli,
   CliConfigKey,
   CliConfigProvider,
-  CliEngine3 as CliEngine,
+  CliEngine4 as CliEngine,
   CliInjectionKey,
   CliPanel,
   CliProvider,