xtralab 0.4.0 → 0.6.0

package/style/terminals.css

@@ -0,0 +1,235 @@
+/*
+ * Left-sidebar panel listing running terminal sessions. Each row shows
+ * the session's real (program-published) title 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.
+ */
+
+.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 {
+  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);
+}
+
+.jp-xtralab-Terminals-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 2px;
+}
+
+.jp-xtralab-Terminals-action {
+  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;
+}
+
+.jp-xtralab-Terminals-empty {
+  margin: 0;
+  padding: 12px;
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-xtralab-Terminals-list {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 4px 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.jp-xtralab-Terminals-item {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+}
+
+.jp-xtralab-Terminals-item:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+/*
+ * The main click target: terminal icon + label, filling the row so the
+ * whole strip activates the session. The close button sits to its right
+ * and intercepts its own clicks via the React handler.
+ */
+.jp-xtralab-Terminals-item-activate {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 0 4px 0 12px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.jp-xtralab-Terminals-item-activate:focus-visible {
+  outline: var(--jp-border-width) solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.jp-xtralab-Terminals-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Close button. Hidden by default so the row reads as plain text; fades
+ * in when the row is hovered or the button itself takes focus.
+ */
+.jp-xtralab-Terminals-item-close {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  margin-right: 4px;
+  background: transparent;
+  border: none;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 80ms linear;
+}
+
+.jp-xtralab-Terminals-item-close:hover {
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-xtralab-Terminals-item-close:focus-visible {
+  opacity: 1;
+  outline: var(--jp-border-width) solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+/* Higher specificity than the bare-button rules above, so it comes
+ * last to keep stylelint's no-descending-specificity rule happy. */
+.jp-xtralab-Terminals-item:hover .jp-xtralab-Terminals-item-close {
+  opacity: 1;
+}
+
+/* Keep the row/header icons at the standard 16px sidebar size. */
+.jp-xtralab-Terminals-item svg,
+.jp-xtralab-Terminals-action svg {
+  width: 16px;
+  height: 16px;
+}
+
+/*
+ * The terminal that is currently the active widget in the main area — the
+ * running-session counterpart of the file browser highlighting the open
+ * document. It reuses the file listing's brand-color treatment so "this is
+ * the focused terminal" reads at a glance, and the panel highlights nothing
+ * while a notebook (or any non-terminal widget) holds the focus instead.
+ * Driven from `widget.tsx` via the terminal tracker + the shell's current
+ * widget.
+ */
+.jp-xtralab-Terminals-item.jp-mod-current {
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-brand-color1);
+}
+
+/* Hovering the current row keeps the highlight rather than falling back to
+ * the neutral hover background. */
+.jp-xtralab-Terminals-item.jp-mod-current:hover {
+  background-color: var(--jp-brand-color1);
+}
+
+/*
+ * Invert the monochrome terminal glyph against the brand background, exactly
+ * as the file listing does for its selected rows. Colored agent logos carry
+ * no selectable classes, so they keep their own colors.
+ */
+.jp-xtralab-Terminals-item.jp-mod-current .jp-icon-selectable[fill] {
+  fill: #fff;
+}
+
+.jp-xtralab-Terminals-item.jp-mod-current .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/* Keep the inline shutdown button legible on the brand background, including
+ * while it is itself hovered. */
+.jp-xtralab-Terminals-item.jp-mod-current .jp-xtralab-Terminals-item-close,
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-close:hover {
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+/* Focus rings need a color that contrasts with the brand background. */
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-activate:focus-visible,
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-close:focus-visible {
+  outline-color: var(--jp-layout-color1);
+}

package/style/topBar.css

@@ -0,0 +1,38 @@
+/* Sidebar toggle buttons in the top bar (xtralab:top-bar). */
+
+.xtralab-TopBarButton {
+  display: flex;
+  align-items: center;
+}
+
+/*
+ * The right-area button is added to the flex container `#jp-top-panel` after
+ * the main menu (a high rank). `margin-left: auto` consumes the free space to
+ * its left so it floats to the far right, mirroring the left button at the
+ * leading edge.
+ */
+.xtralab-TopBarButton-right {
+  margin-left: auto;
+}
+
+/*
+ * The buttons are FAST `<jp-button appearance="stealth">` elements. The design
+ * system paints state chrome directly on the button host that reads as an
+ * unwanted box/border in the top bar (see
+ * `@jupyter/web-components/.../styles/patterns/button.js`):
+ *   - `:host([aria-pressed='true'])` (the matching sidebar is open) adds an
+ *     inset `box-shadow`;
+ *   - `:host([disabled])` (e.g. the right area is empty) fills the host with
+ *     `neutralFillRest`.
+ * Neutralize both so the control stays a flat icon like the menu.
+ * The hover/active stealth fills are left untouched as a normal affordance.
+ * `!important` is needed to override the (non-important) `:host(...)` rules
+ * defined inside the component's shadow DOM.
+ */
+.xtralab-TopBarButton .jp-ToolbarButtonComponent {
+  box-shadow: none !important;
+}
+
+.xtralab-TopBarButton .jp-ToolbarButtonComponent[disabled] {
+  background: transparent !important;
+}

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;