layplux 1.0.1 → 2.0.1

package/dist/esm/layout/skeleton/center-area.mjs

@@ -1,20 +1,18 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  ref,
-  Teleport
-} from "vue";
-import { PanelView } from "../../components/index.mjs";
+import { defineComponent, onMounted, onUnmounted, ref, computed, createVNode, Teleport, withDirectives, vShow, isVNode } from 'vue';
+import { PanelView } from '../../components/panel-view/index.mjs';
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
 const CenterArea = defineComponent({
-  name: "CenterArea",
+  name: 'CenterArea',
   props: {
     skeleton: Object,
     centerArea: Object
   },
   setup(props) {
+    // ─── FocusTracker 全局挂载 ────────────────────────────────────────────
+    // 监听 document click，点击面板外自动触发 onBlur（DockUnpinned 自动收起）
     let unmountFocusTracker = null;
     onMounted(() => {
       unmountFocusTracker = props.skeleton?.focusTracker.mount(window) ?? null;
@@ -22,196 +20,195 @@ const CenterArea = defineComponent({
     onUnmounted(() => {
       unmountFocusTracker?.();
     });
+
+    // ─── 面板尺寸状态 ─────────────────────────────────────────────────────
     const leftWidth = ref(340);
     const rightWidth = ref(340);
     const bottomHeight = ref(300);
+
+    // 上下 / 左右内部分割比例 (0~1)
     const leftSplitRatio = ref(0.5);
     const rightSplitRatio = ref(0.5);
     const bottomSplitRatio = 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 = computed(
-      () => getActiveWidget(props.skeleton?.leftTopArea.container.activeId.value ?? null)
-    );
-    const leftBottomWidget = computed(
-      () => getActiveWidget(props.skeleton?.leftBottomArea.container.activeId.value ?? null)
-    );
-    const rightTopWidget = computed(
-      () => getActiveWidget(props.skeleton?.rightTopArea.container.activeId.value ?? null)
-    );
-    const rightBottomWidget = computed(
-      () => getActiveWidget(props.skeleton?.rightBottomArea.container.activeId.value ?? null)
-    );
-    const bottomLeftWidget = computed(
-      () => getActiveWidget(props.skeleton?.bottomLeftArea.container.activeId.value ?? null)
-    );
-    const bottomRightWidget = computed(
-      () => getActiveWidget(props.skeleton?.bottomRightArea.container.activeId.value ?? null)
-    );
-    const isLeftTopVisible = computed(
-      () => isDocked(props.skeleton?.leftTopArea.container.activeId.value ?? null)
-    );
-    const isLeftBottomVisible = computed(
-      () => isDocked(props.skeleton?.leftBottomArea.container.activeId.value ?? null)
-    );
-    const isRightTopVisible = computed(
-      () => isDocked(props.skeleton?.rightTopArea.container.activeId.value ?? null)
-    );
-    const isRightBottomVisible = computed(
-      () => isDocked(props.skeleton?.rightBottomArea.container.activeId.value ?? null)
-    );
-    const isBottomLeftVisible = computed(
-      () => isDocked(props.skeleton?.bottomLeftArea.container.activeId.value ?? null)
-    );
-    const isBottomRightVisible = computed(
-      () => isDocked(props.skeleton?.bottomRightArea.container.activeId.value ?? null)
-    );
+
+    // ─── 各侧 active widget ───────────────────────────────────────────────
+    const leftTopWidget = computed(() => getActiveWidget(props.skeleton?.leftTopArea.container.activeId.value ?? null));
+    const leftBottomWidget = computed(() => getActiveWidget(props.skeleton?.leftBottomArea.container.activeId.value ?? null));
+    const rightTopWidget = computed(() => getActiveWidget(props.skeleton?.rightTopArea.container.activeId.value ?? null));
+    const rightBottomWidget = computed(() => getActiveWidget(props.skeleton?.rightBottomArea.container.activeId.value ?? null));
+    const bottomLeftWidget = computed(() => getActiveWidget(props.skeleton?.bottomLeftArea.container.activeId.value ?? null));
+    const bottomRightWidget = computed(() => getActiveWidget(props.skeleton?.bottomRightArea.container.activeId.value ?? null));
+
+    // ─── 各面板 docked 可见性 ─────────────────────────────────────────────
+    const isLeftTopVisible = computed(() => isDocked(props.skeleton?.leftTopArea.container.activeId.value ?? null));
+    const isLeftBottomVisible = computed(() => isDocked(props.skeleton?.leftBottomArea.container.activeId.value ?? null));
+    const isRightTopVisible = computed(() => isDocked(props.skeleton?.rightTopArea.container.activeId.value ?? null));
+    const isRightBottomVisible = computed(() => isDocked(props.skeleton?.rightBottomArea.container.activeId.value ?? null));
+    const isBottomLeftVisible = computed(() => isDocked(props.skeleton?.bottomLeftArea.container.activeId.value ?? null));
+    const isBottomRightVisible = computed(() => isDocked(props.skeleton?.bottomRightArea.container.activeId.value ?? null));
+
+    // 整侧可见（有任意一个 docked 就显示侧栏容器）
     const isLeftVisible = computed(() => isLeftTopVisible.value || isLeftBottomVisible.value);
     const isRightVisible = computed(() => isRightTopVisible.value || isRightBottomVisible.value);
     const isBottomVisible = computed(() => isBottomLeftVisible.value || isBottomRightVisible.value);
+
+    // ─── Undocked widget（每侧独立，从 focusedId 里找） ───────────────────
     function makeUndockedWidget(side) {
       return 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 leftUndockedWidget = makeUndockedWidget('left');
+    const rightUndockedWidget = makeUndockedWidget('right');
+    const bottomUndockedWidget = makeUndockedWidget('bottom');
     const isLeftUndockedVisible = computed(() => leftUndockedWidget.value !== null);
     const isRightUndockedVisible = computed(() => rightUndockedWidget.value !== null);
     const isBottomUndockedVisible = computed(() => bottomUndockedWidget.value !== null);
+
+    // ─── Teleport 目标 map ────────────────────────────────────────────────
     const teleportTargets = 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;
     });
+
+    // ─── Center widget Teleport 目标 ──────────────────────────────────────
     const centerWidgetNames = computed(() => {
-      const names = /* @__PURE__ */ new Set();
-      props.centerArea?.container.items.value.forEach((w) => names.add(w.name));
+      const names = new Set();
+      props.centerArea?.container.items.value.forEach(w => names.add(w.name));
       return names;
     });
     const centerTargets = 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;
     });
+
+    // ─── 内部分割高度 / 宽度（CSS calc 字符串） ───────────────────────────
     const leftTopHeight = computed(() => `calc((100% - 4px) * ${leftSplitRatio.value})`);
     const leftBottomHeight = computed(() => `calc((100% - 4px) * ${1 - leftSplitRatio.value})`);
     const rightTopHeight = computed(() => `calc((100% - 4px) * ${rightSplitRatio.value})`);
@@ -224,231 +221,152 @@ const CenterArea = defineComponent({
       const leftBoth = isLeftTopVisible.value && isLeftBottomVisible.value;
       const rightBoth = isRightTopVisible.value && isRightBottomVisible.value;
       const bottomBoth = isBottomLeftVisible.value && isBottomRightVisible.value;
-      return /* @__PURE__ */ jsxs("div", { class: "layplux-center-area", children: [
-        /* @__PURE__ */ jsx("div", { id: "widget-offscreen", style: "display:none;" }),
-        /* @__PURE__ */ jsx("div", { id: "center-offscreen", style: "display:none;" }),
-        sk.widgets.filter((w) => w.type === "panel" && !centerWidgetNames.value.has(w.name)).map((w) => /* @__PURE__ */ jsx(
-          Teleport,
-          {
-            defer: true,
-            to: teleportTargets.value[w.name] ?? "#widget-offscreen",
-            children: w.renderContent()
-          },
-          w.name
-        )),
-        props.centerArea?.container.items.value.map((w) => /* @__PURE__ */ jsx(Teleport, { defer: true, to: centerTargets.value[w.name] ?? "#center-offscreen", children: w.renderContent() }, w.name)),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-left",
-            "v-show": isLeftUndockedVisible.value,
-            style: { width: `${leftWidth.value}px` },
-            children: [
-              /* @__PURE__ */ jsx(PanelView, { anchor: "left-undocked-area", widget: leftUndockedWidget.value ?? void 0 }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-right",
-                  onMousedown: dragLeftWidth
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-right",
-            "v-show": isRightUndockedVisible.value,
-            style: { width: `${rightWidth.value}px` },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-left",
-                  onMousedown: dragRightWidth
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PanelView,
-                {
-                  anchor: "right-undocked-area",
-                  widget: rightUndockedWidget.value ?? void 0
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: "layplux-panel--undocked layplux-panel--undocked-bottom",
-            "v-show": isBottomUndockedVisible.value,
-            style: { height: `${bottomHeight.value}px` },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--edge-top",
-                  onMousedown: dragBottomHeight
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PanelView,
-                {
-                  anchor: "bottom-undocked-area",
-                  widget: bottomUndockedWidget.value ?? void 0
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { class: "layplux-center-area__main", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              class: "layplux-center-area__left",
-              "v-show": isLeftVisible.value,
-              style: { width: `${leftWidth.value}px` },
-              children: /* @__PURE__ */ jsxs("div", { class: "layplux-center-area__docked-panels", children: [
-                /* @__PURE__ */ jsx(
-                  PanelView,
-                  {
-                    anchor: "left-top-area",
-                    widget: leftTopWidget.value ?? void 0,
-                    "v-show": isLeftTopVisible.value,
-                    style: leftBoth ? { height: leftTopHeight.value, flex: "none" } : {}
-                  }
-                ),
-                leftBoth && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    class: "layplux-resize-handle layplux-resize-handle--y",
-                    onMousedown: (e) => dragLeftSplit(
-                      e,
-                      e.currentTarget.closest(
-                        ".layplux-center-area__docked-panels"
-                      ).clientHeight
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  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__ */ jsx(
-            "div",
-            {
-              class: "layplux-resize-handle layplux-resize-handle--x",
-              onMousedown: dragLeftWidth
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { id: "center-area", class: "layplux-center-area__editor" }),
-          isRightVisible.value && !isRightUndockedVisible.value && /* @__PURE__ */ jsx(
-            "div",
-            {
-              class: "layplux-resize-handle layplux-resize-handle--x",
-              onMousedown: dragRightWidth
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              class: "layplux-center-area__right",
-              "v-show": isRightVisible.value,
-              style: { width: `${rightWidth.value}px` },
-              children: /* @__PURE__ */ jsxs("div", { class: "layplux-center-area__docked-panels", children: [
-                /* @__PURE__ */ jsx(
-                  PanelView,
-                  {
-                    anchor: "right-top-area",
-                    widget: rightTopWidget.value ?? void 0,
-                    "v-show": isRightTopVisible.value,
-                    style: rightBoth ? { height: rightTopHeight.value, flex: "none" } : {}
-                  }
-                ),
-                rightBoth && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    class: "layplux-resize-handle layplux-resize-handle--y",
-                    onMousedown: (e) => dragRightSplit(
-                      e,
-                      e.currentTarget.closest(
-                        ".layplux-center-area__docked-panels"
-                      ).clientHeight
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  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__ */ jsx(
-          "div",
-          {
-            class: "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--bottom-edge",
-            onMousedown: dragBottomHeight
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: "layplux-center-area__bottom",
-            "v-show": isBottomVisible.value,
-            style: { height: `${bottomHeight.value}px` },
-            children: [
-              /* @__PURE__ */ jsx(
-                PanelView,
-                {
-                  anchor: "bottom-left-area",
-                  widget: bottomLeftWidget.value ?? void 0,
-                  "v-show": isBottomLeftVisible.value,
-                  style: bottomBoth ? { width: bottomLeftWidth.value, flex: "none" } : {}
-                }
-              ),
-              bottomBoth && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  class: "layplux-resize-handle layplux-resize-handle--x",
-                  onMousedown: (e) => dragBottomSplit(
-                    e,
-                    e.currentTarget.closest(".layplux-center-area__bottom").clientWidth
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PanelView,
-                {
-                  anchor: "bottom-right-area",
-                  widget: bottomRightWidget.value ?? void 0,
-                  "v-show": isBottomRightVisible.value,
-                  style: bottomBoth ? { width: bottomRightWidth.value, flex: "none" } : {}
-                }
-              )
-            ]
-          }
-        )
-      ] });
+      return createVNode("div", {
+        "class": "layplux-center-area"
+      }, [createVNode("div", {
+        "id": "widget-offscreen",
+        "style": "display:none;"
+      }, null), 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 createVNode(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 createVNode(Teleport, {
+          "defer": true,
+          "key": w.name,
+          "to": centerTargets.value[w.name] ?? '#center-offscreen'
+        }, _isSlot(_slot2 = w.renderContent()) ? _slot2 : {
+          default: () => [_slot2]
+        });
+      }), withDirectives(createVNode("div", {
+        "class": "layplux-panel--undocked layplux-panel--undocked-left",
+        "style": {
+          width: `${leftWidth.value}px`
+        }
+      }, [createVNode(PanelView, {
+        "anchor": "left-undocked-area",
+        "widget": leftUndockedWidget.value ?? undefined
+      }, null), createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-right",
+        "onMousedown": dragLeftWidth
+      }, null)]), [[vShow, isLeftUndockedVisible.value]]), withDirectives(createVNode("div", {
+        "class": "layplux-panel--undocked layplux-panel--undocked-right",
+        "style": {
+          width: `${rightWidth.value}px`
+        }
+      }, [createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--x layplux-resize-handle--edge-left",
+        "onMousedown": dragRightWidth
+      }, null), createVNode(PanelView, {
+        "anchor": "right-undocked-area",
+        "widget": rightUndockedWidget.value ?? undefined
+      }, null)]), [[vShow, isRightUndockedVisible.value]]), withDirectives(createVNode("div", {
+        "class": "layplux-panel--undocked layplux-panel--undocked-bottom",
+        "style": {
+          height: `${bottomHeight.value}px`
+        }
+      }, [createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--edge-top",
+        "onMousedown": dragBottomHeight
+      }, null), createVNode(PanelView, {
+        "anchor": "bottom-undocked-area",
+        "widget": bottomUndockedWidget.value ?? undefined
+      }, null)]), [[vShow, isBottomUndockedVisible.value]]), createVNode("div", {
+        "class": "layplux-center-area__main"
+      }, [withDirectives(createVNode("div", {
+        "class": "layplux-center-area__left",
+        "style": {
+          width: `${leftWidth.value}px`
+        }
+      }, [createVNode("div", {
+        "class": "layplux-center-area__docked-panels"
+      }, [withDirectives(createVNode(PanelView, {
+        "anchor": "left-top-area",
+        "widget": leftTopWidget.value ?? undefined,
+        "style": leftBoth ? {
+          height: leftTopHeight.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isLeftTopVisible.value]]), leftBoth && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--y",
+        "onMousedown": e => dragLeftSplit(e, e.currentTarget.closest('.layplux-center-area__docked-panels').clientHeight)
+      }, null), withDirectives(createVNode(PanelView, {
+        "anchor": "left-bottom-area",
+        "widget": leftBottomWidget.value ?? undefined,
+        "style": leftBoth ? {
+          height: leftBottomHeight.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isLeftBottomVisible.value]])])]), [[vShow, isLeftVisible.value]]), isLeftVisible.value && !isLeftUndockedVisible.value && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--x",
+        "onMousedown": dragLeftWidth
+      }, null), createVNode("div", {
+        "id": "center-area",
+        "class": "layplux-center-area__editor"
+      }, null), isRightVisible.value && !isRightUndockedVisible.value && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--x",
+        "onMousedown": dragRightWidth
+      }, null), withDirectives(createVNode("div", {
+        "class": "layplux-center-area__right",
+        "style": {
+          width: `${rightWidth.value}px`
+        }
+      }, [createVNode("div", {
+        "class": "layplux-center-area__docked-panels"
+      }, [withDirectives(createVNode(PanelView, {
+        "anchor": "right-top-area",
+        "widget": rightTopWidget.value ?? undefined,
+        "style": rightBoth ? {
+          height: rightTopHeight.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isRightTopVisible.value]]), rightBoth && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--y",
+        "onMousedown": e => dragRightSplit(e, e.currentTarget.closest('.layplux-center-area__docked-panels').clientHeight)
+      }, null), withDirectives(createVNode(PanelView, {
+        "anchor": "right-bottom-area",
+        "widget": rightBottomWidget.value ?? undefined,
+        "style": rightBoth ? {
+          height: rightBottomHeight.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isRightBottomVisible.value]])])]), [[vShow, isRightVisible.value]])]), isBottomVisible.value && !isBottomUndockedVisible.value && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--y layplux-resize-handle--bottom-edge",
+        "onMousedown": dragBottomHeight
+      }, null), withDirectives(createVNode("div", {
+        "class": "layplux-center-area__bottom",
+        "style": {
+          height: `${bottomHeight.value}px`
+        }
+      }, [withDirectives(createVNode(PanelView, {
+        "anchor": "bottom-left-area",
+        "widget": bottomLeftWidget.value ?? undefined,
+        "style": bottomBoth ? {
+          width: bottomLeftWidth.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isBottomLeftVisible.value]]), bottomBoth && createVNode("div", {
+        "class": "layplux-resize-handle layplux-resize-handle--x",
+        "onMousedown": e => dragBottomSplit(e, e.currentTarget.closest('.layplux-center-area__bottom').clientWidth)
+      }, null), withDirectives(createVNode(PanelView, {
+        "anchor": "bottom-right-area",
+        "widget": bottomRightWidget.value ?? undefined,
+        "style": bottomBoth ? {
+          width: bottomRightWidth.value,
+          flex: 'none'
+        } : {}
+      }, null), [[vShow, isBottomRightVisible.value]])]), [[vShow, isBottomVisible.value]])]);
     };
   }
 });
-export {
-  CenterArea
-};
+
+export { CenterArea };