flexdesk 0.4.6 → 0.5.0

package/README.md

@@ -163,6 +163,22 @@ anywhere else, it walks the focused tile as before. With `backToOpenList`, a
 record in a window closes onto an open list of its section, first among the
 window's own tabs and then in any tile of its desktop.
 
+**A page's own levels come first** (0.4.7). A page can have levels that are not
+tabs, such as a section whose list opens one member in place of itself. Return
+`navigateBack()` from the content factory's mount, and Backspace asks it before
+anything above: it climbs one of the page's own levels and returns `true`. Only
+a strict `true` counts. `false`, any other value, a missing function or a throw
+(logged as a warning) all let Back walk the tab history, the open list and the
+taxonomy exactly as before. It is asked in the same place as the rest of Back:
+the window you last clicked in, else the focused tile. Return
+`canNavigateBack()` as well, and `wm.canNavigateBack()` reports the page's own
+levels, for that same window or tile. `TileRenderer.contentOf(leafId)` reads
+what a tile's factory returned. To draw the page's levels, call
+`renderBreadcrumb(container, segments)` from `@flexdesk/wm`, with
+`segments = [{ label, icon?, onClick? }]`. It uses the tile breadcrumb's
+markup, so it looks the same, and each `onClick` is yours: the last segment,
+and any without `onClick`, is drawn as plain text.
+
 ### Column sizing
 
 `fitColumns(columns, avail)` (from `@flexdesk/widgets`) turns per-column
@@ -175,6 +191,130 @@ then text shrinks to a floor. The widths are fractional and add up to `avail`
 exactly whenever the floors fit. `DataTable` does not use it yet; an embedder
 that measures its own columns can.
 
+### Sorting a paged DataTable
+
+A client-paged `DataTable` (no `onPageChange`) keeps its page when it is
+sorted, so a sort on page 3 shows rows 201–300 of the new order. Pass
+`resetPageOnSort: true` (0.4.7) to start every new order at the first page, a
+header click included, the way a new filter already does. It is off by default
+because keeping the page is what every earlier release did. Server-side paging
+is not affected: its page is your `offset`, which a sort never changes.
+
+### DataTable options in 0.5.0: lists that need no help
+
+0.5.0 adds options for the ordinary list in an application: one that sits in a
+page, opens a row, marks the open one, and sorts dates as dates. Every option
+is off until you set it. A table that sets none of them looks and behaves as it
+did in 0.4, apart from the few changes listed at the end of this section. This
+was measured in headless Edge: 64 cells in 7 default tables, an empty and a
+loading one among them, computed the same under 0.4.7 and 0.5.0.
+
+```js
+import { DataTable } from '@flexdesk/widgets';
+
+// House rules once, then one call per list: build AND draw.
+const ListTable = DataTable.withDefaults({
+    mode: 'compact', sortable: true, pagination: false,
+    fitContent: true, firstColumn: 'plain', autoDispose: true,
+});
+
+const table = ListTable.mount(host, {
+    headers: ['Name', 'Role', 'Last seen', 'Took'],
+    rows,                                    // values, not formatted text
+    columnTypes: [null, null, 'datetime', 'duration'],
+    getRowKey: (row) => row[0],
+    activeRow: openName,
+    onRowActivate: (i, row) => open(row),    // one click opens
+    rowClass: (row) => (row[1] === 'Suspended' ? 'is-off' : null),
+    emptyState: 'Nobody yet.',
+});
+```
+
+**Layout**
+
+| Option | What it does |
+|---|---|
+| `fitContent: true` | Makes the table as tall as its rows. By default the wrapper is `height: 100%`. In a parent without a height (an ordinary block in a page that scrolls) that resolves to nothing, so the header draws and the rows do not. |
+| `maxHeight: 240` | Implies `fitContent` and caps the table at this height. A number is px; a string is used as CSS. Past the cap, the body scrolls under its header. |
+| `firstColumn: 'plain'` | Styles the first column like the others. By default it is styled as a time column: 120–150px wide, grey, weight 500. |
+| `--twm-dt-cell-pad-block`, `--twm-dt-cell-pad-inline`, `--twm-dt-cell-line-height` | Three CSS tokens. Set them on `:root` or on any ancestor to give both densities one row height. They are unset by default, and then each density keeps its own 0.4 values. In Edge, with the tokens set to `2px`, `6px` and `1.35`, normal and compact rows both measured 21.19px. Without them, normal rows measured 27px. The normal density reads the line-height token on the table's `thead`/`tbody` and the cells inherit it, so your own line-height for the cells, the rows or the table still wins, from a cascade layer too. |
+
+**Opening a row, and which one is open**
+
+| Option | What it does |
+|---|---|
+| `onRowActivate(rowIdx, row, ev)` | Opens a row. It fires after the selection has been updated (`onRowClick` still fires before it, as in 0.4). It does not fire for a press on a control in the row (a button, link, field, label, `<summary>`, editable text, or `[data-twm-action]`), for a click that ends a drag selecting text in the table, for the second click of a double-click, or for the Ctrl click that takes a `selectable: 'single'` table's row off the selection. `ev.type` tells you which gesture fired it. If your `onSelectionChange` or `onRowClick` redraws the table (`setData`, `render`), the row that was pressed still opens; `row` is that row as it was drawn. |
+| `activateOn` | Which gestures open a row: `'click'` (the default), `'dblclick'`, `'enter'`, or an array of them. A pick list, where one click selects, uses `['dblclick', 'enter']`. Enter opens the selected row (the one row selected, or the selection's anchor), which is the row a double-click on it would open. If nothing is selected, Enter opens the active row. |
+| `clickable` | Adds `twm-dt--clickable` to the table, which gives rows a pointer cursor and a hover, readonly tables included. It defaults to on exactly when `onRowActivate` is set. |
+| `selectable: 'single'` | Lets a click select exactly one row. Shift and Ctrl do not extend the selection, Ctrl+A selects nothing, and `setSelection` keeps the last index it is given. |
+| `getRowKey(row, idx)`, `activeRow`, `setActiveRow(key)`, `getActiveRow()` | Mark the open row: `twm-dt-row--active` and `aria-current="true"`, drawn as an accent on the left edge. The mark is not the selection. It survives `setData`, sorting, filtering and paging, and a right-click does not move it. |
+
+The landing helper `attachLandingTableBehavior` now uses the same rule as
+`onRowActivate` to decide whether a click opens a row. That changes three
+things, with no option (see the list at the end of this section).
+
+**Row state**
+
+| Option | What it does |
+|---|---|
+| `rowClass(row, idx)`, `rowAttrs(row, idx)` | Add classes and attributes to the row's `<tr>`. They follow the row through sorts and filters, and `updateRow` asks again, so a class the row no longer earns is removed. |
+| `cellClass(value, colIdx, row, idx)` | Adds classes to a cell, after its type class. |
+| `rowIcon(row, idx)` | Draws an icon (`'name'` or `{ icon, title, tone }`) at the start of the first cell. It is drawn from an attribute, so the icon's name is not part of the cell's text, its tooltip or a copy. |
+| `emptyState` | Text, a node, or a function, shown in place of `emptyMessage`. It is hidden while `setLoading(true)` is on. |
+| `setError(message \| node \| Error \| null)` | Shows a failure inside the table. If there are rows on screen, they stay, under a `role="alert"` banner. If there are none, the failure takes the place of the empty row. `setData({ rows })` and `setError(null)` clear it. |
+| `showRowNumbers: 'position'` | Numbers rows 1, 2, 3 in the order shown, after a sort, a filter, or on a later page. `true` still numbers rows by their original index. |
+| `nullDisplay: 'NULL'` | Draws `null` and `undefined` as this text, adds `twm-dt-cell--null` to the cell, and copies the text as well. |
+
+**Values, not text**
+
+| Option | What it does |
+|---|---|
+| `columnTypes: [..., 'date' \| 'datetime' \| 'duration']` | Sorts and filters the column by its value: an ISO 8601 string, a `Date` or epoch ms for dates, and milliseconds or text such as `'3.2 s'` for durations. A date-only value such as `2026-10-05` is a calendar date, so the time zone never moves it. Any other text, and a date that does not exist (`2026-02-31`), is shown as it came and sorts last. Non-ISO text is not passed to `Date.parse`, because browsers read it differently (V8 reads `'12'` as a date in 2001). Only `columnTypes` makes a column a typed column. A `getColumnType` that returns `'date'` still sets only the cell's class name, as in 0.4. |
+| `dateFormat`, `dateTimeFormat` | **Default ISO: `YYYY-MM-DD` and `YYYY-MM-DD HH:mm`.** Pass a pattern (`DD.MM.YYYY`, `D MMM YYYY, h:mm a`, with `[literal]` text) or a function `(date) => string`, for every column or per column index. |
+| `durationFormat` | `'auto'` (`850 ms`, `3.2 s`, `2m 5s`, `1h 2m`), `'clock'` (`1:02:05`), or a function. |
+| `dateTimeZone: 'UTC'` | Reads and draws typed dates in UTC instead of the local zone. |
+| `sortValue(value, colIdx, row)` | Sets what a column sorts by, for every column or (as an object or array) per column. Return `undefined` to fall back to the column's own rule. |
+
+The column filters work on values. On a date column, `2026-10` matches October,
+`>2026-10` matches after October, `<=2026-10-05` includes the 5th, and
+`2026-01..2026-03` matches January through the end of March. A date operand is
+ISO with two-digit parts, so an operator over a half-typed one (`>20`,
+`>2026-1`) filters nothing until it is complete. Text without an operator that
+is not such a date (`5 Oct`, `Oct`, `2026-1`) is matched against the cell as
+drawn, so a filter narrows as you type it. On a duration column, `>1s`,
+`<500ms` and `1s..1m` work. `formatDate`, `formatDuration`, `parseDateValue`
+and `parseDuration` are exported, so text drawn elsewhere can use the same
+words as the table.
+
+**Housekeeping**
+
+| Option | What it does |
+|---|---|
+| `DataTable.mount(host, config)` | Builds the table and draws it. The constructor still draws nothing until `render()`. |
+| `DataTable.withDefaults(defaults)` | Returns a subclass whose `defaults` sit under every config it is given. `instanceof DataTable` holds, and it can be narrowed again. |
+| `autoDispose: true` | Disposes the table once it has been taken out of the document and is still out a task later. It lets go of everything `dispose()` does, but it removes only the table's own elements and never empties the host. By then you may have mounted the next list into the host or written your own message there, and that stays. Do not set it on a table you detach and attach again later, such as a cached tab, because a disposed table comes back empty. |
+| `resetColumnWidths()` | Forgets every dragged, fitted or restored width, the persisted ones included, and measures the columns again. Use it after a zoom or a font change. |
+
+**Changes that need no option.** A table that sets none of the options above
+behaves as it did in 0.4, except for these:
+
+- The copy menu's document listeners (click, scroll, Escape, resize) now exist
+  only while the menu is open. Before 0.5.0, a table that had ever been
+  right-clicked kept them until `dispose()`.
+- `attachLandingTableBehavior` judges a click by the `onRowActivate` rule:
+  - A double-click opens the row once, not twice.
+  - A click while text in the host is selected does not open the row. That is
+    the click that ends a drag across a cell.
+  - A click on a `<label>`, a `<summary>` or editable (`contenteditable`) text
+    in a row does not open the row either. 0.4.7 skipped only buttons, links
+    and form fields. A `[data-twm-action]` control still runs its action.
+- The CSS reads the new tokens with the 0.4 values as fallbacks, so the
+  computed styles are the same while the tokens are unset. One exception: the
+  normal density's line-height token is declared on the `thead` and `tbody`.
+  A line-height rule of yours aimed at those two elements themselves now loses
+  to it if it is in a cascade layer, or has zero specificity and loads before
+  `flexdesk.css`. A rule for the cells, the rows or the table does not.
+
 ### Scrollbars
 
 `installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's

package/css/base.css

@@ -496,7 +496,9 @@
 .twm-preview-table th,
 .twm-preview-table td {
     border-bottom: 1px solid #2a2a2a;
-    padding: var(--space-sm) 8px;
+    /* 0.5.0: the row-geometry tokens (tokens.css). Unset, these fall back to
+     * exactly the 0.4 padding. */
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px);
     white-space: nowrap;
     /* Never spill text past the column. Once columns are locked to fixed
      * widths, over-long content is clipped with an ellipsis; the full
@@ -598,6 +600,125 @@ body.twm-dt-col-resizing {
 .twm-preview-table:not(.twm-preview-table--readonly) tr:hover td {
     background: rgba(255, 255, 255, 0.04);
 }
+/* ── 0.5.0 DataTable options. Each rule below matches only a class or an
+ * attribute a 0.5.0 option sets, so a table that asks for none of them is
+ * styled exactly as in 0.4. ───────────────────────────────────────────── */
+
+/* The row-geometry tokens for the NORMAL density's line height. Compact
+ * declares its own on the cells (with the token in front), as 0.4 did; normal
+ * never declared one, so this one is NOT on the cells. It is on the ROW GROUPS,
+ * which only this component creates, and the cells inherit it. Unset, it
+ * computes to `unset` — inheritance from the table, which is exactly what no
+ * declaration gives. A declaration on the cells themselves, however weak
+ * (`:where()`), would beat any consumer rule for the cells that sits in a
+ * cascade LAYER (unlayered author styles outrank every layer, whatever their
+ * specificity) and any zero-specificity one loaded before this sheet; on the
+ * row groups, a consumer's rule for the cells, the rows or the table still
+ * wins, as it did in 0.4. */
+:where(.twm-preview-table) > :where(thead, tbody, tfoot) {
+    line-height: var(--twm-dt-cell-line-height);
+}
+/* `firstColumn: 'plain'` — the first column is a column like the others, not
+ * the time column this component was built around (120–150px, grey, 500).
+ * One class more than both time rules, so the order of the two sheets cannot
+ * matter. The header keeps the header's weight and colour. */
+.twm-preview-table.twm-dt--first-plain th:first-child,
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    width: auto;
+    min-width: 80px;
+    max-width: none;
+}
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    font-weight: inherit;
+    color: inherit;
+}
+.twm-preview-table.twm-dt--first-plain th:first-child {
+    font-weight: 600;
+    color: #aaa;
+}
+/* `onRowActivate` / `clickable` — a row that opens looks like it: a pointer,
+ * and a hover even on a readonly table. Never over a selected row, whose
+ * colour has to survive the pointer (see the selection rule's note), and never
+ * over the empty or failed state's row, which opens nothing. */
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row) {
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row):not(.selected):hover td {
+    background: var(--state-hover, rgba(255, 255, 255, 0.05));
+}
+/* `activeRow` — the row that is OPEN. A left edge, not a background: hover
+ * and selection keep theirs. */
+.twm-preview-table tbody tr.twm-dt-row--active > td:first-child {
+    box-shadow: inset 2px 0 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
+ * aligned on a line height of 1, so it cannot make its row taller. */
+.twm-preview-table td .twm-dt-row-icon {
+    display: inline-block;
+    font-size: 1.15em;
+    line-height: 1;
+    vertical-align: top;
+    margin-right: 4px;
+    opacity: 0.85;
+}
+.twm-preview-table td .twm-dt-row-icon::before {
+    content: attr(data-twm-icon);
+}
+.twm-preview-table td .twm-dt-row-icon--muted   { color: var(--text-muted, #888); }
+.twm-preview-table td .twm-dt-row-icon--info    { color: var(--color-info, #2196f3); }
+.twm-preview-table td .twm-dt-row-icon--success { color: var(--color-success, #3fb950); }
+.twm-preview-table td .twm-dt-row-icon--warn    { color: var(--color-warning, #ff9800); }
+.twm-preview-table td .twm-dt-row-icon--danger  { color: var(--color-danger, #c74e4e); }
+/* THESE CELLS ARE OFTEN A ROW'S FIRST CELL, and the first cell is the time
+ * column's: `.twm-preview-table td:first-child` (0,2,1, grey and weight 500,
+ * declared twice, the second copy far below), `firstColumn: 'plain'` (0,3,1,
+ * `color: inherit`) and the compact density's cell padding (0,2,1, in
+ * overrides.css) all reach them. A rule of the same weight LOSES to whichever
+ * comes later — which drew a failure in an empty list grey, exactly like an
+ * empty state, and gave both 2px of padding under compact. So each rule below
+ * is (0,3,2) or more: the wrapper and `tbody` in front of the cell's class,
+ * which no first-column or density rule matches, and the order of the sheets
+ * cannot matter. */
+/* `nullDisplay` — a NULL reads as one, not as the text "NULL". */
+.twm-data-table-component .twm-preview-table tbody td.twm-dt-cell--null {
+    color: var(--text-dim, #666);
+    font-style: italic;
+}
+/* `emptyState` and `setError` with no rows: the box's own words, which may
+ * wrap — muted for an empty state, red for a failure, in both densities. Quiet
+ * while loading — an empty table that is still loading is not empty. */
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--state,
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    text-align: center;
+    padding: 16px;
+    white-space: normal;
+    font-weight: normal;
+    color: var(--text-muted, #888);
+}
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    color: var(--color-danger, #c74e4e);
+}
+.twm-data-table-component--loading .twm-preview-table td.twm-data-table__empty-cell--state {
+    visibility: hidden;
+}
+/* `setError` with rows: a banner over the rows that are KEPT. */
+.twm-data-table__error {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: var(--font-size-sm, 12px);
+    color: var(--color-danger, #c74e4e);
+    background: rgba(199, 78, 78, 0.12);
+    border-bottom: 1px solid rgba(199, 78, 78, 0.4);
+}
+.twm-data-table__error .twm-data-table__error-icon {
+    font-size: 16px;
+    line-height: 1;
+}
 /* Wizard mode: uniform column widths, no selection */
 .twm-preview-table-wrap--wizard .twm-preview-table {
     table-layout: auto;
@@ -1508,7 +1629,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-preview-table th, .twm-preview-table td { 
     border-bottom: 1px solid #2a2a2a; 
-    padding: var(--space-sm) 8px; 
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px); 
     white-space: nowrap;
 }
 .twm-preview-table th {

package/css/flexdesk.css

@@ -504,7 +504,9 @@
 .twm-preview-table th,
 .twm-preview-table td {
     border-bottom: 1px solid #2a2a2a;
-    padding: var(--space-sm) 8px;
+    /* 0.5.0: the row-geometry tokens (tokens.css). Unset, these fall back to
+     * exactly the 0.4 padding. */
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px);
     white-space: nowrap;
     /* Never spill text past the column. Once columns are locked to fixed
      * widths, over-long content is clipped with an ellipsis; the full
@@ -625,6 +627,125 @@ body.twm-dt-col-resizing {
 .twm-preview-table tbody tr.selected td {
     background: var(--state-selected, rgba(0, 122, 204, 0.15));
 }
+/* ── 0.5.0 DataTable options. Each rule below matches only a class or an
+ * attribute a 0.5.0 option sets, so a table that asks for none of them is
+ * styled exactly as in 0.4. ───────────────────────────────────────────── */
+
+/* The row-geometry tokens for the NORMAL density's line height. Compact
+ * declares its own on the cells (with the token in front), as 0.4 did; normal
+ * never declared one, so this one is NOT on the cells. It is on the ROW GROUPS,
+ * which only this component creates, and the cells inherit it. Unset, it
+ * computes to `unset` — inheritance from the table, which is exactly what no
+ * declaration gives. A declaration on the cells themselves, however weak
+ * (`:where()`), would beat any consumer rule for the cells that sits in a
+ * cascade LAYER (unlayered author styles outrank every layer, whatever their
+ * specificity) and any zero-specificity one loaded before this sheet; on the
+ * row groups, a consumer's rule for the cells, the rows or the table still
+ * wins, as it did in 0.4. */
+:where(.twm-preview-table) > :where(thead, tbody, tfoot) {
+    line-height: var(--twm-dt-cell-line-height);
+}
+/* `firstColumn: 'plain'` — the first column is a column like the others, not
+ * the time column this component was built around (120–150px, grey, 500).
+ * One class more than both time rules, so the order of the two sheets cannot
+ * matter. The header keeps the header's weight and colour. */
+.twm-preview-table.twm-dt--first-plain th:first-child,
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    width: auto;
+    min-width: 80px;
+    max-width: none;
+}
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    font-weight: inherit;
+    color: inherit;
+}
+.twm-preview-table.twm-dt--first-plain th:first-child {
+    font-weight: 600;
+    color: #aaa;
+}
+/* `onRowActivate` / `clickable` — a row that opens looks like it: a pointer,
+ * and a hover even on a readonly table. Never over a selected row, whose
+ * colour has to survive the pointer (see the selection rule's note), and never
+ * over the empty or failed state's row, which opens nothing. */
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row) {
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row):not(.selected):hover td {
+    background: var(--state-hover, rgba(255, 255, 255, 0.05));
+}
+/* `activeRow` — the row that is OPEN. A left edge, not a background: hover
+ * and selection keep theirs. */
+.twm-preview-table tbody tr.twm-dt-row--active > td:first-child {
+    box-shadow: inset 2px 0 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
+ * aligned on a line height of 1, so it cannot make its row taller. */
+.twm-preview-table td .twm-dt-row-icon {
+    display: inline-block;
+    font-size: 1.15em;
+    line-height: 1;
+    vertical-align: top;
+    margin-right: 4px;
+    opacity: 0.85;
+}
+.twm-preview-table td .twm-dt-row-icon::before {
+    content: attr(data-twm-icon);
+}
+.twm-preview-table td .twm-dt-row-icon--muted   { color: var(--text-muted, #888); }
+.twm-preview-table td .twm-dt-row-icon--info    { color: var(--color-info, #2196f3); }
+.twm-preview-table td .twm-dt-row-icon--success { color: var(--color-success, #3fb950); }
+.twm-preview-table td .twm-dt-row-icon--warn    { color: var(--color-warning, #ff9800); }
+.twm-preview-table td .twm-dt-row-icon--danger  { color: var(--color-danger, #c74e4e); }
+/* THESE CELLS ARE OFTEN A ROW'S FIRST CELL, and the first cell is the time
+ * column's: `.twm-preview-table td:first-child` (0,2,1, grey and weight 500,
+ * declared twice, the second copy far below), `firstColumn: 'plain'` (0,3,1,
+ * `color: inherit`) and the compact density's cell padding (0,2,1, in
+ * overrides.css) all reach them. A rule of the same weight LOSES to whichever
+ * comes later — which drew a failure in an empty list grey, exactly like an
+ * empty state, and gave both 2px of padding under compact. So each rule below
+ * is (0,3,2) or more: the wrapper and `tbody` in front of the cell's class,
+ * which no first-column or density rule matches, and the order of the sheets
+ * cannot matter. */
+/* `nullDisplay` — a NULL reads as one, not as the text "NULL". */
+.twm-data-table-component .twm-preview-table tbody td.twm-dt-cell--null {
+    color: var(--text-dim, #666);
+    font-style: italic;
+}
+/* `emptyState` and `setError` with no rows: the box's own words, which may
+ * wrap — muted for an empty state, red for a failure, in both densities. Quiet
+ * while loading — an empty table that is still loading is not empty. */
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--state,
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    text-align: center;
+    padding: 16px;
+    white-space: normal;
+    font-weight: normal;
+    color: var(--text-muted, #888);
+}
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    color: var(--color-danger, #c74e4e);
+}
+.twm-data-table-component--loading .twm-preview-table td.twm-data-table__empty-cell--state {
+    visibility: hidden;
+}
+/* `setError` with rows: a banner over the rows that are KEPT. */
+.twm-data-table__error {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: var(--font-size-sm, 12px);
+    color: var(--color-danger, #c74e4e);
+    background: rgba(199, 78, 78, 0.12);
+    border-bottom: 1px solid rgba(199, 78, 78, 0.4);
+}
+.twm-data-table__error .twm-data-table__error-icon {
+    font-size: 16px;
+    line-height: 1;
+}
 /* Wizard mode: uniform column widths, no selection */
 .twm-preview-table-wrap--wizard .twm-preview-table {
     table-layout: auto;
@@ -1606,7 +1727,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-preview-table th, .twm-preview-table td { 
     border-bottom: 1px solid #2a2a2a; 
-    padding: var(--space-sm) 8px; 
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px); 
     white-space: nowrap;
 }
 .twm-preview-table th {
@@ -6617,8 +6738,10 @@ tr:hover .twm-row-action { opacity: 1; }
 }
 .twm-data-table-component--compact .twm-preview-table th,
 .twm-data-table-component--compact .twm-preview-table td {
-    padding: 2px 6px;
-    line-height: 1.35;
+    /* 0.5.0: the row-geometry tokens (tokens.css), falling back to exactly
+     * the 0.4 compact values. */
+    padding: var(--twm-dt-cell-pad-block, 2px) var(--twm-dt-cell-pad-inline, 6px);
+    line-height: var(--twm-dt-cell-line-height, 1.35);
 }
 .twm-data-table-component--compact .twm-pagination-controls {
     padding: 1px 6px !important;

package/css/overrides.css

@@ -1873,8 +1873,10 @@ tr:hover .twm-row-action { opacity: 1; }
 }
 .twm-data-table-component--compact .twm-preview-table th,
 .twm-data-table-component--compact .twm-preview-table td {
-    padding: 2px 6px;
-    line-height: 1.35;
+    /* 0.5.0: the row-geometry tokens (tokens.css), falling back to exactly
+     * the 0.4 compact values. */
+    padding: var(--twm-dt-cell-pad-block, 2px) var(--twm-dt-cell-pad-inline, 6px);
+    line-height: var(--twm-dt-cell-line-height, 1.35);
 }
 .twm-data-table-component--compact .twm-pagination-controls {
     padding: 1px 6px !important;

package/css/tokens.css

@@ -179,4 +179,18 @@
     --ea-text-muted:  var(--text-muted);
     --ea-text-dim:    var(--text-dim);
     --ea-accent:      var(--accent-bright);
+
+    /* ── DataTable row geometry (0.5.0) — DELIBERATELY UNSET ──────
+       Three tokens make every DataTable's rows one height, whatever its
+       density. Set them (on :root, or on any ancestor of the tables) and
+       both the normal and the compact density read them:
+
+           --twm-dt-cell-pad-block:   2px;    the cell's top and bottom padding
+           --twm-dt-cell-pad-inline:  6px;    its left and right padding
+           --twm-dt-cell-line-height: 1.35;   the line height in a cell
+
+       They are NOT defined here, and must not be: each density falls back
+       to its OWN 0.4 values when a token is unset (normal: 6px 8px and an
+       inherited line height; compact: 2px 6px and 1.35), and a default here
+       would replace both densities' values with one. */
 }

package/dist/charts.js

@@ -39,13 +39,13 @@ import {
   setPlotlySource,
   uid,
   updateChart
-} from "./chunk-HWCX5I4R.js";
+} from "./chunk-CNXP3SIN.js";
 import {
   createRafResizeObserver
-} from "./chunk-CYTWMP2Y.js";
+} from "./chunk-KH2GJTKR.js";
 import {
   ManagedWindow
-} from "./chunk-LH5TSOZW.js";
+} from "./chunk-6JSOVNID.js";
 import "./chunk-FL5KFNQH.js";
 import "./chunk-JYWURG5T.js";
 

package/dist/{chunk-ELXVW542.js → chunk-24MS7W5Y.js}

@@ -1,6 +1,6 @@
 import {
   ManagedWindow
-} from "./chunk-LH5TSOZW.js";
+} from "./chunk-6JSOVNID.js";
 
 // src/help/help_registry.js
 var EMPTY_PROVIDER = Object.freeze({
@@ -973,4 +973,4 @@ export {
   showContextMenu,
   hideContextMenu
 };
-//# sourceMappingURL=chunk-ELXVW542.js.map
+//# sourceMappingURL=chunk-24MS7W5Y.js.map

package/dist/{chunk-LH5TSOZW.js → chunk-6JSOVNID.js}

@@ -1231,7 +1231,47 @@ var ManagedWindow = class {
   }
 };
 
+// src/ui/components/row_activation.js
+var ROW_CONTROL_SELECTOR = [
+  "button",
+  "a",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  "[data-twm-action]"
+].join(", ");
+function isRowControl(target, scope = null) {
+  const hit = target?.closest?.(ROW_CONTROL_SELECTOR);
+  return !!hit && (!scope || scope.contains(hit));
+}
+function endsTextSelection(target, scope = null) {
+  const doc = target?.ownerDocument || (typeof document !== "undefined" ? document : null);
+  const sel = doc?.getSelection?.();
+  if (!sel || sel.isCollapsed || !String(sel)) return false;
+  if (!scope) return true;
+  const inside = (node) => !!node && scope.contains(node);
+  return inside(sel.anchorNode) || inside(sel.focusNode);
+}
+function isRowActivation(ev, gesture = "click", { scope = null } = {}) {
+  const target = ev?.target;
+  if (!target?.closest) return false;
+  if (isRowControl(target, scope)) return false;
+  if (gesture === "click") {
+    if ((ev.detail ?? 0) > 1) return false;
+    if (endsTextSelection(target, scope)) return false;
+  }
+  return true;
+}
+
 export {
-  ManagedWindow
+  ManagedWindow,
+  ROW_CONTROL_SELECTOR,
+  isRowControl,
+  endsTextSelection,
+  isRowActivation
 };
-//# sourceMappingURL=chunk-LH5TSOZW.js.map
+//# sourceMappingURL=chunk-6JSOVNID.js.map