layplux 0.0.1

package/dist/umd/index.js

@@ -0,0 +1,4000 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Layplux = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
+
+  const TopArea = vue.defineComponent({
+    name: 'TopArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const {
+          area
+        } = props;
+        const left = [];
+        const center = [];
+        const right = [];
+        area?.container.items.value.slice().toSorted((a, b) => {
+          const index1 = a.config?.index || 0;
+          const index2 = b.config?.index || 0;
+          return index1 === index2 ? 0 : index1 > index2 ? 1 : -1;
+        }).forEach(item => {
+          const content = vue.createVNode("div", {
+            "key": `top-area-${item.name}`
+          }, [item.renderContent()]);
+          if (item.align === 'left') {
+            left.push(content);
+          } else if (item.align === 'center') {
+            center.push(content);
+          } else {
+            right.push(content);
+          }
+        });
+        return vue.createVNode("div", {
+          "class": "layplux-top-area"
+        }, [vue.createVNode("div", {
+          "class": "layplux-top-area__toolbar-left"
+        }, [...left]), vue.createVNode("div", {
+          "class": "layplux-top-area__toolbar-center"
+        }, [...center]), vue.createVNode("div", {
+          "class": "layplux-top-area__toolbar-right"
+        }, [...right])]);
+      };
+    }
+  });
+
+  const BottomArea = vue.defineComponent({
+    name: 'BottomArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const {
+          area
+        } = props;
+        const left = [];
+        const center = [];
+        const right = [];
+        area?.container.items.value.slice().toSorted((a, b) => {
+          const index1 = a.config?.index || 0;
+          const index2 = b.config?.index || 0;
+          return index1 === index2 ? 0 : index1 > index2 ? 1 : -1;
+        }).forEach(item => {
+          const content = vue.createVNode("div", {
+            "key": `bottom-area-${item.name}`
+          }, [item.renderContent()]);
+          if (item.align === 'left') {
+            left.push(content);
+          } else if (item.align === 'center') {
+            center.push(content);
+          } else {
+            right.push(content);
+          }
+        });
+        return vue.createVNode("div", {
+          "class": "layplux-bottom-area"
+        }, [vue.createVNode("div", {
+          "class": "layplux-bottom-area__left"
+        }, [...left]), vue.createVNode("div", {
+          "class": "layplux-bottom-area__center"
+        }, [...center]), vue.createVNode("div", {
+          "class": "layplux-bottom-area__right"
+        }, [...right])]);
+      };
+    }
+  });
+
+  const LeftTopArea = vue.defineComponent({
+    name: 'LeftTopArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-left-top-area"
+        }, [items.slice().toSorted((a, b) => {
+          const i1 = a.config?.index ?? 0;
+          const i2 = b.config?.index ?? 0;
+          return i1 === i2 ? 0 : i1 > i2 ? 1 : -1;
+        }).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const LeftBottomArea = vue.defineComponent({
+    name: 'LeftBottomArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-left-bottom-area"
+        }, [items.slice().toSorted((a, b) => {
+          const i1 = a.config?.index ?? 0;
+          const i2 = b.config?.index ?? 0;
+          return i1 === i2 ? 0 : i1 > i2 ? 1 : -1;
+        }).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const BottomLeftArea = vue.defineComponent({
+    name: 'BottomLeftArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-bottom-left-area"
+        }, [items.slice().toSorted((a, b) => {
+          const i1 = a.config?.index ?? 0;
+          const i2 = b.config?.index ?? 0;
+          return i1 === i2 ? 0 : i1 > i2 ? 1 : -1;
+        }).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const RightTopArea = vue.defineComponent({
+    name: 'RightTopArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-right-top-area"
+        }, [items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const RightBottomArea = vue.defineComponent({
+    name: 'RightBottomArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-right-bottom-area"
+        }, [items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const BottomRightArea = vue.defineComponent({
+    name: 'BottomRightArea',
+    props: {
+      area: Object
+    },
+    setup(props) {
+      return () => {
+        const items = props.area?.container.items.value;
+        if (!items || items.length === 0) return null;
+        return vue.createVNode("div", {
+          "class": "layplux-bottom-right-area"
+        }, [items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map(widget => widget.renderTitle())]);
+      };
+    }
+  });
+
+  const CornerGlow = vue.defineComponent({
+    name: 'CornerGlow',
+    setup() {
+      return () => vue.createVNode("div", {
+        "class": "corner-glow"
+      }, null);
+    }
+  });
+
+  function computePosition(triggerRect, popupW, popupH, placement, offsetX, offsetY) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const PADDING = 8;
+    let top = 0;
+    let left = 0;
+    const [main, align] = placement.split('-');
+
+    // Vertical placements
+    if (main === 'bottom') {
+      top = triggerRect.bottom + offsetY;
+      if (align === 'start') left = triggerRect.left + offsetX;else if (align === 'end') left = triggerRect.right - popupW + offsetX;else left = triggerRect.left + triggerRect.width / 2 - popupW / 2 + offsetX;
+
+      // Flip to top if not enough space
+      if (top + popupH > vh - PADDING) {
+        top = triggerRect.top - popupH - offsetY;
+        placement = align ? `top-${align}` : 'top';
+      }
+    } else if (main === 'top') {
+      top = triggerRect.top - popupH - offsetY;
+      if (align === 'start') left = triggerRect.left + offsetX;else if (align === 'end') left = triggerRect.right - popupW + offsetX;else left = triggerRect.left + triggerRect.width / 2 - popupW / 2 + offsetX;
+
+      // Flip to bottom if not enough space
+      if (top < PADDING) {
+        top = triggerRect.bottom + offsetY;
+        placement = align ? `bottom-${align}` : 'bottom';
+      }
+    }
+    // Horizontal placements
+    else if (main === 'right') {
+      left = triggerRect.right + offsetX;
+      if (align === 'start') top = triggerRect.top + offsetY;else if (align === 'end') top = triggerRect.bottom - popupH + offsetY;else top = triggerRect.top + triggerRect.height / 2 - popupH / 2 + offsetY;
+      if (left + popupW > vw - PADDING) {
+        left = triggerRect.left - popupW - offsetX;
+        placement = align ? `left-${align}` : 'left';
+      }
+    } else if (main === 'left') {
+      left = triggerRect.left - popupW - offsetX;
+      if (align === 'start') top = triggerRect.top + offsetY;else if (align === 'end') top = triggerRect.bottom - popupH + offsetY;else top = triggerRect.top + triggerRect.height / 2 - popupH / 2 + offsetY;
+      if (left < PADDING) {
+        left = triggerRect.right + offsetX;
+        placement = align ? `right-${align}` : 'right';
+      }
+    }
+
+    // Clamp to viewport
+    top = Math.max(PADDING, Math.min(top, vh - popupH - PADDING));
+    left = Math.max(PADDING, Math.min(left, vw - popupW - PADDING));
+    return {
+      position: {
+        top,
+        left
+      },
+      placement
+    };
+  }
+  const Popup = vue.defineComponent({
+    name: 'LaypluxPopup',
+    props: {
+      visible: Boolean,
+      trigger: {
+        type: String,
+        default: 'hover'
+      },
+      placement: {
+        type: String,
+        default: 'bottom'
+      },
+      offset: {
+        type: Object,
+        default: () => ({
+          y: 4
+        })
+      },
+      mouseEnterDelay: {
+        type: Number,
+        default: 100
+      },
+      mouseLeaveDelay: {
+        type: Number,
+        default: 100
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: true
+      },
+      getContainer: {
+        type: Function,
+        default: () => document.body
+      }
+    },
+    emits: ['update:visible'],
+    setup(props, {
+      emit,
+      slots
+    }) {
+      const triggerRef = vue.ref();
+      const popupRef = vue.ref();
+      const position = vue.ref({
+        top: 0,
+        left: 0
+      });
+      const currentPlacement = vue.ref(props.placement);
+      // Whether the popup DOM should exist
+      const mounted = vue.ref(false);
+      // Whether the popup is in its visible animation state
+      const animatingIn = vue.ref(false);
+      let enterTimer = null;
+      let leaveTimer = null;
+      let leaveAnimationTimer = null;
+      const clearTimers = () => {
+        if (enterTimer) {
+          clearTimeout(enterTimer);
+          enterTimer = null;
+        }
+        if (leaveTimer) {
+          clearTimeout(leaveTimer);
+          leaveTimer = null;
+        }
+        if (leaveAnimationTimer) {
+          clearTimeout(leaveAnimationTimer);
+          leaveAnimationTimer = null;
+        }
+      };
+      const updatePosition = () => {
+        if (!triggerRef.value || !popupRef.value) return;
+        const triggerRect = triggerRef.value.getBoundingClientRect();
+        const popupRect = popupRef.value.getBoundingClientRect();
+        const {
+          x: ox = 0,
+          y: oy = 0
+        } = props.offset;
+        const result = computePosition(triggerRect, popupRect.width, popupRect.height, props.placement, ox, oy);
+        position.value = result.position;
+        currentPlacement.value = result.placement;
+      };
+      const show = () => {
+        if (props.disabled) return;
+        clearTimers();
+        enterTimer = setTimeout(() => {
+          mounted.value = true;
+          emit('update:visible', true);
+          void vue.nextTick(() => {
+            updatePosition();
+            // Trigger enter animation
+            requestAnimationFrame(() => {
+              animatingIn.value = true;
+            });
+          });
+        }, props.mouseEnterDelay);
+      };
+      const hide = (immediate = false) => {
+        clearTimers();
+        const delay = immediate ? 0 : props.mouseLeaveDelay;
+        leaveTimer = setTimeout(() => {
+          animatingIn.value = false;
+
+          // Wait for CSS transition to finish before removing DOM
+          leaveAnimationTimer = setTimeout(() => {
+            mounted.value = false;
+            emit('update:visible', false);
+          }, 200); // Match CSS transition duration
+        }, delay);
+      };
+      const toggle = () => {
+        if (mounted.value && animatingIn.value) {
+          hide(true);
+        } else {
+          clearTimers();
+          show();
+        }
+      };
+
+      // Sync external visible changes
+      vue.watch(() => props.visible, v => {
+        if (v && !mounted.value) show();else if (!v && mounted.value) hide(true);
+      });
+
+      // Sync external placement changes
+      vue.watch(() => props.placement, p => {
+        currentPlacement.value = p;
+      });
+      const onResize = () => {
+        if (mounted.value && animatingIn.value) updatePosition();
+      };
+      vue.onMounted(() => {
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onResize, true);
+        document.addEventListener('mousedown', onClickOutside, true);
+        document.addEventListener('keydown', onEsc);
+      });
+      vue.onUnmounted(() => {
+        clearTimers();
+        window.removeEventListener('resize', onResize);
+        window.removeEventListener('scroll', onResize, true);
+        document.removeEventListener('mousedown', onClickOutside, true);
+        document.removeEventListener('keydown', onEsc);
+      });
+
+      // Click outside
+      const onClickOutside = e => {
+        if (!mounted.value) return;
+        const target = e.target;
+        const trigger = triggerRef.value;
+        const popup = popupRef.value;
+        if (trigger && trigger.contains(target)) return;
+        if (popup && popup.contains(target)) return;
+        if (props.trigger === 'click' || props.trigger === 'contextmenu') {
+          hide(true);
+        }
+      };
+
+      // ESC key
+      const onEsc = e => {
+        if (e.key === 'Escape' && mounted.value) {
+          hide(true);
+        }
+      };
+
+      // Trigger event handlers
+      const onTriggerMouseEnter = () => {
+        if (props.trigger === 'hover') show();
+      };
+      const onTriggerMouseLeave = () => {
+        if (props.trigger === 'hover') hide();
+      };
+      const onTriggerClick = e => {
+        if (props.trigger === 'click') {
+          e.stopPropagation();
+          toggle();
+        }
+      };
+      const onTriggerFocus = () => {
+        if (props.trigger === 'focus') show();
+      };
+      const onTriggerBlur = () => {
+        if (props.trigger === 'focus') hide(true);
+      };
+      const onTriggerContextmenu = e => {
+        if (props.trigger === 'contextmenu') {
+          e.preventDefault();
+          show();
+        }
+      };
+
+      // Popup hover (for safe triangle)
+      const onPopupMouseEnter = () => {
+        if (leaveTimer) {
+          clearTimeout(leaveTimer);
+          leaveTimer = null;
+        }
+      };
+      const onPopupMouseLeave = () => {
+        if (props.trigger === 'hover') hide();
+      };
+      return () => {
+        const container = props.getContainer();
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode("span", {
+          "ref": triggerRef,
+          "class": "layplux-popup-trigger",
+          "onMouseenter": onTriggerMouseEnter,
+          "onMouseleave": onTriggerMouseLeave,
+          "onClick": onTriggerClick,
+          "onFocus": onTriggerFocus,
+          "onBlur": onTriggerBlur,
+          "onContextmenu": onTriggerContextmenu
+        }, [slots.default?.()]), (mounted.value || !props.destroyOnClose) && vue.createVNode(vue.Teleport, {
+          "to": container
+        }, {
+          default: () => [vue.createVNode("div", {
+            "ref": popupRef,
+            "class": ['layplux-portal', 'layplux-popup', currentPlacement.value, animatingIn.value && 'layplux-popup--visible'],
+            "style": {
+              position: 'fixed',
+              top: `${position.value.top}px`,
+              left: `${position.value.left}px`,
+              zIndex: 'var(--layplux-popup-z-index, 2000)'
+            },
+            "onMouseenter": onPopupMouseEnter,
+            "onMouseleave": onPopupMouseLeave
+          }, [slots.content?.()])]
+        })]);
+      };
+    }
+  });
+
+  const iconProps = {
+    size: {
+      type: [Number, String],
+      default: 16
+    }
+  };
+  function createIcon(d, viewBox = '0 0 16 16') {
+    return vue.defineComponent({
+      name: 'LaypluxIcon',
+      props: iconProps,
+      setup(props) {
+        return () => vue.createVNode("svg", {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "viewBox": viewBox,
+          "width": props.size,
+          "height": props.size,
+          "fill": "currentColor",
+          "style": {
+            flexShrink: 0
+          }
+        }, [vue.createVNode("path", {
+          "d": d
+        }, null)]);
+      }
+    });
+  }
+  const MoreIcon = createIcon('M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2', '0 0 24 24');
+  const MinimizeIcon = createIcon('M19 13H5v-2h14z', '0 0 24 24');
+  const ChevronRightIcon = createIcon('M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z', '0 0 24 24');
+
+  const DROPDOWN_CLOSE = Symbol('dropdown-close');
+  const DROPDOWN_ON_CLICK = Symbol('dropdown-on-click');
+  const Dropdown = vue.defineComponent({
+    name: 'LaypluxDropdown',
+    props: {
+      visible: Boolean,
+      trigger: {
+        type: String,
+        default: 'click'
+      },
+      placement: {
+        type: String,
+        default: 'bottom-start'
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: true
+      },
+      onClick: Function,
+      getContainer: {
+        type: Function
+      }
+    },
+    emits: ['update:visible'],
+    setup(props, {
+      emit,
+      slots
+    }) {
+      const closeDropdown = () => {
+        emit('update:visible', false);
+      };
+      vue.provide(DROPDOWN_CLOSE, closeDropdown);
+      vue.provide(DROPDOWN_ON_CLICK, props.onClick);
+      return () => vue.createVNode(Popup, {
+        "visible": props.visible,
+        "trigger": props.trigger,
+        "placement": props.placement,
+        "disabled": props.disabled,
+        "destroyOnClose": props.destroyOnClose,
+        "getContainer": props.getContainer,
+        "onUpdate:visible": v => emit('update:visible', v)
+      }, {
+        default: () => slots.default?.(),
+        content: () => vue.createVNode("div", {
+          "class": "layplux-dropdown"
+        }, [slots.overlay?.()])
+      });
+    }
+  });
+  const DropdownMenu = vue.defineComponent({
+    name: 'LaypluxDropdownMenu',
+    setup(_props, {
+      slots
+    }) {
+      return () => vue.createVNode("div", {
+        "class": "layplux-dropdown-menu"
+      }, [slots.default?.()]);
+    }
+  });
+  const DropdownItem = vue.defineComponent({
+    name: 'LaypluxDropdownItem',
+    props: {
+      eventKey: {
+        type: String,
+        required: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      danger: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props, {
+      slots
+    }) {
+      const closeDropdown = vue.inject(DROPDOWN_CLOSE);
+      const onItemClick = vue.inject(DROPDOWN_ON_CLICK);
+      const handleClick = () => {
+        if (props.disabled) return;
+        onItemClick?.(props.eventKey);
+        closeDropdown?.();
+      };
+      return () => vue.createVNode("div", {
+        "class": ['layplux-dropdown-menu__item', props.disabled && 'layplux-dropdown-menu__item--disabled', props.danger && 'layplux-dropdown-menu__item--danger'],
+        "onClick": handleClick
+      }, [slots.default?.()]);
+    }
+  });
+  const DropdownDivider = vue.defineComponent({
+    name: 'LaypluxDropdownDivider',
+    setup() {
+      return () => vue.createVNode("div", {
+        "class": "layplux-dropdown-menu__divider"
+      }, null);
+    }
+  });
+  const DropdownSubmenu = vue.defineComponent({
+    name: 'LaypluxDropdownSubmenu',
+    props: {
+      title: {
+        type: String
+      },
+      icon: Object,
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      getContainer: {
+        type: Function
+      }
+    },
+    setup(props, {
+      slots
+    }) {
+      const closeParent = vue.inject(DROPDOWN_CLOSE);
+      const onParentClick = vue.inject(DROPDOWN_ON_CLICK);
+      if (closeParent) {
+        vue.provide(DROPDOWN_CLOSE, closeParent);
+      }
+      const handleClick = key => {
+        onParentClick?.(key);
+        closeParent?.();
+      };
+      vue.provide(DROPDOWN_ON_CLICK, handleClick);
+      return () => vue.createVNode(Popup, {
+        "trigger": "hover",
+        "placement": "right-start",
+        "offset": {
+          x: 4,
+          y: 0
+        },
+        "mouseEnterDelay": 150,
+        "mouseLeaveDelay": 100,
+        "destroyOnClose": true,
+        "disabled": props.disabled,
+        "getContainer": props.getContainer
+      }, {
+        default: () => vue.createVNode("div", {
+          "class": ['layplux-dropdown-menu__item', 'layplux-dropdown-menu__item--submenu', props.disabled && 'layplux-dropdown-menu__item--disabled']
+        }, [props.icon, vue.createVNode("span", null, [props.title]), vue.createVNode(ChevronRightIcon, {
+          "size": 12,
+          "class": "layplux-dropdown-menu__submenu-arrow"
+        }, null)]),
+        content: () => vue.createVNode("div", {
+          "class": "layplux-dropdown"
+        }, [slots.default?.()])
+      });
+    }
+  });
+
+  function createContent(content, extraProps = {}) {
+    if (!content) return null;
+
+    // 1. 是 VNode -> 克隆并合并属性
+    if (vue.isVNode(content)) {
+      return vue.cloneVNode(content, extraProps);
+    }
+
+    // 2. 是字符串
+    if (typeof content === 'string') {
+      // 如果需要附加属性，则包裹在 span 中
+      if (Object.keys(extraProps).length > 0) {
+        return vue.h(content, extraProps, content);
+      }
+      // 否则创建纯文本节点，避免多余 DOM
+      return vue.h(vue.Text, null, content);
+    }
+
+    // 3. 否则视为组件（对象或函数）
+    return vue.h(content, extraProps);
+  }
+
+  let guid = Date.now();
+  function uniqueId(prefix = '') {
+    return `${prefix}${(guid++).toString(36).toLowerCase()}`;
+  }
+
+  /**
+   * 焦点追踪器 — 维护一个焦点栈，管理 Popup/Dropdown 等弹出层的点击外部关闭、ESC 关闭等行为。
+   *
+   * 核心概念：
+   * - actives 是一个栈（active/unshift），栈顶（first）是当前聚焦的 Focusable
+   * - modal Focusable 打开时会阻止非 modal 的上层焦点失焦
+   * - mount() 在 document 上监听 click，点击栈顶 Focusable 范围外时触发 blur
+   */
+  class FocusTracker {
+    /** 焦点栈，栈顶为当前聚焦项 */
+    actives = [];
+
+    /** modal 弹层注册表，用于检查是否有 modal 正在打开 */
+    modals = [];
+
+    /** 当前焦点栈顶 */
+    get first() {
+      return this.actives[0];
+    }
+
+    /** 注册一个 modal 弹层，用于 execSave 等时判断是否跳过 */
+    addModal(checkDown, checkOpen) {
+      this.modals.push({
+        checkDown,
+        checkOpen
+      });
+    }
+
+    /** 是否有 modal 弹层正在打开 */
+    checkModalOpen() {
+      return this.modals.some(item => item.checkOpen());
+    }
+
+    /** 触发保存操作，有 modal 时跳过 */
+    execSave() {
+      if (this.checkModalOpen()) return;
+      if (this.first) this.first.internalTriggerSave();
+    }
+
+    /** 触发 ESC — 挂起栈顶并调用其 onEsc */
+    execEsc() {
+      const {
+        first
+      } = this;
+      if (first) {
+        this.internalSuspenseItem(first);
+        first.internalTriggerEsc();
+      }
+    }
+
+    /**
+     * 挂载全局点击监听
+     * 点击 document 时，如果点击目标不在 first 的 range 内，则挂起 first 并触发 blur
+     * @returns 卸载函数
+     */
+    mount(win) {
+      const checkDown = e => {
+        const {
+          first
+        } = this;
+        if (first && !first.internalCheckInRange(e)) {
+          this.internalSuspenseItem(first);
+          first.internalTriggerBlur();
+        }
+      };
+      win.document.addEventListener('click', checkDown, true);
+      return () => win.document.removeEventListener('click', checkDown, true);
+    }
+
+    /** 创建一个 Focusable 实例并绑定到当前 tracker */
+    create(config) {
+      return new Focusable(this, config);
+    }
+
+    /**
+     * 激活一个 Focusable — 将其推到栈顶
+     * 如果栈顶已有其他 Focusable 且新项不是 modal，则先触发旧栈顶的 blur
+     */
+    internalActiveItem(item) {
+      const first = this.actives[0];
+      if (first === item) return;
+      const i = this.actives.indexOf(item);
+      if (i > -1) this.actives.splice(i, 1);
+      this.actives.unshift(item);
+      if (!item.isModal && first) first.internalTriggerBlur();
+      item.internalTriggerActive();
+    }
+
+    /**
+     * 挂起一个 Focusable — 将其从栈中移除
+     * 移除后如果还有剩余项，激活新的栈顶
+     */
+    internalSuspenseItem(item) {
+      const i = this.actives.indexOf(item);
+      if (i > -1) {
+        this.actives.splice(i, 1);
+        this.first?.internalTriggerActive();
+      }
+    }
+  }
+
+  /** Focusable 的创建配置 */
+
+  /**
+   * 可聚焦项 — 代表一个弹出层（Popup/Dropdown 等）的焦点状态
+   *
+   * 使用方式：
+   * 1. tracker.create(config) 创建 Focusable
+   * 2. 弹出层打开时调用 focusable.active() 推入栈顶
+   * 3. 弹出层关闭时调用 focusable.suspense() 或 purge() 移出栈
+   * 4. 需要在组件挂载后调用 setRange() 注入真实 DOM
+   */
+  class Focusable {
+    constructor(tracker, config) {
+      this.tracker = tracker;
+      this.config = config;
+      this.isModal = config.modal ?? false;
+    }
+
+    /** 激活当前 Focusable，推入焦点栈顶 */
+    active() {
+      this.tracker.internalActiveItem(this);
+    }
+
+    /** 挂起当前 Focusable，从焦点栈移除 */
+    suspense() {
+      this.tracker.internalSuspenseItem(this);
+    }
+
+    /** 销毁当前 Focusable（同 suspense，语义化别名） */
+    purge() {
+      this.tracker.internalSuspenseItem(this);
+    }
+
+    /** 挂载后把真实 DOM 注入，使 range 的 contains 判断生效 */
+    setRange(range) {
+      this.config.range = range;
+    }
+
+    /** 检查点击事件是否在 range 范围内 */
+    internalCheckInRange(e) {
+      const {
+        range
+      } = this.config;
+      if (!range) return false;
+      if (typeof range === 'function') return range(e);
+      return range.contains(e.target);
+    }
+
+    /** 触发失焦回调 */
+    internalTriggerBlur() {
+      this.config.onBlur?.();
+    }
+
+    /** 触发保存回调，返回 true 表示已处理 */
+    internalTriggerSave() {
+      if (this.config.onSave) {
+        this.config.onSave();
+        return true;
+      }
+      return false;
+    }
+
+    /** 触发 ESC 回调 */
+    internalTriggerEsc() {
+      this.config.onEsc?.();
+    }
+
+    /** 触发激活回调 */
+    internalTriggerActive() {
+      this.config.onActive?.();
+    }
+  }
+
+  function getDefaultExportFromCjs (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  var eventemitter2 = {exports: {}};
+
+  /*!
+   * EventEmitter2
+   * https://github.com/hij1nx/EventEmitter2
+   *
+   * Copyright (c) 2013 hij1nx
+   * Licensed under the MIT license.
+   */
+
+  var hasRequiredEventemitter2;
+
+  function requireEventemitter2 () {
+  	if (hasRequiredEventemitter2) return eventemitter2.exports;
+  	hasRequiredEventemitter2 = 1;
+  	(function (module, exports) {
+  !function(undefined$1) {
+  		  var hasOwnProperty= Object.hasOwnProperty;
+  		  var isArray = Array.isArray ? Array.isArray : function _isArray(obj) {
+  		    return Object.prototype.toString.call(obj) === "[object Array]";
+  		  };
+  		  var defaultMaxListeners = 10;
+  		  var nextTickSupported= typeof process=='object' && typeof process.nextTick=='function';
+  		  var symbolsSupported= typeof Symbol==='function';
+  		  var reflectSupported= typeof Reflect === 'object';
+  		  var setImmediateSupported= typeof setImmediate === 'function';
+  		  var _setImmediate= setImmediateSupported ? setImmediate : setTimeout;
+  		  var ownKeys= symbolsSupported? (reflectSupported && typeof Reflect.ownKeys==='function'? Reflect.ownKeys : function(obj){
+  		    var arr= Object.getOwnPropertyNames(obj);
+  		    arr.push.apply(arr, Object.getOwnPropertySymbols(obj));
+  		    return arr;
+  		  }) : Object.keys;
+
+  		  function init() {
+  		    this._events = {};
+  		    if (this._conf) {
+  		      configure.call(this, this._conf);
+  		    }
+  		  }
+
+  		  function configure(conf) {
+  		    if (conf) {
+  		      this._conf = conf;
+
+  		      conf.delimiter && (this.delimiter = conf.delimiter);
+
+  		      if(conf.maxListeners!==undefined$1){
+  		          this._maxListeners= conf.maxListeners;
+  		      }
+
+  		      conf.wildcard && (this.wildcard = conf.wildcard);
+  		      conf.newListener && (this._newListener = conf.newListener);
+  		      conf.removeListener && (this._removeListener = conf.removeListener);
+  		      conf.verboseMemoryLeak && (this.verboseMemoryLeak = conf.verboseMemoryLeak);
+  		      conf.ignoreErrors && (this.ignoreErrors = conf.ignoreErrors);
+
+  		      if (this.wildcard) {
+  		        this.listenerTree = {};
+  		      }
+  		    }
+  		  }
+
+  		  function logPossibleMemoryLeak(count, eventName) {
+  		    var errorMsg = '(node) warning: possible EventEmitter memory ' +
+  		        'leak detected. ' + count + ' listeners added. ' +
+  		        'Use emitter.setMaxListeners() to increase limit.';
+
+  		    if(this.verboseMemoryLeak){
+  		      errorMsg += ' Event name: ' + eventName + '.';
+  		    }
+
+  		    if(typeof process !== 'undefined' && process.emitWarning){
+  		      var e = new Error(errorMsg);
+  		      e.name = 'MaxListenersExceededWarning';
+  		      e.emitter = this;
+  		      e.count = count;
+  		      process.emitWarning(e);
+  		    } else {
+  		      console.error(errorMsg);
+
+  		      if (console.trace){
+  		        console.trace();
+  		      }
+  		    }
+  		  }
+
+  		  var toArray = function (a, b, c) {
+  		    var n = arguments.length;
+  		    switch (n) {
+  		      case 0:
+  		        return [];
+  		      case 1:
+  		        return [a];
+  		      case 2:
+  		        return [a, b];
+  		      case 3:
+  		        return [a, b, c];
+  		      default:
+  		        var arr = new Array(n);
+  		        while (n--) {
+  		          arr[n] = arguments[n];
+  		        }
+  		        return arr;
+  		    }
+  		  };
+
+  		  function toObject(keys, values) {
+  		    var obj = {};
+  		    var key;
+  		    var len = keys.length;
+  		    var valuesCount = 0;
+  		    for (var i = 0; i < len; i++) {
+  		      key = keys[i];
+  		      obj[key] = i < valuesCount ? values[i] : undefined$1;
+  		    }
+  		    return obj;
+  		  }
+
+  		  function TargetObserver(emitter, target, options) {
+  		    this._emitter = emitter;
+  		    this._target = target;
+  		    this._listeners = {};
+  		    this._listenersCount = 0;
+
+  		    var on, off;
+
+  		    if (options.on || options.off) {
+  		      on = options.on;
+  		      off = options.off;
+  		    }
+
+  		    if (target.addEventListener) {
+  		      on = target.addEventListener;
+  		      off = target.removeEventListener;
+  		    } else if (target.addListener) {
+  		      on = target.addListener;
+  		      off = target.removeListener;
+  		    } else if (target.on) {
+  		      on = target.on;
+  		      off = target.off;
+  		    }
+
+  		    if (!on && !off) {
+  		      throw Error('target does not implement any known event API');
+  		    }
+
+  		    if (typeof on !== 'function') {
+  		      throw TypeError('on method must be a function');
+  		    }
+
+  		    if (typeof off !== 'function') {
+  		      throw TypeError('off method must be a function');
+  		    }
+
+  		    this._on = on;
+  		    this._off = off;
+
+  		    var _observers= emitter._observers;
+  		    if(_observers){
+  		      _observers.push(this);
+  		    }else {
+  		      emitter._observers= [this];
+  		    }
+  		  }
+
+  		  Object.assign(TargetObserver.prototype, {
+  		    subscribe: function(event, localEvent, reducer){
+  		      var observer= this;
+  		      var target= this._target;
+  		      var emitter= this._emitter;
+  		      var listeners= this._listeners;
+  		      var handler= function(){
+  		        var args= toArray.apply(null, arguments);
+  		        var eventObj= {
+  		          data: args,
+  		          name: localEvent,
+  		          original: event
+  		        };
+  		        if(reducer){
+  		          var result= reducer.call(target, eventObj);
+  		          if(result!==false){
+  		            emitter.emit.apply(emitter, [eventObj.name].concat(args));
+  		          }
+  		          return;
+  		        }
+  		        emitter.emit.apply(emitter, [localEvent].concat(args));
+  		      };
+
+
+  		      if(listeners[event]){
+  		        throw Error('Event \'' + event + '\' is already listening');
+  		      }
+
+  		      this._listenersCount++;
+
+  		      if(emitter._newListener && emitter._removeListener && !observer._onNewListener){
+
+  		        this._onNewListener = function (_event) {
+  		          if (_event === localEvent && listeners[event] === null) {
+  		            listeners[event] = handler;
+  		            observer._on.call(target, event, handler);
+  		          }
+  		        };
+
+  		        emitter.on('newListener', this._onNewListener);
+
+  		        this._onRemoveListener= function(_event){
+  		          if(_event === localEvent && !emitter.hasListeners(_event) && listeners[event]){
+  		            listeners[event]= null;
+  		            observer._off.call(target, event, handler);
+  		          }
+  		        };
+
+  		        listeners[event]= null;
+
+  		        emitter.on('removeListener', this._onRemoveListener);
+  		      }else {
+  		        listeners[event]= handler;
+  		        observer._on.call(target, event, handler);
+  		      }
+  		    },
+
+  		    unsubscribe: function(event){
+  		      var observer= this;
+  		      var listeners= this._listeners;
+  		      var emitter= this._emitter;
+  		      var handler;
+  		      var events;
+  		      var off= this._off;
+  		      var target= this._target;
+  		      var i;
+
+  		      if(event && typeof event!=='string'){
+  		        throw TypeError('event must be a string');
+  		      }
+
+  		      function clearRefs(){
+  		        if(observer._onNewListener){
+  		          emitter.off('newListener', observer._onNewListener);
+  		          emitter.off('removeListener', observer._onRemoveListener);
+  		          observer._onNewListener= null;
+  		          observer._onRemoveListener= null;
+  		        }
+  		        var index= findTargetIndex.call(emitter, observer);
+  		        emitter._observers.splice(index, 1);
+  		      }
+
+  		      if(event){
+  		        handler= listeners[event];
+  		        if(!handler) return;
+  		        off.call(target, event, handler);
+  		        delete listeners[event];
+  		        if(!--this._listenersCount){
+  		          clearRefs();
+  		        }
+  		      }else {
+  		        events= ownKeys(listeners);
+  		        i= events.length;
+  		        while(i-->0){
+  		          event= events[i];
+  		          off.call(target, event, listeners[event]);
+  		        }
+  		        this._listeners= {};
+  		        this._listenersCount= 0;
+  		        clearRefs();
+  		      }
+  		    }
+  		  });
+
+  		  function resolveOptions(options, schema, reducers, allowUnknown) {
+  		    var computedOptions = Object.assign({}, schema);
+
+  		    if (!options) return computedOptions;
+
+  		    if (typeof options !== 'object') {
+  		      throw TypeError('options must be an object')
+  		    }
+
+  		    var keys = Object.keys(options);
+  		    var length = keys.length;
+  		    var option, value;
+  		    var reducer;
+
+  		    function reject(reason) {
+  		      throw Error('Invalid "' + option + '" option value' + (reason ? '. Reason: ' + reason : ''))
+  		    }
+
+  		    for (var i = 0; i < length; i++) {
+  		      option = keys[i];
+  		      if (!hasOwnProperty.call(schema, option)) {
+  		        throw Error('Unknown "' + option + '" option');
+  		      }
+  		      value = options[option];
+  		      if (value !== undefined$1) {
+  		        reducer = reducers[option];
+  		        computedOptions[option] = reducer ? reducer(value, reject) : value;
+  		      }
+  		    }
+  		    return computedOptions;
+  		  }
+
+  		  function constructorReducer(value, reject) {
+  		    if (typeof value !== 'function' || !value.hasOwnProperty('prototype')) {
+  		      reject('value must be a constructor');
+  		    }
+  		    return value;
+  		  }
+
+  		  function makeTypeReducer(types) {
+  		    var message= 'value must be type of ' + types.join('|');
+  		    var len= types.length;
+  		    var firstType= types[0];
+  		    var secondType= types[1];
+
+  		    if (len === 1) {
+  		      return function (v, reject) {
+  		        if (typeof v === firstType) {
+  		          return v;
+  		        }
+  		        reject(message);
+  		      }
+  		    }
+
+  		    if (len === 2) {
+  		      return function (v, reject) {
+  		        var kind= typeof v;
+  		        if (kind === firstType || kind === secondType) return v;
+  		        reject(message);
+  		      }
+  		    }
+
+  		    return function (v, reject) {
+  		      var kind = typeof v;
+  		      var i = len;
+  		      while (i-- > 0) {
+  		        if (kind === types[i]) return v;
+  		      }
+  		      reject(message);
+  		    }
+  		  }
+
+  		  var functionReducer= makeTypeReducer(['function']);
+
+  		  var objectFunctionReducer= makeTypeReducer(['object', 'function']);
+
+  		  function makeCancelablePromise(Promise, executor, options) {
+  		    var isCancelable;
+  		    var callbacks;
+  		    var timer= 0;
+  		    var subscriptionClosed;
+
+  		    var promise = new Promise(function (resolve, reject, onCancel) {
+  		      options= resolveOptions(options, {
+  		        timeout: 0,
+  		        overload: false
+  		      }, {
+  		        timeout: function(value, reject){
+  		          value*= 1;
+  		          if (typeof value !== 'number' || value < 0 || !Number.isFinite(value)) {
+  		            reject('timeout must be a positive number');
+  		          }
+  		          return value;
+  		        }
+  		      });
+
+  		      isCancelable = !options.overload && typeof Promise.prototype.cancel === 'function' && typeof onCancel === 'function';
+
+  		      function cleanup() {
+  		        if (callbacks) {
+  		          callbacks = null;
+  		        }
+  		        if (timer) {
+  		          clearTimeout(timer);
+  		          timer = 0;
+  		        }
+  		      }
+
+  		      var _resolve= function(value){
+  		        cleanup();
+  		        resolve(value);
+  		      };
+
+  		      var _reject= function(err){
+  		        cleanup();
+  		        reject(err);
+  		      };
+
+  		      if (isCancelable) {
+  		        executor(_resolve, _reject, onCancel);
+  		      } else {
+  		        callbacks = [function(reason){
+  		          _reject(reason || Error('canceled'));
+  		        }];
+  		        executor(_resolve, _reject, function (cb) {
+  		          if (subscriptionClosed) {
+  		            throw Error('Unable to subscribe on cancel event asynchronously')
+  		          }
+  		          if (typeof cb !== 'function') {
+  		            throw TypeError('onCancel callback must be a function');
+  		          }
+  		          callbacks.push(cb);
+  		        });
+  		        subscriptionClosed= true;
+  		      }
+
+  		      if (options.timeout > 0) {
+  		        timer= setTimeout(function(){
+  		          var reason= Error('timeout');
+  		          reason.code = 'ETIMEDOUT';
+  		          timer= 0;
+  		          promise.cancel(reason);
+  		          reject(reason);
+  		        }, options.timeout);
+  		      }
+  		    });
+
+  		    if (!isCancelable) {
+  		      promise.cancel = function (reason) {
+  		        if (!callbacks) {
+  		          return;
+  		        }
+  		        var length = callbacks.length;
+  		        for (var i = 1; i < length; i++) {
+  		          callbacks[i](reason);
+  		        }
+  		        // internal callback to reject the promise
+  		        callbacks[0](reason);
+  		        callbacks = null;
+  		      };
+  		    }
+
+  		    return promise;
+  		  }
+
+  		  function findTargetIndex(observer) {
+  		    var observers = this._observers;
+  		    if(!observers){
+  		      return -1;
+  		    }
+  		    var len = observers.length;
+  		    for (var i = 0; i < len; i++) {
+  		      if (observers[i]._target === observer) return i;
+  		    }
+  		    return -1;
+  		  }
+
+  		  // Attention, function return type now is array, always !
+  		  // It has zero elements if no any matches found and one or more
+  		  // elements (leafs) if there are matches
+  		  //
+  		  function searchListenerTree(handlers, type, tree, i, typeLength) {
+  		    if (!tree) {
+  		      return null;
+  		    }
+
+  		    if (i === 0) {
+  		      var kind = typeof type;
+  		      if (kind === 'string') {
+  		        var ns, n, l = 0, j = 0, delimiter = this.delimiter, dl = delimiter.length;
+  		        if ((n = type.indexOf(delimiter)) !== -1) {
+  		          ns = new Array(5);
+  		          do {
+  		            ns[l++] = type.slice(j, n);
+  		            j = n + dl;
+  		          } while ((n = type.indexOf(delimiter, j)) !== -1);
+
+  		          ns[l++] = type.slice(j);
+  		          type = ns;
+  		          typeLength = l;
+  		        } else {
+  		          type = [type];
+  		          typeLength = 1;
+  		        }
+  		      } else if (kind === 'object') {
+  		        typeLength = type.length;
+  		      } else {
+  		        type = [type];
+  		        typeLength = 1;
+  		      }
+  		    }
+
+  		    var listeners= null, branch, xTree, xxTree, isolatedBranch, endReached, currentType = type[i],
+  		        nextType = type[i + 1], branches, _listeners;
+
+  		    if (i === typeLength) {
+  		      //
+  		      // If at the end of the event(s) list and the tree has listeners
+  		      // invoke those listeners.
+  		      //
+
+  		      if(tree._listeners) {
+  		        if (typeof tree._listeners === 'function') {
+  		          handlers && handlers.push(tree._listeners);
+  		          listeners = [tree];
+  		        } else {
+  		          handlers && handlers.push.apply(handlers, tree._listeners);
+  		          listeners = [tree];
+  		        }
+  		      }
+  		    } else {
+
+  		      if (currentType === '*') {
+  		        //
+  		        // If the event emitted is '*' at this part
+  		        // or there is a concrete match at this patch
+  		        //
+  		        branches = ownKeys(tree);
+  		        n = branches.length;
+  		        while (n-- > 0) {
+  		          branch = branches[n];
+  		          if (branch !== '_listeners') {
+  		            _listeners = searchListenerTree(handlers, type, tree[branch], i + 1, typeLength);
+  		            if (_listeners) {
+  		              if (listeners) {
+  		                listeners.push.apply(listeners, _listeners);
+  		              } else {
+  		                listeners = _listeners;
+  		              }
+  		            }
+  		          }
+  		        }
+  		        return listeners;
+  		      } else if (currentType === '**') {
+  		        endReached = (i + 1 === typeLength || (i + 2 === typeLength && nextType === '*'));
+  		        if (endReached && tree._listeners) {
+  		          // The next element has a _listeners, add it to the handlers.
+  		          listeners = searchListenerTree(handlers, type, tree, typeLength, typeLength);
+  		        }
+
+  		        branches = ownKeys(tree);
+  		        n = branches.length;
+  		        while (n-- > 0) {
+  		          branch = branches[n];
+  		          if (branch !== '_listeners') {
+  		            if (branch === '*' || branch === '**') {
+  		              if (tree[branch]._listeners && !endReached) {
+  		                _listeners = searchListenerTree(handlers, type, tree[branch], typeLength, typeLength);
+  		                if (_listeners) {
+  		                  if (listeners) {
+  		                    listeners.push.apply(listeners, _listeners);
+  		                  } else {
+  		                    listeners = _listeners;
+  		                  }
+  		                }
+  		              }
+  		              _listeners = searchListenerTree(handlers, type, tree[branch], i, typeLength);
+  		            } else if (branch === nextType) {
+  		              _listeners = searchListenerTree(handlers, type, tree[branch], i + 2, typeLength);
+  		            } else {
+  		              // No match on this one, shift into the tree but not in the type array.
+  		              _listeners = searchListenerTree(handlers, type, tree[branch], i, typeLength);
+  		            }
+  		            if (_listeners) {
+  		              if (listeners) {
+  		                listeners.push.apply(listeners, _listeners);
+  		              } else {
+  		                listeners = _listeners;
+  		              }
+  		            }
+  		          }
+  		        }
+  		        return listeners;
+  		      } else if (tree[currentType]) {
+  		        listeners = searchListenerTree(handlers, type, tree[currentType], i + 1, typeLength);
+  		      }
+  		    }
+
+  		      xTree = tree['*'];
+  		    if (xTree) {
+  		      //
+  		      // If the listener tree will allow any match for this part,
+  		      // then recursively explore all branches of the tree
+  		      //
+  		      searchListenerTree(handlers, type, xTree, i + 1, typeLength);
+  		    }
+
+  		    xxTree = tree['**'];
+  		    if (xxTree) {
+  		      if (i < typeLength) {
+  		        if (xxTree._listeners) {
+  		          // If we have a listener on a '**', it will catch all, so add its handler.
+  		          searchListenerTree(handlers, type, xxTree, typeLength, typeLength);
+  		        }
+
+  		        // Build arrays of matching next branches and others.
+  		        branches= ownKeys(xxTree);
+  		        n= branches.length;
+  		        while(n-->0){
+  		          branch= branches[n];
+  		          if (branch !== '_listeners') {
+  		            if (branch === nextType) {
+  		              // We know the next element will match, so jump twice.
+  		              searchListenerTree(handlers, type, xxTree[branch], i + 2, typeLength);
+  		            } else if (branch === currentType) {
+  		              // Current node matches, move into the tree.
+  		              searchListenerTree(handlers, type, xxTree[branch], i + 1, typeLength);
+  		            } else {
+  		              isolatedBranch = {};
+  		              isolatedBranch[branch] = xxTree[branch];
+  		              searchListenerTree(handlers, type, {'**': isolatedBranch}, i + 1, typeLength);
+  		            }
+  		          }
+  		        }
+  		      } else if (xxTree._listeners) {
+  		        // We have reached the end and still on a '**'
+  		        searchListenerTree(handlers, type, xxTree, typeLength, typeLength);
+  		      } else if (xxTree['*'] && xxTree['*']._listeners) {
+  		        searchListenerTree(handlers, type, xxTree['*'], typeLength, typeLength);
+  		      }
+  		    }
+
+  		    return listeners;
+  		  }
+
+  		  function growListenerTree(type, listener, prepend) {
+  		    var len = 0, j = 0, i, delimiter = this.delimiter, dl= delimiter.length, ns;
+
+  		    if(typeof type==='string') {
+  		      if ((i = type.indexOf(delimiter)) !== -1) {
+  		        ns = new Array(5);
+  		        do {
+  		          ns[len++] = type.slice(j, i);
+  		          j = i + dl;
+  		        } while ((i = type.indexOf(delimiter, j)) !== -1);
+
+  		        ns[len++] = type.slice(j);
+  		      }else {
+  		        ns= [type];
+  		        len= 1;
+  		      }
+  		    }else {
+  		      ns= type;
+  		      len= type.length;
+  		    }
+
+  		    //
+  		    // Looks for two consecutive '**', if so, don't add the event at all.
+  		    //
+  		    if (len > 1) {
+  		      for (i = 0; i + 1 < len; i++) {
+  		        if (ns[i] === '**' && ns[i + 1] === '**') {
+  		          return;
+  		        }
+  		      }
+  		    }
+
+
+
+  		    var tree = this.listenerTree, name;
+
+  		    for (i = 0; i < len; i++) {
+  		      name = ns[i];
+
+  		      tree = tree[name] || (tree[name] = {});
+
+  		      if (i === len - 1) {
+  		        if (!tree._listeners) {
+  		          tree._listeners = listener;
+  		        } else {
+  		          if (typeof tree._listeners === 'function') {
+  		            tree._listeners = [tree._listeners];
+  		          }
+
+  		          if (prepend) {
+  		            tree._listeners.unshift(listener);
+  		          } else {
+  		            tree._listeners.push(listener);
+  		          }
+
+  		          if (
+  		              !tree._listeners.warned &&
+  		              this._maxListeners > 0 &&
+  		              tree._listeners.length > this._maxListeners
+  		          ) {
+  		            tree._listeners.warned = true;
+  		            logPossibleMemoryLeak.call(this, tree._listeners.length, name);
+  		          }
+  		        }
+  		        return true;
+  		      }
+  		    }
+
+  		    return true;
+  		  }
+
+  		  function collectTreeEvents(tree, events, root, asArray){
+  		     var branches= ownKeys(tree);
+  		     var i= branches.length;
+  		     var branch, branchName, path;
+  		     var hasListeners= tree['_listeners'];
+  		     var isArrayPath;
+
+  		     while(i-->0){
+  		         branchName= branches[i];
+
+  		         branch= tree[branchName];
+
+  		         if(branchName==='_listeners'){
+  		             path= root;
+  		         }else {
+  		             path = root ? root.concat(branchName) : [branchName];
+  		         }
+
+  		         isArrayPath= asArray || typeof branchName==='symbol';
+
+  		         hasListeners && events.push(isArrayPath? path : path.join(this.delimiter));
+
+  		         if(typeof branch==='object'){
+  		             collectTreeEvents.call(this, branch, events, path, isArrayPath);
+  		         }
+  		     }
+
+  		     return events;
+  		  }
+
+  		  function recursivelyGarbageCollect(root) {
+  		    var keys = ownKeys(root);
+  		    var i= keys.length;
+  		    var obj, key, flag;
+  		    while(i-->0){
+  		      key = keys[i];
+  		      obj = root[key];
+
+  		      if(obj){
+  		          flag= true;
+  		          if(key !== '_listeners' && !recursivelyGarbageCollect(obj)){
+  		             delete root[key];
+  		          }
+  		      }
+  		    }
+
+  		    return flag;
+  		  }
+
+  		  function Listener(emitter, event, listener){
+  		    this.emitter= emitter;
+  		    this.event= event;
+  		    this.listener= listener;
+  		  }
+
+  		  Listener.prototype.off= function(){
+  		    this.emitter.off(this.event, this.listener);
+  		    return this;
+  		  };
+
+  		  function setupListener(event, listener, options){
+  		      if (options === true) {
+  		        promisify = true;
+  		      } else if (options === false) {
+  		        async = true;
+  		      } else {
+  		        if (!options || typeof options !== 'object') {
+  		          throw TypeError('options should be an object or true');
+  		        }
+  		        var async = options.async;
+  		        var promisify = options.promisify;
+  		        var nextTick = options.nextTick;
+  		        var objectify = options.objectify;
+  		      }
+
+  		      if (async || nextTick || promisify) {
+  		        var _listener = listener;
+  		        var _origin = listener._origin || listener;
+
+  		        if (nextTick && !nextTickSupported) {
+  		          throw Error('process.nextTick is not supported');
+  		        }
+
+  		        if (promisify === undefined$1) {
+  		          promisify = listener.constructor.name === 'AsyncFunction';
+  		        }
+
+  		        listener = function () {
+  		          var args = arguments;
+  		          var context = this;
+  		          var event = this.event;
+
+  		          return promisify ? (nextTick ? Promise.resolve() : new Promise(function (resolve) {
+  		            _setImmediate(resolve);
+  		          }).then(function () {
+  		            context.event = event;
+  		            return _listener.apply(context, args)
+  		          })) : (nextTick ? process.nextTick : _setImmediate)(function () {
+  		            context.event = event;
+  		            _listener.apply(context, args);
+  		          });
+  		        };
+
+  		        listener._async = true;
+  		        listener._origin = _origin;
+  		      }
+
+  		    return [listener, objectify? new Listener(this, event, listener): this];
+  		  }
+
+  		  function EventEmitter(conf) {
+  		    this._events = {};
+  		    this._newListener = false;
+  		    this._removeListener = false;
+  		    this.verboseMemoryLeak = false;
+  		    configure.call(this, conf);
+  		  }
+
+  		  EventEmitter.EventEmitter2 = EventEmitter; // backwards compatibility for exporting EventEmitter property
+
+  		  EventEmitter.prototype.listenTo= function(target, events, options){
+  		    if(typeof target!=='object'){
+  		      throw TypeError('target musts be an object');
+  		    }
+
+  		    var emitter= this;
+
+  		    options = resolveOptions(options, {
+  		      on: undefined$1,
+  		      off: undefined$1,
+  		      reducers: undefined$1
+  		    }, {
+  		      on: functionReducer,
+  		      off: functionReducer,
+  		      reducers: objectFunctionReducer
+  		    });
+
+  		    function listen(events){
+  		      if(typeof events!=='object'){
+  		        throw TypeError('events must be an object');
+  		      }
+
+  		      var reducers= options.reducers;
+  		      var index= findTargetIndex.call(emitter, target);
+  		      var observer;
+
+  		      if(index===-1){
+  		        observer= new TargetObserver(emitter, target, options);
+  		      }else {
+  		        observer= emitter._observers[index];
+  		      }
+
+  		      var keys= ownKeys(events);
+  		      var len= keys.length;
+  		      var event;
+  		      var isSingleReducer= typeof reducers==='function';
+
+  		      for(var i=0; i<len; i++){
+  		        event= keys[i];
+  		        observer.subscribe(
+  		            event,
+  		            events[event] || event,
+  		            isSingleReducer ? reducers : reducers && reducers[event]
+  		        );
+  		      }
+  		    }
+
+  		    isArray(events)?
+  		        listen(toObject(events)) :
+  		        (typeof events==='string'? listen(toObject(events.split(/\s+/))): listen(events));
+
+  		    return this;
+  		  };
+
+  		  EventEmitter.prototype.stopListeningTo = function (target, event) {
+  		    var observers = this._observers;
+
+  		    if(!observers){
+  		      return false;
+  		    }
+
+  		    var i = observers.length;
+  		    var observer;
+  		    var matched= false;
+
+  		    if(target && typeof target!=='object'){
+  		      throw TypeError('target should be an object');
+  		    }
+
+  		    while (i-- > 0) {
+  		      observer = observers[i];
+  		      if (!target || observer._target === target) {
+  		        observer.unsubscribe(event);
+  		        matched= true;
+  		      }
+  		    }
+
+  		    return matched;
+  		  };
+
+  		  // By default EventEmitters will print a warning if more than
+  		  // 10 listeners are added to it. This is a useful default which
+  		  // helps finding memory leaks.
+  		  //
+  		  // Obviously not all Emitters should be limited to 10. This function allows
+  		  // that to be increased. Set to zero for unlimited.
+
+  		  EventEmitter.prototype.delimiter = '.';
+
+  		  EventEmitter.prototype.setMaxListeners = function(n) {
+  		    if (n !== undefined$1) {
+  		      this._maxListeners = n;
+  		      if (!this._conf) this._conf = {};
+  		      this._conf.maxListeners = n;
+  		    }
+  		  };
+
+  		  EventEmitter.prototype.getMaxListeners = function() {
+  		    return this._maxListeners;
+  		  };
+
+  		  EventEmitter.prototype.event = '';
+
+  		  EventEmitter.prototype.once = function(event, fn, options) {
+  		    return this._once(event, fn, false, options);
+  		  };
+
+  		  EventEmitter.prototype.prependOnceListener = function(event, fn, options) {
+  		    return this._once(event, fn, true, options);
+  		  };
+
+  		  EventEmitter.prototype._once = function(event, fn, prepend, options) {
+  		    return this._many(event, 1, fn, prepend, options);
+  		  };
+
+  		  EventEmitter.prototype.many = function(event, ttl, fn, options) {
+  		    return this._many(event, ttl, fn, false, options);
+  		  };
+
+  		  EventEmitter.prototype.prependMany = function(event, ttl, fn, options) {
+  		    return this._many(event, ttl, fn, true, options);
+  		  };
+
+  		  EventEmitter.prototype._many = function(event, ttl, fn, prepend, options) {
+  		    var self = this;
+
+  		    if (typeof fn !== 'function') {
+  		      throw new Error('many only accepts instances of Function');
+  		    }
+
+  		    function listener() {
+  		      if (--ttl === 0) {
+  		        self.off(event, listener);
+  		      }
+  		      return fn.apply(this, arguments);
+  		    }
+
+  		    listener._origin = fn;
+
+  		    return this._on(event, listener, prepend, options);
+  		  };
+
+  		  EventEmitter.prototype.emit = function() {
+  		    if (!this._events && !this._all) {
+  		      return false;
+  		    }
+
+  		    this._events || init.call(this);
+
+  		    var type = arguments[0], ns, wildcard= this.wildcard;
+  		    var args,l,i,j, containsSymbol;
+
+  		    if (type === 'newListener' && !this._newListener) {
+  		      if (!this._events.newListener) {
+  		        return false;
+  		      }
+  		    }
+
+  		    if (wildcard) {
+  		      ns= type;
+  		      if(type!=='newListener' && type!=='removeListener'){
+  		        if (typeof type === 'object') {
+  		          l = type.length;
+  		          if (symbolsSupported) {
+  		            for (i = 0; i < l; i++) {
+  		              if (typeof type[i] === 'symbol') {
+  		                containsSymbol = true;
+  		                break;
+  		              }
+  		            }
+  		          }
+  		          if (!containsSymbol) {
+  		            type = type.join(this.delimiter);
+  		          }
+  		        }
+  		      }
+  		    }
+
+  		    var al = arguments.length;
+  		    var handler;
+
+  		    if (this._all && this._all.length) {
+  		      handler = this._all.slice();
+
+  		      for (i = 0, l = handler.length; i < l; i++) {
+  		        this.event = type;
+  		        switch (al) {
+  		        case 1:
+  		          handler[i].call(this, type);
+  		          break;
+  		        case 2:
+  		          handler[i].call(this, type, arguments[1]);
+  		          break;
+  		        case 3:
+  		          handler[i].call(this, type, arguments[1], arguments[2]);
+  		          break;
+  		        default:
+  		          handler[i].apply(this, arguments);
+  		        }
+  		      }
+  		    }
+
+  		    if (wildcard) {
+  		      handler = [];
+  		      searchListenerTree.call(this, handler, ns, this.listenerTree, 0, l);
+  		    } else {
+  		      handler = this._events[type];
+  		      if (typeof handler === 'function') {
+  		        this.event = type;
+  		        switch (al) {
+  		        case 1:
+  		          handler.call(this);
+  		          break;
+  		        case 2:
+  		          handler.call(this, arguments[1]);
+  		          break;
+  		        case 3:
+  		          handler.call(this, arguments[1], arguments[2]);
+  		          break;
+  		        default:
+  		          args = new Array(al - 1);
+  		          for (j = 1; j < al; j++) args[j - 1] = arguments[j];
+  		          handler.apply(this, args);
+  		        }
+  		        return true;
+  		      } else if (handler) {
+  		        // need to make copy of handlers because list can change in the middle
+  		        // of emit call
+  		        handler = handler.slice();
+  		      }
+  		    }
+
+  		    if (handler && handler.length) {
+  		      if (al > 3) {
+  		        args = new Array(al - 1);
+  		        for (j = 1; j < al; j++) args[j - 1] = arguments[j];
+  		      }
+  		      for (i = 0, l = handler.length; i < l; i++) {
+  		        this.event = type;
+  		        switch (al) {
+  		        case 1:
+  		          handler[i].call(this);
+  		          break;
+  		        case 2:
+  		          handler[i].call(this, arguments[1]);
+  		          break;
+  		        case 3:
+  		          handler[i].call(this, arguments[1], arguments[2]);
+  		          break;
+  		        default:
+  		          handler[i].apply(this, args);
+  		        }
+  		      }
+  		      return true;
+  		    } else if (!this.ignoreErrors && !this._all && type === 'error') {
+  		      if (arguments[1] instanceof Error) {
+  		        throw arguments[1]; // Unhandled 'error' event
+  		      } else {
+  		        throw new Error("Uncaught, unspecified 'error' event.");
+  		      }
+  		    }
+
+  		    return !!this._all;
+  		  };
+
+  		  EventEmitter.prototype.emitAsync = function() {
+  		    if (!this._events && !this._all) {
+  		      return false;
+  		    }
+
+  		    this._events || init.call(this);
+
+  		    var type = arguments[0], wildcard= this.wildcard, ns, containsSymbol;
+  		    var args,l,i,j;
+
+  		    if (type === 'newListener' && !this._newListener) {
+  		        if (!this._events.newListener) { return Promise.resolve([false]); }
+  		    }
+
+  		    if (wildcard) {
+  		      ns= type;
+  		      if(type!=='newListener' && type!=='removeListener'){
+  		        if (typeof type === 'object') {
+  		          l = type.length;
+  		          if (symbolsSupported) {
+  		            for (i = 0; i < l; i++) {
+  		              if (typeof type[i] === 'symbol') {
+  		                containsSymbol = true;
+  		                break;
+  		              }
+  		            }
+  		          }
+  		          if (!containsSymbol) {
+  		            type = type.join(this.delimiter);
+  		          }
+  		        }
+  		      }
+  		    }
+
+  		    var promises= [];
+
+  		    var al = arguments.length;
+  		    var handler;
+
+  		    if (this._all) {
+  		      for (i = 0, l = this._all.length; i < l; i++) {
+  		        this.event = type;
+  		        switch (al) {
+  		        case 1:
+  		          promises.push(this._all[i].call(this, type));
+  		          break;
+  		        case 2:
+  		          promises.push(this._all[i].call(this, type, arguments[1]));
+  		          break;
+  		        case 3:
+  		          promises.push(this._all[i].call(this, type, arguments[1], arguments[2]));
+  		          break;
+  		        default:
+  		          promises.push(this._all[i].apply(this, arguments));
+  		        }
+  		      }
+  		    }
+
+  		    if (wildcard) {
+  		      handler = [];
+  		      searchListenerTree.call(this, handler, ns, this.listenerTree, 0);
+  		    } else {
+  		      handler = this._events[type];
+  		    }
+
+  		    if (typeof handler === 'function') {
+  		      this.event = type;
+  		      switch (al) {
+  		      case 1:
+  		        promises.push(handler.call(this));
+  		        break;
+  		      case 2:
+  		        promises.push(handler.call(this, arguments[1]));
+  		        break;
+  		      case 3:
+  		        promises.push(handler.call(this, arguments[1], arguments[2]));
+  		        break;
+  		      default:
+  		        args = new Array(al - 1);
+  		        for (j = 1; j < al; j++) args[j - 1] = arguments[j];
+  		        promises.push(handler.apply(this, args));
+  		      }
+  		    } else if (handler && handler.length) {
+  		      handler = handler.slice();
+  		      if (al > 3) {
+  		        args = new Array(al - 1);
+  		        for (j = 1; j < al; j++) args[j - 1] = arguments[j];
+  		      }
+  		      for (i = 0, l = handler.length; i < l; i++) {
+  		        this.event = type;
+  		        switch (al) {
+  		        case 1:
+  		          promises.push(handler[i].call(this));
+  		          break;
+  		        case 2:
+  		          promises.push(handler[i].call(this, arguments[1]));
+  		          break;
+  		        case 3:
+  		          promises.push(handler[i].call(this, arguments[1], arguments[2]));
+  		          break;
+  		        default:
+  		          promises.push(handler[i].apply(this, args));
+  		        }
+  		      }
+  		    } else if (!this.ignoreErrors && !this._all && type === 'error') {
+  		      if (arguments[1] instanceof Error) {
+  		        return Promise.reject(arguments[1]); // Unhandled 'error' event
+  		      } else {
+  		        return Promise.reject("Uncaught, unspecified 'error' event.");
+  		      }
+  		    }
+
+  		    return Promise.all(promises);
+  		  };
+
+  		  EventEmitter.prototype.on = function(type, listener, options) {
+  		    return this._on(type, listener, false, options);
+  		  };
+
+  		  EventEmitter.prototype.prependListener = function(type, listener, options) {
+  		    return this._on(type, listener, true, options);
+  		  };
+
+  		  EventEmitter.prototype.onAny = function(fn) {
+  		    return this._onAny(fn, false);
+  		  };
+
+  		  EventEmitter.prototype.prependAny = function(fn) {
+  		    return this._onAny(fn, true);
+  		  };
+
+  		  EventEmitter.prototype.addListener = EventEmitter.prototype.on;
+
+  		  EventEmitter.prototype._onAny = function(fn, prepend){
+  		    if (typeof fn !== 'function') {
+  		      throw new Error('onAny only accepts instances of Function');
+  		    }
+
+  		    if (!this._all) {
+  		      this._all = [];
+  		    }
+
+  		    // Add the function to the event listener collection.
+  		    if(prepend){
+  		      this._all.unshift(fn);
+  		    }else {
+  		      this._all.push(fn);
+  		    }
+
+  		    return this;
+  		  };
+
+  		  EventEmitter.prototype._on = function(type, listener, prepend, options) {
+  		    if (typeof type === 'function') {
+  		      this._onAny(type, listener);
+  		      return this;
+  		    }
+
+  		    if (typeof listener !== 'function') {
+  		      throw new Error('on only accepts instances of Function');
+  		    }
+  		    this._events || init.call(this);
+
+  		    var returnValue= this, temp;
+
+  		    if (options !== undefined$1) {
+  		      temp = setupListener.call(this, type, listener, options);
+  		      listener = temp[0];
+  		      returnValue = temp[1];
+  		    }
+
+  		    // To avoid recursion in the case that type == "newListeners"! Before
+  		    // adding it to the listeners, first emit "newListeners".
+  		    if (this._newListener) {
+  		      this.emit('newListener', type, listener);
+  		    }
+
+  		    if (this.wildcard) {
+  		      growListenerTree.call(this, type, listener, prepend);
+  		      return returnValue;
+  		    }
+
+  		    if (!this._events[type]) {
+  		      // Optimize the case of one listener. Don't need the extra array object.
+  		      this._events[type] = listener;
+  		    } else {
+  		      if (typeof this._events[type] === 'function') {
+  		        // Change to array.
+  		        this._events[type] = [this._events[type]];
+  		      }
+
+  		      // If we've already got an array, just add
+  		      if(prepend){
+  		        this._events[type].unshift(listener);
+  		      }else {
+  		        this._events[type].push(listener);
+  		      }
+
+  		      // Check for listener leak
+  		      if (
+  		        !this._events[type].warned &&
+  		        this._maxListeners > 0 &&
+  		        this._events[type].length > this._maxListeners
+  		      ) {
+  		        this._events[type].warned = true;
+  		        logPossibleMemoryLeak.call(this, this._events[type].length, type);
+  		      }
+  		    }
+
+  		    return returnValue;
+  		  };
+
+  		  EventEmitter.prototype.off = function(type, listener) {
+  		    if (typeof listener !== 'function') {
+  		      throw new Error('removeListener only takes instances of Function');
+  		    }
+
+  		    var handlers,leafs=[];
+
+  		    if(this.wildcard) {
+  		      var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
+  		      leafs = searchListenerTree.call(this, null, ns, this.listenerTree, 0);
+  		      if(!leafs) return this;
+  		    } else {
+  		      // does not use listeners(), so no side effect of creating _events[type]
+  		      if (!this._events[type]) return this;
+  		      handlers = this._events[type];
+  		      leafs.push({_listeners:handlers});
+  		    }
+
+  		    for (var iLeaf=0; iLeaf<leafs.length; iLeaf++) {
+  		      var leaf = leafs[iLeaf];
+  		      handlers = leaf._listeners;
+  		      if (isArray(handlers)) {
+
+  		        var position = -1;
+
+  		        for (var i = 0, length = handlers.length; i < length; i++) {
+  		          if (handlers[i] === listener ||
+  		            (handlers[i].listener && handlers[i].listener === listener) ||
+  		            (handlers[i]._origin && handlers[i]._origin === listener)) {
+  		            position = i;
+  		            break;
+  		          }
+  		        }
+
+  		        if (position < 0) {
+  		          continue;
+  		        }
+
+  		        if(this.wildcard) {
+  		          leaf._listeners.splice(position, 1);
+  		        }
+  		        else {
+  		          this._events[type].splice(position, 1);
+  		        }
+
+  		        if (handlers.length === 0) {
+  		          if(this.wildcard) {
+  		            delete leaf._listeners;
+  		          }
+  		          else {
+  		            delete this._events[type];
+  		          }
+  		        }
+  		        if (this._removeListener)
+  		          this.emit("removeListener", type, listener);
+
+  		        return this;
+  		      }
+  		      else if (handlers === listener ||
+  		        (handlers.listener && handlers.listener === listener) ||
+  		        (handlers._origin && handlers._origin === listener)) {
+  		        if(this.wildcard) {
+  		          delete leaf._listeners;
+  		        }
+  		        else {
+  		          delete this._events[type];
+  		        }
+  		        if (this._removeListener)
+  		          this.emit("removeListener", type, listener);
+  		      }
+  		    }
+
+  		    this.listenerTree && recursivelyGarbageCollect(this.listenerTree);
+
+  		    return this;
+  		  };
+
+  		  EventEmitter.prototype.offAny = function(fn) {
+  		    var i = 0, l = 0, fns;
+  		    if (fn && this._all && this._all.length > 0) {
+  		      fns = this._all;
+  		      for(i = 0, l = fns.length; i < l; i++) {
+  		        if(fn === fns[i]) {
+  		          fns.splice(i, 1);
+  		          if (this._removeListener)
+  		            this.emit("removeListenerAny", fn);
+  		          return this;
+  		        }
+  		      }
+  		    } else {
+  		      fns = this._all;
+  		      if (this._removeListener) {
+  		        for(i = 0, l = fns.length; i < l; i++)
+  		          this.emit("removeListenerAny", fns[i]);
+  		      }
+  		      this._all = [];
+  		    }
+  		    return this;
+  		  };
+
+  		  EventEmitter.prototype.removeListener = EventEmitter.prototype.off;
+
+  		  EventEmitter.prototype.removeAllListeners = function (type) {
+  		    if (type === undefined$1) {
+  		      !this._events || init.call(this);
+  		      return this;
+  		    }
+
+  		    if (this.wildcard) {
+  		      var leafs = searchListenerTree.call(this, null, type, this.listenerTree, 0), leaf, i;
+  		      if (!leafs) return this;
+  		      for (i = 0; i < leafs.length; i++) {
+  		        leaf = leafs[i];
+  		        leaf._listeners = null;
+  		      }
+  		      this.listenerTree && recursivelyGarbageCollect(this.listenerTree);
+  		    } else if (this._events) {
+  		      this._events[type] = null;
+  		    }
+  		    return this;
+  		  };
+
+  		  EventEmitter.prototype.listeners = function (type) {
+  		    var _events = this._events;
+  		    var keys, listeners, allListeners;
+  		    var i;
+  		    var listenerTree;
+
+  		    if (type === undefined$1) {
+  		      if (this.wildcard) {
+  		        throw Error('event name required for wildcard emitter');
+  		      }
+
+  		      if (!_events) {
+  		        return [];
+  		      }
+
+  		      keys = ownKeys(_events);
+  		      i = keys.length;
+  		      allListeners = [];
+  		      while (i-- > 0) {
+  		        listeners = _events[keys[i]];
+  		        if (typeof listeners === 'function') {
+  		          allListeners.push(listeners);
+  		        } else {
+  		          allListeners.push.apply(allListeners, listeners);
+  		        }
+  		      }
+  		      return allListeners;
+  		    } else {
+  		      if (this.wildcard) {
+  		        listenerTree= this.listenerTree;
+  		        if(!listenerTree) return [];
+  		        var handlers = [];
+  		        var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
+  		        searchListenerTree.call(this, handlers, ns, listenerTree, 0);
+  		        return handlers;
+  		      }
+
+  		      if (!_events) {
+  		        return [];
+  		      }
+
+  		      listeners = _events[type];
+
+  		      if (!listeners) {
+  		        return [];
+  		      }
+  		      return typeof listeners === 'function' ? [listeners] : listeners;
+  		    }
+  		  };
+
+  		  EventEmitter.prototype.eventNames = function(nsAsArray){
+  		    var _events= this._events;
+  		    return this.wildcard? collectTreeEvents.call(this, this.listenerTree, [], null, nsAsArray) : (_events? ownKeys(_events) : []);
+  		  };
+
+  		  EventEmitter.prototype.listenerCount = function(type) {
+  		    return this.listeners(type).length;
+  		  };
+
+  		  EventEmitter.prototype.hasListeners = function (type) {
+  		    if (this.wildcard) {
+  		      var handlers = [];
+  		      var ns = typeof type === 'string' ? type.split(this.delimiter) : type.slice();
+  		      searchListenerTree.call(this, handlers, ns, this.listenerTree, 0);
+  		      return handlers.length > 0;
+  		    }
+
+  		    var _events = this._events;
+  		    var _all = this._all;
+
+  		    return !!(_all && _all.length || _events && (type === undefined$1 ? ownKeys(_events).length : _events[type]));
+  		  };
+
+  		  EventEmitter.prototype.listenersAny = function() {
+
+  		    if(this._all) {
+  		      return this._all;
+  		    }
+  		    else {
+  		      return [];
+  		    }
+
+  		  };
+
+  		  EventEmitter.prototype.waitFor = function (event, options) {
+  		    var self = this;
+  		    var type = typeof options;
+  		    if (type === 'number') {
+  		      options = {timeout: options};
+  		    } else if (type === 'function') {
+  		      options = {filter: options};
+  		    }
+
+  		    options= resolveOptions(options, {
+  		      timeout: 0,
+  		      filter: undefined$1,
+  		      handleError: false,
+  		      Promise: Promise,
+  		      overload: false
+  		    }, {
+  		      filter: functionReducer,
+  		      Promise: constructorReducer
+  		    });
+
+  		    return makeCancelablePromise(options.Promise, function (resolve, reject, onCancel) {
+  		      function listener() {
+  		        var filter= options.filter;
+  		        if (filter && !filter.apply(self, arguments)) {
+  		          return;
+  		        }
+  		        self.off(event, listener);
+  		        if (options.handleError) {
+  		          var err = arguments[0];
+  		          err ? reject(err) : resolve(toArray.apply(null, arguments).slice(1));
+  		        } else {
+  		          resolve(toArray.apply(null, arguments));
+  		        }
+  		      }
+
+  		      onCancel(function(){
+  		        self.off(event, listener);
+  		      });
+
+  		      self._on(event, listener, false);
+  		    }, {
+  		      timeout: options.timeout,
+  		      overload: options.overload
+  		    })
+  		  };
+
+  		  function once(emitter, name, options) {
+  		    options= resolveOptions(options, {
+  		      Promise: Promise,
+  		      timeout: 0,
+  		      overload: false
+  		    }, {
+  		      Promise: constructorReducer
+  		    });
+
+  		    var _Promise= options.Promise;
+
+  		    return makeCancelablePromise(_Promise, function(resolve, reject, onCancel){
+  		      var handler;
+  		      if (typeof emitter.addEventListener === 'function') {
+  		        handler=  function () {
+  		          resolve(toArray.apply(null, arguments));
+  		        };
+
+  		        onCancel(function(){
+  		          emitter.removeEventListener(name, handler);
+  		        });
+
+  		        emitter.addEventListener(
+  		            name,
+  		            handler,
+  		            {once: true}
+  		        );
+  		        return;
+  		      }
+
+  		      var eventListener = function(){
+  		        errorListener && emitter.removeListener('error', errorListener);
+  		        resolve(toArray.apply(null, arguments));
+  		      };
+
+  		      var errorListener;
+
+  		      if (name !== 'error') {
+  		        errorListener = function (err){
+  		          emitter.removeListener(name, eventListener);
+  		          reject(err);
+  		        };
+
+  		        emitter.once('error', errorListener);
+  		      }
+
+  		      onCancel(function(){
+  		        errorListener && emitter.removeListener('error', errorListener);
+  		        emitter.removeListener(name, eventListener);
+  		      });
+
+  		      emitter.once(name, eventListener);
+  		    }, {
+  		      timeout: options.timeout,
+  		      overload: options.overload
+  		    });
+  		  }
+
+  		  var prototype= EventEmitter.prototype;
+
+  		  Object.defineProperties(EventEmitter, {
+  		    defaultMaxListeners: {
+  		      get: function () {
+  		        return prototype._maxListeners;
+  		      },
+  		      set: function (n) {
+  		        if (typeof n !== 'number' || n < 0 || Number.isNaN(n)) {
+  		          throw TypeError('n must be a non-negative number')
+  		        }
+  		        prototype._maxListeners = n;
+  		      },
+  		      enumerable: true
+  		    },
+  		    once: {
+  		      value: once,
+  		      writable: true,
+  		      configurable: true
+  		    }
+  		  });
+
+  		  Object.defineProperties(prototype, {
+  		      _maxListeners: {
+  		          value: defaultMaxListeners,
+  		          writable: true,
+  		          configurable: true
+  		      },
+  		      _observers: {value: null, writable: true, configurable: true}
+  		  });
+
+  		  {
+  		    // CommonJS
+  		    module.exports = EventEmitter;
+  		  }
+  		}(); 
+  	} (eventemitter2));
+  	return eventemitter2.exports;
+  }
+
+  var eventemitter2Exports = requireEventemitter2();
+  var EventEmitter2 = /*@__PURE__*/getDefaultExportFromCjs(eventemitter2Exports);
+
+  // =================================================================
+  // event-bus.ts — 基于 EventEmitter2 的插件事件总线
+  //
+  // 利用 EventEmitter2 的三个核心特性：
+  //   1. wildcard: true  → 支持 'terminal:*' 订阅整个命名空间
+  //   2. delimiter: ':'  → 'namespace:event' 格式的原生支持
+  //   3. listener.off()  → 订阅返回 Listener 对象，无需手动传 handler 引用
+  // =================================================================
+
+
+  // ── 全局总线单例（所有插件共享，跨插件通信用）──────────────────────
+  //
+  // wildcard + delimiter 让命名空间隔离变成原生能力：
+  //   - 插件 A 订阅 'terminal:*'  可以收到所有 terminal 前缀的事件
+  //   - 全局订阅 '**' 可以监听所有事件（调试用）
+  //   - maxListeners 设大一点，避免大量插件时出现警告
+
+  const globalEmitter = new EventEmitter2({
+    wildcard: true,
+    // 开启通配符
+    delimiter: ':',
+    // 命名空间分隔符，与原版 createModuleEventBus 保持一致
+    newListener: false,
+    // 不触发 newListener 事件，减少不必要开销
+    maxListeners: 200,
+    // 对标原版 createModuleEventBus(pluginName, 200) 的容量参数
+    verboseMemoryLeak: true // 超出 maxListeners 时打印详细的内存泄漏警告
+  });
+  // ── 插件私有事件总线工厂函数 ──────────────────────────────────────
+  //
+  // 每个插件获得一个独立的 emitter 实例（私有事件不污染全局），
+  // 同时持有 globalEmitter 引用用于跨插件通信。
+  //
+  // 命名规则：
+  //   ctx.event.emit('data-loaded')       → 实际发出 'terminal:data-loaded'（自动加前缀）
+  //   ctx.event.on('data-loaded', fn)     → 订阅 'terminal:data-loaded'
+  //   ctx.event.onGlobal('layout:*', fn)  → 订阅全局总线上所有 layout 事件（wildcard）
+  //   ctx.event.emitGlobal('layout:ready')→ 向全局总线发出事件，所有插件都能收到
+
+  function createPluginEventBus(namespace) {
+    // 每个插件自己的私有 emitter（同样开启 wildcard）
+    const privateEmitter = new EventEmitter2({
+      wildcard: true,
+      delimiter: ':',
+      newListener: false,
+      maxListeners: 200,
+      verboseMemoryLeak: true
+    });
+    const prefixed = event => `${namespace}:${event}`;
+    return {
+      // ── 私有事件（自动加 namespace 前缀）──────────────────────────
+
+      emit(event, payload) {
+        privateEmitter.emit(prefixed(event), payload);
+      },
+      /**
+       * 订阅私有事件，返回取消订阅函数。
+       * 利用 EventEmitter2 的 Listener 对象的 .off() 方法，
+       * 无需调用方保存 handler 引用。
+       */
+      on(event, handler) {
+        const listener = privateEmitter.on(prefixed(event), handler, {
+          objectify: true
+        } // 返回 Listener 对象而非 emitter 本身
+        );
+        return () => listener.off();
+      },
+      off(event, handler) {
+        privateEmitter.off(prefixed(event), handler);
+      },
+      /**
+       * 订阅一次后自动取消
+       */
+      once(event, handler) {
+        const listener = privateEmitter.once(prefixed(event), handler, {
+          objectify: true
+        });
+        return () => listener.off();
+      },
+      // ── 全局事件（跨插件通信，走 globalEmitter）────────────────────
+
+      emitGlobal(event, payload) {
+        globalEmitter.emit(event, payload);
+      },
+      /**
+       * 订阅全局事件，支持通配符：
+       *   onGlobal('layout:*', fn)       → 订阅所有 layout 事件
+       *   onGlobal('layout:panel-**', fn)→ 订阅所有 layout:panel 开头的事件
+       *   onGlobal('**', fn)             → 订阅所有全局事件（慎用）
+       */
+      onGlobal(event, handler) {
+        const listener = globalEmitter.on(event, handler, {
+          objectify: true
+        });
+        return () => listener.off();
+      },
+      offGlobal(event, handler) {
+        globalEmitter.off(event, handler);
+      },
+      onGlobalOnce(event, handler) {
+        const listener = globalEmitter.once(event, handler, {
+          objectify: true
+        });
+        return () => listener.off();
+      },
+      /**
+       * 等待某个全局事件触发，返回 Promise（EventEmitter2 原生支持）
+       * 适合插件 setup 中等待其他插件就绪的场景：
+       *   await ctx.event.waitForGlobal('explorer:ready', 5000)
+       */
+      waitForGlobal(event, timeoutMs) {
+        return new Promise((resolve, reject) => {
+          const timer = timeoutMs ? setTimeout(() => {
+            globalEmitter.off(event, onEvent);
+            reject(new Error(`[EventBus] Timeout waiting for "${event}" after ${timeoutMs}ms`));
+          }, timeoutMs) : null;
+          function onEvent(payload) {
+            if (timer) clearTimeout(timer);
+            resolve(payload);
+          }
+          globalEmitter.once(event, onEvent);
+        });
+      },
+      // ── 清理（插件 destroy 时调用）─────────────────────────────────
+
+      /**
+       * 移除该插件私有 emitter 上的所有监听器。
+       * 全局监听器需要单独 offGlobal（插件应在 teardown 中手动清理）。
+       */
+      removeAllListeners() {
+        privateEmitter.removeAllListeners();
+      }
+    };
+  }
+
+  const zhCN = {
+    panel: {
+      viewMode: '视图模式',
+      dockPinned: '停靠固定',
+      dockUnpinned: '停靠不固定',
+      undock: '取消停靠',
+      help: '帮助',
+      more: '更多',
+      minimize: '最小化'
+    }
+  };
+
+  const enUS = {
+    panel: {
+      viewMode: 'View Mode',
+      dockPinned: 'Dock Pinned',
+      dockUnpinned: 'Dock Unpinned',
+      undock: 'Undock',
+      help: 'Help',
+      more: 'More',
+      minimize: 'Minimize'
+    }
+  };
+
+  const builtInLocales = {
+    'zh-CN': zhCN,
+    'en-US': enUS
+  };
+  function getBuiltInLocale(name) {
+    const locale = builtInLocales[name];
+    if (!locale) {
+      console.warn(`[Layplux] Unknown locale "${name}", falling back to zh-CN`);
+      return zhCN;
+    }
+    return locale;
+  }
+
+  function _isSlot$2(s) {
+    return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+  }
+  const viewModeKeys = new Set(['DockPinned', 'DockUnpinned', 'Undock']);
+  function findItem(items, key) {
+    if (!items) return;
+    for (const item of items) {
+      if (item.key === key) return item;
+      if (item.children?.length) {
+        const found = findItem(item.children, key);
+        if (found) return found;
+      }
+    }
+  }
+  const PanelView = vue.defineComponent({
+    name: 'PanelView',
+    props: {
+      anchor: String,
+      title: String,
+      widget: Object,
+      menuItems: Array
+    },
+    setup(props, {
+      slots
+    }) {
+      const panelRef = vue.ref();
+      const defaultLocale = vue.ref(getBuiltInLocale('zh-CN'));
+      const locale = vue.inject('layplux-locale', defaultLocale);
+      const handleClick = key => {
+        const widget = props.widget;
+        widget?.event?.emitGlobal(`panel:${widget.name}:menu-click`, {
+          widget,
+          key
+        });
+        const widgetProps = widget?.config.props;
+        const panelItems = widgetProps?.panelMenuItems;
+        const panelItem = findItem(panelItems, key);
+        if (panelItem?.onClick) {
+          panelItem.onClick(key, widget);
+          return;
+        }
+        if (viewModeKeys.has(key)) {
+          widget?.pane.setViewMode(key);
+        } else if (key === 'help') {
+          widgetProps?.onHelpClick?.();
+        }
+      };
+      function handlePanelClick() {
+        props.widget?.focusable.active();
+      }
+      function renderItems(items, currentMode) {
+        return items.map(item => {
+          if (item.type === 'divider') {
+            return vue.createVNode(DropdownDivider, {
+              "key": item.key ?? 'divider'
+            }, null);
+          }
+          const k = item.key ?? '';
+          if (item.children?.length) {
+            let _slot;
+            return vue.createVNode(DropdownSubmenu, {
+              "key": k,
+              "title": item.label,
+              "icon": item.icon,
+              "getContainer": () => panelRef.value
+            }, _isSlot$2(_slot = renderItems(item.children, currentMode)) ? _slot : {
+              default: () => [_slot]
+            });
+          }
+          const disabled = currentMode !== undefined && viewModeKeys.has(k) && currentMode === k;
+          return vue.createVNode(DropdownItem, {
+            "key": k,
+            "eventKey": k,
+            "disabled": disabled
+          }, {
+            default: () => [item.icon, vue.createTextVNode(" "), item.label]
+          });
+        });
+      }
+      return () => {
+        const widget = props.widget;
+        const currentMode = widget?.pane.viewMode.value;
+        const widgetProps = widget?.config.props;
+        const hasCustomItems = props.menuItems && props.menuItems.length > 0;
+        const panelMenuItems = widgetProps?.panelMenuItems;
+        const hasPanelMenuItems = panelMenuItems && panelMenuItems.length > 0;
+        const showHelp = widgetProps?.showHelp !== false;
+        const loc = locale.value.panel;
+        const finalInnerItems = [{
+          key: 'viewMode',
+          label: loc.viewMode,
+          children: [{
+            key: 'DockPinned',
+            label: loc.dockPinned
+          }, {
+            key: 'DockUnpinned',
+            label: loc.dockUnpinned
+          }, {
+            key: 'Undock',
+            label: loc.undock
+          }]
+        }, {
+          type: 'divider'
+        }, ...(showHelp ? [{
+          key: 'help',
+          label: loc.help
+        }] : [])];
+        const panelTitleExtra = widgetProps?.panelTitleExtra;
+        const panelActionsExtra = widgetProps?.panelActionsExtra;
+        return vue.createVNode("div", {
+          "ref": panelRef,
+          "id": widget?.id,
+          "class": "layplux-panel",
+          "onClick": handlePanelClick
+        }, [vue.createVNode("div", {
+          "class": "layplux-panel__header"
+        }, [vue.createVNode("span", {
+          "class": "layplux-panel__title"
+        }, [props.title ?? widget?.name]), panelTitleExtra && createContent(panelTitleExtra), vue.createVNode("div", {
+          "class": "layplux-panel__actions"
+        }, [panelActionsExtra && createContent(panelActionsExtra), slots.actionsExtra?.(), vue.createVNode(Dropdown, {
+          "trigger": "click",
+          "placement": "bottom-start",
+          "onClick": handleClick,
+          "getContainer": () => panelRef.value
+        }, {
+          default: () => vue.createVNode("button", {
+            "class": "layplux-panel__action-btn",
+            "title": loc.more
+          }, [vue.createVNode(MoreIcon, {
+            "size": 16
+          }, null)]),
+          overlay: () => vue.createVNode(DropdownMenu, null, {
+            default: () => [hasPanelMenuItems && renderItems(panelMenuItems), hasPanelMenuItems && hasCustomItems && vue.createVNode(DropdownDivider, null, null), hasCustomItems && renderItems(props.menuItems), (hasPanelMenuItems || hasCustomItems) && vue.createVNode(DropdownDivider, null, null), renderItems(finalInnerItems, currentMode)]
+          })
+        }), vue.createVNode("button", {
+          "class": "layplux-panel__action-btn",
+          "title": loc.minimize,
+          "onClick": () => {
+            widget?.event?.emitGlobal(`panel:${widget.name}:minimize`, {
+              widget
+            });
+            widget?.container?.deactivate();
+          }
+        }, [vue.createVNode(MinimizeIcon, {
+          "size": 16
+        }, null)])])]), vue.createVNode("div", {
+          "id": props.anchor,
+          "class": "layplux-panel__body"
+        }, null)]);
+      };
+    }
+  });
+
+  const TitleView = vue.defineComponent({
+    name: 'TitleView',
+    inheritAttrs: false,
+    props: {
+      icon: [String, Object, Function],
+      title: [String, Object, Function],
+      mode: {
+        type: String,
+        default: 'icon-only'
+      },
+      /** 交互状态：idle / active / disabled / error。idle 时 hover 由 CSS :hover 处理 */
+      state: {
+        type: String,
+        default: 'idle'
+      },
+      /** 聚焦/选中态，独立于 state，可与任何状态叠加 */
+      focused: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: 'middle'
+      },
+      className: {
+        type: String,
+        default: ''
+      },
+      onClick: Function
+    },
+    setup(props) {
+      return () => {
+        const {
+          icon,
+          title,
+          mode,
+          state,
+          size,
+          focused,
+          className,
+          onClick
+        } = props;
+        const iconNode = icon ? createContent(icon) : null;
+        const titleNode = title ? createContent(title) : null;
+        const classes = ['title-view', `title-view--${mode}`, `title-view--${state}`, `title-view--${size}`, focused && 'title-view--focused', className].filter(Boolean).join(' ');
+        return vue.createVNode("span", {
+          "class": classes,
+          "onClick": onClick
+        }, [vue.createVNode("span", {
+          "class": "title-view__icon"
+        }, [iconNode]), vue.createVNode("span", {
+          "class": "title-view__label"
+        }, [titleNode])]);
+      };
+    }
+  });
+
+  /*
+   * @Author: shuwen 1243889238@qq.com
+   * @Date: 2026-06-08 16:12:13
+   * @LastEditors: shuwen 1243889238@qq.com
+   * @LastEditTime: 2026-06-09 16:58:03
+   * @FilePath: /Layplux/packages/layplux/src/components/tooltip/index.tsx
+   * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+   */
+  const Tooltip = vue.defineComponent({
+    name: 'LaypluxTooltip',
+    props: {
+      title: [String, Object, Function],
+      trigger: {
+        type: String,
+        default: 'hover'
+      },
+      placement: {
+        type: String,
+        default: 'top'
+      },
+      mouseEnterDelay: {
+        type: Number,
+        default: 100
+      },
+      mouseLeaveDelay: {
+        type: Number,
+        default: 100
+      },
+      visible: Boolean,
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      getContainer: {
+        type: Function,
+        default: () => document.body
+      }
+    },
+    emits: ['update:visible'],
+    setup(props, {
+      emit,
+      slots
+    }) {
+      return () => vue.createVNode(Popup, {
+        "visible": props.visible,
+        "trigger": props.trigger,
+        "placement": props.placement,
+        "disabled": props.disabled,
+        "mouseEnterDelay": props.mouseEnterDelay,
+        "mouseLeaveDelay": props.mouseLeaveDelay,
+        "destroyOnClose": true,
+        "getContainer": props.getContainer,
+        "onUpdate:visible": v => emit('update:visible', v)
+      }, {
+        default: () => slots.default?.(),
+        content: () => {
+          const hasContent = slots.content;
+          const titleNode = hasContent ? slots.content?.() : createContent(props.title);
+          return vue.createVNode("div", {
+            "class": "layplux-tooltip"
+          }, [vue.createVNode("div", {
+            "class": "layplux-tooltip__arrow"
+          }, null), vue.createVNode("div", {
+            "class": "layplux-tooltip__inner"
+          }, [titleNode])]);
+        }
+      });
+    }
+  });
+
+  const WidgetView = vue.defineComponent({
+    name: 'WidgetView',
+    inheritAttrs: false,
+    props: {
+      widget: Object
+    },
+    setup(props) {
+      const hasError = vue.ref(false);
+      const errorMessage = vue.ref('');
+      vue.onErrorCaptured(err => {
+        hasError.value = true;
+        errorMessage.value = err.message;
+        console.error(`[Layplux] Widget "${props.widget?.name}" crashed:`, err);
+        return false;
+      });
+      return () => {
+        const {
+          widget
+        } = props;
+        if (hasError.value) {
+          const fallback = widget?.config.props?.errorFallback;
+          if (fallback) {
+            return vue.h(fallback, {
+              error: errorMessage.value,
+              widget
+            });
+          }
+          return vue.createVNode("div", {
+            "class": "layplux-widget-error"
+          }, [vue.createVNode("span", null, [vue.createTextVNode("\u7EC4\u4EF6 \""), widget?.name, vue.createTextVNode("\" \u53D1\u751F\u9519\u8BEF")]), vue.createVNode("pre", null, [errorMessage.value])]);
+        }
+        return vue.createVNode(vue.Fragment, null, [widget?.renderBody()]);
+      };
+    }
+  });
+  const WidgetTitleView = vue.defineComponent({
+    name: 'WidgetTitleView',
+    inheritAttrs: false,
+    props: {
+      widget: Object
+    },
+    setup(props) {
+      const tooltipVisible = vue.ref(false);
+      const handleClick = () => {
+        tooltipVisible.value = false;
+        props.widget?.container?.toggleActive(props.widget?.name);
+      };
+      return () => {
+        const {
+          widget
+        } = props;
+        const tooltipTitle = widget?.config.props?.title ?? widget?.name ?? '';
+        return vue.createVNode("div", {
+          "class": "widget-title-view"
+        }, [vue.createVNode(Tooltip, {
+          "visible": tooltipVisible.value,
+          "onUpdate:visible": v => {
+            tooltipVisible.value = v;
+          },
+          "title": tooltipTitle,
+          "placement": "right",
+          "mouseEnterDelay": 500,
+          "getContainer": () => document.querySelector('.layplux-root') || document.body
+        }, {
+          default: () => [vue.createVNode(TitleView, {
+            "onClick": handleClick,
+            "focused": widget?.focused.value,
+            "state": widget?.active.value ? 'active' : 'idle',
+            "icon": widget?.config.props?.icon,
+            "title": widget?.config.props?.title
+          }, null)]
+        })]);
+      };
+    }
+  });
+
+  function _isSlot$1(s) {
+    return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+  }
+  vue.defineComponent({
+    name: 'CenterView',
+    props: {
+      widget: Object,
+      anchor: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      return () => {
+        let _slot;
+        if (!props.widget) return null;
+        return vue.createVNode(vue.Teleport, {
+          "defer": true,
+          "to": props.anchor
+        }, _isSlot$1(_slot = props.widget.renderContent()) ? _slot : {
+          default: () => [_slot]
+        });
+      };
+    }
+  });
+
+  function _isSlot(s) {
+    return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+  }
+  const CenterArea = vue.defineComponent({
+    name: 'CenterArea',
+    props: {
+      skeleton: Object,
+      centerArea: Object
+    },
+    setup(props) {
+      // ─── FocusTracker 全局挂载 ────────────────────────────────────────────
+      // 监听 document click，点击面板外自动触发 onBlur（DockUnpinned 自动收起）
+      let unmountFocusTracker = null;
+      vue.onMounted(() => {
+        unmountFocusTracker = props.skeleton?.focusTracker.mount(window) ?? null;
+      });
+      vue.onUnmounted(() => {
+        unmountFocusTracker?.();
+      });
+
+      // ─── 面板尺寸状态 ─────────────────────────────────────────────────────
+      const leftWidth = vue.ref(340);
+      const rightWidth = vue.ref(340);
+      const bottomHeight = vue.ref(300);
+
+      // 上下 / 左右内部分割比例 (0~1)
+      const leftSplitRatio = vue.ref(0.5);
+      const rightSplitRatio = vue.ref(0.5);
+      const bottomSplitRatio = vue.ref(0.5);
+
+      // ─── 通用拖拽 ─────────────────────────────────────────────────────────
+      function startDrag(e, axis, onMove) {
+        e.preventDefault();
+        const startPos = axis === 'x' ? e.clientX : e.clientY;
+        const onMouseMove = ev => onMove((axis === 'x' ? ev.clientX : ev.clientY) - startPos);
+        const onMouseUp = () => {
+          window.removeEventListener('mousemove', onMouseMove);
+          window.removeEventListener('mouseup', onMouseUp);
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+      }
+
+      // 左侧整体宽度
+      function dragLeftWidth(e) {
+        const base = leftWidth.value;
+        startDrag(e, 'x', d => {
+          leftWidth.value = Math.max(160, Math.min(600, base + d));
+        });
+      }
+      // 右侧整体宽度（向左拖拽变宽，delta 取反）
+      function dragRightWidth(e) {
+        const base = rightWidth.value;
+        startDrag(e, 'x', d => {
+          rightWidth.value = Math.max(160, Math.min(600, base - d));
+        });
+      }
+      // 底部整体高度（向上拖拽变高，delta 取反）
+      function dragBottomHeight(e) {
+        const base = bottomHeight.value;
+        startDrag(e, 'y', d => {
+          bottomHeight.value = Math.max(80, Math.min(600, base - d));
+        });
+      }
+      // 左侧内部上下分割
+      function dragLeftSplit(e, totalHeight) {
+        const base = leftSplitRatio.value;
+        startDrag(e, 'y', d => {
+          leftSplitRatio.value = Math.max(0.15, Math.min(0.85, base + d / totalHeight));
+        });
+      }
+      // 右侧内部上下分割
+      function dragRightSplit(e, totalHeight) {
+        const base = rightSplitRatio.value;
+        startDrag(e, 'y', d => {
+          rightSplitRatio.value = Math.max(0.15, Math.min(0.85, base + d / totalHeight));
+        });
+      }
+      // 底部内部左右分割
+      function dragBottomSplit(e, totalWidth) {
+        const base = bottomSplitRatio.value;
+        startDrag(e, 'x', d => {
+          bottomSplitRatio.value = Math.max(0.15, Math.min(0.85, base + d / totalWidth));
+        });
+      }
+
+      // ─── 辅助 ─────────────────────────────────────────────────────────────
+      function getActiveWidget(activeId) {
+        if (!activeId) return null;
+        return props.skeleton?.widgets.find(w => w.name === activeId) ?? null;
+      }
+      function isDocked(activeId) {
+        const mode = getActiveWidget(activeId)?.pane.viewMode.value;
+        return mode === 'DockPinned' || mode === 'DockUnpinned';
+      }
+
+      // ─── 各侧 active widget ───────────────────────────────────────────────
+      const leftTopWidget = vue.computed(() => getActiveWidget(props.skeleton?.leftTopArea.container.activeId.value ?? null));
+      const leftBottomWidget = vue.computed(() => getActiveWidget(props.skeleton?.leftBottomArea.container.activeId.value ?? null));
+      const rightTopWidget = vue.computed(() => getActiveWidget(props.skeleton?.rightTopArea.container.activeId.value ?? null));
+      const rightBottomWidget = vue.computed(() => getActiveWidget(props.skeleton?.rightBottomArea.container.activeId.value ?? null));
+      const bottomLeftWidget = vue.computed(() => getActiveWidget(props.skeleton?.bottomLeftArea.container.activeId.value ?? null));
+      const bottomRightWidget = vue.computed(() => getActiveWidget(props.skeleton?.bottomRightArea.container.activeId.value ?? null));
+
+      // ─── 各面板 docked 可见性 ─────────────────────────────────────────────
+      const isLeftTopVisible = vue.computed(() => isDocked(props.skeleton?.leftTopArea.container.activeId.value ?? null));
+      const isLeftBottomVisible = vue.computed(() => isDocked(props.skeleton?.leftBottomArea.container.activeId.value ?? null));
+      const isRightTopVisible = vue.computed(() => isDocked(props.skeleton?.rightTopArea.container.activeId.value ?? null));
+      const isRightBottomVisible = vue.computed(() => isDocked(props.skeleton?.rightBottomArea.container.activeId.value ?? null));
+      const isBottomLeftVisible = vue.computed(() => isDocked(props.skeleton?.bottomLeftArea.container.activeId.value ?? null));
+      const isBottomRightVisible = vue.computed(() => isDocked(props.skeleton?.bottomRightArea.container.activeId.value ?? null));
+
+      // 整侧可见（有任意一个 docked 就显示侧栏容器）
+      const isLeftVisible = vue.computed(() => isLeftTopVisible.value || isLeftBottomVisible.value);
+      const isRightVisible = vue.computed(() => isRightTopVisible.value || isRightBottomVisible.value);
+      const isBottomVisible = vue.computed(() => isBottomLeftVisible.value || isBottomRightVisible.value);
+
+      // ─── Undocked widget（每侧独立，从 focusedId 里找） ───────────────────
+      function makeUndockedWidget(side) {
+        return vue.computed(() => {
+          const sk = props.skeleton;
+          const w = getActiveWidget(sk?.focusedId.value ?? null);
+          if (!w || w.pane.viewMode.value !== 'Undock') return null;
+          const areaMap = {
+            left: [sk?.leftTopArea, sk?.leftBottomArea],
+            right: [sk?.rightTopArea, sk?.rightBottomArea],
+            bottom: [sk?.bottomLeftArea, sk?.bottomRightArea]
+          };
+          const belongs = areaMap[side].some(a => a?.container.items.value.some(i => i.name === w.name));
+          return belongs ? w : null;
+        });
+      }
+      const leftUndockedWidget = makeUndockedWidget('left');
+      const rightUndockedWidget = makeUndockedWidget('right');
+      const bottomUndockedWidget = makeUndockedWidget('bottom');
+      const isLeftUndockedVisible = vue.computed(() => leftUndockedWidget.value !== null);
+      const isRightUndockedVisible = vue.computed(() => rightUndockedWidget.value !== null);
+      const isBottomUndockedVisible = vue.computed(() => bottomUndockedWidget.value !== null);
+
+      // ─── Teleport 目标 map ────────────────────────────────────────────────
+      const teleportTargets = vue.computed(() => {
+        const sk = props.skeleton;
+        const map = {};
+        if (!sk) return map;
+
+        // widgetName -> 所属侧的 undocked 锚点（仅表达归属，不代表一定能传送过去）
+        const sideIndex = new Map();
+        sk.leftTopArea.container.items.value.forEach(w => sideIndex.set(w.name, '#left-undocked-area'));
+        sk.leftBottomArea.container.items.value.forEach(w => sideIndex.set(w.name, '#left-undocked-area'));
+        sk.rightTopArea.container.items.value.forEach(w => sideIndex.set(w.name, '#right-undocked-area'));
+        sk.rightBottomArea.container.items.value.forEach(w => sideIndex.set(w.name, '#right-undocked-area'));
+        sk.bottomLeftArea.container.items.value.forEach(w => sideIndex.set(w.name, '#bottom-undocked-area'));
+        sk.bottomRightArea.container.items.value.forEach(w => sideIndex.set(w.name, '#bottom-undocked-area'));
+
+        // 每个 undocked 锚点当前唯一获得传送权的 widgetName
+        // 规则：focusedId 优先；若 focusedId 不属于该侧则该侧无 undocked 显示
+        const focusedName = sk.focusedId.value;
+        const undockWinner = {
+          '#left-undocked-area': null,
+          '#right-undocked-area': null,
+          '#bottom-undocked-area': null
+        };
+        if (focusedName) {
+          const focusedWidget = sk.widgets.find(w => w.name === focusedName);
+          if (focusedWidget?.pane.viewMode.value === 'Undock') {
+            const anchor = sideIndex.get(focusedName);
+            if (anchor) undockWinner[anchor] = focusedName;
+          }
+        }
+
+        // activeId -> docked 锚点
+        const dockTargets = {
+          [sk.leftTopArea.container.activeId.value ?? '']: '#left-top-area',
+          [sk.leftBottomArea.container.activeId.value ?? '']: '#left-bottom-area',
+          [sk.rightTopArea.container.activeId.value ?? '']: '#right-top-area',
+          [sk.rightBottomArea.container.activeId.value ?? '']: '#right-bottom-area',
+          [sk.bottomLeftArea.container.activeId.value ?? '']: '#bottom-left-area',
+          [sk.bottomRightArea.container.activeId.value ?? '']: '#bottom-right-area'
+        };
+        delete dockTargets[''];
+        sk.widgets.filter(w => w.type === 'panel').forEach(w => {
+          if (w.pane.viewMode.value === 'Undock') {
+            const anchor = sideIndex.get(w.name) ?? '#widget-offscreen';
+            // 只有赢得该锚点的 widget 才能传送过去，其余保活在 offscreen
+            map[w.name] = undockWinner[anchor] === w.name ? anchor : '#widget-offscreen';
+          } else {
+            map[w.name] = dockTargets[w.name] ?? '#widget-offscreen';
+          }
+        });
+        return map;
+      });
+
+      // ─── Center widget Teleport 目标 ──────────────────────────────────────
+      const centerWidgetNames = vue.computed(() => {
+        const names = new Set();
+        props.centerArea?.container.items.value.forEach(w => names.add(w.name));
+        return names;
+      });
+      const centerTargets = vue.computed(() => {
+        const activeId = props.centerArea?.container.activeId.value ?? null;
+        const map = {};
+        props.centerArea?.container.items.value.forEach(w => {
+          map[w.name] = w.name === activeId ? '#center-area' : '#center-offscreen';
+        });
+        return map;
+      });
+
+      // ─── 内部分割高度 / 宽度（CSS calc 字符串） ───────────────────────────
+      const leftTopHeight = vue.computed(() => `calc((100% - 4px) * ${leftSplitRatio.value})`);
+      const leftBottomHeight = vue.computed(() => `calc((100% - 4px) * ${1 - leftSplitRatio.value})`);
+      const rightTopHeight = vue.computed(() => `calc((100% - 4px) * ${rightSplitRatio.value})`);
+      const rightBottomHeight = vue.computed(() => `calc((100% - 4px) * ${1 - rightSplitRatio.value})`);
+      const bottomLeftWidth = vue.computed(() => `calc((100% - 4px) * ${bottomSplitRatio.value})`);
+      const bottomRightWidth = vue.computed(() => `calc((100% - 4px) * ${1 - bottomSplitRatio.value})`);
+      return () => {
+        if (!props.skeleton) return null;
+        const sk = props.skeleton;
+        const leftBoth = isLeftTopVisible.value && isLeftBottomVisible.value;
+        const rightBoth = isRightTopVisible.value && isRightBottomVisible.value;
+        const bottomBoth = isBottomLeftVisible.value && isBottomRightVisible.value;
+        return vue.createVNode("div", {
+          "class": "layplux-center-area"
+        }, [vue.createVNode("div", {
+          "id": "widget-offscreen",
+          "style": "display:none;"
+        }, null), vue.createVNode("div", {
+          "id": "center-offscreen",
+          "style": "display:none;"
+        }, null), sk.widgets.filter(w => w.type === 'panel' && !centerWidgetNames.value.has(w.name)).map(w => {
+          let _slot;
+          return vue.createVNode(vue.Teleport, {
+            "defer": true,
+            "key": w.name,
+            "to": teleportTargets.value[w.name] ?? '#widget-offscreen'
+          }, _isSlot(_slot = w.renderContent()) ? _slot : {
+            default: () => [_slot]
+          });
+        }), props.centerArea?.container.items.value.map(w => {
+          let _slot2;
+          return vue.createVNode(vue.Teleport, {
+            "defer": true,
+            "key": w.name,
+            "to": centerTargets.value[w.name] ?? '#center-offscreen'
+          }, _isSlot(_slot2 = w.renderContent()) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        }), vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-panel--undocked layplux-panel--undocked-left",
+          "style": {
+            width: `${leftWidth.value}px`
+          }
+        }, [vue.createVNode(PanelView, {
+          "anchor": "left-undocked-area",
+          "widget": leftUndockedWidget.value ?? undefined
+        }, null), vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-right",
+          "onMousedown": dragLeftWidth
+        }, null)]), [[vue.vShow, isLeftUndockedVisible.value]]), vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-panel--undocked layplux-panel--undocked-right",
+          "style": {
+            width: `${rightWidth.value}px`
+          }
+        }, [vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-left",
+          "onMousedown": dragRightWidth
+        }, null), vue.createVNode(PanelView, {
+          "anchor": "right-undocked-area",
+          "widget": rightUndockedWidget.value ?? undefined
+        }, null)]), [[vue.vShow, isRightUndockedVisible.value]]), vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-panel--undocked layplux-panel--undocked-bottom",
+          "style": {
+            height: `${bottomHeight.value}px`
+          }
+        }, [vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--edge-top",
+          "onMousedown": dragBottomHeight
+        }, null), vue.createVNode(PanelView, {
+          "anchor": "bottom-undocked-area",
+          "widget": bottomUndockedWidget.value ?? undefined
+        }, null)]), [[vue.vShow, isBottomUndockedVisible.value]]), vue.createVNode("div", {
+          "class": "layplux-center-area__main"
+        }, [vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-center-area__left",
+          "style": {
+            width: `${leftWidth.value}px`
+          }
+        }, [vue.createVNode("div", {
+          "class": "layplux-center-area__docked-panels"
+        }, [vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "left-top-area",
+          "widget": leftTopWidget.value ?? undefined,
+          "style": leftBoth ? {
+            height: leftTopHeight.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isLeftTopVisible.value]]), leftBoth && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--y",
+          "onMousedown": e => dragLeftSplit(e, e.currentTarget.closest('.layplux-center-area__docked-panels').clientHeight)
+        }, null), vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "left-bottom-area",
+          "widget": leftBottomWidget.value ?? undefined,
+          "style": leftBoth ? {
+            height: leftBottomHeight.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isLeftBottomVisible.value]])])]), [[vue.vShow, isLeftVisible.value]]), isLeftVisible.value && !isLeftUndockedVisible.value && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--x",
+          "onMousedown": dragLeftWidth
+        }, null), vue.createVNode("div", {
+          "id": "center-area",
+          "class": "layplux-center-area__editor"
+        }, null), isRightVisible.value && !isRightUndockedVisible.value && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--x",
+          "onMousedown": dragRightWidth
+        }, null), vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-center-area__right",
+          "style": {
+            width: `${rightWidth.value}px`
+          }
+        }, [vue.createVNode("div", {
+          "class": "layplux-center-area__docked-panels"
+        }, [vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "right-top-area",
+          "widget": rightTopWidget.value ?? undefined,
+          "style": rightBoth ? {
+            height: rightTopHeight.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isRightTopVisible.value]]), rightBoth && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--y",
+          "onMousedown": e => dragRightSplit(e, e.currentTarget.closest('.layplux-center-area__docked-panels').clientHeight)
+        }, null), vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "right-bottom-area",
+          "widget": rightBottomWidget.value ?? undefined,
+          "style": rightBoth ? {
+            height: rightBottomHeight.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isRightBottomVisible.value]])])]), [[vue.vShow, isRightVisible.value]])]), isBottomVisible.value && !isBottomUndockedVisible.value && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--bottom-edge",
+          "onMousedown": dragBottomHeight
+        }, null), vue.withDirectives(vue.createVNode("div", {
+          "class": "layplux-center-area__bottom",
+          "style": {
+            height: `${bottomHeight.value}px`
+          }
+        }, [vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "bottom-left-area",
+          "widget": bottomLeftWidget.value ?? undefined,
+          "style": bottomBoth ? {
+            width: bottomLeftWidth.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isBottomLeftVisible.value]]), bottomBoth && vue.createVNode("div", {
+          "class": "layplux-resize-handle layplux-resize-handle--x",
+          "onMousedown": e => dragBottomSplit(e, e.currentTarget.closest('.layplux-center-area__bottom').clientWidth)
+        }, null), vue.withDirectives(vue.createVNode(PanelView, {
+          "anchor": "bottom-right-area",
+          "widget": bottomRightWidget.value ?? undefined,
+          "style": bottomBoth ? {
+            width: bottomRightWidth.value,
+            flex: 'none'
+          } : {}
+        }, null), [[vue.vShow, isBottomRightVisible.value]])]), [[vue.vShow, isBottomVisible.value]])]);
+      };
+    }
+  });
+
+  const Skeleton = vue.defineComponent({
+    name: 'Skeleton',
+    props: {
+      skeleton: Object
+    },
+    setup(props) {
+      return () => vue.createVNode("div", {
+        "class": "layplux-skeleton"
+      }, [vue.createVNode(TopArea, {
+        "area": props.skeleton?.topArea
+      }, null), vue.createVNode("div", {
+        "class": "layplux-skeleton__body"
+      }, [vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe"
+      }, [vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe-top"
+      }, [vue.createVNode(LeftTopArea, {
+        "area": props.skeleton?.leftTopArea
+      }, null), vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe-separator"
+      }, null), vue.createVNode(LeftBottomArea, {
+        "area": props.skeleton?.leftBottomArea
+      }, null)]), vue.createVNode(BottomLeftArea, {
+        "area": props.skeleton?.bottomLeftArea
+      }, null)]), vue.createVNode("div", {
+        "class": "layplux-skeleton__center"
+      }, [vue.createVNode(CenterArea, {
+        "skeleton": props.skeleton,
+        "centerArea": props.skeleton?.centerArea
+      }, null)]), vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe"
+      }, [vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe-top"
+      }, [vue.createVNode(RightTopArea, {
+        "area": props.skeleton?.rightTopArea
+      }, null), vue.createVNode("div", {
+        "class": "layplux-skeleton__stripe-separator"
+      }, null), vue.createVNode(RightBottomArea, {
+        "area": props.skeleton?.rightBottomArea
+      }, null)]), vue.createVNode(BottomRightArea, {
+        "area": props.skeleton?.bottomRightArea
+      }, null)])]), vue.createVNode(BottomArea, {
+        "area": props.skeleton?.bottomArea
+      }, null)]);
+    }
+  });
+
+  /**
+   * Z 轴分层容器，把子组件分配到不同"层号"，层号大的显示在上方。
+   * 预设了五个层：DEFAULT(0)、PALETTE(100)、MODAL(200)、POPUP(300)、DRAG(400)。
+   * 在此基础上拓展了自定义层号，用于管理弹出窗口（completion popup、快速文档）和拖拽反馈，
+   * 从而避免每次弹窗都创建独立的 OS 窗口，大幅降低渲染开销
+   */
+  const LayeredManager = vue.defineComponent({
+    name: 'LayeredManager',
+    props: {
+      skeleton: Object
+    },
+    setup(props) {
+      return () => vue.createVNode("div", {
+        "class": "layered-manager"
+      }, [vue.createVNode(Skeleton, {
+        "skeleton": props.skeleton
+      }, null)]);
+    }
+  });
+
+  /**
+   * 玻璃面板（GlassOverlay）是Layplux中的一个重要组件，它位于整个界面的最顶层，覆盖在所有其他内容之上。
+   * 这个组件的主要作用是提供一个透明的层，用于捕获用户的交互事件，例如鼠标点击、拖动等。
+   * 通过玻璃面板，Layplux能够实现一些特殊的交互效果，比如拖放操作、全局事件监听等。
+   * 玻璃面板就像一层透明的保护膜，既能保护底层内容，又能提供丰富的交互功能，使得用户界面更加灵活和响应式。
+   */
+  const GlassOverlay = vue.defineComponent({
+    name: 'GlassOverlay',
+    setup() {
+      return () => vue.createVNode("div", null, null);
+    }
+  });
+
+  const RootPane = vue.defineComponent({
+    name: 'RootPane',
+    props: {
+      skeleton: Object
+    },
+    setup(props) {
+      vue.provide('layplux-locale', props.skeleton?.locale);
+      const rootClass = vue.computed(() => {
+        const dark = props.skeleton?.isDark();
+        return ['layplux-root', dark ? 'dark' : ''].filter(Boolean);
+      });
+      return () => vue.createVNode("div", {
+        "class": rootClass.value,
+        "data-theme": props.skeleton?.themeName?.value
+      }, [vue.createVNode(CornerGlow, null, null), vue.createVNode(LayeredManager, {
+        "skeleton": props.skeleton
+      }, null), vue.createVNode(GlassOverlay, null, null)]);
+    }
+  });
+
+  const Layplux = vue.defineComponent({
+    name: 'Layplux',
+    props: {
+      skeleton: Object
+    },
+    setup(props) {
+      return () => vue.createVNode(RootPane, {
+        "skeleton": props.skeleton
+      }, {
+        default: () => [vue.createTextVNode("Layplux")]
+      });
+    }
+  });
+  var layplux = Object.assign(Layplux, {
+    install: app => {
+      app.component('Layplux', Layplux);
+      return app;
+    }
+  });
+
+  /**
+   * `useArea` 只需要 skeleton 的 `createContainer` 能力，
+   * 不依赖完整的 ISkeleton（避免创建时的循环依赖）。
+   */
+  function useArea(skeleton, name, handle) {
+    const container = skeleton.createContainer(name, handle);
+    function add(config) {
+      const item = container.add(config);
+      return item;
+    }
+    return {
+      add,
+      container
+    };
+  }
+
+  /**
+   * 没个widget都会对应自己的pane的状态
+   */
+
+  function usePane(defaultViewMode = 'DockPinned') {
+    const viewMode = vue.ref(defaultViewMode);
+    function setViewMode(mode) {
+      viewMode.value = mode;
+    }
+    return {
+      viewMode,
+      setViewMode
+    };
+  }
+
+  function useWidget(config, container, skeleton) {
+    const {
+      name,
+      props,
+      type
+    } = config;
+    const active = vue.computed(() => container?.activeId.value === name);
+    const focused = vue.computed(() => skeleton?.focusedId.value === name);
+    const id = uniqueId(type);
+    const align = props?.align ?? 'left';
+    const pane = usePane();
+
+    // ─── Focusable 注册 ──────────────────────────────────────────────────────
+    // range 初始为 () => false，PanelView 挂载后通过 focusable.setRange(el) 注入真实 DOM
+    const focusable = skeleton.focusTracker.create({
+      range: e => {
+        const target = e.target;
+        if (!target) {
+          return false;
+        }
+        // 当点击的是panel时，激活
+        const el = document.getElementById(id);
+        if (el?.contains(target)) {
+          return true;
+        }
+        // 当class中包含layplux-resize-handle则不失去焦点
+        if (target.classList.contains('layplux-resize-handle')) {
+          return true;
+        }
+        return false;
+      },
+      onActive: () => {
+        widget.container?.activate(name);
+        skeleton.event?.emitGlobal(`widget:${name}:focus`, {
+          widget
+        });
+      },
+      onBlur: () => {
+        // 焦点离开 → 清除 focusedId
+        skeleton.blur();
+        skeleton.event?.emitGlobal(`widget:${name}:blur`, {
+          widget
+        });
+        // DockUnpinned：失焦自动收起
+        if (pane.viewMode.value === 'DockUnpinned' || pane.viewMode.value === 'Undock') {
+          container?.deactivate();
+        }
+      }
+    });
+    function renderBody() {
+      const {
+        content,
+        contentProps
+      } = config;
+      return createContent(content, {
+        ...contentProps,
+        config,
+        event: widget.event
+      });
+    }
+    function renderContent() {
+      return vue.h(WidgetView, {
+        key: id,
+        widget
+      });
+    }
+    function renderTitle() {
+      return vue.h(WidgetTitleView, {
+        key: id,
+        widget
+      });
+    }
+    const widget = {
+      id,
+      type,
+      isWidget: true,
+      name,
+      align,
+      config,
+      active,
+      focused,
+      container,
+      pane,
+      focusable,
+      event: skeleton.event,
+      renderBody,
+      renderContent,
+      renderTitle
+    };
+    props?.onInit?.(widget);
+
+    // Emit view-mode-changed events
+    if (skeleton?.event) {
+      vue.watch(() => pane.viewMode.value, mode => {
+        skeleton.event.emitGlobal(`widget:${name}:view-mode-changed`, {
+          widget,
+          mode
+        });
+      });
+    }
+    return widget;
+  }
+  function isWidget(obj) {
+    return obj && obj.isWidget;
+  }
+
+  /**
+   * handle 函数签名：把原始 item（config 或 widget）转换成 widget 实例。
+   * 第二个参数是所属 container 的引用，方便在创建 widget 时回引。
+   */
+
+  /**
+   * widget container 用于管理 widget 的添加、删除、获取等操作
+   * T 为 widget 的类型
+   * G 为 widgetconfig 的配置类型
+   */
+  function useWidgetContainer(handle, skeleton) {
+    const maps = {};
+    const items = vue.ref([]);
+    const activeId = vue.ref(null); // ✅ 单一数据源
+
+    const self = {
+      items,
+      activeId,
+      add,
+      get,
+      getAt,
+      indexOf,
+      remove,
+      activate,
+      deactivate,
+      toggleActive
+    };
+    function add(item) {
+      // 将config转换为widget,将创建widget的能力交给外部，并把 container 自身传出去
+      const nItem = handle(item, self);
+      const origin = get(nItem.name);
+      if (origin === nItem) return origin;
+      const i = origin ? items.value.indexOf(origin) : -1;
+      if (i > -1) {
+        items.value.splice(i, 1, nItem);
+      } else {
+        items.value.push(nItem);
+      }
+      maps[nItem.name] = nItem;
+      return nItem;
+    }
+    function get(name) {
+      return maps[name] || null;
+    }
+    function getAt(index) {
+      return items.value[index] || null;
+    }
+    function indexOf(item) {
+      return items.value.indexOf(item);
+    }
+    function remove(name) {
+      const item = maps[name];
+      if (!item) return null;
+      const i = items.value.indexOf(item);
+      if (i > -1) items.value.splice(i, 1);
+      delete maps[name];
+      skeleton.event.emitGlobal('skeleton:widget-removed', {
+        name
+      });
+      return item;
+    }
+    function activate(id) {
+      if (!maps[id]) return;
+      activeId.value = id;
+      skeleton.focus(id);
+      maps[id].focusable.active(); // 面板激活 → 同步焦点栈
+      skeleton.event.emitGlobal(`widget:${id}:activated`, {
+        widget: maps[id]
+      });
+    }
+    function deactivate() {
+      const current = activeId.value;
+      activeId.value = null;
+      skeleton.blur();
+      if (current && maps[current]) {
+        maps[current].focusable.suspense(); // 面板收起 → 从焦点栈移除
+        skeleton.event.emitGlobal(`widget:${current}:deactivated`, {
+          widget: maps[current]
+        });
+      }
+    }
+    function toggleActive(id) {
+      if (activeId.value === id) {
+        deactivate();
+      } else {
+        activate(id);
+      }
+    }
+    return self;
+  }
+
+  /** 为指定 theme 注入 CSS 变量样式，重复注册会替换 */
+  function injectThemeCSS(name, vars) {
+    const styleId = `layplux-theme-${name}`;
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    const varLines = Object.entries(vars).map(([key, value]) => `    ${key}: ${value};`).join('\n');
+    styleEl.textContent = `.layplux-root[data-theme='${name}'] {\n${varLines}\n}\n`;
+  }
+
+  function useSkeleton() {
+    const widgets = [];
+    const self = {};
+    const containers = new Map();
+    const focusTracker = new FocusTracker();
+    const event = createPluginEventBus('skeleton');
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const locale = vue.ref(getBuiltInLocale('zh-CN'));
+    function setLocale(name) {
+      locale.value = getBuiltInLocale(name);
+    }
+    const theme = vue.ref('system');
+    const systemDark = vue.ref(typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false);
+    function resolveTheme() {
+      if (theme.value === 'system') {
+        return systemDark.value ? 'dark' : 'light';
+      }
+      return theme.value;
+    }
+    function isDark() {
+      return resolveTheme() === 'dark';
+    }
+    function setTheme(t) {
+      theme.value = t;
+    }
+    const themeName = vue.ref('default');
+    function setThemeName(name) {
+      themeName.value = name;
+    }
+    function registerTheme(name, vars) {
+      injectThemeCSS(name, vars);
+    }
+
+    // 监听系统主题变化
+    if (typeof window !== 'undefined') {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        systemDark.value = e.matches;
+      });
+    }
+
+    // 顶部工具栏
+    const topArea = useArea({
+      createContainer
+    }, 'topArea', (config, container) => createWidget(config, container));
+
+    // 底部状态栏
+    const bottomArea = useArea({
+      createContainer
+    }, 'bottomArea', (config, container) => createWidget(config, container));
+
+    // 左侧顶部主区域
+    const leftTopArea = useArea({
+      createContainer
+    }, 'leftTopArea', (config, container) => createWidget(config, container));
+
+    // 左侧底部快捷区域
+    const leftBottomArea = useArea({
+      createContainer
+    }, 'leftBottomArea', (config, container) => createWidget(config, container));
+
+    // 右侧顶部主区域
+    const rightTopArea = useArea({
+      createContainer
+    }, 'rightTopArea', (config, container) => createWidget(config, container));
+
+    // 右侧底部区域
+    const rightBottomArea = useArea({
+      createContainer
+    }, 'rightBottomArea', (config, container) => createWidget(config, container));
+
+    // 右侧最底部快捷操作
+    const bottomRightArea = useArea({
+      createContainer
+    }, 'bottomRightArea', (config, container) => createWidget(config, container));
+
+    // 左侧最底部快捷操作（交互型）
+    const bottomLeftArea = useArea({
+      createContainer
+    }, 'bottomLeftArea', (config, container) => createWidget(config, container));
+
+    // 中心区域
+    const centerArea = useArea({
+      createContainer
+    }, 'centerArea', (config, container) => createWidget(config, container));
+    function createWidget(config, container) {
+      if (isWidget(config)) {
+        return config;
+      }
+      const widget = useWidget(config, container, self);
+      widgets.push(widget);
+      event.emitGlobal('skeleton:widget-added', {
+        widget
+      });
+      return widget;
+    }
+    const focusedId = vue.ref(null);
+    function toggleFocus(id) {
+      if (focusedId.value === id) {
+        blur();
+      } else {
+        focus(id);
+      }
+    }
+    function focus(id) {
+      focusedId.value = id;
+      event.emitGlobal('skeleton:focus-changed', {
+        focusedId: id
+      });
+    }
+    function blur() {
+      focusedId.value = null;
+      event.emitGlobal('skeleton:focus-changed', {
+        focusedId: null
+      });
+    }
+    function add(config, extraConfig) {
+      // TODO: 处理extraConfig
+      if (extraConfig) {
+        config = {
+          ...config,
+          ...extraConfig
+        };
+      }
+      const {
+        area
+      } = config;
+      if (area === 'topArea') {
+        topArea.add(config);
+      } else if (area === 'bottomArea') {
+        bottomArea.add(config);
+      } else if (area === 'leftTopArea') {
+        leftTopArea.add(config);
+      } else if (area === 'leftBottomArea') {
+        leftBottomArea.add(config);
+      } else if (area === 'bottomLeftArea') {
+        bottomLeftArea.add(config);
+      } else if (area === 'rightTopArea') {
+        rightTopArea.add(config);
+      } else if (area === 'rightBottomArea') {
+        rightBottomArea.add(config);
+      } else if (area === 'bottomRightArea') {
+        bottomRightArea.add(config);
+      } else if (area === 'centerArea') {
+        centerArea.add(config);
+      }
+    }
+    function createContainer(name, handle) {
+      const container = useWidgetContainer(handle, self);
+      containers.set(name, container);
+      return container;
+    }
+
+    // 4. 填充 self 的真正属性
+    Object.assign(self, {
+      widgets,
+      topArea,
+      bottomArea,
+      leftTopArea,
+      leftBottomArea,
+      rightTopArea,
+      rightBottomArea,
+      bottomRightArea,
+      bottomLeftArea,
+      centerArea,
+      focusedId,
+      focusTracker,
+      event,
+      locale,
+      setLocale,
+      theme,
+      resolveTheme,
+      isDark,
+      setTheme,
+      themeName,
+      setThemeName,
+      registerTheme,
+      toggleFocus,
+      focus,
+      blur,
+      add,
+      createContainer
+    });
+    return self;
+  }
+
+  exports.FocusTracker = FocusTracker;
+  exports.Layplux = layplux;
+  exports.createPluginEventBus = createPluginEventBus;
+  exports.useSkeleton = useSkeleton;
+
+}));