xtralab 0.14.1 → 0.15.0

package/style/base.css

@@ -4,10 +4,22 @@
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
 
+/*
+ * Rules live on the section class below, so they travel when the tree moves.
+ */
+.jp-xtralab-FileBrowserPanel {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  overflow: hidden;
+}
+
 .jp-xtralab-FileBrowser {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   min-width: 200px;
+  min-height: 0;
   overflow: hidden;
   background-color: var(--jp-layout-color1);
 
@@ -129,46 +141,22 @@
   min-height: 0;
 }
 
-.jp-xtralab-FileBrowser file-tree-container {
+.jp-xtralab-FileBrowser-accordion {
   flex: 1 1 auto;
   min-height: 0;
 }
 
 /*
- * Drag image shown next to the cursor while dragging files out of the
- * tree. Mirrors the visual weight of the default file browser's drag
- * preview without depending on its DOM.
+ * In an accordion the toolbar shares the title row, so it must be able to
+ * shrink.
  */
-.jp-xtralab-DragImage {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  background-color: var(--jp-layout-color1);
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 6px;
-  color: var(--jp-ui-font-color1);
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  pointer-events: none;
-}
-
-.jp-xtralab-DragImage-icon {
-  display: inline-flex;
-  align-items: center;
+.jp-AccordionPanel-title > .jp-xtralab-FileBrowser-toolbar {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
 }
 
-.jp-xtralab-DragImage-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  background-color: var(--jp-brand-color1);
-  border-radius: 8px;
-  color: var(--jp-ui-inverse-font-color1);
-  font-size: var(--jp-ui-font-size0);
-  line-height: 1;
+.jp-xtralab-FileBrowser file-tree-container {
+  flex: 1 1 auto;
+  min-height: 0;
 }

package/style/customPanel.css

@@ -0,0 +1,9 @@
+/*
+ * All visible content comes from the hosted sections, which carry their own
+ * styles.
+ */
+
+.jp-xtralab-CustomPanel {
+  min-width: 200px;
+  overflow: hidden;
+}

package/style/index.js

@@ -3,6 +3,7 @@ import './about.css';
 import './askAgent.css';
 import './chrome.css';
 import './commandBar.css';
+import './customPanel.css';
 import './editorBreadcrumbs.css';
 import './git.css';
 import './highlight.css';

package/style/terminals.css

@@ -1,93 +1,36 @@
 /*
- * Left-sidebar panel listing running terminal sessions. Each row shows
- * the session's real (program-published) title, a smaller line below it
- * with the latest output from a running coding agent, and an inline
- * shutdown button that fades in on hover; the header carries the panel
- * title and a "new terminal" button. Colors and spacing pull from
- * `--jp-*` custom properties so the panel tracks the active JupyterLab
- * theme.
+ * Left-sidebar panel listing running terminal sessions, as a single movable
+ * "Terminals" section. Each row shows the session's real (program-published)
+ * title, a smaller line below it with the latest output from a running coding
+ * agent, and an inline shutdown button that fades in on hover. Colors and
+ * spacing pull from `--jp-*` custom properties so the panel tracks the active
+ * JupyterLab theme.
  */
 
 .jp-xtralab-Terminals {
-  display: flex;
-  flex-direction: column;
   min-width: 200px;
   overflow: hidden;
-  background-color: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  font-size: var(--jp-ui-font-size1);
 }
 
-.jp-xtralab-Terminals-body {
+/* On the section, not the panel, so the rules travel when the section moves. */
+.jp-xtralab-Terminals-section {
   display: flex;
-  flex: 1 1 auto;
   flex-direction: column;
-  min-height: 0;
-}
-
-.jp-xtralab-Terminals-header {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
-}
-
-.jp-xtralab-Terminals-title {
-  margin: 0;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--jp-ui-font-color1);
+  overflow: hidden;
 }
 
-.jp-xtralab-Terminals-actions {
+.jp-xtralab-Terminals-listing {
   display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 2px;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.jp-xtralab-Terminals-action {
+.jp-xtralab-Terminals-body {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  color: var(--jp-ui-font-color2);
-  cursor: pointer;
-}
-
-.jp-xtralab-Terminals-action:hover {
-  background-color: var(--jp-layout-color2);
-  color: var(--jp-ui-font-color1);
-}
-
-.jp-xtralab-Terminals-action:focus-visible {
-  outline: var(--jp-border-width) solid var(--jp-brand-color1);
-  outline-offset: -1px;
-}
-
-/*
- * "Shut down all" is disabled when there are no running terminals. Dim the
- * whole control with opacity rather than `color`: the stop glyph is an SVG
- * whose fill comes from its own `jp-icon3` class (not `currentColor`), so a
- * `color` change alone leaves the icon looking fully active — which is why the
- * button did not read as disabled.
- */
-.jp-xtralab-Terminals-action:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.jp-xtralab-Terminals-action:disabled:hover {
-  background: transparent;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .jp-xtralab-Terminals-empty {
@@ -214,9 +157,8 @@
   opacity: 1;
 }
 
-/* Keep the row/header icons at the standard 16px sidebar size. */
-.jp-xtralab-Terminals-item svg,
-.jp-xtralab-Terminals-action svg {
+/* Keep the row icons at the standard 16px sidebar size. */
+.jp-xtralab-Terminals-item svg {
   width: 16px;
   height: 16px;
 }