layplux 0.0.1

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

@@ -0,0 +1,454 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  Teleport
+} from "vue";
+import { PanelView } from "../../components";
+const CenterArea = defineComponent({
+  name: "CenterArea",
+  props: {
+    skeleton: Object,
+    centerArea: Object
+  },
+  setup(props) {
+    let unmountFocusTracker = null;
+    onMounted(() => {
+      unmountFocusTracker = props.skeleton?.focusTracker.mount(window) ?? null;
+    });
+    onUnmounted(() => {
+      unmountFocusTracker?.();
+    });
+    const leftWidth = ref(340);
+    const rightWidth = ref(340);
+    const bottomHeight = ref(300);
+    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 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 = 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)
+    );
+    const isLeftVisible = computed(() => isLeftTopVisible.value || isLeftBottomVisible.value);
+    const isRightVisible = computed(() => isRightTopVisible.value || isRightBottomVisible.value);
+    const isBottomVisible = computed(() => isBottomLeftVisible.value || isBottomRightVisible.value);
+    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;
+        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 = computed(() => leftUndockedWidget.value !== null);
+    const isRightUndockedVisible = computed(() => rightUndockedWidget.value !== null);
+    const isBottomUndockedVisible = computed(() => bottomUndockedWidget.value !== null);
+    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")
+      );
+      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 = computed(() => {
+      const names = /* @__PURE__ */ 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";
+      });
+      return map;
+    });
+    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})`);
+    const rightBottomHeight = computed(() => `calc((100% - 4px) * ${1 - rightSplitRatio.value})`);
+    const bottomLeftWidth = computed(() => `calc((100% - 4px) * ${bottomSplitRatio.value})`);
+    const bottomRightWidth = 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__ */ 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" } : {}
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    };
+  }
+});
+export {
+  CenterArea
+};

package/dist/esm/layout/skeleton/index.mjs

@@ -0,0 +1,4 @@
+import { Skeleton } from "./skeleton";
+export {
+  Skeleton
+};

package/dist/esm/layout/skeleton/left-bottom-area.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const LeftBottomArea = defineComponent({
+  name: "LeftBottomArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const items = props.area?.container.items.value;
+      if (!items || items.length === 0) return null;
+      return /* @__PURE__ */ jsx("div", { class: "layplux-left-bottom-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()) });
+    };
+  }
+});
+export {
+  LeftBottomArea
+};

package/dist/esm/layout/skeleton/left-top-area.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const LeftTopArea = defineComponent({
+  name: "LeftTopArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const items = props.area?.container.items.value;
+      if (!items || items.length === 0) return null;
+      return /* @__PURE__ */ jsx("div", { class: "layplux-left-top-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()) });
+    };
+  }
+});
+export {
+  LeftTopArea
+};

package/dist/esm/layout/skeleton/right-bottom-area.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const RightBottomArea = defineComponent({
+  name: "RightBottomArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const items = props.area?.container.items.value;
+      if (!items || items.length === 0) return null;
+      return /* @__PURE__ */ jsx("div", { class: "layplux-right-bottom-area", children: items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map((widget) => widget.renderTitle()) });
+    };
+  }
+});
+export {
+  RightBottomArea
+};

package/dist/esm/layout/skeleton/right-top-area.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const RightTopArea = defineComponent({
+  name: "RightTopArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const items = props.area?.container.items.value;
+      if (!items || items.length === 0) return null;
+      return /* @__PURE__ */ jsx("div", { class: "layplux-right-top-area", children: items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map((widget) => widget.renderTitle()) });
+    };
+  }
+});
+export {
+  RightTopArea
+};

package/dist/esm/layout/skeleton/skeleton.mjs

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+import { TopArea } from "./top-area";
+import { BottomArea } from "./bottom-area";
+import { LeftTopArea } from "./left-top-area";
+import { LeftBottomArea } from "./left-bottom-area";
+import { BottomLeftArea } from "./bottom-left-area";
+import { RightTopArea } from "./right-top-area";
+import { RightBottomArea } from "./right-bottom-area";
+import { BottomRightArea } from "./bottom-right-area";
+import {} from "../../managers";
+import { CenterArea } from "./center-area";
+const Skeleton = defineComponent({
+  name: "Skeleton",
+  props: {
+    skeleton: Object
+  },
+  setup(props) {
+    return () => /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton", children: [
+      /* @__PURE__ */ jsx(TopArea, { area: props.skeleton?.topArea }),
+      /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton__body", children: [
+        /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton__stripe", children: [
+          /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton__stripe-top", children: [
+            /* @__PURE__ */ jsx(LeftTopArea, { area: props.skeleton?.leftTopArea }),
+            /* @__PURE__ */ jsx("div", { class: "layplux-skeleton__stripe-separator" }),
+            /* @__PURE__ */ jsx(LeftBottomArea, { area: props.skeleton?.leftBottomArea })
+          ] }),
+          /* @__PURE__ */ jsx(BottomLeftArea, { area: props.skeleton?.bottomLeftArea })
+        ] }),
+        /* @__PURE__ */ jsx("div", { class: "layplux-skeleton__center", children: /* @__PURE__ */ jsx(CenterArea, { skeleton: props.skeleton, centerArea: props.skeleton?.centerArea }) }),
+        /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton__stripe", children: [
+          /* @__PURE__ */ jsxs("div", { class: "layplux-skeleton__stripe-top", children: [
+            /* @__PURE__ */ jsx(RightTopArea, { area: props.skeleton?.rightTopArea }),
+            /* @__PURE__ */ jsx("div", { class: "layplux-skeleton__stripe-separator" }),
+            /* @__PURE__ */ jsx(RightBottomArea, { area: props.skeleton?.rightBottomArea })
+          ] }),
+          /* @__PURE__ */ jsx(BottomRightArea, { area: props.skeleton?.bottomRightArea })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(BottomArea, { area: props.skeleton?.bottomArea })
+    ] });
+  }
+});
+export {
+  Skeleton
+};

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const TopArea = defineComponent({
+  name: "TopArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const { area } = props;
+      const left = [];
+      const center = [];
+      const right = [];
+      area?.container.items.value.slice().toSorted((a, b) => {
+        const index1 = a.config?.index || 0;
+        const index2 = b.config?.index || 0;
+        return index1 === index2 ? 0 : index1 > index2 ? 1 : -1;
+      }).forEach((item) => {
+        const content = /* @__PURE__ */ jsx("div", { children: item.renderContent() }, `top-area-${item.name}`);
+        if (item.align === "left") {
+          left.push(content);
+        } else if (item.align === "center") {
+          center.push(content);
+        } else {
+          right.push(content);
+        }
+      });
+      return /* @__PURE__ */ jsxs("div", { class: "layplux-top-area", children: [
+        /* @__PURE__ */ jsxs("div", { class: "layplux-top-area__toolbar-left", children: [
+          ...left
+        ] }),
+        /* @__PURE__ */ jsxs("div", { class: "layplux-top-area__toolbar-center", children: [
+          ...center
+        ] }),
+        /* @__PURE__ */ jsxs("div", { class: "layplux-top-area__toolbar-right", children: [
+          ...right
+        ] })
+      ] });
+    };
+  }
+});
+export {
+  TopArea
+};

package/dist/esm/locales/en-US.mjs

@@ -0,0 +1,14 @@
+const enUS = {
+  panel: {
+    viewMode: "View Mode",
+    dockPinned: "Dock Pinned",
+    dockUnpinned: "Dock Unpinned",
+    undock: "Undock",
+    help: "Help",
+    more: "More",
+    minimize: "Minimize"
+  }
+};
+export {
+  enUS
+};

package/dist/esm/locales/index.mjs

@@ -0,0 +1,19 @@
+import { zhCN } from "./zh-CN";
+import { enUS } from "./en-US";
+const builtInLocales = {
+  "zh-CN": zhCN,
+  "en-US": enUS
+};
+function getBuiltInLocale(name) {
+  const locale = builtInLocales[name];
+  if (!locale) {
+    console.warn(`[Layplux] Unknown locale "${name}", falling back to zh-CN`);
+    return zhCN;
+  }
+  return locale;
+}
+export {
+  enUS,
+  getBuiltInLocale,
+  zhCN
+};

package/dist/esm/locales/zh-CN.mjs

@@ -0,0 +1,14 @@
+const zhCN = {
+  panel: {
+    viewMode: "\u89C6\u56FE\u6A21\u5F0F",
+    dockPinned: "\u505C\u9760\u56FA\u5B9A",
+    dockUnpinned: "\u505C\u9760\u4E0D\u56FA\u5B9A",
+    undock: "\u53D6\u6D88\u505C\u9760",
+    help: "\u5E2E\u52A9",
+    more: "\u66F4\u591A",
+    minimize: "\u6700\u5C0F\u5316"
+  }
+};
+export {
+  zhCN
+};