@elench/shell 0.1.1 → 0.1.3

package/dist/styles.css

@@ -1,475 +1,345 @@
-.elench-shell {
-  --elench-shell-topbar-height: 36px;
-  --elench-shell-status-height: 28px;
-  --elench-shell-rail-width: 46px;
-  --elench-shell-sidebar-width: 292px;
-  --elench-shell-inspector-width: 292px;
-  display: grid;
-  grid-template-areas:
-    "topbar topbar topbar topbar"
-    "rail sidebar main inspector"
-    "status status status status";
-  grid-template-columns:
-    var(--elench-shell-rail-width)
-    var(--elench-shell-sidebar-width)
-    minmax(0, 1fr)
-    var(--elench-shell-inspector-width);
-  grid-template-rows: var(--elench-shell-topbar-height) minmax(0, 1fr) var(
-      --elench-shell-status-height
-    );
-  width: 100vw;
-  height: 100vh;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--bg-primary, #0a1120);
-  color: var(--fg, #e5edf7);
-}
-
-.elench-shell[data-left-sidebar="closed"] {
-  grid-template-areas:
-    "topbar topbar topbar"
-    "rail main inspector"
-    "status status status";
-  grid-template-columns:
-    var(--elench-shell-rail-width)
-    minmax(0, 1fr)
-    var(--elench-shell-inspector-width);
+@import "flexlayout-react/style/light.css";
+
+/* ═══════ FlexLayout Avocado Theme ═══════ */
+
+.flexlayout__layout {
+  --color-text: var(--fg);
+  --color-background: var(--bg-surface);
+  --color-1: var(--border);
+  --color-2: var(--bg-hover);
+  --color-3: var(--fg-tertiary);
+  --color-4: var(--fg-secondary);
+  --color-5: var(--bg-surface);
+  --color-6: var(--bg-base);
+
+  /* Tabs */
+  --color-tabset-background: var(--bg-surface);
+  --color-tabset-header-background: var(--bg-surface);
+  --color-tabset-divider-line: var(--border);
+
+  --color-tab-selected: var(--primary);
+  --color-tab-selected-background: rgba(var(--primary-rgb), 0.06);
+  --color-tab-unselected: var(--fg-tertiary);
+  --color-tab-unselected-background: transparent;
+
+  /* Splitter */
+  --color-splitter: transparent;
+  --color-splitter-hover: var(--primary);
+  --color-splitter-drag: var(--primary);
+
+  /* Border (sidebar/inspector) */
+  --color-border-background: var(--bg-surface);
+  --color-border-divider-line: var(--border);
+  --color-border-tab-selected: var(--fg);
+  --color-border-tab-selected-background: var(--bg-surface);
+  --color-border-tab-unselected: var(--fg-tertiary);
+  --color-border-tab-unselected-background: transparent;
+
+  /* Drag */
+  --color-drag1: hsl(var(--primary-hsl) / 0.1);
+  --color-drag1-background: hsl(var(--primary-hsl) / 0.08);
+  --color-drag2: hsl(var(--primary-hsl) / 0.2);
+  --color-drag2-background: hsl(var(--primary-hsl) / 0.12);
+
+  /* Font */
+  --font-size: 12px;
+  --font-family: var(--font-sans);
+  --shell-tab-button-min-width: 175px;
+  --shell-tab-button-max-width: 175px;
+
+  background-color: var(--bg-base);
+}
+
+/* ═══════ Tab strip ═══════ */
+
+.flexlayout__tabset_tabbar_outer {
+  background: var(--bg-surface);
+  border-bottom: none;
+  height: 36px;
+}
+
+.flexlayout__tabset_tabbar_inner_tab_container {
+  padding-left: 0;
+  padding-right: 0;
+  gap: 0;
+  --shell-tab-indicator-left: 0px;
+  --shell-tab-indicator-width: 0px;
+  --shell-tab-indicator-opacity: 0;
+  --shell-tab-indicator-settle-duration: 160ms;
+  --shell-tab-indicator-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.flexlayout__tabset_tabbar_inner_tab_container::after {
+  content: "";
+  position: absolute;
+  left: var(--shell-tab-indicator-left);
+  bottom: 0;
+  width: var(--shell-tab-indicator-width);
+  height: 2px;
+  background: var(--gradient-brand);
+  opacity: var(--shell-tab-indicator-opacity);
+  pointer-events: none;
+  transition: opacity 0.12s ease;
 }
 
-.elench-shell[data-right-inspector="closed"] {
-  grid-template-areas:
-    "topbar topbar topbar"
-    "rail sidebar main"
-    "status status status";
-  grid-template-columns:
-    var(--elench-shell-rail-width)
-    var(--elench-shell-sidebar-width)
-    minmax(0, 1fr);
+.flexlayout__tabset_tabbar_inner_tab_container[data-shell-tab-indicator="settling"]::after {
+  transition:
+    left var(--shell-tab-indicator-settle-duration) var(--shell-tab-indicator-ease),
+    width var(--shell-tab-indicator-settle-duration) var(--shell-tab-indicator-ease),
+    opacity 0.12s ease;
 }
 
-.elench-shell[data-left-sidebar="closed"][data-right-inspector="closed"] {
-  grid-template-areas:
-    "topbar topbar"
-    "rail main"
-    "status status";
-  grid-template-columns: var(--elench-shell-rail-width) minmax(0, 1fr);
+.flexlayout__tabset_tabbar_inner_tab_container_top {
+  border-top: none;
 }
 
-.elench-shell button {
-  font: inherit;
+.flexlayout__tabset_tab_divider {
+  width: 0;
 }
 
-.elench-shell-topbar {
-  grid-area: topbar;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--border, #1e2d44);
-  background: var(--bg-secondary, #0f172a);
-  padding: 0 8px 0 12px;
-}
+/* ═══════ Tab buttons ═══════ */
 
-.elench-shell-topbar-title {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--fg-secondary, #a8b5c7);
+.flexlayout__tab_button {
+  font-family: var(--font-sans);
   font-size: 12px;
-  font-weight: 650;
-  text-overflow: ellipsis;
+  font-weight: 450;
+  min-width: var(--shell-tab-button-min-width);
+  max-width: var(--shell-tab-button-max-width);
+  padding: 0 14px;
+  gap: 6px;
+  color: var(--fg-tertiary);
+  border-radius: 0;
+  margin: 0;
+  border-right: none;
+  position: relative;
   white-space: nowrap;
+  transition:
+    color 0.15s,
+    background-color 0.15s;
 }
 
-.elench-shell-topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
+.flexlayout__tab_button:hover {
+  color: var(--primary);
+  background: var(--color-tab-selected-background);
 }
 
-.elench-shell-topbar-actions button,
-.elench-shell-activity-button,
-.elench-shell-main-tab-icon {
-  display: inline-flex;
-  width: 28px;
-  height: 28px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--fg-tertiary, #73839b);
-  cursor: pointer;
+.flexlayout__tab_button--selected {
+  color: var(--primary);
+  font-weight: 450;
+  background: var(--color-tab-selected-background);
+  box-shadow: none;
 }
 
-.elench-shell-topbar-actions button:hover,
-.elench-shell-activity-button:hover,
-.elench-shell-main-tab-icon:hover {
-  background: var(--bg-hover, #1e3050);
-  color: var(--fg, #e5edf7);
+.flexlayout__tab_button--selected:hover {
+  color: var(--primary);
+  background: var(--color-tab-selected-background);
 }
 
-.elench-shell-topbar svg,
-.elench-shell-activity-button svg,
-.elench-shell-main-tab-icon svg {
-  width: 16px;
-  height: 16px;
+.flexlayout__tab_button--unselected {
+  color: var(--fg-tertiary);
+  background: transparent;
 }
 
-.elench-shell-activity-rail {
-  grid-area: rail;
+/* Tab close icon */
+.flexlayout__tab_button_trailing {
   display: flex;
-  min-height: 0;
-  flex-direction: column;
   align-items: center;
-  gap: 4px;
-  border-right: 1px solid var(--border, #1e2d44);
-  background: var(--bg-secondary, #0f172a);
-  padding: 8px 5px;
-}
-
-.elench-shell-activity-button {
-  width: 34px;
-  height: 34px;
-  position: relative;
-}
-
-.elench-shell-activity-button[aria-pressed="true"] {
-  background: var(--bg-active, #1a2d4a);
-  color: var(--fg, #e5edf7);
-}
-
-.elench-shell-activity-button[aria-pressed="true"]::before {
-  position: absolute;
-  left: -5px;
-  width: 2px;
-  height: 18px;
-  border-radius: 999px;
-  background: var(--primary, #3b82f6);
-  content: "";
-}
-
-.elench-shell-sidebar {
-  grid-area: sidebar;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  border-right: 1px solid var(--border, #1e2d44);
-  background: var(--bg-surface, #0f172a);
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 2px;
+  border-radius: 3px;
+  opacity: 0;
+  transition:
+    opacity 0.15s,
+    background-color 0.15s;
 }
 
-.elench-shell-sidebar-frame {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  flex-direction: column;
+.flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
+  opacity: 0.5;
 }
 
-.elench-shell-sidebar-title {
-  flex: 0 0 auto;
-  border-bottom: 1px solid var(--border, #1e2d44);
-  color: var(--fg-secondary, #a8b5c7);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  padding: 10px 12px;
-  text-transform: uppercase;
+.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
+  opacity: 0.35;
 }
 
-.elench-shell-sidebar-content {
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-  padding: 8px;
+.flexlayout__tab_button_trailing:hover {
+  opacity: 1 !important;
+  background: var(--bg-hover);
 }
 
-.elench-shell-sidebar-section {
-  margin: 0 0 12px;
+@media (prefers-reduced-motion: reduce) {
+  .flexlayout__tabset_tabbar_inner_tab_container::after,
+  .flexlayout__tab_button,
+  .flexlayout__tab_button_trailing {
+    transition: none;
+  }
 }
 
-.elench-shell-sidebar-section h2 {
-  color: var(--fg-tertiary, #73839b);
-  font-size: 11px;
-  font-weight: 650;
-  margin: 0 0 6px;
-  padding: 0 4px;
+/* Tab content truncation within min/max width */
+.flexlayout__tab_button_content {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.elench-shell-sidebar-item {
-  display: flex;
-  width: 100%;
-  min-height: 42px;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--fg-secondary, #a8b5c7);
-  cursor: pointer;
-  padding: 7px 8px;
-  text-align: left;
-}
+/* Preview (ephemeral) tabs */
 
-.elench-shell-sidebar-item:hover {
-  background: var(--bg-hover, #1e3050);
-  color: var(--fg, #e5edf7);
-}
+/* ═══════ Tab content pane ═══════ */
 
-.elench-shell-sidebar-item[aria-selected="true"] {
-  border-color: var(--border-strong, #2a3f5f);
-  background: var(--bg-active, #1a2d4a);
-  color: var(--fg, #e5edf7);
+.flexlayout__tab {
+  background: var(--bg-surface);
+  overflow: hidden;
 }
 
-.elench-shell-sidebar-item-icon {
-  display: inline-flex;
-  flex: 0 0 auto;
-  color: var(--fg-tertiary, #73839b);
+.flexlayout__tab:not(.flexlayout__tab_border) {
+  border-radius: 0 0 var(--shell-radius) var(--shell-radius);
 }
 
-.elench-shell-sidebar-item-icon svg {
-  width: 16px;
-  height: 16px;
+.flexlayout__tabset,
+.flexlayout__tab_border_left,
+.flexlayout__tab_border_right {
+  background: var(--bg-surface);
+  border-radius: var(--shell-radius);
+  overflow: hidden;
 }
 
-.elench-shell-sidebar-item-text {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
+/* ═══════ Tabset header ═══════ */
 
-.elench-shell-sidebar-item-title,
-.elench-shell-main-tab-select span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.flexlayout__tabset-selected {
+  background: var(--bg-surface);
 }
 
-.elench-shell-sidebar-item-title {
-  font-size: 12.5px;
-  font-weight: 600;
+.flexlayout__tab_toolbar_button {
+  color: var(--fg-tertiary);
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+  border-radius: 4px;
 }
 
-.elench-shell-sidebar-item-description {
-  overflow: hidden;
-  color: var(--fg-tertiary, #73839b);
-  font-size: 11.5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.flexlayout__tab_toolbar_button:hover {
+  color: var(--fg-secondary);
+  background: var(--bg-hover);
 }
 
-.elench-shell-main {
-  grid-area: main;
-  display: grid;
-  min-width: 0;
-  min-height: 0;
-  grid-template-rows: 34px minmax(0, 1fr);
-  background: var(--bg-primary, #0a1120);
-}
+/* ═══════ Splitters ═══════ */
 
-.elench-shell-tab-rail {
-  display: flex;
-  min-width: 0;
-  align-items: end;
-  overflow-x: auto;
-  border-bottom: 1px solid var(--border, #1e2d44);
-  background: var(--bg-secondary, #0f172a);
-  padding: 3px 6px 0;
+.flexlayout__splitter {
+  background: transparent;
+  transition: background-color 0.1s;
 }
 
-.elench-shell-main-tab {
-  display: flex;
-  min-width: 132px;
-  max-width: 220px;
-  height: 31px;
-  align-items: center;
-  border: 1px solid transparent;
-  border-bottom: 0;
-  border-radius: 6px 6px 0 0;
-  color: var(--fg-tertiary, #73839b);
+.flexlayout__splitter:hover {
+  background: var(--primary);
+  border-radius: 2px;
 }
 
-.elench-shell-main-tab[aria-selected="true"] {
-  border-color: var(--border, #1e2d44);
-  background: var(--bg-surface, #0f172a);
-  color: var(--fg, #e5edf7);
+.flexlayout__splitter_drag {
+  background: var(--primary);
 }
 
-.elench-shell-main-tab[data-preview="true"] .elench-shell-main-tab-select {
-  font-style: italic;
-}
+/* ═══════ Borders (sidebar/inspector panels) ═══════ */
 
-.elench-shell-main-tab-select {
-  min-width: 0;
-  flex: 1;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  padding: 0 8px;
-  text-align: left;
+.flexlayout__border {
+  background: var(--bg-surface);
+  border: none;
 }
 
-.elench-shell-workspace {
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  background: var(--bg-surface, #0f172a);
+.flexlayout__border_left {
+  border-right: none;
 }
 
-.elench-shell-blank-main {
-  height: 100%;
-  min-height: 0;
+.flexlayout__border_right {
+  border-left: none;
 }
 
-.elench-shell-inspector {
-  grid-area: inspector;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  border-left: 1px solid var(--border, #1e2d44);
-  background: var(--bg-surface, #0f172a);
-  padding: 10px;
+/* Hide border tab bar strips — activity bar + top bar handle toggles */
+.flexlayout__border_inner,
+.flexlayout__border_button,
+.flexlayout__border_toolbar {
+  display: none !important;
 }
 
-.elench-shell-statusbar {
-  grid-area: status;
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 12px;
-  border-top: 1px solid var(--border, #1e2d44);
-  background: var(--bg-secondary, #0f172a);
-  color: var(--fg-tertiary, #73839b);
-  font-size: 11.5px;
-  padding: 0 10px;
+/* Border content fills available space */
+.flexlayout__border_inner_tab_container {
+  background: var(--bg-surface);
 }
 
-.elench-shell-statusbar-slot {
-  min-width: 0;
-  flex: 1;
+.flexlayout__border_tab_contents {
+  background: var(--bg-surface);
+  border-radius: var(--shell-radius);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.elench-shell-page {
-  max-width: 1160px;
-  margin: 0 auto;
-  padding: 24px;
-}
+/* ═══════ Drag outline ═══════ */
 
-.elench-shell-page-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
+.flexlayout__outline_rect {
+  border: 2px solid var(--primary);
+  background: hsl(var(--primary-hsl) / 0.06);
+  border-radius: var(--shell-radius);
 }
 
-.elench-shell-page-eyebrow {
-  color: var(--fg-tertiary, #73839b);
+.flexlayout__drag_rect {
+  background: hsl(var(--primary-hsl) / 0.12);
+  border: 1px solid hsl(var(--primary-hsl) / 0.3);
+  border-radius: var(--radius);
+  color: var(--fg);
+  font-family: var(--font-sans);
   font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  margin-bottom: 4px;
-  text-transform: uppercase;
 }
 
-.elench-shell-page h1 {
-  color: var(--fg, #e5edf7);
-  font-size: 22px;
-  line-height: 1.2;
-  margin: 0;
-}
+/* ═══════ Popup menu (overflow tabs) ═══════ */
 
-.elench-shell-page p {
-  color: var(--fg-tertiary, #73839b);
-  font-size: 13px;
-  line-height: 1.6;
-  margin: 6px 0 0;
+.flexlayout__popup_menu {
+  background: var(--popover);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
 }
 
-.elench-shell-page-actions {
-  flex: 0 0 auto;
-}
-
-.elench-shell-metric,
-.elench-shell-field {
-  border: 1px solid var(--border, #1e2d44);
-  border-radius: 8px;
-  background: var(--bg-card, #162236);
+.flexlayout__popup_menu_item {
+  color: var(--fg-secondary);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  padding: 6px 12px;
+  transition: background-color 0.1s;
 }
 
-.elench-shell-metric {
-  padding: 12px;
+.flexlayout__popup_menu_item:hover {
+  background: var(--bg-hover);
+  color: var(--fg);
 }
 
-.elench-shell-metric div,
-.elench-shell-field span {
-  color: var(--fg-tertiary, #73839b);
-  font-size: 11.5px;
-}
+/* ═══════ Edge indicators ═══════ */
 
-.elench-shell-metric strong {
-  display: block;
-  color: var(--fg, #e5edf7);
-  font-size: 22px;
-  margin-top: 6px;
+.flexlayout__edge_rect {
+  background: hsl(var(--primary-hsl) / 0.15);
+  border: 1px solid hsl(var(--primary-hsl) / 0.3);
 }
 
-.elench-shell-field {
-  display: grid;
-  gap: 4px;
-  padding: 9px;
-}
+/* ═══════ Empty tabset placeholder ═══════ */
 
-.elench-shell-field strong {
+.flexlayout__tabset_content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   min-width: 0;
-  overflow: hidden;
-  color: var(--fg, #e5edf7);
-  font-size: 12px;
-  font-weight: 550;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.elench-shell-empty-state {
-  display: grid;
-  min-height: 120px;
-  align-content: center;
-  justify-items: center;
-  border: 1px dashed var(--border, #1e2d44);
-  border-radius: 8px;
-  color: var(--fg-tertiary, #73839b);
-  padding: 18px;
-  text-align: center;
-}
+/* ═══════ Scrollbar ═══════ */
 
-.elench-shell-empty-state strong {
-  color: var(--fg-secondary, #a8b5c7);
-  font-size: 13px;
+.flexlayout__layout ::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
 }
 
-.elench-shell-empty-state p {
-  max-width: 34ch;
-  font-size: 12px;
-  line-height: 1.5;
-  margin: 6px 0 0;
-}
-
-@media (max-width: 900px) {
-  .elench-shell,
-  .elench-shell[data-left-sidebar="closed"],
-  .elench-shell[data-right-inspector="closed"],
-  .elench-shell[data-left-sidebar="closed"][data-right-inspector="closed"] {
-    grid-template-areas:
-      "topbar topbar"
-      "rail main"
-      "status status";
-    grid-template-columns: var(--elench-shell-rail-width) minmax(0, 1fr);
-  }
+.flexlayout__layout ::-webkit-scrollbar-track {
+  background: transparent;
+}
 
-  .elench-shell-sidebar,
-  .elench-shell-inspector {
-    display: none;
-  }
+.flexlayout__layout ::-webkit-scrollbar-thumb {
+  background: var(--fg-tertiary);
+  border-radius: 4px;
 }