layplux 0.0.1

package/dist/esm/utils/vue.mjs

@@ -0,0 +1,17 @@
+import { h, isVNode, cloneVNode, Text } from "vue";
+function createContent(content, extraProps = {}) {
+  if (!content) return null;
+  if (isVNode(content)) {
+    return cloneVNode(content, extraProps);
+  }
+  if (typeof content === "string") {
+    if (Object.keys(extraProps).length > 0) {
+      return h(content, extraProps, content);
+    }
+    return h(Text, null, content);
+  }
+  return h(content, extraProps);
+}
+export {
+  createContent
+};

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

@@ -0,0 +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;
+}

package/dist/style/base/_tokens.scss

@@ -0,0 +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%;
+}

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +1,8 @@
+.layplux-bottom-left-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}

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

@@ -0,0 +1,8 @@
+.layplux-bottom-right-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}

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

@@ -0,0 +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;
+  }
+}

package/dist/style/components/_corner-glow.scss

@@ -0,0 +1,17 @@
+.corner-glow {
+  position: absolute;
+  top: -80px;
+  left: 50px;
+  z-index: 0;
+  width: 620px;
+  height: 420px;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at 20% 5%,
+    hsl(var(--layplux-primary) / 16%) 0%,
+    hsl(var(--layplux-primary) / 10%) 30%,
+    hsl(var(--layplux-primary) / 6%) 60%,
+    transparent
+  );
+  filter: blur(40px);
+}

package/dist/style/components/_dropdown.scss

@@ -0,0 +1,91 @@
+.layplux-dropdown {
+  min-width: 100px;
+  padding: 4px;
+  background: hsl(var(--layplux-popover));
+  border-radius: var(--layplux-radius);
+  box-shadow:
+    0 6px 16px 0 hsl(var(--layplux-shadow) / 8%),
+    0 3px 6px -4px hsl(var(--layplux-shadow) / 12%),
+    0 9px 28px 8px hsl(var(--layplux-shadow) / 5%);
+}
+
+.layplux-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  .layplux-popup-trigger {
+    display: flex;
+    padding: 6px 4px;
+    border-radius: calc(var(--layplux-radius) - 2px);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background: hsl(var(--layplux-accent-hover));
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex: 1;
+    gap: 8px;
+    align-items: center;
+    padding: 6px 4px;
+    font-size: 13px;
+    color: hsl(var(--layplux-popover-foreground));
+    cursor: pointer;
+    user-select: none;
+    border-radius: calc(var(--layplux-radius) - 2px);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background: hsl(var(--layplux-accent-hover));
+    }
+
+    &--submenu {
+      justify-content: space-between;
+      padding: 0;
+      cursor: default;
+      background: transparent;
+      border-radius: 0;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    &--danger {
+      color: hsl(var(--layplux-destructive));
+
+      &:hover {
+        color: hsl(var(--layplux-destructive-foreground));
+        background: hsl(var(--layplux-destructive));
+      }
+    }
+
+    &--disabled {
+      color: hsl(var(--layplux-muted-foreground));
+      cursor: not-allowed;
+      background: transparent;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    background: hsl(var(--layplux-border) / 50%);
+  }
+
+  &__submenu-arrow {
+    margin-left: auto;
+    font-size: 14px;
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,6 @@
+.glass-pane {
+  position: absolute;
+  inset: 0;
+  z-index: var(--layplux-popup-z-index);
+  pointer-events: none;
+}

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

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

package/dist/style/components/_left-bottom-area.scss

@@ -0,0 +1,8 @@
+.layplux-left-bottom-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}

package/dist/style/components/_left-top-area.scss

@@ -0,0 +1,9 @@
+.layplux-left-top-area {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+  overflow: hidden auto;
+}

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

@@ -0,0 +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;
+  }
+}

package/dist/style/components/_popup.scss

@@ -0,0 +1,19 @@
+.layplux-popup-trigger {
+  display: inline-flex;
+}
+
+.layplux-popup {
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transform-origin: top left;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  &--visible {
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/style/components/_right-bottom-area.scss

@@ -0,0 +1,8 @@
+.layplux-right-bottom-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}

package/dist/style/components/_right-top-area.scss

@@ -0,0 +1,8 @@
+.layplux-right-top-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}

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

@@ -0,0 +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;
+  }
+}

package/dist/style/components/_skeleton.scss

@@ -0,0 +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;
+  }
+}