flexdesk 0.17.8 → 0.17.10

package/dist/tokens.css

@@ -90,6 +90,13 @@
     --accent-hover:     #1177bb;
     --accent-bright:    #007acc;  /* --layout-accent value */
 
+    /* Every other accent colour is DERIVED from the three above, so a
+       consumer that sets them (on :root) rethemes the whole accent (BUG-0044).
+       The light accents mix --accent-bright toward white: a slider thumb, a
+       sortable list's drop line and add button, a focused filter input. */
+    --accent-light:     color-mix(in srgb, var(--accent-bright) 70%, white);  /* ≈ #4da2db, was #569cd6 */
+    --accent-lighter:   color-mix(in srgb, var(--accent-bright) 55%, white);  /* ≈ #73b6e3, was #6eb3e9 */
+
     /* ── Semantic colors ───────────────────────────────────────── */
     --color-success:        #3fb950;
     --color-warning:        #ff9800;
@@ -100,7 +107,9 @@
     /* ── Surface state overlays ────────────────────────────────── */
     --state-hover:    rgba(255, 255, 255, 0.05);
     --state-active:   rgba(255, 255, 255, 0.08);
-    --state-selected: rgba(0, 122, 204, 0.15);
+    --state-selected: color-mix(in srgb, var(--accent-bright) 15%, transparent);  /* rgba(0, 122, 204, 0.15) */
+    /* A DataTable row or cell that has just arrived flashes from this to transparent. */
+    --twm-dt-new-bg:  color-mix(in srgb, var(--accent-bright) 22%, transparent);  /* rgba(0, 122, 204, 0.22) */
 
     /* ── Overlay scrollbars (installOverlayScrollbar) ─────────── */
     --scrollbar-size:         6px;
@@ -114,7 +123,7 @@
     --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
     --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
     --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
-    --shadow-glow: 0 0 2px rgba(0, 122, 204, 0.3);
+    --shadow-glow: 0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent);  /* rgba(0, 122, 204, 0.3) */
 
     /* ── Z-index layers ───────────────────────────────────────── */
     --z-base:     0;

package/dist/widgets.js

@@ -17,16 +17,16 @@ import {
 import {
   TAB_LEVELS,
   createTabs
-} from "./chunk-HYJYYEPK.js";
+} from "./chunk-REJ5HLIM.js";
 import {
   ActionDropdown,
   ComponentBase,
   SlideOutPanel
-} from "./chunk-RKNFBX5K.js";
+} from "./chunk-MIW7D6WC.js";
 import {
   hideContextMenu,
   showContextMenu
-} from "./chunk-UWO43BZU.js";
+} from "./chunk-F35XSQWA.js";
 import {
   ColorListField,
   SortableList,
@@ -35,7 +35,7 @@ import {
   openForm,
   openModal,
   setModalHost
-} from "./chunk-D3COLZZ2.js";
+} from "./chunk-BE2PU3LL.js";
 import {
   ACTIONS,
   AutocompleteField,
@@ -82,7 +82,7 @@ import {
   resolvePaging,
   toTSV,
   tsvCell
-} from "./chunk-LWV23YVE.js";
+} from "./chunk-NIJEJAZ7.js";
 import {
   ColorField,
   DEFAULT_WINDOW_STORAGE_KEY,
@@ -106,7 +106,7 @@ import {
 } from "./chunk-N7HC3ADV.js";
 import {
   DragReorder
-} from "./chunk-WVFGV5FT.js";
+} from "./chunk-WUFLGETN.js";
 import "./chunk-JYWURG5T.js";
 
 // src/ui/base/controller_base.js

package/dist/wm.js

@@ -5,13 +5,13 @@ import {
 import {
   TAB_LEVELS,
   createTabs
-} from "./chunk-HYJYYEPK.js";
+} from "./chunk-REJ5HLIM.js";
 import {
   showContextMenu
-} from "./chunk-UWO43BZU.js";
+} from "./chunk-F35XSQWA.js";
 import {
   openForm
-} from "./chunk-D3COLZZ2.js";
+} from "./chunk-BE2PU3LL.js";
 import {
   ManagedWindow,
   isRowActivation
@@ -19,9 +19,9 @@ import {
 import "./chunk-HNU6MM2B.js";
 import {
   NotebookTabBar
-} from "./chunk-UURZ37SD.js";
+} from "./chunk-7U4IB65H.js";
 import "./chunk-N7HC3ADV.js";
-import "./chunk-WVFGV5FT.js";
+import "./chunk-WUFLGETN.js";
 import "./chunk-JYWURG5T.js";
 
 // src/tiling/bottom_panel_tabs.js

package/docs/components/charts.md

@@ -4,6 +4,35 @@
 
 Plotly-backed charts: the wrapper, the chart types, subplot layouts, downsampling, the plot grid, the plot-config editor and the two plot windows. Plotly itself is not in the bundle; call `setPlotlySource()` with the path to your copy. The plot window's `streamEvents` option is described with the [other application-neutral options](../concepts/domain-neutrality.md#no-application-globals-the-gallery-picker-and-plot-window-events-0170).
 
+## Interpolation `'auto'` is a listed choice (0.17.9)
+
+A subplot's `interpolation` is `'linear'`, `'step'`, `'cubic'` or `'auto'`.
+`'auto'` draws straight segments between the points, exactly as `'linear'`
+does (`buildTrace` gives both the Plotly line shape `linear`, as it always
+has); it is the value embedders such as EcoSim save for their plots.
+[`renderPlotConfigEditor`](#editing-a-plot-config-renderplotconfigeditor-0170)
+offered only Linear, Step and Cubic spline, so a subplot saved with `'auto'`
+opened with `auto (not found)` in **Interpolation**. The select now offers
+**Auto**, **Linear**, **Step** and **Cubic spline**: a subplot saved with
+`'auto'` opens with Auto chosen and keeps `'auto'` until you pick something
+else, and picking Auto writes `'auto'`. A new subplot is still `'linear'`
+(`makeDefaultSubplot`), and every value draws as before.
+
+`tests/plot_config_editor.test.mjs` §11 pins it.
+
+## The plot config editor writes no stray "null" (0.17.9)
+
+[`renderPlotConfigEditor`](#editing-a-plot-config-renderplotconfigeditor-0170)
+drew a subplot's sections into one body and appended the sections a subplot
+does not have as `null`, which `Element.append()` writes as the text `null`.
+So every 2D subplot showed a `null` line between the Y axes and **Reference
+lines** (where a 3D chart's **Z axis** goes), and an editor without
+`seriesTransforms` showed another after **Shaded bands** (where **Derived
+series** goes). The body now holds its sections and nothing else: a section
+the subplot does not have is left out. Nothing else about the editor changed.
+
+`tests/plot_config_editor.test.mjs` §10 pins it.
+
 ## A series transform knows its series, and takes a choice parameter (0.17.8)
 
 Two additions to [`seriesTransforms`](#derived-series-seriestransforms-0170).

package/docs/components/menus.md

@@ -4,6 +4,35 @@
 
 `createMenuBar` draws File / Edit / View menus from one declarative model, with pointer and keyboard behaviour and the WAI-ARIA menubar roles, and plugs into the shell. `ActionDropdown` draws a dropdown of action buttons from a trigger.
 
+## Context menus stay inside the window (0.17.9)
+
+FlexDesk's own context menus: `showContextMenu(x, y, items, onAction)`, the
+DataTable's right-click menu (its copy items and your `contextMenuItems`), and
+`NotebookTabBar`'s tab menu. All three are placed the same way, however many
+items they hold:
+
+- **At most the window's height.** A menu is capped at the window's height
+  less 8px above and below. A longer menu scrolls inside (flexdesk.css gives
+  `.twm-context-menu` and `.nb-context-menu` `overflow-y: auto` and
+  `box-sizing: border-box`). Before, a menu had no cap: the DataTable's
+  opened above the window's top edge (a 101-item menu at y=-2153 in a 761px
+  window), and `showContextMenu`'s ran off the bottom. In both cases the items
+  past the edge could not be reached.
+- **At the pointer, moved only to fit.** A menu opens with its top-left
+  corner at the pointer. When that does not fit, it moves left or up just
+  enough, and never past the window's top or left edge.
+- **Every item can be reached from the keyboard.** The first enabled item has
+  focus when the menu opens. Up/Down (wrapping), Home and End move focus and
+  scroll the focused item into view inside the menu. Enter and Space choose,
+  and Escape closes. When the menu closes, focus goes back to where it was
+  (unless a click elsewhere has already moved it). The DataTable's menu and
+  the tab menu now do this too: before, only `showContextMenu` did.
+- **Scrolling the menu does not close it.** `showContextMenu` still closes
+  when the page scrolls, and the DataTable's menu when anything outside it
+  scrolls.
+
+Nothing changes in how you call them.
+
 ## A menu bar: `createMenuBar` (0.17.0)
 
 File / Edit / View menus from one declarative model, instead of hand-built
@@ -84,3 +113,15 @@ doubled rule. `setOptions` follows the same rules, and an option's
 `data-index` stays its index in `options`.
 
 `tests/action_dropdown_separators.test.mjs` drives it in jsdom.
+
+## Action dropdowns: positioning against the end edge (0.17.9)
+
+`ActionDropdown.position(trigger, menu, { align })` places any menu against
+any trigger: `position: fixed`, under the trigger when it fits there (else above it
+when it fits there, else on the side with more room, scrolling inside), and kept 8px
+inside the window. `align` says which trigger edge the menu lines up with
+first: `'start'` (the default, and what it did before) its left edge, `'end'`
+its right edge. Either flips to the other edge when the menu would leave the
+window. A tile's ⋯ menu uses `'end'`
+([Dashboard tiles](tiles.md#the--menu-is-drawn-over-the-page-0179)).
+

package/docs/components/tiles.md

@@ -13,6 +13,7 @@ Two different things in FlexDesk are called "tiles". `@flexdesk/wm` tiles the *w
 - [Figure tiles: one override, the draw is the base's (0.17.0)](#figure-tiles-one-override-the-draw-is-the-bases-0170)
 - [List and people tiles, and one scope for the board (0.16.1)](#list-and-people-tiles-and-one-scope-for-the-board-0161)
 - [A tile's settings as a form: `mountTileConfigForm` (0.17.0)](#a-tiles-settings-as-a-form-mounttileconfigform-0170)
+- [The ⋯ menu is drawn over the page (0.17.9)](#the--menu-is-drawn-over-the-page-0179)
 
 ## Layouts are keyed by whatever you key them by
 
@@ -208,3 +209,27 @@ modal is open is ignored. It answers a function that unsubscribes and closes the
 slide-out; an open modal is left to the user, keeps its form and still saves on
 Save. A renderer's `commit` on a `readonly` field applies nothing and answers
 `{valid: false, error}`.
+
+## The ⋯ menu is drawn over the page (0.17.9)
+
+A tile's **More actions** menu (`.tile-menu-dropdown`, the entries of
+`menuItems()`) is no longer drawn inside the tile. While it is open it is
+moved to `document.body` (or to the open modal's host, as `showContextMenu`
+does) and placed with `ActionDropdown.position(button, menu, { align: 'end' })`:
+
+- **Nothing clips it.** It is `position: fixed`, on `--z-over-windows`, so it
+  draws over neighbouring tiles, and over the managed window a grid sits in.
+- **It stays in the window.** Its right edge lines up with the ⋯ button's
+  when there is room; otherwise its left edge does, clamped 8px inside the
+  window. It opens under the button when it fits there, else above it when it
+  fits there, else on the side with more room, scrolling inside.
+- **It goes back when it closes.** Choosing an entry, a press outside it, or
+  the ⋯ button again closes it and puts it back in the tile's header, so
+  `tile.element.querySelector('.tile-menu-item')` finds the entries while it
+  is closed. `dispose()` closes an open menu first, so none is left on the
+  page.
+
+Until 0.17.8 the menu was `position: absolute` inside the tile, so in a tile
+narrower than about 220px its left part and its labels were cut off
+(BUG-0043). `tests/tile_menu_unclipped.test.mjs` holds it.
+

package/docs/concepts/styling.md

@@ -45,3 +45,71 @@ its plain elements (headings, code, tables, lists).
 Icons are rendered by applying the `material-symbols-outlined` class. FlexDesk does
 not ship the font — supply it from Google Fonts or self-host. Without it, icons fall
 back to their text names and nothing breaks.
+
+## Retheming the accent (0.17.10)
+
+The accent colours in `flexdesk.css` that were the literal `#007acc`
+(`rgb(0, 122, 204)`), its tints, and the light accent `#569cd6` /
+`#6eb3e9` are now derived from an accent token. Setting the tokens on `:root`
+rethemes all of them:
+
+```css
+:root {
+    --accent:        #8a2be2;
+    --accent-hover:  #9b4dea;
+    --accent-bright: #a64dff;   /* selections, focus rings, tints, primary buttons, the slider thumb */
+}
+```
+
+`--accent` and `--accent-hover` stay literals. `--accent-bright` is the one
+the rest is derived from, in `tokens.css`:
+
+- `--state-selected`: `color-mix(in srgb, var(--accent-bright) 15%, transparent)`.
+  It was `rgba(0, 122, 204, 0.15)`, the same colour.
+- `--shadow-glow`: `0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent)`.
+  It was `0 0 2px rgba(0, 122, 204, 0.3)`, the same colour.
+- `--twm-dt-new-bg` (new): `color-mix(in srgb, var(--accent-bright) 22%, transparent)`,
+  the colour a DataTable row or cell that has just arrived flashes from.
+  The stylesheet read it before, with an `rgba(0, 122, 204, 0.22)`
+  fallback, but nothing defined it.
+- `--accent-light` (new): `color-mix(in srgb, var(--accent-bright) 70%, white)`,
+  about `#4da2db`. It replaces `#569cd6`.
+- `--accent-lighter` (new): `color-mix(in srgb, var(--accent-bright) 55%, white)`,
+  about `#73b6e3`. It replaces `#6eb3e9`.
+
+You can still set `--state-selected`, `--shadow-glow` or `--twm-dt-new-bg`
+yourself. Set the derived tokens on `:root`, as `tokens.css` does: a custom
+property that reads `var(--accent-bright)` is resolved where it is declared,
+so an `--accent-bright` set on a lower element does not reach the tokens
+derived from it on `:root`.
+
+What changed in the stylesheet:
+
+- **Tints.** The `rgba(0, 122, 204, a)` tints are now
+  `color-mix(in srgb, var(--accent-bright) a%, transparent)`, with the same
+  colour by default. They are the DataTable's selected rows and cells, the
+  filter chip when on, the autocomplete's namespace pill and active item,
+  `.add-widget-btn`, `.tile.resizing`, `.tile-ghost`, the focused leaf's inset
+  shadow, the document outline's active link, the canvas marquee and the
+  flow graph's port dots.
+- **The light accent.** The SliderField thumb, the SortableList drop line,
+  add button and input focus, the DataTable filter inputs' focus border and
+  the notebook autocomplete's border read `--accent-light`. The active thumb
+  reads `--accent-lighter`. `#569cd6` cannot be mixed exactly from `#007acc`,
+  so these move to the nearest mix of `--accent-bright` with white: the thumb
+  goes from `#569cd6` to about `#4da2db`, and the active thumb from `#6eb3e9`
+  to about `#73b6e3`, a difference of about 1.5 to 1.7 ΔE (OKLab × 100).
+- **No fallbacks.** `var(--accent-bright, #007acc)`, `var(--state-selected, …)`,
+  `var(--ea-accent, …)` and `var(--accent, …)` no longer carry fallbacks.
+  `tokens.css` defines all of them, so no computed colour changes, but
+  `flexdesk.css` now needs `tokens.css` (or your own definitions of these tokens).
+
+Not part of the accent, and still literals: the autocomplete's type colours
+(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the notification
+border `#4fc1ff`, and links (`#3794ff`).
+
+Some accent blues in other shades are still literals, because no mix of an
+accent token gives their colour exactly. They include the selected tile
+(`#78b9ff`), the primary button's hover (`#1683c4`, `#1486cf`), the row
+cursor and snap preview (`rgba(17, 119, 179, a)`), and some flow-lanes and
+plot-window colours. To retheme them, override their rules.

package/package.json

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

package/src/charts/chart_types.js

@@ -61,7 +61,8 @@ const LINE_DASH_MAP = {
 };
 
 /**
- * Interpolation mapping (Chart.js to Plotly line shape)
+ * Interpolation mapping (Chart.js to Plotly line shape). 'auto' draws straight
+ * segments between the points, as 'linear' does.
  */
 const INTERPOLATION_MAP = {
     linear: 'linear',
@@ -81,7 +82,7 @@ const INTERPOLATION_MAP = {
  * @param {string} [options.color] - Series color (hex)
  * @param {number} [options.lineWidth] - Line width in pixels
  * @param {string} [options.lineStyle] - Line style: solid, dashed, dotted
- * @param {string} [options.interpolation] - Interpolation: linear, step, cubic
+ * @param {string} [options.interpolation] - Interpolation: linear, step, cubic, or auto (drawn as linear)
  * @param {string} [options.yAxisId] - Y-axis identifier (y, y2, y3, etc.)
  * @param {boolean} [options.showMarkers] - Show data point markers
  * @param {number} [options.seriesIndex] - Index for default color selection

package/src/charts/plot_config_editor.js

@@ -63,7 +63,10 @@ const LEGEND_POSITIONS = Object.freeze([
     { value: 'hidden', label: 'Hidden' }, { value: 'top', label: 'Top' }, { value: 'bottom', label: 'Bottom' },
     { value: 'left', label: 'Left' }, { value: 'right', label: 'Right' },
 ]);
+// 'auto' is drawn as 'linear' (buildTrace); it is listed so a config saved with it
+// shows it and keeps it.
 const INTERPOLATIONS = Object.freeze([
+    { value: 'auto', label: 'Auto' },
     { value: 'linear', label: 'Linear' }, { value: 'step', label: 'Step' }, { value: 'cubic', label: 'Cubic spline' },
 ]);
 const NAN_STRATEGIES = Object.freeze([
@@ -364,7 +367,10 @@ function renderPlotConfigEditor(container, config, options = {}) {
         let sources = null;
         const overlaySources = () => (sources ??= Promise.resolve().then(() => opts.overlaySources()));
 
-        body.append(
+        // Element.append() writes a null child as the text "null": a section the
+        // subplot does not have (the z axis of a 2D chart, the transforms when
+        // there are none) is left out, not appended.
+        body.append(...[
             section('Subplot', field('Title', textInput(sp.displayName, (v) => { sp.displayName = v; notify(); },
                                                         { placeholder: 'Untitled' }))),
             section('Display', ...displayFields(sp)),
@@ -374,7 +380,7 @@ function renderPlotConfigEditor(container, config, options = {}) {
             section('Reference lines', referenceLinesEditor(sp)),
             section('Shaded bands', shadedBandsEditor(sp)),
             transformsSection(sp),
-        );
+        ].filter(Boolean));
     }
 
     function displayFields(sp) {

package/src/editor/notebook_tab_bar.js

@@ -24,6 +24,7 @@
 
 import { DragReorder } from '../ui/components/drag_reorder.js';
 import { revealInStrip, wheelStripSideways } from '../ui/utils/strip_scroll.js';
+import { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../ui/utils/menu_viewport.js';
 
 /** The MIME type a dragged editor tab carries when the embedder names none. */
 export const DEFAULT_TAB_DRAG_MIME = 'application/x-flexdesk-tab';
@@ -64,6 +65,8 @@ export class NotebookTabBar {
 
     /** @type {HTMLElement|null} */
     #contextMenuEl = null;
+    /** BUG-0040. What had focus when the menu opened. @type {Element|null} */
+    #contextMenuReturnFocus = null;
 
     /** @type {Function|null} */
     #boundHideContextMenu = null;
@@ -417,6 +420,7 @@ export class NotebookTabBar {
 
         const menu = document.createElement('div');
         menu.className = 'nb-context-menu';
+        menu.setAttribute('role', 'menu');
 
         for (const item of cleaned) {
             if (item.separator) {
@@ -427,6 +431,8 @@ export class NotebookTabBar {
             }
 
             const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.setAttribute('role', 'menuitem');
             btn.className = 'nb-context-menu__item';
             if (item.danger) btn.classList.add('nb-context-menu__item--danger');
             if (item.disabled) btn.classList.add('nb-context-menu__item--disabled');
@@ -445,15 +451,14 @@ export class NotebookTabBar {
             menu.appendChild(btn);
         }
 
+        this.#contextMenuReturnFocus = document.activeElement;
         document.body.appendChild(menu);
         this.#contextMenuEl = menu;
 
-        // Position with viewport clamping
-        const rect = menu.getBoundingClientRect();
-        const left = Math.min(x, window.innerWidth - rect.width - 8);
-        const top = Math.min(y, window.innerHeight - rect.height - 8);
-        menu.style.left = `${Math.max(0, left)}px`;
-        menu.style.top = `${Math.max(0, top)}px`;
+        // BUG-0040. Inside the window, at most its height, scrolling when
+        // longer; the keyboard starts on the first item it can use.
+        placeMenuInViewport(menu, x, y);
+        focusMenuItem(this.#contextMenuItems()[0]);
 
         // Animate in
         requestAnimationFrame(() => menu.classList.add('visible'));
@@ -468,15 +473,29 @@ export class NotebookTabBar {
 
     #hideContextMenu() {
         if (!this.#contextMenuEl) return;
+        const returnTo = this.#contextMenuReturnFocus;
+        const held = this.#contextMenuEl.contains(document.activeElement);
         this.#contextMenuEl.remove();
         this.#contextMenuEl = null;
+        this.#contextMenuReturnFocus = null;
         document.removeEventListener('click', this.#boundHideContextMenu, true);
         document.removeEventListener('contextmenu', this.#boundHideContextMenu, true);
         document.removeEventListener('keydown', this.#onKeyDown);
+        if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
+    }
+
+    /** BUG-0040. The menu's items the keyboard can land on. */
+    #contextMenuItems() {
+        return this.#contextMenuEl
+            ? [...this.#contextMenuEl.querySelectorAll('.nb-context-menu__item:not(.nb-context-menu__item--disabled)')]
+            : [];
     }
 
     #onKeyDown = (e) => {
-        if (e.key === 'Escape') this.#hideContextMenu();
+        if (e.key === 'Escape') { this.#hideContextMenu(); return; }
+        // BUG-0040. Up/Down/Home/End move between the items and scroll the
+        // focused one into view; Enter and Space are the buttons' own.
+        moveMenuFocus(e, this.#contextMenuItems());
     };
 
     #handleContextMenuAction(action, filePath) {