layplux 0.0.1

package/dist/cjs/layout/root-pane.cjs

@@ -0,0 +1,46 @@
+"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 root_pane_exports = {};
+__export(root_pane_exports, {
+  RootPane: () => RootPane
+});
+module.exports = __toCommonJS(root_pane_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+var import_layered_manager = require("./layered-manager");
+var import_glass_overlay = require("./glass-overlay");
+var import_components = require("../components");
+const RootPane = (0, import_vue.defineComponent)({
+  name: "RootPane",
+  props: {
+    skeleton: Object
+  },
+  setup(props) {
+    (0, import_vue.provide)("layplux-locale", props.skeleton?.locale);
+    const rootClass = (0, import_vue.computed)(() => {
+      const dark = props.skeleton?.isDark();
+      return ["layplux-root", dark ? "dark" : ""].filter(Boolean);
+    });
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: rootClass.value, "data-theme": props.skeleton?.themeName?.value, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CornerGlow, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layered_manager.LayeredManager, { skeleton: props.skeleton }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_glass_overlay.GlassOverlay, {})
+    ] });
+  }
+});

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

@@ -0,0 +1,64 @@
+"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 bottom_area_exports = {};
+__export(bottom_area_exports, {
+  BottomArea: () => BottomArea
+});
+module.exports = __toCommonJS(bottom_area_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const BottomArea = (0, import_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 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: item.renderContent() }, `bottom-area-${item.name}`);
+        if (item.align === "left") {
+          left.push(content);
+        } else if (item.align === "center") {
+          center.push(content);
+        } else {
+          right.push(content);
+        }
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-bottom-area", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-bottom-area__left", children: [
+          ...left
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-bottom-area__center", children: [
+          ...center
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-bottom-area__right", children: [
+          ...right
+        ] })
+      ] });
+    };
+  }
+});

package/dist/cjs/layout/skeleton/bottom-left-area.cjs

@@ -0,0 +1,42 @@
+"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 bottom_left_area_exports = {};
+__export(bottom_left_area_exports, {
+  BottomLeftArea: () => BottomLeftArea
+});
+module.exports = __toCommonJS(bottom_left_area_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const BottomLeftArea = (0, import_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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-bottom-left-area", children: 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()) });
+    };
+  }
+});

package/dist/cjs/layout/skeleton/bottom-right-area.cjs

@@ -0,0 +1,38 @@
+"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 bottom_right_area_exports = {};
+__export(bottom_right_area_exports, {
+  BottomRightArea: () => BottomRightArea
+});
+module.exports = __toCommonJS(bottom_right_area_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const BottomRightArea = (0, import_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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-bottom-right-area", children: items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map((widget) => widget.renderTitle()) });
+    };
+  }
+});

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

@@ -0,0 +1,467 @@
+"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",
+  props: {
+    skeleton: Object,
+    centerArea: Object
+  },
+  setup(props) {
+    let unmountFocusTracker = null;
+    (0, import_vue.onMounted)(() => {
+      unmountFocusTracker = props.skeleton?.focusTracker.mount(window) ?? null;
+    });
+    (0, import_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);
+    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));
+      });
+    }
+    function dragRightWidth(e) {
+      const base = rightWidth.value;
+      startDrag(e, "x", (d) => {
+        rightWidth.value = Math.max(160, Math.min(600, base - d));
+      });
+    }
+    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";
+    }
+    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);
+    function makeUndockedWidget(side) {
+      return (0, import_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 = (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 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")
+      );
+      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;
+        }
+      }
+      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";
+          map[w.name] = undockWinner[anchor] === w.name ? anchor : "#widget-offscreen";
+        } else {
+          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));
+      return names;
+    });
+    const centerTargets = (0, import_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;
+    });
+    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})`);
+    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" } : {}
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    };
+  }
+});

package/dist/cjs/layout/skeleton/index.cjs

@@ -0,0 +1,24 @@
+"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 skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => import_skeleton.Skeleton
+});
+module.exports = __toCommonJS(skeleton_exports);
+var import_skeleton = require("./skeleton");