xtralab 0.1.0

package/src/index.ts

@@ -0,0 +1,18 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+
+import fileBrowserPlugin from './fileBrowser';
+import gitPlugin from './git';
+
+/**
+ * Every plugin contributed by `xtralab`. The entry point of the
+ * labextension is an array because the package bundles several independent
+ * enhancements (file browser, git changes panel, …) — JupyterLab activates
+ * each plugin individually and only the ones whose required tokens are
+ * available end up running.
+ */
+const plugins: JupyterFrontEndPlugin<unknown>[] = [
+  fileBrowserPlugin,
+  gitPlugin
+];
+
+export default plugins;

package/style/base.css

@@ -0,0 +1,175 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+.jp-xtralab-FileBrowser {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  overflow: hidden;
+  background-color: var(--jp-layout-color1);
+
+  /*
+   * Map @pierre/trees CSS variables to the active JupyterLab theme. The
+   * `*-override` variants take precedence over the library's defaults, so
+   * these values track the JupyterLab theme automatically — no JS needed
+   * when the theme switches.
+   */
+  --trees-bg-override: var(--jp-layout-color1);
+  --trees-bg-muted-override: var(--jp-layout-color2);
+  --trees-fg-override: var(--jp-ui-font-color1);
+  --trees-fg-muted-override: var(--jp-ui-font-color2);
+  --trees-accent-override: var(--jp-brand-color1);
+  --trees-border-color-override: var(--jp-border-color2);
+  --trees-indent-guide-bg-override: var(--jp-border-color3);
+  --trees-input-bg-override: var(--jp-input-background);
+  --trees-search-bg-override: var(--jp-input-background);
+  --trees-search-fg-override: var(--jp-ui-font-color1);
+  --trees-focus-ring-color-override: var(--jp-brand-color1);
+  --trees-selected-bg-override: var(--jp-brand-color1);
+  --trees-selected-fg-override: var(--jp-ui-inverse-font-color1);
+  --trees-selected-focused-border-color-override: var(--jp-brand-color1);
+  --trees-font-family-override: var(--jp-ui-font-family);
+  --trees-font-size-override: var(--jp-ui-font-size1);
+
+  /*
+   * Push the search box, the scroll wrapper, and every row inside the
+   * tree away from the sidebar edge. `--trees-padding-inline` is the
+   * outer gutter the @pierre/trees host uses for the search box and the
+   * scroll container, and the row strip sits inside that gutter — so
+   * matching the 12px the JupyterLab toolbar uses on its sides keeps
+   * the toolbar buttons, the search bar, and the row hover/selection
+   * highlights vertically aligned. Row content padding stays at the
+   * default 4px so the icon → text rhythm doesn't change.
+   */
+  --trees-padding-inline-override: 12px;
+  --trees-item-padding-x-override: 4px;
+
+  /* Must carry a length unit. The library subtracts this from
+     `--trees-padding-inline` inside a `calc()`; a unitless `0` makes the
+     subtraction type-invalid, the whole padding-inline rule drops out,
+     and the rows snap back to the sidebar edge. */
+  --trees-item-margin-x-override: 0px;
+}
+
+/*
+ * Match the spacing the default file browser uses around its top toolbar
+ * (8px above, 12px on each side, flush with the content below). Without
+ * this, the toolbar inherits jp-Toolbar's default border + padding which
+ * looks heavier than the rest of the JupyterLab sidebar.
+ */
+.jp-xtralab-FileBrowser-toolbar.jp-Toolbar {
+  flex: 0 0 auto;
+  height: auto;
+  margin: 8px 12px 0;
+  padding: 0;
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.jp-xtralab-FileBrowser-toolbar.jp-Toolbar::part(positioning-region) {
+  row-gap: 12px;
+}
+
+.jp-xtralab-FileBrowser-toolbar > .jp-Toolbar-item {
+  flex: 0 0 auto;
+  padding-left: 0;
+  align-items: center;
+  height: unset;
+}
+
+.jp-xtralab-FileBrowser-toolbar
+  > .jp-Toolbar-item
+  .jp-ToolbarButtonComponent {
+  width: 28px;
+}
+
+/*
+ * Promote the "new launcher" button to the same blue, wider call-to-action
+ * the default file browser uses for `launcher:create`. The selectors mirror
+ * the rules in `@jupyterlab/launcher-extension/style/base.css`, but target
+ * our own command id and toolbar wrapper class.
+ */
+.jp-xtralab-FileBrowser-toolbar
+  > .jp-Toolbar-item
+  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher'] {
+  width: 72px;
+  background: var(--jp-accept-color-normal, var(--jp-brand-color1));
+}
+
+.jp-xtralab-FileBrowser-toolbar
+  > .jp-Toolbar-item
+  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']:hover {
+  background-color: var(--jp-accept-color-hover);
+}
+
+.jp-xtralab-FileBrowser-toolbar
+  > .jp-Toolbar-item
+  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']:focus-visible {
+  background-color: var(--jp-accept-color-active, var(--jp-brand-color0));
+}
+
+.jp-xtralab-FileBrowser-toolbar
+  > .jp-Toolbar-item
+  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']
+  .jp-icon3 {
+  fill: var(--jp-layout-color1);
+}
+
+.jp-xtralab-FileBrowser-content {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+}
+
+.jp-xtralab-FileBrowser-content > div {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+}
+
+.jp-xtralab-FileBrowser file-tree-container {
+  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.
+ */
+.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: 2px;
+  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-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;
+}