xtralab 0.4.0 → 0.5.0

package/style/git.css

@@ -1,272 +1,10 @@
 /*
- * Styles for the git changes panel and the diff viewer. The panel mirrors
- * the visual rhythm of the default JupyterLab side panels so it does not
- * stand out from the rest of the UI.
+ * 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.)
  */
 
-.jp-xtralab-GitPanel {
-  display: flex;
-  flex-direction: column;
-  min-width: 240px;
-  background-color: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  overflow: hidden;
-}
-
-.jp-xtralab-GitPanel-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.jp-xtralab-GitPanel-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--jp-border-color2);
-}
-
-.jp-xtralab-GitPanel-headerInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.jp-xtralab-GitPanel-repo {
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.jp-xtralab-GitPanel-branch {
-  color: var(--jp-ui-font-color2);
-  font-size: var(--jp-ui-font-size0);
-}
-
-.jp-xtralab-GitPanel-error {
-  margin: 12px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: var(
-    --jp-error-color3,
-    var(--jp-rendermime-error-background)
-  );
-  color: var(--jp-ui-font-color1);
-  font-size: var(--jp-ui-font-size1);
-  white-space: pre-wrap;
-}
-
-.jp-xtralab-GitPanel-empty {
-  margin: 12px;
-  color: var(--jp-ui-font-color2);
-  font-style: italic;
-  text-align: center;
-}
-
-.jp-xtralab-GitPanel-section {
-  display: flex;
-  flex-direction: column;
-}
-
-/*
- * Section headers and rows place their hover actions between the label
- * and the trailing count/badge, so the count stays pinned to the right
- * edge regardless of whether the section has any bulk actions. Reserving
- * the action width via `visibility: hidden` keeps the layout from
- * shifting when the cursor enters and leaves.
- */
-.jp-xtralab-GitPanel-sectionHeader {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding: 0 12px;
-  cursor: pointer;
-  user-select: none;
-  text-transform: uppercase;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--jp-ui-font-color2);
-}
-
-.jp-xtralab-GitPanel-sectionHeader:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-xtralab-GitPanel-sectionChevron {
-  width: 12px;
-  text-align: center;
-  font-size: 10px;
-}
-
-.jp-xtralab-GitPanel-sectionLabel {
-  flex: 1 1 auto;
-}
-
-.jp-xtralab-GitPanel-sectionCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 4px;
-  background-color: var(--jp-layout-color3);
-  color: var(--jp-ui-font-color1);
-  border-radius: 8px;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  line-height: 1;
-}
-
-.jp-xtralab-GitPanel-sectionActions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  visibility: hidden;
-}
-
-.jp-xtralab-GitPanel-sectionHeader:hover .jp-xtralab-GitPanel-sectionActions {
-  visibility: visible;
-}
-
-.jp-xtralab-GitPanel-sectionBody {
-  display: flex;
-  flex-direction: column;
-}
-
-/*
- * Three-column row layout: the label group on the left grows, the actions
- * column has a fixed reserved width that fits the worst-case button count,
- * and the badge column is auto-sized on the right edge. Reserving the
- * action column keeps the badge horizontally pinned regardless of the
- * row's hover state.
- */
-.jp-xtralab-GitPanel-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 26px;
-  padding: 0 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.jp-xtralab-GitPanel-row:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-xtralab-GitPanel-rowLabel {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.jp-xtralab-GitPanel-rowName {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
-.jp-xtralab-GitPanel-rowPath {
-  color: var(--jp-ui-font-color2);
-  font-size: var(--jp-ui-font-size0);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
-.jp-xtralab-GitPanel-rowActions {
-  /*
-   * Reserved width matches the worst case of two 20px buttons + a 2px
-   * gap. Staged rows only host the unstage button, but pinning the
-   * column width keeps the trailing badge horizontally aligned across
-   * the staged and unstaged sections.
-   */
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 2px;
-  flex: 0 0 42px;
-  visibility: hidden;
-}
-
-.jp-xtralab-GitPanel-row:hover .jp-xtralab-GitPanel-rowActions,
-.jp-xtralab-GitPanel-rowActions[data-pending='true'] {
-  visibility: visible;
-}
-
-.jp-xtralab-GitPanel-rowBadge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 16px;
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  font-family: var(--jp-code-font-family);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='modified'] {
-  color: var(--jp-warn-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='added'],
-.jp-xtralab-GitPanel-rowBadge[data-status='untracked'] {
-  color: var(--jp-success-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='deleted'] {
-  color: var(--jp-error-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='renamed'] {
-  color: var(--jp-info-color1, var(--jp-brand-color1));
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='unmerged'] {
-  color: var(--jp-error-color1);
-}
-
-.jp-xtralab-GitPanel-iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  color: var(--jp-ui-font-color1);
-  cursor: pointer;
-  border-radius: 2px;
-  font-size: var(--jp-ui-font-size1);
-  line-height: 1;
-}
-
-.jp-xtralab-GitPanel-iconButton:hover {
-  background-color: var(--jp-layout-color3);
-}
-
-.jp-xtralab-GitPanel-iconButton:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
 /*
  * Diff viewer (main area). The `MainAreaWidget` holding the React content
  * gets sized by JupyterLab's box layout; the inner content div fills it
@@ -763,3 +501,157 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+/*
+ * Image diff (raster files). xtralab's replacement for the upstream
+ * jupyterlab-git image diff: a sticky mode selector (reusing the diff
+ * segmented-control styling) over the 2-up / swipe / onion-skin views.
+ *
+ * Every mode is sized to *fit the widget*: the images are contained
+ * within the available area (never upscaled past their natural size, and
+ * scaled down to fit when larger) so nothing overflows. In particular the
+ * swipe/onion slider stays on screen even when the two revisions have very
+ * different dimensions. A neutral checkerboard sits behind each image so
+ * transparency reads clearly in both light and dark themes.
+ */
+.jp-xtralab-ImageDiff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.jp-xtralab-ImageDiff-header {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  background-color: var(--jp-layout-color1);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+/*
+ * The body fills the remaining height and never scrolls — each view is a
+ * flex child that fits inside it (`min-height: 0` lets the flex/grid
+ * children shrink below their intrinsic size so `max-height` on the
+ * images can take effect).
+ */
+.jp-xtralab-ImageDiff-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.jp-xtralab-ImageDiff-twoUp {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  gap: 16px;
+}
+
+.jp-xtralab-ImageDiff-col {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+.jp-xtralab-ImageDiff-frame,
+.jp-xtralab-ImageDiff-stack {
+  /* Checkerboard so transparent regions are obvious; theme-neutral. */
+  background-color: #fff;
+  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%);
+  background-size: 16px 16px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  border: 1px solid var(--jp-border-color2);
+}
+
+.jp-xtralab-ImageDiff-frame {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
+
+.jp-xtralab-ImageDiff-img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.jp-xtralab-ImageDiff-empty {
+  padding: 32px 24px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size1);
+  font-style: italic;
+}
+
+.jp-xtralab-ImageDiff-caption {
+  flex: 0 0 auto;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  font-family: var(--jp-code-font-family);
+  text-align: center;
+  word-break: break-word;
+}
+
+.jp-xtralab-ImageDiff-interactive {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+/*
+ * Both revisions occupy the same grid cell so swipe/onion can overlay
+ * them. `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.
+ */
+.jp-xtralab-ImageDiff-stack {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  display: grid;
+  place-items: center;
+  padding: 4px;
+}
+
+.jp-xtralab-ImageDiff-stackImg {
+  grid-area: 1 / 1;
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.jp-xtralab-ImageDiff-slider {
+  flex: 0 0 auto;
+  width: min(480px, 100%);
+  accent-color: var(--jp-brand-color1);
+  cursor: ew-resize;
+}

package/lib/git/icons.d.ts

@@ -1,14 +0,0 @@
-import { LabIcon } from '@jupyterlab/ui-components';
-/**
- * The branch glyph used as the git panel's sidebar tab icon. Defined as a
- * `LabIcon` (rather than a CSS-only mask) so it picks up JupyterLab's icon
- * recoloring and inverse-color sidebar painting automatically.
- *
- * Source: `git-branch` from SVG Repo (https://www.svgrepo.com/svg/377352/git-branch),
- * part of the same Pixelarticons family as the xtralab file browser's `file-tree`
- * icon, so the two sidebar tab glyphs read as a matched set. The original
- * `fill="#000000"` is replaced with `fill="currentColor"` and the root element
- * is given the `jp-icon3` class so the icon picks up JupyterLab's theme color
- * and the sidebar's inverse-color painting automatically.
- */
-export declare const gitIcon: LabIcon;

package/lib/git/icons.js

@@ -1,19 +0,0 @@
-import { LabIcon } from '@jupyterlab/ui-components';
-/**
- * The branch glyph used as the git panel's sidebar tab icon. Defined as a
- * `LabIcon` (rather than a CSS-only mask) so it picks up JupyterLab's icon
- * recoloring and inverse-color sidebar painting automatically.
- *
- * Source: `git-branch` from SVG Repo (https://www.svgrepo.com/svg/377352/git-branch),
- * part of the same Pixelarticons family as the xtralab file browser's `file-tree`
- * icon, so the two sidebar tab glyphs read as a matched set. The original
- * `fill="#000000"` is replaced with `fill="currentColor"` and the root element
- * is given the `jp-icon3` class so the icon picks up JupyterLab's theme color
- * and the sidebar's inverse-color painting automatically.
- */
-export const gitIcon = new LabIcon({
-    name: 'xtralab:git',
-    svgstr: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="jp-icon3" fill="currentColor">
-  <path d="M5 2h2v12h3v3h7v-7h-3V2h8v8h-3v9h-9v3H2v-8h3V2zm15 6V4h-4v4h4zM8 19v-3H4v4h4v-1z"/>
-</svg>`
-});

package/lib/git/panel.d.ts

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { ReactWidget } from '@jupyterlab/ui-components';
-import { ISignal } from '@lumino/signaling';
-import { IGitPanelHandlers } from './panelComponent';
-/**
- * The id and CSS class used for the git panel widget. The id ends up as the
- * sidebar tab id (so layout restoration can find the widget) and the CSS
- * class lets per-panel styles attach without leaking to other widgets.
- */
-export declare const GIT_PANEL_ID = "xtralab:git-panel";
-export declare const GIT_PANEL_CSS_CLASS = "jp-xtralab-GitPanel";
-/**
- * The lumino host widget for the git changes panel. Owns the `refresh`
- * signal that the React component listens to, and exposes a typed callback
- * surface (`handlers`) the React component uses to react to user actions.
- */
-export declare class GitPanel extends ReactWidget {
-    constructor(handlers: IGitPanelHandlers);
-    /**
-     * Public refresh hook called by the plugin when something happened that
-     * invalidates the current view (the user clicked the toolbar refresh, the
-     * file browser refreshed, a focused notebook saved, …).
-     */
-    refresh(): void;
-    get refreshRequested(): ISignal<this, void>;
-    protected render(): React.ReactElement;
-    private _handlers;
-    private _refreshRequested;
-}

package/lib/git/panel.js

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { ReactWidget } from '@jupyterlab/ui-components';
-import { Signal } from '@lumino/signaling';
-import { gitIcon } from './icons';
-import { GitPanelComponent } from './panelComponent';
-/**
- * The id and CSS class used for the git panel widget. The id ends up as the
- * sidebar tab id (so layout restoration can find the widget) and the CSS
- * class lets per-panel styles attach without leaking to other widgets.
- */
-export const GIT_PANEL_ID = 'xtralab:git-panel';
-export const GIT_PANEL_CSS_CLASS = 'jp-xtralab-GitPanel';
-/**
- * The lumino host widget for the git changes panel. Owns the `refresh`
- * signal that the React component listens to, and exposes a typed callback
- * surface (`handlers`) the React component uses to react to user actions.
- */
-export class GitPanel extends ReactWidget {
-    constructor(handlers) {
-        super();
-        this._refreshRequested = new Signal(this);
-        this.id = GIT_PANEL_ID;
-        this.title.icon = gitIcon;
-        this.title.caption = 'Git Changes';
-        this.addClass(GIT_PANEL_CSS_CLASS);
-        this._handlers = handlers;
-    }
-    /**
-     * Public refresh hook called by the plugin when something happened that
-     * invalidates the current view (the user clicked the toolbar refresh, the
-     * file browser refreshed, a focused notebook saved, …).
-     */
-    refresh() {
-        this._refreshRequested.emit();
-    }
-    get refreshRequested() {
-        return this._refreshRequested;
-    }
-    render() {
-        return (React.createElement(GitPanelComponent, { handlers: this._handlers, refreshSignal: this._refreshRequested }));
-    }
-}

package/lib/git/panelComponent.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { ISignal } from '@lumino/signaling';
-import { IFileChange } from './tokens';
-/**
- * Callbacks the panel needs to delegate to (so the React component stays
- * free of any JupyterLab application coupling). The plugin wires these up
- * with the actual `JupyterFrontEnd` reference.
- */
-export interface IGitPanelHandlers {
-    /** Open a diff viewer for the given file in the main area. */
-    openDiff(change: IFileChange, options?: {
-        pin?: boolean;
-    }): void;
-    /** Show a confirmation dialog. Returns true when the user accepted. */
-    confirm(title: string, body: string, accept: string): Promise<boolean>;
-    /** Show an error dialog. */
-    showError(title: string, error: Error): Promise<void>;
-}
-/**
- * Top-level React component rendered inside the {@link GitPanel} widget.
- * Owns the polling + refresh wiring around the `/git/status` endpoint and
- * the small bit of UI state that controls section collapse and the
- * in-flight per-file action spinners.
- */
-export declare function GitPanelComponent(props: {
-    handlers: IGitPanelHandlers;
-    refreshSignal: ISignal<unknown, void>;
-}): React.ReactElement;