layplux 1.0.1 → 2.0.1

package/dist/cjs/layout/skeleton/center-area.cjs

@@ -1,467 +1,374 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var center_area_exports = {};
-__export(center_area_exports, {
-  CenterArea: () => CenterArea
-});
-module.exports = __toCommonJS(center_area_exports);
-var import_jsx_runtime = require("vue/jsx-runtime");
-var import_vue = require("vue");
-var import_components = require("../../components");
-const CenterArea = (0, import_vue.defineComponent)({
-  name: "CenterArea",
+'use strict';
+
+var vue = require('vue');
+var index = require('../../components/panel-view/index.cjs');
+
+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;
-    (0, import_vue.onMounted)(() => {
+    vue.onMounted(() => {
       unmountFocusTracker = props.skeleton?.focusTracker.mount(window) ?? null;
     });
-    (0, import_vue.onUnmounted)(() => {
+    vue.onUnmounted(() => {
       unmountFocusTracker?.();
     });
-    const leftWidth = (0, import_vue.ref)(340);
-    const rightWidth = (0, import_vue.ref)(340);
-    const bottomHeight = (0, import_vue.ref)(300);
-    const leftSplitRatio = (0, import_vue.ref)(0.5);
-    const rightSplitRatio = (0, import_vue.ref)(0.5);
-    const bottomSplitRatio = (0, import_vue.ref)(0.5);
+
+    // ─── 面板尺寸状态 ─────────────────────────────────────────────────────
+    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 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.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
       };
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
     }
+
+    // 左侧整体宽度
     function dragLeftWidth(e) {
       const base = leftWidth.value;
-      startDrag(e, "x", (d) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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;
+      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";
+      return mode === 'DockPinned' || mode === 'DockUnpinned';
     }
-    const leftTopWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.leftTopArea.container.activeId.value ?? null)
-    );
-    const leftBottomWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.leftBottomArea.container.activeId.value ?? null)
-    );
-    const rightTopWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.rightTopArea.container.activeId.value ?? null)
-    );
-    const rightBottomWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.rightBottomArea.container.activeId.value ?? null)
-    );
-    const bottomLeftWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.bottomLeftArea.container.activeId.value ?? null)
-    );
-    const bottomRightWidget = (0, import_vue.computed)(
-      () => getActiveWidget(props.skeleton?.bottomRightArea.container.activeId.value ?? null)
-    );
-    const isLeftTopVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.leftTopArea.container.activeId.value ?? null)
-    );
-    const isLeftBottomVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.leftBottomArea.container.activeId.value ?? null)
-    );
-    const isRightTopVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.rightTopArea.container.activeId.value ?? null)
-    );
-    const isRightBottomVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.rightBottomArea.container.activeId.value ?? null)
-    );
-    const isBottomLeftVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.bottomLeftArea.container.activeId.value ?? null)
-    );
-    const isBottomRightVisible = (0, import_vue.computed)(
-      () => isDocked(props.skeleton?.bottomRightArea.container.activeId.value ?? null)
-    );
-    const isLeftVisible = (0, import_vue.computed)(() => isLeftTopVisible.value || isLeftBottomVisible.value);
-    const isRightVisible = (0, import_vue.computed)(() => isRightTopVisible.value || isRightBottomVisible.value);
-    const isBottomVisible = (0, import_vue.computed)(() => isBottomLeftVisible.value || isBottomRightVisible.value);
+
+    // ─── 各侧 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 (0, import_vue.computed)(() => {
+      return vue.computed(() => {
         const sk = props.skeleton;
         const w = getActiveWidget(sk?.focusedId.value ?? null);
-        if (!w || w.pane.viewMode.value !== "Undock") return 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)
-        );
+        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 = (0, import_vue.computed)(() => leftUndockedWidget.value !== null);
-    const isRightUndockedVisible = (0, import_vue.computed)(() => rightUndockedWidget.value !== null);
-    const isBottomUndockedVisible = (0, import_vue.computed)(() => bottomUndockedWidget.value !== null);
-    const teleportTargets = (0, import_vue.computed)(() => {
+    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;
-      const sideIndex = /* @__PURE__ */ 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")
-      );
+
+      // 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
+        '#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 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"
+        [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";
-          map[w.name] = undockWinner[anchor] === w.name ? anchor : "#widget-offscreen";
+      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";
+          map[w.name] = dockTargets[w.name] ?? '#widget-offscreen';
         }
       });
       return map;
     });
-    const centerWidgetNames = (0, import_vue.computed)(() => {
-      const names = /* @__PURE__ */ new Set();
-      props.centerArea?.container.items.value.forEach((w) => names.add(w.name));
+
+    // ─── 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 = (0, import_vue.computed)(() => {
+    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";
+      props.centerArea?.container.items.value.forEach(w => {
+        map[w.name] = w.name === activeId ? '#center-area' : '#center-offscreen';
       });
       return map;
     });
-    const leftTopHeight = (0, import_vue.computed)(() => `calc((100% - 4px) * ${leftSplitRatio.value})`);
-    const leftBottomHeight = (0, import_vue.computed)(() => `calc((100% - 4px) * ${1 - leftSplitRatio.value})`);
-    const rightTopHeight = (0, import_vue.computed)(() => `calc((100% - 4px) * ${rightSplitRatio.value})`);
-    const rightBottomHeight = (0, import_vue.computed)(() => `calc((100% - 4px) * ${1 - rightSplitRatio.value})`);
-    const bottomLeftWidth = (0, import_vue.computed)(() => `calc((100% - 4px) * ${bottomSplitRatio.value})`);
-    const bottomRightWidth = (0, import_vue.computed)(() => `calc((100% - 4px) * ${1 - bottomSplitRatio.value})`);
+
+    // ─── 内部分割高度 / 宽度（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 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-center-area", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "widget-offscreen", style: "display:none;" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "center-offscreen", style: "display:none;" }),
-        sk.widgets.filter((w) => w.type === "panel" && !centerWidgetNames.value.has(w.name)).map((w) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_vue.Teleport,
-          {
-            defer: true,
-            to: teleportTargets.value[w.name] ?? "#widget-offscreen",
-            children: w.renderContent()
-          },
-          w.name
-        )),
-        props.centerArea?.container.items.value.map((w) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vue.Teleport, { defer: true, to: centerTargets.value[w.name] ?? "#center-offscreen", children: w.renderContent() }, w.name)),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-left",
-            "v-show": isLeftUndockedVisible.value,
-            style: { width: `${leftWidth.value}px` },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.PanelView, { anchor: "left-undocked-area", widget: leftUndockedWidget.value ?? void 0 }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-right",
-                  onMousedown: dragLeftWidth
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-right",
-            "v-show": isRightUndockedVisible.value,
-            style: { width: `${rightWidth.value}px` },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-left",
-                  onMousedown: dragRightWidth
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.PanelView,
-                {
-                  anchor: "right-undocked-area",
-                  widget: rightUndockedWidget.value ?? void 0
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-bottom",
-            "v-show": isBottomUndockedVisible.value,
-            style: { height: `${bottomHeight.value}px` },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--edge-top",
-                  onMousedown: dragBottomHeight
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.PanelView,
-                {
-                  anchor: "bottom-undocked-area",
-                  widget: bottomUndockedWidget.value ?? void 0
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-center-area__main", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              class: "layplux-center-area__left",
-              "v-show": isLeftVisible.value,
-              style: { width: `${leftWidth.value}px` },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-center-area__docked-panels", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.PanelView,
-                  {
-                    anchor: "left-top-area",
-                    widget: leftTopWidget.value ?? void 0,
-                    "v-show": isLeftTopVisible.value,
-                    style: leftBoth ? { height: leftTopHeight.value, flex: "none" } : {}
-                  }
-                ),
-                leftBoth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
-                  {
-                    class: "layplux-resize-handle layplux-resize-handle--y",
-                    onMousedown: (e) => dragLeftSplit(
-                      e,
-                      e.currentTarget.closest(
-                        ".layplux-center-area__docked-panels"
-                      ).clientHeight
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.PanelView,
-                  {
-                    anchor: "left-bottom-area",
-                    widget: leftBottomWidget.value ?? void 0,
-                    "v-show": isLeftBottomVisible.value,
-                    style: leftBoth ? { height: leftBottomHeight.value, flex: "none" } : {}
-                  }
-                )
-              ] })
-            }
-          ),
-          isLeftVisible.value && !isLeftUndockedVisible.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              class: "layplux-resize-handle layplux-resize-handle--x",
-              onMousedown: dragLeftWidth
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "center-area", class: "layplux-center-area__editor" }),
-          isRightVisible.value && !isRightUndockedVisible.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              class: "layplux-resize-handle layplux-resize-handle--x",
-              onMousedown: dragRightWidth
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              class: "layplux-center-area__right",
-              "v-show": isRightVisible.value,
-              style: { width: `${rightWidth.value}px` },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-center-area__docked-panels", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.PanelView,
-                  {
-                    anchor: "right-top-area",
-                    widget: rightTopWidget.value ?? void 0,
-                    "v-show": isRightTopVisible.value,
-                    style: rightBoth ? { height: rightTopHeight.value, flex: "none" } : {}
-                  }
-                ),
-                rightBoth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
-                  {
-                    class: "layplux-resize-handle layplux-resize-handle--y",
-                    onMousedown: (e) => dragRightSplit(
-                      e,
-                      e.currentTarget.closest(
-                        ".layplux-center-area__docked-panels"
-                      ).clientHeight
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.PanelView,
-                  {
-                    anchor: "right-bottom-area",
-                    widget: rightBottomWidget.value ?? void 0,
-                    "v-show": isRightBottomVisible.value,
-                    style: rightBoth ? { height: rightBottomHeight.value, flex: "none" } : {}
-                  }
-                )
-              ] })
-            }
-          )
-        ] }),
-        isBottomVisible.value && !isBottomUndockedVisible.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            class: "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--bottom-edge",
-            onMousedown: dragBottomHeight
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            class: "layplux-center-area__bottom",
-            "v-show": isBottomVisible.value,
-            style: { height: `${bottomHeight.value}px` },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.PanelView,
-                {
-                  anchor: "bottom-left-area",
-                  widget: bottomLeftWidget.value ?? void 0,
-                  "v-show": isBottomLeftVisible.value,
-                  style: bottomBoth ? { width: bottomLeftWidth.value, flex: "none" } : {}
-                }
-              ),
-              bottomBoth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x",
-                  onMousedown: (e) => dragBottomSplit(
-                    e,
-                    e.currentTarget.closest(".layplux-center-area__bottom").clientWidth
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.PanelView,
-                {
-                  anchor: "bottom-right-area",
-                  widget: bottomRightWidget.value ?? void 0,
-                  "v-show": isBottomRightVisible.value,
-                  style: bottomBoth ? { width: bottomRightWidth.value, flex: "none" } : {}
-                }
-              )
-            ]
-          }
-        )
-      ] });
+      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(index.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(index.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(index.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(index.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(index.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(index.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(index.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(index.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(index.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]])]);
     };
   }
 });
+
+exports.CenterArea = CenterArea;