flexdesk 0.17.12 → 0.17.14

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.17.14 (2026-10-26)
+
+A patch release. Everything below is additive except one changed default (see
+"Changed default"). Each entry with a docs section links to it.
+
+### Added and changed
+
+- [Tree items with row actions](docs/components/layout-widgets.md#tree-items-with-row-actions-01714): `createTreeItem` takes `actions` in the shape `createTreeNode` takes them (`{ id: { icon, title, onClick(id, event) } }`). The buttons (`.twm-tree-node__action-btn`) sit in one line in a `.twm-tree-item__actions` slot at the row's end, shown on hover, on focus within and on the selected item; the slot takes no height, so a row is as tall with actions as without; it is hidden by opacity, so Tab still reaches the buttons; a click on an action does not select the item and a double-click does not reach `onItemDoubleClick`. Without `actions` the markup is unchanged. `createTreeNode`'s action buttons, built by the same code, are now `type="button"`, so inside a form they no longer submit it (STORY-0121).
+- [The digit chords follow the key's position](docs/components/keymap.md#the-digit-chords-follow-the-keys-position-not-its-character-01714): Alt+1..9 and Alt+Shift+1..9 match `event.code` (`Digit1`..`Digit9`), so Alt+Shift+N moves the focused tile to desktop N from a real key press on any layout (BUG-0046).
+- [Spinners turn without keyframes of your own](docs/concepts/styling.md#spinners-turn-without-keyframes-of-your-own-01714): flexdesk.css defines the `@keyframes` its tile-loading, data-table, computing-status and run-progress spinners name (BUG-0047).
+- [A saved layout that cannot be read](docs/components/panels-and-desktops.md#a-saved-layout-that-cannot-be-read-01714): a saved `desktops` layout that is JSON but not a layout is ignored with one warning, and the shell opens its default layout instead of throwing (BUG-0048).
+- `flexdesk/css/tokens` resolves to `dist/tokens.css`, the file the docs name, like `flexdesk/css` and `flexdesk/css/reset` (BUG-0030).
+- [The menu-bar row is a band of its own](docs/components/menus.md#the-menu-bar-in-its-own-row-under-the-top-bar-01713): `.twm-global-menu-bar` has background `var(--surface-0)`, darker than the top bar, and a `1px solid var(--border-strong)` border above and below (was `var(--surface-1)` with a `var(--surface-0)` bottom border), so it is set off from the top bar and the tiles. The row is 1px taller (STORY-0122).
+
+### Changed default
+
+- `DEFAULT_STATE_GUARD_CONFIG.allowedDatasetKeys` no longer lists thirteen keys that one embedding application had left in it and no FlexDesk widget writes: `scenario-id`, `run-id`, `run-state`, `mirror-input`, `mirror-input-bound`, `mirror-change-bound`, `override-type`, `info-for`, `dsl-state`, `dsl-section-registered`, `dsl-scrollbars-installed`, `dsl-tabs-bound` and `dsl-controls-bound`. An app that writes one of them under a guard built on the defaults lists it on top of them; a strict guard otherwise throws on the write (BUG-0029).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.13, 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; `createTreeItem` has one new option, `actions`. Not an
+export but worth knowing: flexdesk.css has one new class,
+`.twm-tree-item__actions`, and defines no new custom property.
+
+## 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,28 @@ 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. It reads as a band of its own (STORY-0122, 0.17.14): darker
+ * than the top bar, with a border above and below. Its height is the bar's
+ * plus the padding and the two borders. */
+.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-0);
+    color: var(--text-body);
+    border-top: 1px solid var(--border-strong);
+    border-bottom: 1px solid var(--border-strong);
+    overflow: visible; /* the bar's menus extend below */
+}
 .twm-bar-center {
     white-space: nowrap;
     overflow: hidden;
@@ -2417,6 +2439,28 @@ body.twm-window-maximized .twm-resize-handle {
     color: var(--text-dim);
     margin-left: var(--space-xs);
 }
+/* Row actions (createTreeItem's `actions`, STORY-0121): one line at the row's
+ * end, after label, subtitle and badge, shown on hover, on focus within and on
+ * the selected item. Hidden by opacity, not display, so the buttons stay in
+ * the tab order (Tab reaches them and :focus-within shows them) and the label
+ * keeps its width on hover. The slot is no taller than the label line, so a
+ * row is as high with actions as without. */
+.twm-tree-item__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    flex-shrink: 0;
+    height: 0;
+    overflow: visible;
+    opacity: 0;
+    pointer-events: none;
+}
+.twm-tree-item:hover > .twm-tree-item__actions,
+.twm-tree-item:focus-within > .twm-tree-item__actions,
+.twm-tree-item.selected > .twm-tree-item__actions {
+    opacity: 1;
+    pointer-events: auto;
+}
 /* ═══════════════════════════════════════════════════════════════════════════
    Plot Popout Window
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -2794,6 +2838,18 @@ body.twm-window-maximized .twm-resize-handle {
     border-radius: 50%;
     animation: computing-spin 0.8s linear infinite;
 }
+/* The keyframes the rule above names. A spinner rule shipped with the animation
+   name and without the `@keyframes` block, which CSS does not report: an
+   undefined name is simply no animation, so the ring was drawn and never
+   turned, and nothing threw, logged or failed a build. `@keyframes` names are
+   global, so this one is not scoped (see `spin`): an embedder that defines
+   its own `computing-spin` wins or loses on source order, and either way the
+   ring turns. A full turn at the rule's own duration, linear and infinite, so
+   the loop has no seam: the arc is back where it started. */
+@keyframes computing-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-computing-status__message {
     font-size: var(--font-size-md);
     color: #b0b0b0;
@@ -2839,6 +2895,11 @@ body.twm-window-maximized .twm-resize-handle {
     flex-shrink: 0;
     animation: etl-spin 0.8s linear infinite;
 }
+/* The keyframes the rule above names; see `computing-spin`. */
+@keyframes etl-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-run-progress__message {
     font-size: var(--font-size-md);
     color: var(--text-primary, #ccc);

package/css/flexdesk.css

@@ -1695,6 +1695,28 @@ 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. It reads as a band of its own (STORY-0122, 0.17.14): darker
+ * than the top bar, with a border above and below. Its height is the bar's
+ * plus the padding and the two borders. */
+.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-0);
+    color: var(--text-body);
+    border-top: 1px solid var(--border-strong);
+    border-bottom: 1px solid var(--border-strong);
+    overflow: visible; /* the bar's menus extend below */
+}
 .twm-bar-center {
     white-space: nowrap;
     overflow: hidden;
@@ -2942,6 +2964,28 @@ body.twm-window-maximized .twm-resize-handle {
     color: var(--text-dim);
     margin-left: var(--space-xs);
 }
+/* Row actions (createTreeItem's `actions`, STORY-0121): one line at the row's
+ * end, after label, subtitle and badge, shown on hover, on focus within and on
+ * the selected item. Hidden by opacity, not display, so the buttons stay in
+ * the tab order (Tab reaches them and :focus-within shows them) and the label
+ * keeps its width on hover. The slot is no taller than the label line, so a
+ * row is as high with actions as without. */
+.twm-tree-item__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    flex-shrink: 0;
+    height: 0;
+    overflow: visible;
+    opacity: 0;
+    pointer-events: none;
+}
+.twm-tree-item:hover > .twm-tree-item__actions,
+.twm-tree-item:focus-within > .twm-tree-item__actions,
+.twm-tree-item.selected > .twm-tree-item__actions {
+    opacity: 1;
+    pointer-events: auto;
+}
 /* ═══════════════════════════════════════════════════════════════════════════
    Plot Popout Window
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -3319,6 +3363,18 @@ body.twm-window-maximized .twm-resize-handle {
     border-radius: 50%;
     animation: computing-spin 0.8s linear infinite;
 }
+/* The keyframes the rule above names. A spinner rule shipped with the animation
+   name and without the `@keyframes` block, which CSS does not report: an
+   undefined name is simply no animation, so the ring was drawn and never
+   turned, and nothing threw, logged or failed a build. `@keyframes` names are
+   global, so this one is not scoped (see `spin`): an embedder that defines
+   its own `computing-spin` wins or loses on source order, and either way the
+   ring turns. A full turn at the rule's own duration, linear and infinite, so
+   the loop has no seam: the arc is back where it started. */
+@keyframes computing-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-computing-status__message {
     font-size: var(--font-size-md);
     color: #b0b0b0;
@@ -3364,6 +3420,11 @@ body.twm-window-maximized .twm-resize-handle {
     flex-shrink: 0;
     animation: etl-spin 0.8s linear infinite;
 }
+/* The keyframes the rule above names; see `computing-spin`. */
+@keyframes etl-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-run-progress__message {
     font-size: var(--font-size-md);
     color: var(--text-primary, #ccc);
@@ -8528,8 +8589,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 +8609,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;
@@ -8842,6 +8910,16 @@ tr:hover .twm-row-action { opacity: 1; }
     border-radius: 50%;
     animation: data-table__spin 0.7s linear infinite;
 }
+/* The keyframes the rule above names. Without them the name is no animation
+   (CSS reports nothing for it), so the ring was drawn and stood still. A full
+   turn at the rule's own 0.7s linear infinite. `@keyframes` names are global
+   and cannot be scoped (see `spin`); a definition of the same name in an
+   embedder's sheet wins or loses on source order, and either way the ring
+   turns. */
+@keyframes data-table__spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-data-table-component--compact .twm-pagination-controls > span {
     color: var(--ea-text-dim, #aaa) !important;
     font-size: 9.5px !important;
@@ -9019,6 +9097,11 @@ tr:hover .twm-row-action { opacity: 1; }
     border-radius: 50%;
     animation: twm-tile-loading-spin 0.7s linear infinite;
 }
+/* The keyframes the rule above names; see `data-table__spin`. */
+@keyframes twm-tile-loading-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 /* Merged home page — detail header row, then the project-setup body
  * fills the rest of the tile. */
 .twm-home-page {

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;
@@ -2111,6 +2118,16 @@ tr:hover .twm-row-action { opacity: 1; }
     border-radius: 50%;
     animation: data-table__spin 0.7s linear infinite;
 }
+/* The keyframes the rule above names. Without them the name is no animation
+   (CSS reports nothing for it), so the ring was drawn and stood still. A full
+   turn at the rule's own 0.7s linear infinite. `@keyframes` names are global
+   and cannot be scoped (see `spin`); a definition of the same name in an
+   embedder's sheet wins or loses on source order, and either way the ring
+   turns. */
+@keyframes data-table__spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 .twm-data-table-component--compact .twm-pagination-controls > span {
     color: var(--ea-text-dim, #aaa) !important;
     font-size: 9.5px !important;
@@ -2288,6 +2305,11 @@ tr:hover .twm-row-action { opacity: 1; }
     border-radius: 50%;
     animation: twm-tile-loading-spin 0.7s linear infinite;
 }
+/* The keyframes the rule above names; see `data-table__spin`. */
+@keyframes twm-tile-loading-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
 /* Merged home page — detail header row, then the project-setup body
  * fills the rest of the tile. */
 .twm-home-page {

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