flexdesk 0.4.4 → 0.4.5

package/README.md

@@ -175,6 +175,16 @@ then text shrinks to a floor. The widths are fractional and add up to `avail`
 exactly whenever the floors fit. `DataTable` does not use it yet; an embedder
 that measures its own columns can.
 
+### Scrollbars
+
+`installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's
+scrollbars under `root` with thin overlay bars that show while an element is
+hovered or scrolling and fade out afterwards. Native bars are hidden, so no
+element reserves layout width for one. The overlay bars live in one fixed
+layer, so a container that redraws its contents cannot lose its bar, and
+textareas get one too. Containers that already use `installOverlayScrollbar`
+keep their own.
+
 ## The host port
 
 FlexDesk never touches `pywebview`, `fetch`, `localStorage` or the filesystem. It

package/css/base.css

@@ -4808,3 +4808,48 @@ button.twm-about-dialog__btn--close:focus {
     cursor: pointer;
 }
 .twm-zoom__value:hover { color: var(--text-primary); }
+
+/* ══ AUTO SCROLLBARS ═════════════════════════════════════════════════
+ *
+ * `installAutoScrollbars(root)` (src/ui/utils/auto_scrollbars.js): no native
+ * scrollbar under `root`, so nothing reserves layout width for one, and a thin
+ * overlay bar in one fixed layer over every element that scrolls, shown while
+ * it is hovered or scrolling and faded out after. */
+.twm-autoscroll,
+.twm-autoscroll * {
+    scrollbar-width: none;
+}
+.twm-autoscroll::-webkit-scrollbar,
+.twm-autoscroll *::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+.twm-autoscroll-layer {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2147483000;
+}
+.twm-autoscroll-bar {
+    position: fixed;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.06);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 160ms ease;
+}
+.twm-autoscroll-bar--on {
+    opacity: 1;
+    pointer-events: auto;
+}
+.twm-autoscroll-thumb {
+    position: absolute;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.28);
+    cursor: pointer;
+    transition: background 80ms ease;
+}
+.twm-autoscroll-bar--on:hover .twm-autoscroll-thumb,
+.twm-autoscroll-bar--active .twm-autoscroll-thumb {
+    background: rgba(255, 255, 255, 0.45);
+}

package/css/flexdesk.css

@@ -7156,3 +7156,48 @@ tr:hover .twm-row-action { opacity: 1; }
     cursor: pointer;
 }
 .twm-zoom__value:hover { color: var(--text-primary); }
+
+/* ══ AUTO SCROLLBARS ═════════════════════════════════════════════════
+ *
+ * `installAutoScrollbars(root)` (src/ui/utils/auto_scrollbars.js): no native
+ * scrollbar under `root`, so nothing reserves layout width for one, and a thin
+ * overlay bar in one fixed layer over every element that scrolls, shown while
+ * it is hovered or scrolling and faded out after. */
+.twm-autoscroll,
+.twm-autoscroll * {
+    scrollbar-width: none;
+}
+.twm-autoscroll::-webkit-scrollbar,
+.twm-autoscroll *::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+.twm-autoscroll-layer {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2147483000;
+}
+.twm-autoscroll-bar {
+    position: fixed;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.06);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 160ms ease;
+}
+.twm-autoscroll-bar--on {
+    opacity: 1;
+    pointer-events: auto;
+}
+.twm-autoscroll-thumb {
+    position: absolute;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.28);
+    cursor: pointer;
+    transition: background 80ms ease;
+}
+.twm-autoscroll-bar--on:hover .twm-autoscroll-thumb,
+.twm-autoscroll-bar--active .twm-autoscroll-thumb {
+    background: rgba(255, 255, 255, 0.45);
+}

package/dist/charts.js

@@ -39,10 +39,10 @@ import {
   setPlotlySource,
   uid,
   updateChart
-} from "./chunk-4RGQSRMC.js";
+} from "./chunk-SWB5ARKN.js";
 import {
   createRafResizeObserver
-} from "./chunk-P4AALM3A.js";
+} from "./chunk-BIAOGX6K.js";
 import {
   ManagedWindow
 } from "./chunk-LH5TSOZW.js";

package/dist/{chunk-P4AALM3A.js → chunk-BIAOGX6K.js}

@@ -302,6 +302,8 @@ var DataTable = class {
    */
   render() {
     const activeFilterColIdx = this._getActiveFilterColIdx();
+    const doc = this.container.ownerDocument;
+    const hadTableFocus = !!this._tableEl && doc?.activeElement === this._tableEl;
     this._cleanup();
     this.container.innerHTML = "";
     const { rows, pagination, emptyMessage } = this.config;
@@ -412,6 +414,11 @@ var DataTable = class {
     }
     if (activeFilterColIdx !== null) {
       this._restoreFilterFocus(activeFilterColIdx);
+    } else if (hadTableFocus && this._tableEl) {
+      try {
+        this._tableEl.focus({ preventScroll: true });
+      } catch (_) {
+      }
     }
   }
   /**
@@ -1717,28 +1724,48 @@ var DataTable = class {
       th.appendChild(grip);
     });
   }
+  /**
+   * CSS px per screen px. Content inside a zoomed tile reports rects and
+   * pointer coordinates in screen pixels, while `style.width` is CSS pixels;
+   * mixing them widened every column by the zoom factor on a mere click.
+   */
+  _zoomFactor() {
+    const el = this._tableWrapEl || this._tableEl;
+    const css = el?.offsetWidth || 0;
+    const screen = el?.getBoundingClientRect?.().width || 0;
+    return css > 0 && screen > 0 ? screen / css : 1;
+  }
   _beginColResize(ev, domIdx) {
+    if (ev.button != null && ev.button !== 0) return;
     ev.preventDefault();
     ev.stopPropagation();
     const headerTable = this._headerTableEl;
     const bodyTable = this._tableEl;
     const headRow = headerTable && headerTable.querySelector("thead > tr");
     if (!headRow) return;
-    const startWidths = [...headRow.children].map(
-      (c) => c.getBoundingClientRect().width
-    );
-    headerTable.style.tableLayout = "fixed";
-    if (bodyTable) bodyTable.style.tableLayout = "fixed";
-    startWidths.forEach((w, i) => this._pinColumnWidth(i, w));
-    this._applyTableWidth();
     const startX = ev.clientX;
+    const THRESHOLD = 3;
     const MIN = 40;
-    document.body.classList.add("twm-dt-col-resizing");
+    let startWidths = null;
+    const begin = () => {
+      const z = this._zoomFactor();
+      startWidths = [...headRow.children].map((c) => {
+        const set = parseFloat(c.style.width);
+        return Number.isFinite(set) ? set : c.getBoundingClientRect().width / z;
+      });
+      headerTable.style.tableLayout = "fixed";
+      if (bodyTable) bodyTable.style.tableLayout = "fixed";
+      startWidths.forEach((w, i) => this._pinColumnWidth(i, w));
+      this._applyTableWidth();
+      document.body.classList.add("twm-dt-col-resizing");
+    };
     const onMove = (mv) => {
-      const w = Math.max(
-        MIN,
-        Math.round(startWidths[domIdx] + (mv.clientX - startX))
-      );
+      const dx = mv.clientX - startX;
+      if (!startWidths) {
+        if (Math.abs(dx) < THRESHOLD) return;
+        begin();
+      }
+      const w = Math.max(MIN, Math.round(startWidths[domIdx] + dx / this._zoomFactor()));
       this._pinColumnWidth(domIdx, w);
       this._applyTableWidth(domIdx);
       this._syncHeaderScroll();
@@ -1746,6 +1773,7 @@ var DataTable = class {
     const onUp = () => {
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", onUp);
+      if (!startWidths) return;
       document.body.classList.remove("twm-dt-col-resizing");
       this._updateCellTooltips();
       this._savePersisted();
@@ -2065,4 +2093,4 @@ export {
   createRafResizeObserver,
   DataTable
 };
-//# sourceMappingURL=chunk-P4AALM3A.js.map
+//# sourceMappingURL=chunk-BIAOGX6K.js.map