layplux 0.0.1

package/dist/style/index.css

@@ -0,0 +1,768 @@
+.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.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 {
+  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;
+}
+.layplux-root *,
+.layplux-root *::before,
+.layplux-root *::after {
+  box-sizing: border-box;
+}
+
+.layplux-skeleton {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.layplux-skeleton__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.layplux-skeleton__stripe {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  min-width: 6px;
+}
+.layplux-skeleton__stripe-top {
+  flex: 1;
+  overflow: hidden auto;
+}
+.layplux-skeleton__stripe-separator {
+  flex-shrink: 0;
+  width: 24px;
+  height: 1px;
+  margin: 4px auto;
+  background: hsl(var(--layplux-border));
+}
+.layplux-skeleton__center {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.glass-pane {
+  position: absolute;
+  inset: 0;
+  z-index: var(--layplux-popup-z-index);
+  pointer-events: none;
+}
+
+.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);
+}
+
+.layered-manager {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.layplux-top-area {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+  height: 42px;
+  padding: 8px 12px;
+}
+.layplux-top-area__toolbar-left {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+.layplux-top-area__toolbar-center {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  margin: 0 8px;
+}
+.layplux-top-area__toolbar-right {
+  display: flex;
+  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;
+}
+.layplux-bottom-area__left {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.layplux-bottom-area__center {
+  display: flex;
+  flex: 1;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+}
+.layplux-bottom-area__right {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.title-view {
+  display: inline-flex;
+  gap: 0;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.title-view--small {
+  font-size: 10px;
+}
+.title-view--small .title-view__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 14px;
+}
+.title-view--middle {
+  font-size: 11px;
+}
+.title-view--middle .title-view__icon {
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+}
+.title-view--large {
+  font-size: 13px;
+}
+.title-view--large .title-view__icon {
+  width: 24px;
+  height: 24px;
+  font-size: 20px;
+}
+.title-view--icon-only {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+.title-view--icon-only .title-view__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title-view--icon-only .title-view__label {
+  display: none;
+}
+.title-view--stacked {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  padding: 4px 3px 3px;
+  border-radius: 8px;
+}
+.title-view--stacked .title-view__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1px;
+}
+.title-view--stacked .title-view__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  white-space: nowrap;
+}
+.title-view--inline {
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+}
+.title-view--inline .title-view__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.title-view--inline .title-view__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title-view--idle {
+  color: hsl(var(--layplux-muted-foreground));
+  cursor: pointer;
+  background: transparent;
+}
+.title-view--idle:hover {
+  color: hsl(var(--layplux-foreground));
+  background: hsl(var(--layplux-foreground)/8%);
+  border-radius: 8px;
+}
+.title-view--active {
+  color: hsl(var(--layplux-foreground));
+  cursor: pointer;
+  background: hsl(var(--layplux-foreground)/8%);
+  border-radius: 8px;
+}
+.title-view--disabled {
+  color: hsl(var(--layplux-muted-foreground));
+  cursor: not-allowed;
+  background: transparent;
+  opacity: 0.4;
+}
+.title-view--error {
+  color: hsl(var(--layplux-destructive));
+  cursor: pointer;
+  background: transparent;
+}
+.title-view--error .title-view__icon {
+  position: relative;
+}
+.title-view--error .title-view__icon::after {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  content: "";
+  background: hsl(var(--layplux-destructive));
+  border-radius: 50%;
+}
+.title-view--focused {
+  color: hsl(var(--layplux-primary-foreground));
+  background: hsl(var(--layplux-primary));
+  border-radius: 8px;
+}
+.title-view {
+  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
+}
+.title-view__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.title-view__label {
+  display: block;
+  font-weight: 400;
+  user-select: none;
+}
+
+.layplux-left-top-area {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+  overflow: hidden auto;
+}
+
+.layplux-left-bottom-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}
+
+.layplux-bottom-left-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}
+
+.layplux-right-top-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}
+
+.layplux-right-bottom-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}
+
+.layplux-bottom-right-area {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 4px;
+}
+
+.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);
+}
+.layplux-panel__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));
+}
+.layplux-panel__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;
+}
+.layplux-panel__actions {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+.layplux-panel__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;
+}
+.layplux-panel__action-btn:hover {
+  color: hsl(var(--layplux-foreground));
+  background-color: hsl(var(--layplux-hover));
+}
+.layplux-panel__action-btn--active {
+  color: hsl(var(--layplux-foreground));
+  background-color: hsl(var(--layplux-active));
+}
+.layplux-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden auto;
+}
+.layplux-panel__content {
+  height: 100%;
+  min-height: 0;
+}
+
+.layplux-center-area {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.layplux-center-area__main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.layplux-center-area__left, .layplux-center-area__right {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  min-height: 0;
+}
+.layplux-center-area__docked-panels {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.layplux-center-area__docked-panels > .layplux-panel {
+  flex: 1;
+  min-height: 0;
+}
+.layplux-center-area__editor {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  background-color: hsl(var(--layplux-background));
+  border-radius: var(--layplux-radius);
+}
+.layplux-center-area__bottom {
+  display: flex;
+  flex-shrink: 0;
+  min-height: 0;
+}
+.layplux-center-area__bottom > .layplux-panel {
+  flex: 1;
+  min-width: 0;
+}
+
+.layplux-resize-handle {
+  z-index: 10;
+  flex-shrink: 0;
+  background-color: transparent;
+  transition: background-color 0.15s;
+}
+.layplux-resize-handle:hover, .layplux-resize-handle--x {
+  align-self: stretch;
+  width: 4px;
+  cursor: col-resize;
+}
+.layplux-resize-handle--y {
+  align-self: stretch;
+  height: 4px;
+  cursor: row-resize;
+}
+.layplux-resize-handle--bottom-edge {
+  align-self: auto;
+}
+.layplux-resize-handle--maximized {
+  background-color: hsl(var(--layplux-foreground)/12%);
+}
+
+.layplux-panel--undocked {
+  position: absolute;
+  z-index: 100;
+  display: flex;
+}
+.layplux-panel--undocked-left {
+  top: 0;
+  left: 0;
+  flex-direction: row;
+  height: 100%;
+}
+.layplux-panel--undocked-left > .layplux-panel {
+  flex: 1;
+  min-width: 0;
+}
+.layplux-panel--undocked-right {
+  top: 0;
+  right: 0;
+  flex-direction: row;
+  height: 100%;
+}
+.layplux-panel--undocked-right > .layplux-panel {
+  flex: 1;
+  min-width: 0;
+}
+.layplux-panel--undocked-bottom {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  flex-direction: column;
+}
+.layplux-panel--undocked-bottom > .layplux-panel {
+  flex: 1;
+  min-height: 0;
+}
+.layplux-panel--undocked > .layplux-resize-handle {
+  background-color: hsl(var(--layplux-root-background));
+}
+
+.layplux-resize-handle--edge-right {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 4px;
+  cursor: col-resize;
+}
+.layplux-resize-handle--edge-left {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 4px;
+  cursor: col-resize;
+}
+.layplux-resize-handle--edge-top {
+  flex-shrink: 0;
+  align-self: stretch;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.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;
+}
+.layplux-popup--visible {
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.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-dropdown-menu .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;
+}
+.layplux-dropdown-menu .layplux-popup-trigger:hover {
+  background: hsl(var(--layplux-accent-hover));
+}
+.layplux-dropdown-menu__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;
+}
+.layplux-dropdown-menu__item:hover {
+  background: hsl(var(--layplux-accent-hover));
+}
+.layplux-dropdown-menu__item--submenu {
+  justify-content: space-between;
+  padding: 0;
+  cursor: default;
+  background: transparent;
+  border-radius: 0;
+}
+.layplux-dropdown-menu__item--submenu:hover {
+  background: transparent;
+}
+.layplux-dropdown-menu__item--danger {
+  color: hsl(var(--layplux-destructive));
+}
+.layplux-dropdown-menu__item--danger:hover {
+  color: hsl(var(--layplux-destructive-foreground));
+  background: hsl(var(--layplux-destructive));
+}
+.layplux-dropdown-menu__item--disabled {
+  color: hsl(var(--layplux-muted-foreground));
+  cursor: not-allowed;
+  background: transparent;
+}
+.layplux-dropdown-menu__item--disabled:hover {
+  background: transparent;
+}
+.layplux-dropdown-menu__divider {
+  height: 1px;
+  background: hsl(var(--layplux-border)/50%);
+}
+.layplux-dropdown-menu__submenu-arrow {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.5;
+}
+
+.layplux-tooltip {
+  position: relative;
+  max-width: 280px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: hsl(var(--layplux-primary-foreground));
+  overflow-wrap: break-word;
+  background: hsl(var(--layplux-foreground));
+  border-radius: calc(var(--layplux-radius) - 2px);
+  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-tooltip__inner {
+  position: relative;
+  z-index: 1;
+}
+.layplux-tooltip__arrow {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: hsl(var(--layplux-foreground));
+  transform: rotate(45deg);
+}
+
+.layplux-popup.top .layplux-tooltip__arrow,
+.layplux-popup.top-start .layplux-tooltip__arrow,
+.layplux-popup.top-end .layplux-tooltip__arrow {
+  bottom: -3px;
+  left: calc(50% - 3px);
+}
+
+.layplux-popup.bottom .layplux-tooltip__arrow,
+.layplux-popup.bottom-start .layplux-tooltip__arrow,
+.layplux-popup.bottom-end .layplux-tooltip__arrow {
+  top: -3px;
+  left: calc(50% - 3px);
+}
+
+.layplux-popup.left .layplux-tooltip__arrow,
+.layplux-popup.left-start .layplux-tooltip__arrow,
+.layplux-popup.left-end .layplux-tooltip__arrow {
+  top: calc(50% - 3px);
+  right: -3px;
+}
+
+.layplux-popup.right .layplux-tooltip__arrow,
+.layplux-popup.right-start .layplux-tooltip__arrow,
+.layplux-popup.right-end .layplux-tooltip__arrow {
+  top: calc(50% - 3px);
+  left: -3px;
+}