layplux 0.0.1 → 1.0.1

package/dist/esm/components/dropdown/index.mjs

@@ -4,8 +4,8 @@ import {
   provide,
   inject
 } from "vue";
-import { Popup } from "../popup";
-import { ChevronRightIcon } from "../icon";
+import { Popup } from "../popup/index.mjs";
+import { ChevronRightIcon } from "../icon/index.mjs";
 const DROPDOWN_CLOSE = Symbol("dropdown-close");
 const DROPDOWN_ON_CLICK = Symbol("dropdown-on-click");
 const Dropdown = defineComponent({

package/dist/esm/components/index.mjs

@@ -1,8 +1,8 @@
-export * from "./corner-glow";
-export * from "./panel-view";
-export * from "./widget";
-export * from "./title";
-export * from "./panel-view";
-export * from "./dropdown";
-export * from "./tooltip";
-export * from "./center-view";
+export * from "./corner-glow/index.mjs";
+export * from "./panel-view/index.mjs";
+export * from "./widget/index.mjs";
+export * from "./title/index.mjs";
+export * from "./panel-view/index.mjs";
+export * from "./dropdown/index.mjs";
+export * from "./tooltip/index.mjs";
+export * from "./center-view/index.mjs";

package/dist/esm/components/panel-view/index.mjs

@@ -6,10 +6,10 @@ import {
   DropdownItem,
   DropdownDivider,
   DropdownSubmenu
-} from "../dropdown";
-import { MoreIcon, MinimizeIcon } from "../icon";
-import { createContent } from "../../utils";
-import { getBuiltInLocale } from "../../locales";
+} from "../dropdown/index.mjs";
+import { MoreIcon, MinimizeIcon } from "../icon/index.mjs";
+import { createContent } from "../../utils/index.mjs";
+import { getBuiltInLocale } from "../../locales/index.mjs";
 const viewModeKeys = /* @__PURE__ */ new Set(["DockPinned", "DockUnpinned", "Undock"]);
 function findItem(items, key) {
   if (!items) return;

package/dist/esm/components/title/index.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "vue/jsx-runtime";
 import { defineComponent } from "vue";
-import { createContent } from "../../utils";
+import { createContent } from "../../utils/index.mjs";
 const TitleView = defineComponent({
   name: "TitleView",
   inheritAttrs: false,

package/dist/esm/components/tooltip/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "vue/jsx-runtime";
 import { defineComponent } from "vue";
-import { createContent } from "../../utils";
-import { Popup } from "../popup";
+import { createContent } from "../../utils/index.mjs";
+import { Popup } from "../popup/index.mjs";
 const Tooltip = defineComponent({
   name: "LaypluxTooltip",
   props: {

package/dist/esm/components/widget/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "vue/jsx-runtime";
 import { defineComponent, Fragment, ref, onErrorCaptured, h } from "vue";
-import { TitleView } from "../title";
-import { Tooltip } from "../tooltip";
+import { TitleView } from "../title/index.mjs";
+import { Tooltip } from "../tooltip/index.mjs";
 const WidgetView = defineComponent({
   name: "WidgetView",
   inheritAttrs: false,

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
-import { default as default2 } from "./layout/layplux";
-import { useSkeleton } from "./managers/skeleton";
-import { createPluginEventBus } from "./utils/event-bus";
-import { FocusTracker } from "./utils/focus-tracker";
+import { default as default2 } from "./layout/layplux.mjs";
+import { useSkeleton } from "./managers/skeleton.mjs";
+import { createPluginEventBus } from "./utils/event-bus.mjs";
+import { FocusTracker } from "./utils/focus-tracker.mjs";
 export {
   FocusTracker,
   default2 as Layplux,

package/dist/esm/layout/layered-manager.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "vue/jsx-runtime";
 import { defineComponent } from "vue";
-import { Skeleton } from "./skeleton";
+import { Skeleton } from "./skeleton/index.mjs";
 const LayeredManager = defineComponent({
   name: "LayeredManager",
   props: {

package/dist/esm/layout/layplux.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "vue/jsx-runtime";
 import { defineComponent } from "vue";
-import { RootPane } from "./root-pane";
+import { RootPane } from "./root-pane.mjs";
 const Layplux = defineComponent({
   name: "Layplux",
   props: {

package/dist/esm/layout/root-pane.mjs

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "vue/jsx-runtime";
 import { computed, defineComponent, provide } from "vue";
-import { LayeredManager } from "./layered-manager";
-import { GlassOverlay } from "./glass-overlay";
-import { CornerGlow } from "../components";
+import { LayeredManager } from "./layered-manager.mjs";
+import { GlassOverlay } from "./glass-overlay.mjs";
+import { CornerGlow } from "../components/index.mjs";
 const RootPane = defineComponent({
   name: "RootPane",
   props: {

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

@@ -7,7 +7,7 @@ import {
   ref,
   Teleport
 } from "vue";
-import { PanelView } from "../../components";
+import { PanelView } from "../../components/index.mjs";
 const CenterArea = defineComponent({
   name: "CenterArea",
   props: {

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

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

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

@@ -1,15 +1,15 @@
 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";
+import { TopArea } from "./top-area.mjs";
+import { BottomArea } from "./bottom-area.mjs";
+import { LeftTopArea } from "./left-top-area.mjs";
+import { LeftBottomArea } from "./left-bottom-area.mjs";
+import { BottomLeftArea } from "./bottom-left-area.mjs";
+import { RightTopArea } from "./right-top-area.mjs";
+import { RightBottomArea } from "./right-bottom-area.mjs";
+import { BottomRightArea } from "./bottom-right-area.mjs";
+import {} from "../../managers/index.mjs";
+import { CenterArea } from "./center-area.mjs";
 const Skeleton = defineComponent({
   name: "Skeleton",
   props: {

package/dist/esm/locales/index.mjs

@@ -1,5 +1,5 @@
-import { zhCN } from "./zh-CN";
-import { enUS } from "./en-US";
+import { zhCN } from "./zh-CN.mjs";
+import { enUS } from "./en-US.mjs";
 const builtInLocales = {
   "zh-CN": zhCN,
   "en-US": enUS

package/dist/esm/managers/area.mjs

@@ -1,4 +1,4 @@
-import {} from "./widget-container";
+import {} from "./widget-container.mjs";
 function useArea(skeleton, name, handle) {
   const container = skeleton.createContainer(name, handle);
   function add(config) {

package/dist/esm/managers/index.mjs

@@ -1,3 +1,3 @@
-export * from "./skeleton";
-export * from "./area";
-export * from "./widget";
+export * from "./skeleton.mjs";
+export * from "./area.mjs";
+export * from "./widget.mjs";

package/dist/esm/managers/skeleton.mjs

@@ -1,13 +1,13 @@
 import { ref } from "vue";
-import { useArea } from "./area";
-import { isWidget, useWidget } from "./widget";
-import { useWidgetContainer } from "./widget-container";
+import { useArea } from "./area.mjs";
+import { isWidget, useWidget } from "./widget.mjs";
+import { useWidgetContainer } from "./widget-container.mjs";
 import {
   FocusTracker,
   createPluginEventBus,
   getBuiltInLocale
-} from "../utils";
-import { injectThemeCSS } from "./theme";
+} from "../utils/index.mjs";
+import { injectThemeCSS } from "./theme.mjs";
 function useSkeleton() {
   const widgets = [];
   const self = {};

package/dist/esm/managers/widget.mjs

@@ -1,7 +1,7 @@
 import { computed, h, watch } from "vue";
-import { createContent, uniqueId } from "../utils";
-import { WidgetTitleView, WidgetView } from "../components";
-import { usePane } from "./pane";
+import { createContent, uniqueId } from "../utils/index.mjs";
+import { WidgetTitleView, WidgetView } from "../components/index.mjs";
+import { usePane } from "./pane.mjs";
 function useWidget(config, container, skeleton) {
   const { name, props, type } = config;
   const active = computed(() => container?.activeId.value === name);

package/dist/esm/types/index.mjs

@@ -1 +1 @@
-export * from "./config";
+export * from "./config.mjs";

package/dist/esm/utils/index.mjs

@@ -1,8 +1,8 @@
-export * from "./vue";
-export * from "./unique-id";
-export * from "./focus-tracker";
-export * from "./event-bus";
-import { getBuiltInLocale, zhCN, enUS } from "../locales";
+export * from "./vue.mjs";
+export * from "./unique-id.mjs";
+export * from "./focus-tracker.mjs";
+export * from "./event-bus.mjs";
+import { getBuiltInLocale, zhCN, enUS } from "../locales/index.mjs";
 export {
   enUS,
   getBuiltInLocale,

package/dist/style/base/_tokens-dark.scss

@@ -1,51 +1,51 @@
-.layplux-root.dark,
-.layplux-root.dark[data-theme='custom'],
-.layplux-root.dark[data-theme='default'] {
-  --layplux-background: 222.34deg 10.43% 12.27%;
-  --layplux-background-deep: 220deg 13.06% 9%;
-  --layplux-foreground: 0 0% 95%;
-  --layplux-card: 222.34deg 10.43% 12.27%;
-  --layplux-card-foreground: 210 40% 98%;
-  --layplux-popover: 0 0% 14.2%;
-  --layplux-popover-foreground: 210 40% 98%;
-  --layplux-muted: 240 3.7% 15.9%;
-  --layplux-muted-foreground: 240 5% 64.9%;
-  --layplux-primary-foreground: 0 0% 98%;
-  --layplux-destructive: 359.21 68.47% 56.47%;
-  --layplux-destructive-foreground: 0 0% 98%;
-  --layplux-info: 180 1.54% 12.75%;
-  --layplux-info-foreground: 220 4% 58%;
-  --layplux-success: 144 57% 58%;
-  --layplux-success-foreground: 0 0% 98%;
-  --layplux-warning: 42 84% 61%;
-  --layplux-warning-foreground: 0 0% 98%;
-  --layplux-secondary: 240 5% 17%;
-  --layplux-secondary-foreground: 0 0% 98%;
-  --layplux-accent: 216 5% 19%;
-  --layplux-accent-dark: 240 0% 22%;
-  --layplux-accent-darker: 240 0% 26%;
-  --layplux-accent-lighter: 216 5% 12%;
-  --layplux-accent-hover: 216 5% 24%;
-  --layplux-accent-foreground: 0 0% 98%;
-  --layplux-heavy: 216 5% 24%;
-  --layplux-heavy-foreground: var(--layplux-accent-foreground);
-  --layplux-border: 220 4% 34%;
-  --layplux-input: 0deg 0% 100% / 10%;
-  --layplux-input-placeholder: 218deg 11% 65%;
-  --layplux-input-background: 0deg 0% 100% / 5%;
-  --layplux-ring: 222.2 84% 4.9%;
-  --layplux-radius: 0.5rem;
-  --layplux-overlay: 0deg 0% 0% / 40%;
-  --layplux-overlay-content: 0deg 0% 0% / 40%;
-  --layplux-font-size-base: 16px;
-  --layplux-sidebar: 222.34deg 10.43% 12.27%;
-  --layplux-sidebar-deep: 220deg 13.06% 9%;
-  --layplux-menu: var(--layplux-sidebar);
-  --layplux-header: 222.34deg 10.43% 12.27%;
-  --layplux-shadow: 0 0% 0%;
-  --layplux-hover: var(--layplux-foreground) / 0.08;
-  --layplux-active: var(--layplux-foreground) / 0.12;
-  --layplux-root-background: 210 6% 14%;
-
-  color-scheme: dark;
-}
+.layplux-root.dark,
+.layplux-root.dark[data-theme='custom'],
+.layplux-root.dark[data-theme='default'] {
+  --layplux-background: 222.34deg 10.43% 12.27%;
+  --layplux-background-deep: 220deg 13.06% 9%;
+  --layplux-foreground: 0 0% 95%;
+  --layplux-card: 222.34deg 10.43% 12.27%;
+  --layplux-card-foreground: 210 40% 98%;
+  --layplux-popover: 0 0% 14.2%;
+  --layplux-popover-foreground: 210 40% 98%;
+  --layplux-muted: 240 3.7% 15.9%;
+  --layplux-muted-foreground: 240 5% 64.9%;
+  --layplux-primary-foreground: 0 0% 98%;
+  --layplux-destructive: 359.21 68.47% 56.47%;
+  --layplux-destructive-foreground: 0 0% 98%;
+  --layplux-info: 180 1.54% 12.75%;
+  --layplux-info-foreground: 220 4% 58%;
+  --layplux-success: 144 57% 58%;
+  --layplux-success-foreground: 0 0% 98%;
+  --layplux-warning: 42 84% 61%;
+  --layplux-warning-foreground: 0 0% 98%;
+  --layplux-secondary: 240 5% 17%;
+  --layplux-secondary-foreground: 0 0% 98%;
+  --layplux-accent: 216 5% 19%;
+  --layplux-accent-dark: 240 0% 22%;
+  --layplux-accent-darker: 240 0% 26%;
+  --layplux-accent-lighter: 216 5% 12%;
+  --layplux-accent-hover: 216 5% 24%;
+  --layplux-accent-foreground: 0 0% 98%;
+  --layplux-heavy: 216 5% 24%;
+  --layplux-heavy-foreground: var(--layplux-accent-foreground);
+  --layplux-border: 220 4% 34%;
+  --layplux-input: 0deg 0% 100% / 10%;
+  --layplux-input-placeholder: 218deg 11% 65%;
+  --layplux-input-background: 0deg 0% 100% / 5%;
+  --layplux-ring: 222.2 84% 4.9%;
+  --layplux-radius: 0.5rem;
+  --layplux-overlay: 0deg 0% 0% / 40%;
+  --layplux-overlay-content: 0deg 0% 0% / 40%;
+  --layplux-font-size-base: 16px;
+  --layplux-sidebar: 222.34deg 10.43% 12.27%;
+  --layplux-sidebar-deep: 220deg 13.06% 9%;
+  --layplux-menu: var(--layplux-sidebar);
+  --layplux-header: 222.34deg 10.43% 12.27%;
+  --layplux-shadow: 0 0% 0%;
+  --layplux-hover: var(--layplux-foreground) / 0.08;
+  --layplux-active: var(--layplux-foreground) / 0.12;
+  --layplux-root-background: 210 6% 14%;
+
+  color-scheme: dark;
+}

package/dist/style/base/_tokens.scss

@@ -1,56 +1,56 @@
-.layplux-root {
-  --layplux-popup-z-index: 2000;
-  --layplux-font-family:
-    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --layplux-background: 0 0% 100%;
-  --layplux-background-deep: 216 20.11% 95.47%;
-  --layplux-foreground: 210 6% 21%;
-  --layplux-card: 0 0% 100%;
-  --layplux-card-foreground: 222.2 84% 4.9%;
-  --layplux-popover: 0 0% 100%;
-  --layplux-popover-foreground: 222.2 84% 4.9%;
-  --layplux-muted: 240 4.8% 95.9%;
-  --layplux-muted-foreground: 240 3.8% 46.1%;
-  --layplux-primary: 212 100% 45%;
-  --layplux-primary-foreground: 0 0% 98%;
-  --layplux-destructive: 359.33 100% 65.1%;
-  --layplux-destructive-foreground: 0 0% 98%;
-  --layplux-info: 240 5% 96%;
-  --layplux-info-foreground: 220 4% 58%;
-  --layplux-success: 144 57% 58%;
-  --layplux-success-foreground: 0 0% 98%;
-  --layplux-warning: 42 84% 61%;
-  --layplux-warning-foreground: 0 0% 98%;
-  --layplux-secondary: 240 5% 96%;
-  --layplux-secondary-foreground: 240 6% 10%;
-  --layplux-accent: 240 5% 96%;
-  --layplux-accent-dark: 216 14% 93%;
-  --layplux-accent-darker: 216 11% 91%;
-  --layplux-accent-lighter: 240 0% 98%;
-  --layplux-accent-hover: 200deg 10% 90%;
-  --layplux-accent-foreground: 240 6% 10%;
-  --layplux-heavy: 192deg 9.43% 89.61%;
-  --layplux-heavy-foreground: var(--layplux-accent-foreground);
-  --layplux-border: 220 6% 82%;
-  --layplux-input: 240deg 5.88% 90%;
-  --layplux-input-placeholder: 217 10.6% 65%;
-  --layplux-input-background: 0 0% 100%;
-  --layplux-ring: 222.2 84% 4.9%;
-  --layplux-radius: 0.5rem;
-  --layplux-overlay: 0 0% 0% / 45%;
-  --layplux-overlay-content: 0 0% 95% / 45%;
-  --layplux-font-size-base: 16px;
-  --layplux-sidebar: 0 0% 100%;
-  --layplux-sidebar-deep: 0 0% 100%;
-  --layplux-menu: var(--layplux-sidebar);
-  --layplux-header: 0 0% 100%;
-  --layplux-shadow: 0 0% 0%;
-  --layplux-hover: var(--layplux-foreground) / 0.08;
-  --layplux-active: var(--layplux-foreground) / 0.12;
-
-  accent-color: var(--layplux-primary);
-  color-scheme: light;
-
-  --layplux-root-background: 216 12% 92%;
-}
+.layplux-root {
+  --layplux-popup-z-index: 2000;
+  --layplux-font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --layplux-background: 0 0% 100%;
+  --layplux-background-deep: 216 20.11% 95.47%;
+  --layplux-foreground: 210 6% 21%;
+  --layplux-card: 0 0% 100%;
+  --layplux-card-foreground: 222.2 84% 4.9%;
+  --layplux-popover: 0 0% 100%;
+  --layplux-popover-foreground: 222.2 84% 4.9%;
+  --layplux-muted: 240 4.8% 95.9%;
+  --layplux-muted-foreground: 240 3.8% 46.1%;
+  --layplux-primary: 212 100% 45%;
+  --layplux-primary-foreground: 0 0% 98%;
+  --layplux-destructive: 359.33 100% 65.1%;
+  --layplux-destructive-foreground: 0 0% 98%;
+  --layplux-info: 240 5% 96%;
+  --layplux-info-foreground: 220 4% 58%;
+  --layplux-success: 144 57% 58%;
+  --layplux-success-foreground: 0 0% 98%;
+  --layplux-warning: 42 84% 61%;
+  --layplux-warning-foreground: 0 0% 98%;
+  --layplux-secondary: 240 5% 96%;
+  --layplux-secondary-foreground: 240 6% 10%;
+  --layplux-accent: 240 5% 96%;
+  --layplux-accent-dark: 216 14% 93%;
+  --layplux-accent-darker: 216 11% 91%;
+  --layplux-accent-lighter: 240 0% 98%;
+  --layplux-accent-hover: 200deg 10% 90%;
+  --layplux-accent-foreground: 240 6% 10%;
+  --layplux-heavy: 192deg 9.43% 89.61%;
+  --layplux-heavy-foreground: var(--layplux-accent-foreground);
+  --layplux-border: 220 6% 82%;
+  --layplux-input: 240deg 5.88% 90%;
+  --layplux-input-placeholder: 217 10.6% 65%;
+  --layplux-input-background: 0 0% 100%;
+  --layplux-ring: 222.2 84% 4.9%;
+  --layplux-radius: 0.5rem;
+  --layplux-overlay: 0 0% 0% / 45%;
+  --layplux-overlay-content: 0 0% 95% / 45%;
+  --layplux-font-size-base: 16px;
+  --layplux-sidebar: 0 0% 100%;
+  --layplux-sidebar-deep: 0 0% 100%;
+  --layplux-menu: var(--layplux-sidebar);
+  --layplux-header: 0 0% 100%;
+  --layplux-shadow: 0 0% 0%;
+  --layplux-hover: var(--layplux-foreground) / 0.08;
+  --layplux-active: var(--layplux-foreground) / 0.12;
+
+  accent-color: var(--layplux-primary);
+  color-scheme: light;
+
+  --layplux-root-background: 216 12% 92%;
+}

package/dist/style/components/_bottom-area.scss

@@ -1,30 +1,30 @@
-.layplux-bottom-area {
-  display: flex;
-  flex-shrink: 0;
-  width: 100%;
-  height: 24px;
-  padding: 0 12px;
-  font-size: 11px;
-  color: hsl(var(--layplux-muted-foreground));
-  user-select: none;
-
-  &__left {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-  }
-
-  &__center {
-    display: flex;
-    flex: 1;
-    gap: 16px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__right {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-  }
-}
+.layplux-bottom-area {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+  height: 24px;
+  padding: 0 12px;
+  font-size: 11px;
+  color: hsl(var(--layplux-muted-foreground));
+  user-select: none;
+
+  &__left {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  &__center {
+    display: flex;
+    flex: 1;
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__right {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+}

package/dist/style/components/_center-area.scss

@@ -1,162 +1,162 @@
-.layplux-center-area {
-  position: relative; // undocked 面板的定位父级
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-
-  // ── 主区域（左 + 编辑器 + 右） ──────────────────────────────────────────
-  &__main {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-  }
-
-  // ── 左 / 右侧面板列 ─────────────────────────────────────────────────────
-  &__left,
-  &__right {
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  // 面板列内部容器（负责上下分割）
-  &__docked-panels {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-
-    // 没有内部分割时，PanelView 撑满全部高度
-    > .layplux-panel {
-      flex: 1;
-      min-height: 0;
-    }
-  }
-
-  // ── 编辑器 ───────────────────────────────────────────────────────────────
-  &__editor {
-    position: relative;
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    background-color: hsl(var(--layplux-background));
-    border-radius: var(--layplux-radius);
-  }
-
-  // ── 底部面板行 ───────────────────────────────────────────────────────────
-  &__bottom {
-    display: flex;
-    flex-shrink: 0;
-    min-height: 0;
-
-    // 没有内部分割时，PanelView 撑满全部宽度
-    > .layplux-panel {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-}
-
-// ── 拖拽手柄 ─────────────────────────────────────────────────────────────────
-.layplux-resize-handle {
-  z-index: 10;
-  flex-shrink: 0;
-  background-color: transparent;
-  transition: background-color 0.15s;
-
-  &:hover, // 横向手柄（调整左/右侧面板宽度，底部内部左右分割）
-    &--x {
-    align-self: stretch;
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  // 纵向手柄（调整底部面板高度，左/右侧内部上下分割）
-  &--y {
-    align-self: stretch;
-    height: 4px;
-    cursor: row-resize;
-  }
-
-  // 底部面板的上边缘拖拽手柄（独立定位，不在 flex 流里）
-  &--bottom-edge {
-    align-self: auto;
-  }
-
-  // 最大化状态：视觉高亮
-  &--maximized {
-    background-color: hsl(var(--layplux-foreground) / 12%);
-  }
-}
-
-// ── Undocked 浮动面板 ─────────────────────────────────────────────────────────
-.layplux-panel--undocked {
-  position: absolute;
-  z-index: 100;
-  display: flex; // 让内部 PanelView 和 edge 手柄并排 / 堆叠
-  &-left {
-    top: 0;
-    left: 0;
-    flex-direction: row; // PanelView + 右边缘手柄 横向排列
-    height: 100%;
-
-    > .layplux-panel {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &-right {
-    top: 0;
-    right: 0;
-    flex-direction: row; // 左边缘手柄 + PanelView 横向排列
-    height: 100%;
-
-    > .layplux-panel {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    flex-direction: column; // 上边缘手柄 + PanelView 纵向排列
-    > .layplux-panel {
-      flex: 1;
-      min-height: 0;
-    }
-  }
-
-  > .layplux-resize-handle {
-    background-color: hsl(var(--layplux-root-background));
-  }
-}
-
-// edge 手柄：absolute 贴边，覆盖在 undocked 容器边界上
-.layplux-resize-handle {
-  &--edge-right {
-    flex-shrink: 0;
-    align-self: stretch;
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  &--edge-left {
-    flex-shrink: 0;
-    align-self: stretch;
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  &--edge-top {
-    flex-shrink: 0;
-    align-self: stretch;
-    height: 4px;
-    cursor: row-resize;
-  }
-}
+.layplux-center-area {
+  position: relative; // undocked 面板的定位父级
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+
+  // ── 主区域（左 + 编辑器 + 右） ──────────────────────────────────────────
+  &__main {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  // ── 左 / 右侧面板列 ─────────────────────────────────────────────────────
+  &__left,
+  &__right {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  // 面板列内部容器（负责上下分割）
+  &__docked-panels {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+
+    // 没有内部分割时，PanelView 撑满全部高度
+    > .layplux-panel {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+
+  // ── 编辑器 ───────────────────────────────────────────────────────────────
+  &__editor {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background-color: hsl(var(--layplux-background));
+    border-radius: var(--layplux-radius);
+  }
+
+  // ── 底部面板行 ───────────────────────────────────────────────────────────
+  &__bottom {
+    display: flex;
+    flex-shrink: 0;
+    min-height: 0;
+
+    // 没有内部分割时，PanelView 撑满全部宽度
+    > .layplux-panel {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+
+// ── 拖拽手柄 ─────────────────────────────────────────────────────────────────
+.layplux-resize-handle {
+  z-index: 10;
+  flex-shrink: 0;
+  background-color: transparent;
+  transition: background-color 0.15s;
+
+  &:hover, // 横向手柄（调整左/右侧面板宽度，底部内部左右分割）
+    &--x {
+    align-self: stretch;
+    width: 4px;
+    cursor: col-resize;
+  }
+
+  // 纵向手柄（调整底部面板高度，左/右侧内部上下分割）
+  &--y {
+    align-self: stretch;
+    height: 4px;
+    cursor: row-resize;
+  }
+
+  // 底部面板的上边缘拖拽手柄（独立定位，不在 flex 流里）
+  &--bottom-edge {
+    align-self: auto;
+  }
+
+  // 最大化状态：视觉高亮
+  &--maximized {
+    background-color: hsl(var(--layplux-foreground) / 12%);
+  }
+}
+
+// ── Undocked 浮动面板 ─────────────────────────────────────────────────────────
+.layplux-panel--undocked {
+  position: absolute;
+  z-index: 100;
+  display: flex; // 让内部 PanelView 和 edge 手柄并排 / 堆叠
+  &-left {
+    top: 0;
+    left: 0;
+    flex-direction: row; // PanelView + 右边缘手柄 横向排列
+    height: 100%;
+
+    > .layplux-panel {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &-right {
+    top: 0;
+    right: 0;
+    flex-direction: row; // 左边缘手柄 + PanelView 横向排列
+    height: 100%;
+
+    > .layplux-panel {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &-bottom {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    flex-direction: column; // 上边缘手柄 + PanelView 纵向排列
+    > .layplux-panel {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+
+  > .layplux-resize-handle {
+    background-color: hsl(var(--layplux-root-background));
+  }
+}
+
+// edge 手柄：absolute 贴边，覆盖在 undocked 容器边界上
+.layplux-resize-handle {
+  &--edge-right {
+    flex-shrink: 0;
+    align-self: stretch;
+    width: 4px;
+    cursor: col-resize;
+  }
+
+  &--edge-left {
+    flex-shrink: 0;
+    align-self: stretch;
+    width: 4px;
+    cursor: col-resize;
+  }
+
+  &--edge-top {
+    flex-shrink: 0;
+    align-self: stretch;
+    height: 4px;
+    cursor: row-resize;
+  }
+}

package/dist/style/components/_layered-manager.scss

@@ -1,6 +1,6 @@
-.layered-manager {
-  position: relative;
-  display: flex;
-  height: 100%;
-  min-height: 0;
-}
+.layered-manager {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}

package/dist/style/components/_pane-view.scss

@@ -1,79 +1,79 @@
-.layplux-panel {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  background-color: hsl(var(--layplux-sidebar-deep));
-  border-radius: var(--layplux-radius);
-
-  &__header {
-    display: flex;
-    flex-shrink: 0;
-    gap: 4px;
-    align-items: center;
-    height: 36px;
-    padding: 0 8px;
-    user-select: none;
-    border-bottom: 1px solid hsl(var(--layplux-border));
-  }
-
-  &__title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 12px;
-    font-weight: 600;
-    color: hsl(var(--layplux-muted-foreground));
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    white-space: nowrap;
-  }
-
-  // viewMode 切换按钮组
-  &__actions {
-    display: flex;
-    gap: 2px;
-    align-items: center;
-    margin-left: auto;
-  }
-
-  &__action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    color: hsl(var(--layplux-muted-foreground));
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    transition:
-      background-color 0.1s,
-      color 0.1s;
-
-    &:hover {
-      color: hsl(var(--layplux-foreground));
-      background-color: hsl(var(--layplux-hover));
-    }
-
-    &--active {
-      color: hsl(var(--layplux-foreground));
-      background-color: hsl(var(--layplux-active));
-    }
-  }
-
-  &__body {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden auto;
-  }
-
-  &__content {
-    height: 100%;
-    min-height: 0;
-  }
-}
+.layplux-panel {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background-color: hsl(var(--layplux-sidebar-deep));
+  border-radius: var(--layplux-radius);
+
+  &__header {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+    height: 36px;
+    padding: 0 8px;
+    user-select: none;
+    border-bottom: 1px solid hsl(var(--layplux-border));
+  }
+
+  &__title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    font-weight: 600;
+    color: hsl(var(--layplux-muted-foreground));
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+  }
+
+  // viewMode 切换按钮组
+  &__actions {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  &__action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    color: hsl(var(--layplux-muted-foreground));
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    transition:
+      background-color 0.1s,
+      color 0.1s;
+
+    &:hover {
+      color: hsl(var(--layplux-foreground));
+      background-color: hsl(var(--layplux-hover));
+    }
+
+    &--active {
+      color: hsl(var(--layplux-foreground));
+      background-color: hsl(var(--layplux-active));
+    }
+  }
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden auto;
+  }
+
+  &__content {
+    height: 100%;
+    min-height: 0;
+  }
+}

package/dist/style/components/_root-pane.scss

@@ -1,17 +1,17 @@
-.layplux-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  contain: strict;
-  font-family: var(--layplux-font-family);
-  font-size: var(--layplux-font-size-base);
-  color: hsl(var(--layplux-foreground));
-  background-color: hsl(var(--layplux-root-background));
-  isolation: isolate;
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}
+.layplux-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  contain: strict;
+  font-family: var(--layplux-font-family);
+  font-size: var(--layplux-font-size-base);
+  color: hsl(var(--layplux-foreground));
+  background-color: hsl(var(--layplux-root-background));
+  isolation: isolate;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}

package/dist/style/components/_skeleton.scss

@@ -1,38 +1,38 @@
-.layplux-skeleton {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-
-  &__body {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-  }
-
-  &__stripe {
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    min-width: 6px;
-
-    &-top {
-      flex: 1;
-      overflow: hidden auto;
-    }
-
-    &-separator {
-      flex-shrink: 0;
-      width: 24px;
-      height: 1px;
-      margin: 4px auto;
-      background: hsl(var(--layplux-border));
-    }
-  }
-
-  &__center {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-  }
-}
+.layplux-skeleton {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  &__body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__stripe {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    min-width: 6px;
+
+    &-top {
+      flex: 1;
+      overflow: hidden auto;
+    }
+
+    &-separator {
+      flex-shrink: 0;
+      width: 24px;
+      height: 1px;
+      margin: 4px auto;
+      background: hsl(var(--layplux-border));
+    }
+  }
+
+  &__center {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+}

package/package.json

@@ -1,46 +1,49 @@
-{
-  "name": "layplux",
-  "version": "0.0.1",
-  "description": "IDE-like window system and plugin framework for the web",
-  "type": "module",
-  "main": "./dist/cjs/index.cjs",
-  "module": "./dist/esm/index.mjs",
-  "unpkg": "./dist/umd/index.js",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs"
-    },
-    "./*": {
-      "types": "./dist/types/*.d.ts",
-      "import": "./dist/esm/*.mjs",
-      "require": "./dist/cjs/*.cjs"
-    },
-    "./style": "./dist/style/index.css",
-    "./style/scss": "./dist/style/layplux.scss"
-  },
-  "files": ["dist"],
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "gulp --gulpfile ../../build-script/gulpfile.js build",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "dependencies": {
-    "eventemitter2": "^6.4.9"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7",
-    "vue": "^3.5.34",
-    "vue-tsc": "^3.3.2"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  }
-}
+{
+  "name": "layplux",
+  "version": "1.0.1",
+  "description": "IDE-like window system and plugin framework for the web",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.mjs",
+  "unpkg": "./dist/umd/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/esm/*.mjs",
+      "require": "./dist/cjs/*.cjs"
+    },
+    "./style": "./dist/style/index.css",
+    "./style/scss": "./dist/style/layplux.scss",
+    "./scss": "./dist/style/layplux.scss"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "eventemitter2": "^6.4.9"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.3.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "gulp --gulpfile ../../build-script/gulpfile.js build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}