flexdesk 0.17.12 → 0.17.13

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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

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-75FLVAUT.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