flexdesk 0.17.5 → 0.17.7

package/dist/tokens.css

@@ -102,6 +102,14 @@
     --state-active:   rgba(255, 255, 255, 0.08);
     --state-selected: rgba(0, 122, 204, 0.15);
 
+    /* ── Overlay scrollbars (installOverlayScrollbar) ─────────── */
+    --scrollbar-size:         6px;
+    --scrollbar-radius:       3px;
+    --scrollbar-track:        rgba(255, 255, 255, 0.08);
+    --scrollbar-thumb:        rgba(255, 255, 255, 0.28);
+    --scrollbar-thumb-hover:  rgba(255, 255, 255, 0.38);
+    --scrollbar-thumb-active: rgba(255, 255, 255, 0.48);
+
     /* ── Shadows / elevation ──────────────────────────────────── */
     --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
     --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
@@ -119,6 +127,9 @@
        stack from 6000 to 6999 (managed_window.js), so a popover at
        --z-popover would open behind the window that opened it. */
     --z-over-windows: 7100;
+    /* An overlay scrollbar inside a scroll container: over the container's
+       content and its dropdowns, under managed windows (6000+). */
+    --z-scrollbar: 500;
 
     /* ── Transitions ──────────────────────────────────────────── */
     --transition-fast:   120ms ease;

package/docs/components/editor.md

@@ -20,3 +20,24 @@ A non-positive or non-number cap throws a `RangeError`. With `noAutoHeight`
 the container's own layout decides the size and `setMaxHeight` has no effect.
 Before 0.17.0 the cap was a fixed 400px, switched on by `data-code-max-height="true"`
 on a `.notebook-editor-container` ancestor; that attribute is no longer read.
+
+## Monaco's `Canceled` rejections are hidden (0.17.6)
+
+When an editor gets focus, Monaco's word highlighter starts a 50 ms timer and
+never catches its promise. Dispose the editor inside those 50 ms (re-render a
+view right after focus moves back to it, as an Edit > Undo from the menu bar
+does) and Monaco rejects that promise with its CancellationError, which nothing
+handles. VS Code hides these with its own handler; standalone Monaco has none.
+
+The first `initMonaco()` that starts a load now installs one window
+`unhandledrejection` listener. It calls `preventDefault()` only when the
+rejection's reason has `name === 'Canceled'` and `message === 'Canceled'`, which
+is Monaco's CancellationError. Every other rejection still reaches the page and
+its console. The listener is installed once per page, however often
+`initMonaco()` is called or retried, and stays for the life of the page, as
+Monaco does.
+
+Until 0.17.6 the browser logged an uncaught `Canceled: Canceled` from
+`Delayer.cancel`. The editor handle's `dispose()` caught only a `Canceled` that
+Monaco's `dispose()` throws at once, not this later one.
+`tests/monaco_cancellation_guard.test.mjs` holds it.

package/docs/components/layout-widgets.md

@@ -36,6 +36,44 @@ at the right edge of a window that was not maximized, so those panes had no
 scrollbar at all (BUG-0036). `tests/autoscroll_resize_handle_not_cover.test.mjs`
 holds it.
 
+## `installOverlayScrollbar` is styled by flexdesk.css (0.17.7)
+
+`installOverlayScrollbar(container, { orientation })` (from
+`@flexdesk/widgets`) gives one container its own bar: a
+`.overlay-scrollbar-v` or `.overlay-scrollbar-h` element, holding a `.track`
+and a `.thumb`, appended to the container (or to its parent with
+`externalBar: true`, as `installTabsScrollbars` does). flexdesk.css styles
+it, so it works with only FlexDesk's stylesheets loaded:
+
+- **It takes no layout space.** The bar is `position: absolute` at the
+  container's right edge (vertical) or bottom edge (horizontal),
+  `--scrollbar-size` thick, on `--z-scrollbar` (over the container's content,
+  under managed windows). The script keeps it pinned to the visible edge as
+  the container scrolls.
+- **It shows on hover while the container overflows.** The script sets
+  `data-scrollable="1"` or `"0"` on the container, and shows the bar on
+  `mouseenter` and `focusin` when it is `"1"`. It hides the bar on leave,
+  unless the thumb is being dragged. The bar starts at `opacity: 0`.
+- **The thumb drags; the rest lets clicks through.** The bar takes no
+  pointer events, so content under it stays clickable. The thumb takes them
+  back (`pointer-events: auto`) and is at least 30px long.
+- **Colours are tokens** in tokens.css: `--scrollbar-track`,
+  `--scrollbar-thumb`, `--scrollbar-thumb-hover`, `--scrollbar-thumb-active`,
+  and `--scrollbar-radius` for the rounding. Override them to restyle every
+  overlay bar.
+
+The rules key on the orientation classes, so a bar created with another
+`className` (`installWorkspaceScrollbars` uses `panel-scrollbar` and
+`tabs-scrollbar`) is styled the same way. `installCollapsibleScrollbars`,
+`installTabsScrollbars` and `installWorkspaceScrollbars` all build on
+`installOverlayScrollbar`, so none of them needs embedder CSS either.
+
+Until 0.17.7 no FlexDesk stylesheet had a rule for these classes. The bar
+was `position: static`: it sat in the scroll container's flow, its height fed
+the container's content height, and the container grew without limit unless
+the embedder brought its own CSS (BUG-0039).
+`tests/overlay_scrollbar_styles.test.mjs` holds it.
+
 ## A stack of collapsible sections: `createSectionStack` (0.17.0)
 
 Inspector-style panel content: titled sections in a column, each opened and

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.5",
+    "version": "0.17.7",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/editor/monaco_editor_factory.js

@@ -22,7 +22,13 @@ export function setDefaultLanguage(id) {
     if (typeof id === 'string' && id) _defaultLanguage = id;
 }
 
-/** Dispose a Monaco editor, swallowing the benign "Canceled" error from pending async ops. */
+/**
+ * Dispose a Monaco editor, swallowing a "Canceled" error that `dispose()` throws
+ * synchronously. It cannot catch the asynchronous kind — a pending Delayer's
+ * promise rejected by the dispose, which surfaces later as an unhandled
+ * rejection; the loader's window listener hides those (see
+ * `installCancellationGuard` in monaco_loader.js, BUG-0038).
+ */
 function safeDispose(editor) {
     try { editor.dispose(); } catch (e) { if (e?.message !== 'Canceled') throw e; }
 }

package/src/editor/monaco_loader.js

@@ -38,6 +38,38 @@ let _attempt = null;
  */
 export const monacoReady = new Promise(resolve => { _resolveMonaco = resolve; });
 
+/**
+ * Monaco's asynchronous CancellationError is benign; keep it off the page.
+ *
+ * Monaco starts timers it never awaits: its WordHighlighter calls
+ * `runDelayer.trigger()` (a 50 ms Delayer) when an editor gets focus and
+ * drops the promise. Dispose the editor inside those 50 ms and
+ * `Delayer.dispose() -> cancel()` rejects that promise with a CancellationError
+ * (name and message both 'Canceled') that nothing handles, so the browser
+ * reports an uncaught 'Canceled' (BUG-0038). VS Code hides these with its own
+ * unhandledrejection handler; standalone Monaco has none, so FlexDesk installs
+ * one here: it calls preventDefault() for exactly that error and leaves every
+ * other rejection to surface as before.
+ *
+ * Installed once per page, by the first initMonaco() that starts a load, and
+ * kept for the life of the page — like Monaco itself, which cannot be unloaded.
+ */
+let _cancellationGuardInstalled = false;
+
+function isMonacoCancellation(reason) {
+    return reason?.name === 'Canceled' && reason?.message === 'Canceled';
+}
+
+function installCancellationGuard() {
+    if (_cancellationGuardInstalled) return;
+    _cancellationGuardInstalled = true;
+    // `?.`: the loader suites' stand-in pages (tests/monaco_env.mjs and the
+    // suites that set `window = globalThis` under Node) have no event target.
+    window.addEventListener?.('unhandledrejection', (event) => {
+        if (isMonacoCancellation(event.reason)) event.preventDefault();
+    });
+}
+
 function injectLoaderScript(src) {
     return new Promise((resolve, reject) => {
         const s = document.createElement('script');
@@ -124,6 +156,10 @@ async function loadMonaco(basePath) {
  * given). An AMD-level failure is final for the page: every later call gets
  * the same rejection, and only a reload recovers (see `_attempt`).
  *
+ * The first call that starts a load also installs one window
+ * 'unhandledrejection' listener that hides Monaco's benign asynchronous
+ * CancellationError, and nothing else (see `installCancellationGuard`).
+ *
  * @param {string} [basePath] Path prefix for the vs/ directory. REQUIRED
  *     unless an attempt is already in flight or has succeeded.
  * @returns {Promise<typeof monaco>}
@@ -136,6 +172,7 @@ export function initMonaco(basePath) {
             + "initMonaco('vendor/monaco'). Monaco is a peer dependency; the library "
             + 'does not guess where you put it.'));
     }
+    installCancellationGuard();
     const attempt = loadMonaco(basePath).then(
         (m) => { _resolveMonaco(m); return m; },
         (err) => {