xtralab 0.11.1 → 0.12.0

package/style/git.css

@@ -1,8 +1,7 @@
 /*
  * Styles for xtralab's @pierre/diffs viewer. The same surface is used by
  * the launcher dashboard's own diff tab and by the jupyterlab-git diff
- * providers, so these rules cover both hosts. (xtralab no longer ships a
- * git changes panel — the upstream jupyterlab-git panel is reused.)
+ * providers, so these rules cover both hosts.
  */
 
 /*
@@ -97,8 +96,8 @@
 
 .jp-xtralab-DiffWidget-segmented {
   display: inline-flex;
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 3px;
+  border: var(--jp-border-width) solid var(--jp-border-color2);
+  border-radius: var(--jp-border-radius);
   overflow: hidden;
   background-color: var(--jp-layout-color1);
 }
@@ -109,14 +108,20 @@
   background: transparent;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size0);
-  cursor: pointer;
   line-height: 1.4;
+  cursor: pointer;
 }
 
 .jp-xtralab-DiffWidget-segmentedButton:hover {
   background-color: var(--jp-layout-color2);
 }
 
+/*
+ * Active segment: brand-colour fill with the inverse UI font colour — the
+ * same pair JupyterLab uses to mark selected items (the command palette
+ * active item, the file browser selection). The inverse font colour adapts
+ * per theme, so the label stays legible on the brand fill in both themes.
+ */
 .jp-xtralab-DiffWidget-segmentedButton[data-active='true'] {
   background-color: var(--jp-brand-color1);
   color: var(--jp-ui-inverse-font-color1);
@@ -586,17 +591,27 @@
   margin: 0;
 }
 
+/*
+ * Checkerboard + border so transparent regions read clearly. The squares
+ * are theme-aware (JupyterLab layout colors) so the frame stays a calm
+ * light checkerboard in the light theme and a calm dark one in the dark
+ * theme, rather than a bright white block.
+ *
+ * 2-up and onion fill their whole panel with it; the swipe view instead
+ * carries it on its image-sized *frame* (not the surrounding area) so the
+ * checkerboard hugs the image. That keeps the divider's top/bottom handles
+ * sitting at the image edges instead of floating in the middle of a
+ * checkerboard expanse.
+ */
 .jp-xtralab-ImageDiff-frame,
-.jp-xtralab-ImageDiff-stack {
-  /*
-   * Checkerboard so transparent regions are obvious; theme-neutral.
-   */
-  background-color: #fff;
+.jp-xtralab-ImageDiff-stack,
+.jp-xtralab-ImageDiff-swipeFrame {
+  background-color: var(--jp-layout-color1);
   background-image:
-    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
-    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
-    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
+    linear-gradient(45deg, var(--jp-layout-color3) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--jp-layout-color3) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--jp-layout-color3) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--jp-layout-color3) 75%);
   background-size: 16px 16px;
   background-position:
     0 0,
@@ -651,8 +666,8 @@
 }
 
 /*
- * Both revisions occupy the same grid cell so swipe/onion can overlay
- * them. `place-items: center` keeps each image at its own size (no
+ * Onion-skin view: both revisions occupy the same grid cell so they
+ * overlay. `place-items: center` keeps each image at its own size (no
  * stretching the smaller revision up to the larger one's box) while
  * `max-height/width` scale either one down to fit the available space.
  */
@@ -677,31 +692,57 @@
 }
 
 /*
- * Swipe view wraps the stack in a positioning context so the divider
- * can be overlaid without joining the grid. Keeping the divider as a
- * sibling of `.jp-xtralab-ImageDiff-stack` (rather than a child)
- * preserves the stack's existing flex sizing — it stays the only flex
- * item the interactive column needs to shrink, so `max-height: 100%`
- * on the image still keeps big revisions inside the available area.
- *
- * The whole frame is the drag target: pressing anywhere over the image
- * sets the divider to that x position and drag-tracks the pointer. The
- * dedicated bottom slider was removed because its thumb sat on a
- * narrow centered track that drifted out of sync with the wide
- * divider, which felt off. Dragging directly on the image (GitHub /
- * Pierre style) keeps cursor and divider visually aligned.
+ * Swipe view: a transparent container that just centers the image-sized
+ * frame in whatever space the body leaves. The checkerboard lives on the
+ * frame (above), not here, so it hugs the image rather than spanning the
+ * panel.
  */
-.jp-xtralab-ImageDiff-swipeFrame {
+.jp-xtralab-ImageDiff-swipeArea {
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0;
   width: 100%;
-  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ * The frame is sized in JS (inline `width`/`height`) to exactly the
+ * displayed image box. Because the frame *is* that box, the divider's
+ * `left: N%`, the pointer-to-percent mapping in `setFromClientX` and each
+ * image's `clip-path` inset all resolve against the same width — so the
+ * white divider line sits precisely on the seam between the two revisions
+ * as it is dragged. (A full-width frame instead let the line drift off the
+ * seam by up to half the surrounding letterbox.)
+ *
+ * The whole frame is the drag target: pressing anywhere over the image
+ * jumps the divider to that x and then drag-tracks the pointer (GitHub /
+ * Pierre style), keeping cursor, divider and seam together.
+ */
+.jp-xtralab-ImageDiff-swipeFrame {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
   user-select: none;
   touch-action: none;
 }
 
+/*
+ * Both revisions fill the frame, so an image's clip inset of N% and the
+ * divider at `left: N%` cut at the same x. `object-fit: contain` only
+ * letterboxes when the two revisions differ in aspect ratio; for the
+ * common same-dimensions edit it fills the box exactly.
+ */
+.jp-xtralab-ImageDiff-swipeImg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
 /*
  * Swipe divider: a vertical line marking the boundary between the two
  * clipped revisions. The natural seam between two clipped images is

package/style/index.css

@@ -1,4 +1,5 @@
 @import url('base.css');
+@import url('askAgent.css');
 @import url('commandBar.css');
 @import url('editorBreadcrumbs.css');
 @import url('git.css');

package/style/index.js

@@ -1,5 +1,7 @@
 import './base.css';
+import './askAgent.css';
 import './commandBar.css';
+import './editorBreadcrumbs.css';
 import './git.css';
 import './highlight.css';
 import './launcher.css';

package/style/topBar.css

@@ -1,6 +1,6 @@
 /* Sidebar toggle buttons in the top bar (xtralab:top-bar). */
 
-.xtralab-TopBarButton {
+.jp-xtralab-TopBarButton {
   display: flex;
   align-items: center;
 }
@@ -11,7 +11,7 @@
  * its left so it floats to the far right, mirroring the left button at the
  * leading edge.
  */
-.xtralab-TopBarButton-right {
+.jp-xtralab-TopBarButton-right {
   margin-left: auto;
 }
 
@@ -29,10 +29,10 @@
  * `!important` is needed to override the (non-important) `:host(...)` rules
  * defined inside the component's shadow DOM.
  */
-.xtralab-TopBarButton .jp-ToolbarButtonComponent {
+.jp-xtralab-TopBarButton .jp-ToolbarButtonComponent {
   box-shadow: none !important;
 }
 
-.xtralab-TopBarButton .jp-ToolbarButtonComponent[disabled] {
+.jp-xtralab-TopBarButton .jp-ToolbarButtonComponent[disabled] {
   background: transparent !important;
 }