flexdesk 0.11.1 → 0.12.1

package/README.md

@@ -130,6 +130,28 @@ await createShell({
 });
 ```
 
+### A pane that names what it shows: `ctx.setTitle` (0.12.1)
+
+A content factory receives `(hostEl, props, ctx)`, and `ctx` carries, per pane,
+`setTitle(text)`. It renames the pane's chrome title, at mount or any time
+after, and the title survives repaints — including a panel's, whose tree title
+the shell resets to Navigator / Inspector / Console on every layout pass:
+
+```js
+content: {
+    'panel:bottom': (hostEl, props, ctx) => {
+        // …a panel with tabs of its own…
+        const show = (tab) => { /* swap the body */ ctx.setTitle(tab.label); };
+        show(tabs[0]);
+        return { destroy() {} };
+    },
+},
+```
+
+`setTitle(null)` or `''` gives the title back to the tree. It changes what the
+chrome shows only — the tree, the tab labels and the saved layout are left
+alone — and a call from content whose pane has since been rebuilt does nothing.
+
 ### Your desktops beside the app's (0.10.0)
 
 Pass `chrome.desktops` and the shell paints a desktop bar: a chip per desktop
@@ -885,6 +907,39 @@ list.setColumnVisible(3, true);
 A column sorted on and then hidden keeps the order; its arrow comes back with
 the column.
 
+### DataTable: a select mode (0.12.0)
+
+A list whose click opens a row can still let people pick many rows: a toggle
+in the table's own header turns on a select mode, with a checkbox per row and
+a click that ticks instead of opening. A table that sets none of these options
+draws and behaves as in 0.11.
+
+```js
+const list = DataTable.mount(host, {
+    headers, rows,
+    getRowKey: (row) => row[0],            // keeps the ticks across new rows
+    onRowActivate: (i, row) => open(row),  // not called while selecting
+    selectToggle: true,
+    onSelectModeChange: (on) => bar.hidden = !on,
+    onSelectionChange: (ticked) => bar.count = ticked.length,
+});
+list.setSelectMode(true);
+```
+
+| Option | What it does |
+|---|---|
+| `selectToggle: true` | Draws a narrow leading column whose header holds a toggle button. While the mode is on, every row shows a checkbox and the header a select-all box. Needs a multi-row `selectable` (on `false` or `'single'` it is ignored, with a console warning). |
+| `selectMode: true` | Starts in the mode. Draws the column even without `selectToggle`; the consumer then leaves the mode with `setSelectMode(false)`. |
+| `setSelectMode(on)` / `isSelectMode()` | Turns the mode on or off from code (returns whether it changed), and says whether it is on. The selection is kept either way. |
+| `onSelectModeChange(on)` | Called after every change of the mode: the toggle, Escape, `setSelectMode`. |
+| In the mode | A plain click or Space ticks or unticks one row; Shift-click adds the range from the last row ticked. The arrows move a cursor without changing the ticks (Shift ticks the rows passed). A right-click keeps the ticks. Escape clears them, and a second Escape leaves the mode. Nothing opens a row: `onRowActivate` is not called (`onRowClick` still is, so a consumer that opens rows from it checks `isSelectMode()`). New rows (`setData`) keep the ticks by `getRowKey`. |
+| Select-all | Ticks every row the filters let through, on every page; when all are ticked it clears them. It shows checked, mixed or clear. |
+
+The select column is not a data column: it is not in a copy, a CSV,
+`ctx.colIdx` or `hiddenColumns`, and it cannot be resized. It is drawn for the
+table's whole life, so remembered widths stay on their columns when the mode
+flips, and widths saved by a table without it land on the same columns.
+
 ### Scrollbars
 
 `installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's

package/css/flexdesk.css

@@ -706,6 +706,82 @@ body.twm-dt-col-resizing {
 .twm-preview-table tbody tr.twm-dt-row--active > td:first-child {
     box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc);
 }
+/* STORY-0016 `selectToggle` / `selectMode` — the select column. Narrow, never
+ * the time column (it is the first child, so the time rules reach it: (0,3,2)
+ * here beats them), and the time styling moves to the first column after it,
+ * so a table looks as it did before the column was added. Its boxes show only
+ * in select mode; the header's toggle always. */
+.twm-preview-table.twm-dt--select tr > .twm-dt-select-cell {
+    width: 32px;
+    min-width: 0;
+    max-width: none;
+    padding-left: 6px;
+    padding-right: 2px;
+    text-align: left;
+    color: inherit;
+    font-weight: inherit;
+    white-space: nowrap;
+}
+.twm-preview-table.twm-dt--select:not(.twm-dt--first-plain) tr > .twm-dt-select-cell + th,
+.twm-preview-table.twm-dt--select:not(.twm-dt--first-plain) tr > .twm-dt-select-cell + td {
+    width: 120px;
+    min-width: 100px;
+    font-weight: 500;
+    color: #bbb;
+}
+.twm-preview-table.twm-dt--select:not(.twm-dt--first-plain) tr > th.twm-dt-select-cell + th {
+    font-weight: 600;
+    color: #aaa;
+}
+.twm-preview-table.twm-dt--select td.twm-dt-select-cell .twm-dt-select-box {
+    display: none;
+    margin: 0;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--selecting td.twm-dt-select-cell .twm-dt-select-box {
+    display: inline-block;
+}
+.twm-preview-table.twm-dt--select th.twm-dt-select-cell .twm-dt-select-all {
+    margin: 0 4px 0 0;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--select th.twm-dt-select-cell .twm-dt-select-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin: -3px 0;
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: middle;
+    cursor: pointer;
+    opacity: 0.7;
+}
+.twm-preview-table.twm-dt--select th.twm-dt-select-cell .twm-dt-select-toggle:hover,
+.twm-preview-table.twm-dt--select th.twm-dt-select-cell .twm-dt-select-toggle[aria-pressed="true"] {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.08);
+}
+.twm-preview-table.twm-dt--select th.twm-dt-select-cell .twm-dt-select-toggle:focus-visible {
+    opacity: 1;
+    outline: 1px solid var(--accent-bright, #007acc);
+}
+/* In the mode a click ticks: a pointer on every row, and the keyboard's row
+ * (the arrows move it, Space ticks it) drawn as an outline. */
+.twm-preview-table.twm-dt--selecting tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row) {
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--selecting tbody tr.twm-dt-row--cursor > td {
+    box-shadow: inset 0 1px 0 0 var(--accent-bright, #007acc), inset 0 -1px 0 0 var(--accent-bright, #007acc);
+}
 /* `rowIcon` — drawn from `data-twm-icon` so the icon's NAME is not cell
  * text (not in a copy, not in the clipped-cell tooltip). The span carries the
  * icon font's class; the pseudo-element inherits its font and ligatures. Top
@@ -4889,36 +4965,54 @@ button.twm-about-dialog__btn--close:focus {
     color: #fff;
 }
 /* Content area — drop the host padding so the body host controls its
- * own zones (form rows + flush-bottom action strip). */
+ * own zones (form rows + flush-bottom action strip). The content never
+ * scrolls itself: the zone above the strip does, so the strip stays whole
+ * and in view when the fields outgrow the window. */
 .twm-managed-window--modal .twm-managed-window__content {
     background: var(--ea-bg-content);
     padding: 0;
-    overflow: auto;
+    overflow: hidden;
 }
 .twm-managed-window--modal .twm-modal__body-host {
     display: flex;
     flex-direction: column;
-    min-height: 100%;
+    height: 100%;
 }
-/* Form sits inside the body host as a flex column so the actions row
- * gets pushed to the bottom via margin-top:auto. */
+/* Form sits inside the body host as a flex column: the fields take the
+ * room left over and scroll, the error banner and the actions row keep
+ * their height below them. */
 .twm-managed-window--modal .twm-modal__form {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
+    min-height: 0;
     padding: 0;
+    overflow: hidden;
+}
+.twm-managed-window--modal .twm-modal__fields {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding-bottom: 14px;
+}
+.twm-managed-window--modal .twm-modal__form > .twm-modal__error,
+.twm-managed-window--modal .twm-modal__form > .twm-modal__actions {
+    flex: 0 0 auto;
+}
+.twm-managed-window--modal .twm-modal__form > .twm-modal__error {
+    margin-bottom: 8px;
 }
 /* Field rows get inset margins so the action strip can run edge-to-edge
  * as a true bottom band. */
-.twm-managed-window--modal .twm-modal__form > .twm-modal__row,
-.twm-managed-window--modal .twm-modal__form > .twm-modal__section,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__row,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__section,
 .twm-managed-window--modal .twm-modal__form > .twm-modal__error,
 .twm-managed-window--modal .twm-modal__body {
     margin-left: 14px;
     margin-right: 14px;
 }
-.twm-managed-window--modal .twm-modal__form > .twm-modal__row:first-of-type,
-.twm-managed-window--modal .twm-modal__form > .twm-modal__section:first-child,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__row:first-of-type,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__section:first-child,
 .twm-managed-window--modal .twm-modal__body:first-child {
     margin-top: 14px;
 }
@@ -5159,6 +5253,8 @@ button.twm-about-dialog__btn--close:focus {
     line-height: 1.5;
     color: var(--ea-text);
     flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
 }
 /* Form-level error banner — left accent stripe, dim red panel. */
 .twm-managed-window--modal .twm-modal__error {

package/css/overrides.css

@@ -241,36 +241,54 @@
     color: #fff;
 }
 /* Content area — drop the host padding so the body host controls its
- * own zones (form rows + flush-bottom action strip). */
+ * own zones (form rows + flush-bottom action strip). The content never
+ * scrolls itself: the zone above the strip does, so the strip stays whole
+ * and in view when the fields outgrow the window. */
 .twm-managed-window--modal .twm-managed-window__content {
     background: var(--ea-bg-content);
     padding: 0;
-    overflow: auto;
+    overflow: hidden;
 }
 .twm-managed-window--modal .twm-modal__body-host {
     display: flex;
     flex-direction: column;
-    min-height: 100%;
+    height: 100%;
 }
-/* Form sits inside the body host as a flex column so the actions row
- * gets pushed to the bottom via margin-top:auto. */
+/* Form sits inside the body host as a flex column: the fields take the
+ * room left over and scroll, the error banner and the actions row keep
+ * their height below them. */
 .twm-managed-window--modal .twm-modal__form {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
+    min-height: 0;
     padding: 0;
+    overflow: hidden;
+}
+.twm-managed-window--modal .twm-modal__fields {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding-bottom: 14px;
+}
+.twm-managed-window--modal .twm-modal__form > .twm-modal__error,
+.twm-managed-window--modal .twm-modal__form > .twm-modal__actions {
+    flex: 0 0 auto;
+}
+.twm-managed-window--modal .twm-modal__form > .twm-modal__error {
+    margin-bottom: 8px;
 }
 /* Field rows get inset margins so the action strip can run edge-to-edge
  * as a true bottom band. */
-.twm-managed-window--modal .twm-modal__form > .twm-modal__row,
-.twm-managed-window--modal .twm-modal__form > .twm-modal__section,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__row,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__section,
 .twm-managed-window--modal .twm-modal__form > .twm-modal__error,
 .twm-managed-window--modal .twm-modal__body {
     margin-left: 14px;
     margin-right: 14px;
 }
-.twm-managed-window--modal .twm-modal__form > .twm-modal__row:first-of-type,
-.twm-managed-window--modal .twm-modal__form > .twm-modal__section:first-child,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__row:first-of-type,
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__section:first-child,
 .twm-managed-window--modal .twm-modal__body:first-child {
     margin-top: 14px;
 }
@@ -481,6 +499,8 @@
     line-height: 1.5;
     color: var(--ea-text);
     flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
 }
 /* Form-level error banner — left accent stripe, dim red panel. */
 .twm-managed-window--modal .twm-modal__error {

package/dist/charts.js

@@ -39,10 +39,10 @@ import {
   setPlotlySource,
   uid,
   updateChart
-} from "./chunk-EHHTKD7B.js";
+} from "./chunk-2LEJQD4H.js";
 import {
   createRafResizeObserver
-} from "./chunk-6CGH73BC.js";
+} from "./chunk-M2L4XW2U.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";

package/dist/{chunk-EHHTKD7B.js → chunk-2LEJQD4H.js}

@@ -1,7 +1,7 @@
 import {
   DataTable,
   createRafResizeObserver
-} from "./chunk-6CGH73BC.js";
+} from "./chunk-M2L4XW2U.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";
@@ -2370,4 +2370,4 @@ export {
   openPlotPopoutWindow,
   openRawTracesWindow
 };
-//# sourceMappingURL=chunk-EHHTKD7B.js.map
+//# sourceMappingURL=chunk-2LEJQD4H.js.map

package/dist/{chunk-5QPGYHBN.js → chunk-CWPMLX67.js}

@@ -1,6 +1,6 @@
 import {
   modalHost
-} from "./chunk-6EZPPN4E.js";
+} from "./chunk-NNFTETK3.js";
 
 // src/help/help_registry.js
 var EMPTY_PROVIDER = Object.freeze({
@@ -472,4 +472,4 @@ export {
   showContextMenu,
   hideContextMenu
 };
-//# sourceMappingURL=chunk-5QPGYHBN.js.map
+//# sourceMappingURL=chunk-CWPMLX67.js.map