flexdesk 0.17.11 → 0.17.13

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.17.13 (2026-10-26)
+
+A patch release: everything below is additive. Every fix is documented in a
+section of the docs headed "(0.17.13)"; each entry links to it.
+
+### Added and changed
+
+- [The menu bar in its own row under the top bar](docs/components/menus.md#the-menu-bar-in-its-own-row-under-the-top-bar-01713): a shell's menu bar can sit on a second line, as a full-width strip directly under the top bar. Put `chrome.menuBar` in a `.twm-global-menu-bar` that is a child of `body.twm-body`, between `.twm-global-top-bar` and the host. The row is a fixed-size item in the body's flex column (`flex: 0 0 auto`), so the host is shorter by the row's height and nothing is drawn under it. It is styled with FlexDesk tokens (`padding: var(--space-xxs) var(--space-xs)`, background `var(--surface-1)`, text `var(--text-body)`, a bottom border `var(--surface-0)` like the top bar's), and the `.twm-menubar` inside it keeps its own styles. It is a sibling of the top bar, not part of it: a window-drag region bound to the top bar (`WindowChromeController`'s `topBar`) does not include it, so a press on the row never drags the window, and it sets no `z-index`, so the top bar's dropdowns are drawn over it. A `ManagedWindow` on `document.body` (no `container`) is clamped, centred and maximised below the top bar and the row. A modal's backdrop starts below the top bar, so the row, like the top bar, stays usable while a modal is open. A shell without the row looks exactly as before; the row works only inside `body.twm-body` (STORY-0119).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.12, across every entry point (`core`, `widgets`, `wm`,
+`host`, `canvas`, `flow`, `charts`, `tiles`, `editor`) and the package
+`exports` map, no export was added, removed or renamed, and no option was
+removed or renamed. Not an export but worth knowing: flexdesk.css has one new
+class, `.twm-global-menu-bar`, and defines no new custom property.
+
+## 0.17.12 (2026-10-26)
+
+A patch release: everything below is additive. Every fix is documented in a
+section of the docs headed "(0.17.12)"; each entry links to it.
+
+### Added and changed
+
+- [An empty cell can name what is missing: `emptyMessage` as a function](docs/components/charts.md#an-empty-cell-can-name-what-is-missing-emptymessage-as-a-function-01712): `renderPlotGrid`, `PlotPopoutWindow` and `openPlotPopoutWindow` take `emptyMessage` as a string, as before, or as a function `(subplot, results, index) => string`. It is called each time a cell is drawn empty, with that cell's subplot, the grid's results at that moment (as the grid was given them, so null or undefined when there are none) and the cell's index in the layout: on the first draw, on every `update()` (new `results`, a new `plotConfig`, `overlays` or `hiddenSeries`), on a resize that draws a deferred cell, and when a subplot fails to draw, so the message follows results that stream in or change without rebuilding the grid. The plot window hands its `emptyMessage` to its grid, so the function is also called on the window's refresh and stream events and `updateConfig()`; `openPlotPopoutWindow` forwards it. A slot with no subplot still shows `noSubplotMessage`, the Data tab's `tableEmptyMessage` stays a string, and a string `emptyMessage` is shown exactly as before (STORY-0117).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.11, across every entry point (`core`, `widgets`, `wm`,
+`host`, `canvas`, `flow`, `charts`, `tiles`, `editor`) and the package
+`exports` map, no export was added, removed or renamed, and no option was
+removed or renamed: `emptyMessage` accepts a function as well as a string.
+
 ## 0.17.11 (2026-10-25)
 
 A patch release: everything below is additive. Every fix is documented in a

package/css/base.css

@@ -1275,6 +1275,25 @@ body.twm-dt-col-resizing {
 .twm-global-top-bar, .twm-global-top-bar .twm-bar-left, .twm-global-top-bar .twm-bar-center, .twm-global-top-bar .twm-bar-right {
     min-width: 0; /* allow flex children to shrink */
 }
+/* Global menu row (STORY-0119, 0.17.13): a shell's `chrome.menuBar` in a
+ * full-width strip of its own, directly under .twm-global-top-bar in
+ * body.twm-body's column (host.css), so the host below shrinks by its height.
+ * It is a sibling of the top bar, not inside it: a window-drag region bound
+ * to the top bar does not include it. No z-index, so it is no stacking
+ * context: the top bar's dropdowns draw over it, and the .twm-menubar inside
+ * keeps its own styles, its menus (position: fixed, --z-over-windows) drawing
+ * over the page. Its height is the bar's plus the padding. */
+.twm-global-menu-bar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-xxs) var(--space-xs);
+    background-color: var(--surface-1);
+    color: var(--text-body);
+    border-bottom: 1px solid var(--surface-0);
+    overflow: visible; /* the bar's menus extend below */
+}
 .twm-bar-center {
     white-space: nowrap;
     overflow: hidden;

package/css/flexdesk.css

@@ -1695,6 +1695,25 @@ body.twm-dt-col-resizing {
 .twm-global-top-bar, .twm-global-top-bar .twm-bar-left, .twm-global-top-bar .twm-bar-center, .twm-global-top-bar .twm-bar-right {
     min-width: 0; /* allow flex children to shrink */
 }
+/* Global menu row (STORY-0119, 0.17.13): a shell's `chrome.menuBar` in a
+ * full-width strip of its own, directly under .twm-global-top-bar in
+ * body.twm-body's column (host.css), so the host below shrinks by its height.
+ * It is a sibling of the top bar, not inside it: a window-drag region bound
+ * to the top bar does not include it. No z-index, so it is no stacking
+ * context: the top bar's dropdowns draw over it, and the .twm-menubar inside
+ * keeps its own styles, its menus (position: fixed, --z-over-windows) drawing
+ * over the page. Its height is the bar's plus the padding. */
+.twm-global-menu-bar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-xxs) var(--space-xs);
+    background-color: var(--surface-1);
+    color: var(--text-body);
+    border-bottom: 1px solid var(--surface-0);
+    overflow: visible; /* the bar's menus extend below */
+}
 .twm-bar-center {
     white-space: nowrap;
     overflow: hidden;
@@ -8528,8 +8547,9 @@ body.twm-dragging * { user-select: none; }
  * the WM host fills the remaining space.
  */
 
-/* Body is a flex column: top bar, WM host (fill), bottom bar. We
- * override the legacy `position: fixed` on both bars so they become
+/* Body is a flex column: top bar, menu row (when there is one), WM host
+ * (fill), bottom bar. We override the legacy `position: fixed` on both
+ * bars so they become
  * deterministic flex items and the host's height is exactly the
  * leftover space — no math, no overlap, no off-by-N pixels. Their
  * `z-index` stays put for dropdown stacking. */
@@ -8547,6 +8567,12 @@ body.twm-body > .twm-global-bottom-bar {
     inset: auto !important;
     flex: 0 0 auto;
 }
+/* The menu row (STORY-0119) sits between the top bar and the host, in
+ * normal flow: a fixed-size strip, so the host's leftover space is less by
+ * exactly its height. */
+body.twm-body > .twm-global-menu-bar {
+    flex: 0 0 auto;
+}
 body.twm-body > .twm-host {
     flex: 1 1 auto;
     min-height: 0;

package/css/overrides.css

@@ -1797,8 +1797,9 @@ body.twm-dragging * { user-select: none; }
  * the WM host fills the remaining space.
  */
 
-/* Body is a flex column: top bar, WM host (fill), bottom bar. We
- * override the legacy `position: fixed` on both bars so they become
+/* Body is a flex column: top bar, menu row (when there is one), WM host
+ * (fill), bottom bar. We override the legacy `position: fixed` on both
+ * bars so they become
  * deterministic flex items and the host's height is exactly the
  * leftover space — no math, no overlap, no off-by-N pixels. Their
  * `z-index` stays put for dropdown stacking. */
@@ -1816,6 +1817,12 @@ body.twm-body > .twm-global-bottom-bar {
     inset: auto !important;
     flex: 0 0 auto;
 }
+/* The menu row (STORY-0119) sits between the top bar and the host, in
+ * normal flow: a fixed-size strip, so the host's leftover space is less by
+ * exactly its height. */
+body.twm-body > .twm-global-menu-bar {
+    flex: 0 0 auto;
+}
 body.twm-body > .twm-host {
     flex: 1 1 auto;
     min-height: 0;

package/dist/charts.js

@@ -55,17 +55,17 @@ import {
   strideIndices,
   uid,
   updateChart
-} from "./chunk-2YTM3GJE.js";
+} from "./chunk-TLIV6QSU.js";
 import {
   AutocompleteField,
   createRafResizeObserver
-} from "./chunk-NIJEJAZ7.js";
+} from "./chunk-2PM6ZMNS.js";
 import {
   ColorField,
   ManagedWindow,
   ToggleField,
   selectBox
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import "./chunk-HNU6MM2B.js";
 import "./chunk-N7HC3ADV.js";
 import "./chunk-WUFLGETN.js";

package/dist/{chunk-NIJEJAZ7.js → chunk-2PM6ZMNS.js}

@@ -1,7 +1,7 @@
 import {
   isRowActivation,
   isRowControl
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import {
   focusMenuItem,
   moveMenuFocus,
@@ -10745,4 +10745,4 @@ export {
   resolvePaging,
   DataTable
 };
-//# sourceMappingURL=chunk-NIJEJAZ7.js.map
+//# sourceMappingURL=chunk-2PM6ZMNS.js.map

package/dist/{chunk-F35XSQWA.js → chunk-IG74S3ZH.js}

@@ -1,6 +1,6 @@
 import {
   modalHost
-} from "./chunk-BE2PU3LL.js";
+} from "./chunk-ZMH3OC7H.js";
 import {
   focusMenuItem,
   moveMenuFocus,
@@ -104,4 +104,4 @@ export {
   showContextMenu,
   hideContextMenu
 };
-//# sourceMappingURL=chunk-F35XSQWA.js.map
+//# sourceMappingURL=chunk-IG74S3ZH.js.map

package/dist/{chunk-CVMCZZX2.js → chunk-MADMGRX2.js}

@@ -9,6 +9,10 @@ var BASE_Z_INDEX = 6e3;
 var MAX_Z_INDEX = 6999;
 var TOP_BAR_HEIGHT = 35;
 var BOTTOM_BAR_HEIGHT = 22;
+function _topInset() {
+  const row = typeof document !== "undefined" ? document.querySelector("body > .twm-global-menu-bar") : null;
+  return TOP_BAR_HEIGHT + (row ? row.getBoundingClientRect().height : 0);
+}
 var SNAP_EDGE = 12;
 var DEFAULT_ICON = "web_asset";
 var _zIndexCounter = 0;
@@ -631,6 +635,10 @@ var ManagedWindow = class {
    *      width  = window.innerWidth
    *      height = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT
    *
+   *  (STORY-0119: TOP_BAR_HEIGHT here is `_topInset()`, which is
+   *  TOP_BAR_HEIGHT on a page without a menu row and adds the row's height
+   *  on a page with one.)
+   *
    *  so, substituting into the clamps below:
    *
    *      maxWidth  = width                          = window.innerWidth                      ✓
@@ -659,11 +667,12 @@ var ManagedWindow = class {
         height: this.container.clientHeight
       };
     }
+    const top = _topInset();
     return {
       minX: 0,
-      minY: TOP_BAR_HEIGHT,
+      minY: top,
       width: window.innerWidth,
-      height: window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT
+      height: window.innerHeight - top - BOTTOM_BAR_HEIGHT
     };
   }
   _applyPosition() {
@@ -890,7 +899,8 @@ var ManagedWindow = class {
       }
     } else {
       this.x = Math.max(0, (maxWidth - this.width) / 2);
-      this.y = Math.max(TOP_BAR_HEIGHT, TOP_BAR_HEIGHT + (maxHeight - this.height) / 2);
+      const top = _topInset();
+      this.y = Math.max(top, top + (maxHeight - this.height) / 2);
     }
   }
   _saveCurrentState() {
@@ -1139,7 +1149,8 @@ var ManagedWindow = class {
     const dy = e.clientY - state.startY;
     const dir = state.direction;
     const maxWidth = window.innerWidth;
-    const maxHeight = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT;
+    const top = _topInset();
+    const maxHeight = window.innerHeight - top - BOTTOM_BAR_HEIGHT;
     let newX = state.startWinX;
     let newY = state.startWinY;
     let newW = state.startWidth;
@@ -1154,12 +1165,12 @@ var ManagedWindow = class {
       newW = state.startWidth - (newX - state.startWinX);
     }
     if (dir.includes("s")) {
-      newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - TOP_BAR_HEIGHT)));
+      newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - top)));
     }
     if (dir.includes("n")) {
       const maxDy = state.startHeight - this.minHeight;
       const actualDy = Math.min(dy, maxDy);
-      newY = Math.max(TOP_BAR_HEIGHT, state.startWinY + actualDy);
+      newY = Math.max(top, state.startWinY + actualDy);
       newH = state.startHeight - (newY - state.startWinY);
     }
     this.x = newX;
@@ -1899,4 +1910,4 @@ export {
   endsTextSelection,
   isRowActivation
 };
-//# sourceMappingURL=chunk-CVMCZZX2.js.map
+//# sourceMappingURL=chunk-MADMGRX2.js.map