flexdesk 0.17.13 → 0.17.15

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 0.17.15 (2026-10-26)
+
+A patch release with no API change. Its entries change what embedders see: a top-level tile loses its one-segment breadcrumb strip, every `openForm` row lays its inputs out anew, and a slide-out panel no longer crosses what lies right of its host. Each entry links to its section of the docs.
+
+### Added and changed
+
+- [A tile breadcrumb of one segment is not drawn](docs/components/shell.md#a-tile-breadcrumb-of-one-segment-is-not-drawn-01715): while `mountTileBreadcrumb`'s path is a single segment or none (a top-nav page with no root crumb, trail or entity; an `appGlobal` kind), the strip is `hidden` and the page shell's `.twm-page-shell__breadcrumb` slot takes no room, so a top-level page no longer shows its name twice. `refresh()` shows it again at two segments; longer paths and `renderBreadcrumb` are unchanged (STORY-0124).
+- [The inputs of a row are equally wide](docs/components/forms-and-dialogs.md#the-inputs-of-a-row-are-equally-wide-01715): in an `openForm` `{ row }` each field's basis is its label (the first one's, the 130px label column) and the free space is shared equally, so every input of a row has the same width (up to each control's own padding); until 0.17.14 the first input was squeezed by the label column. A form whose widest row has three or more fields opens at `170 + 230 × fields` px: at least 640px, otherwise at most 90% of the window (BUG-0050).
+- [A slide-out panel is never drawn outside its box](docs/components/slide-out-panel.md#never-drawn-outside-its-box-01715): `SlideOutPanel` no longer slides by a transform; a `clip-path` alone (200ms ease-out) reveals it from its right edge, so opening or closing it no longer crosses the dock panel right of its host (BUG-0051).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.14, across every entry point and the package
+`exports` map, no export or option was added, removed or renamed. flexdesk.css
+has no new class and defines no new custom property.
+
+## 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

package/css/base.css

@@ -1282,16 +1282,19 @@ body.twm-dt-col-resizing {
  * 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. */
+ * 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-1);
+    background-color: var(--surface-0);
     color: var(--text-body);
-    border-bottom: 1px solid var(--surface-0);
+    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 {
@@ -2436,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
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -2813,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;
@@ -2858,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);
@@ -4782,14 +4824,23 @@ button.twm-about-dialog__btn--close:focus {
     min-width: min(400px, var(--twm-slide-out-host-w, 400px));
     max-width: var(--twm-slide-out-host-w, none);
 
-    transform: translateX(100%);
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    /* Never drawn outside its final box (BUG-0051). While open the panel
+     * is `position: fixed` at its host's right edge, where the host's
+     * `overflow: hidden` no longer clips it, and its slide from
+     * translateX(100%) was drawn across whatever lies right of the host (a
+     * dock panel). It does not move any more: a clip alone carries the
+     * motion, revealing it from its right edge leftwards, so no frame can
+     * paint outside its box (a transform and a clip animated together can
+     * drift apart, the transform often running on the compositor). The left
+     * inset of -16px keeps the box shadow. */
+    clip-path: inset(0 0 0 100%);
+    transition: clip-path 200ms ease-out, visibility 0s linear 200ms;
     visibility: hidden;
 }
 .twm-slide-out-panel--open {
-    transform: translateX(0);
+    clip-path: inset(0 0 0 -16px);
     visibility: visible;
-    transition: transform 200ms ease-out, visibility 0s linear 0s;
+    transition: clip-path 200ms ease-out, visibility 0s linear 0s;
 }
 /* Header bar */
 .twm-slide-out-panel__header {

package/css/flexdesk.css

@@ -1702,16 +1702,19 @@ body.twm-dt-col-resizing {
  * 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. */
+ * 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-1);
+    background-color: var(--surface-0);
     color: var(--text-body);
-    border-bottom: 1px solid var(--surface-0);
+    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 {
@@ -2961,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
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -3338,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;
@@ -3383,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);
@@ -5706,14 +5748,23 @@ button.twm-about-dialog__btn--close:focus {
     min-width: min(400px, var(--twm-slide-out-host-w, 400px));
     max-width: var(--twm-slide-out-host-w, none);
 
-    transform: translateX(100%);
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    /* Never drawn outside its final box (BUG-0051). While open the panel
+     * is `position: fixed` at its host's right edge, where the host's
+     * `overflow: hidden` no longer clips it, and its slide from
+     * translateX(100%) was drawn across whatever lies right of the host (a
+     * dock panel). It does not move any more: a clip alone carries the
+     * motion, revealing it from its right edge leftwards, so no frame can
+     * paint outside its box (a transform and a clip animated together can
+     * drift apart, the transform often running on the compositor). The left
+     * inset of -16px keeps the box shadow. */
+    clip-path: inset(0 0 0 100%);
+    transition: clip-path 200ms ease-out, visibility 0s linear 200ms;
     visibility: hidden;
 }
 .twm-slide-out-panel--open {
-    transform: translateX(0);
+    clip-path: inset(0 0 0 -16px);
     visibility: visible;
-    transition: transform 200ms ease-out, visibility 0s linear 0s;
+    transition: clip-path 200ms ease-out, visibility 0s linear 0s;
 }
 /* Header bar */
 .twm-slide-out-panel__header {
@@ -6396,8 +6447,18 @@ button.twm-about-dialog__btn--close:focus {
     align-items: flex-start;
     column-gap: 10px;
 }
+/* Each field's basis is its label alone (the first field's: the form's 130px
+ * label column): the controls lend the row no intrinsic width
+ * (`contain: inline-size`), so the free space is shared equally and every
+ * input of a row is equally wide (BUG-0050). Until 0.17.14 each field was an
+ * equal share of the row (`flex: 1 1 0`), so the first input, whose share
+ * also held the 130px column, was the narrowest by far. */
 .twm-modal__field-group > .twm-modal__row {
-    flex: 1 1 0;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-modal__field-group > .twm-modal__row > :not(:first-child) {
+    contain: inline-size;
     min-width: 0;
 }
 .twm-managed-window--modal .twm-modal__fields > .twm-modal__field-group {
@@ -8868,6 +8929,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;
@@ -9002,6 +9073,12 @@ tr:hover .twm-row-action { opacity: 1; }
     padding: 2px 8px;
     line-height: 22px;
 }
+/* A path of one segment is not drawn (STORY-0124): the tile's title already
+ * names it, so the strip and its slot take no room until a second level. */
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb[hidden],
+.twm-page-shell__breadcrumb:has(> .twm-tile-breadcrumb[hidden]) {
+    display: none;
+}
 .twm-page-shell__content {
     flex: 1 1 auto;
     min-height: 0;
@@ -9045,6 +9122,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

@@ -2118,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;
@@ -2252,6 +2262,12 @@ tr:hover .twm-row-action { opacity: 1; }
     padding: 2px 8px;
     line-height: 22px;
 }
+/* A path of one segment is not drawn (STORY-0124): the tile's title already
+ * names it, so the strip and its slot take no room until a second level. */
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb[hidden],
+.twm-page-shell__breadcrumb:has(> .twm-tile-breadcrumb[hidden]) {
+    display: none;
+}
 .twm-page-shell__content {
     flex: 1 1 auto;
     min-height: 0;
@@ -2295,6 +2311,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/{chunk-IG74S3ZH.js → chunk-AD7FIA3Z.js}

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

package/dist/{chunk-ZMH3OC7H.js → chunk-OEG6NPAN.js}

@@ -1001,6 +1001,8 @@ function _estimateHeight(fields) {
   return Math.max(200, Math.min(base, max));
 }
 function _estimateWidth(fields) {
+  const widest = Math.max(0, ...fields.filter((f) => Array.isArray(f?.row)).map((f) => _formFields(f.row).length));
+  if (widest >= 3) return Math.max(640, Math.min(170 + widest * 230, Math.floor(window.innerWidth * 0.9)));
   const wide = fields.some((f) => f && (f.type === "textarea" || f.type === "colorList" || f.section || Array.isArray(f.row)));
   return wide ? 640 : 480;
 }
@@ -1308,4 +1310,4 @@ export {
   openConfirm,
   openModal
 };
-//# sourceMappingURL=chunk-ZMH3OC7H.js.map
+//# sourceMappingURL=chunk-OEG6NPAN.js.map