flexdesk 0.6.3 → 0.7.0

package/dist/{chunk-WAVLVXYV.js → chunk-WKTYKXWF.js}

@@ -1,7 +1,7 @@
 import {
   DataTable,
   createRafResizeObserver
-} from "./chunk-WLASPRGP.js";
+} from "./chunk-JLCJWCRS.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";
@@ -2370,4 +2370,4 @@ export {
   openPlotPopoutWindow,
   openRawTracesWindow
 };
-//# sourceMappingURL=chunk-WAVLVXYV.js.map
+//# sourceMappingURL=chunk-WKTYKXWF.js.map

package/dist/flexdesk.css

@@ -555,6 +555,18 @@ body.twm-dt-col-resizing {
 .twm-preview-table.twm-dt-measuring .twm-data-table__filter-row {
     display: none !important;
 }
+/* 0.7.0 `filterKinds`: a filter row holding a CONTROL stays in the measure,
+ * its text boxes out of it, and each control at its NARROWEST (the widest
+ * chip) — so a column is never narrower than one of its chips. */
+.twm-preview-table.twm-dt-measuring .twm-data-table__filter-row.twm-data-table__filter-row--controls {
+    display: table-row !important;
+}
+.twm-preview-table.twm-dt-measuring .twm-data-table__filter-row--controls .twm-data-table__filter-wrapper {
+    display: none !important;
+}
+.twm-preview-table.twm-dt-measuring th.data-table__filter-cell--control > * {
+    width: min-content !important;
+}
 /* ── C10. The virtual window (`DataTable` with `virtualize`) ─────────────
  * The column track is a `<colgroup>` (see `_createTable`), so it is the
  * `<col>` widths the measuring pass has to lift — the same `!important` it
@@ -779,6 +791,145 @@ body.twm-dt-col-resizing {
     font-size: 16px;
     line-height: 1;
 }
+/* ── 0.7.0 DataTable options. Each rule below matches only a class a 0.7.0
+ * option sets, so a table that asks for none of them is styled exactly as in
+ * 0.6. ─────────────────────────────────────────────────────────────────── */
+/* `rowDetail` — the toggle. Its chevron is drawn by CSS from the icon font
+ * (the button carries its class), so the cell's text, its clipped-cell
+ * tooltip and a copy stay the cell's own; turned down while open. Negative
+ * block margins on a line height of 1: it cannot make its row taller. */
+.twm-preview-table td .twm-dt-detail-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin: -2px 4px -2px -2px;
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: top;
+    cursor: pointer;
+    opacity: 0.75;
+}
+.twm-preview-table td .twm-dt-detail-toggle-gap {
+    display: inline-block;
+    width: 18px;
+    margin: 0 4px 0 -2px;
+    vertical-align: top;
+}
+.twm-preview-table td .twm-dt-detail-toggle::before {
+    content: 'chevron_right';
+    transition: transform 0.12s ease;
+}
+.twm-preview-table td .twm-dt-detail-toggle[aria-expanded="true"]::before {
+    transform: rotate(90deg);
+}
+.twm-preview-table td .twm-dt-detail-toggle:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.08);
+}
+.twm-preview-table td .twm-dt-detail-toggle:focus-visible {
+    opacity: 1;
+    outline: 1px solid var(--accent-bright, #007acc);
+}
+/* The detail's row: one cell across every column. It is often the body's
+ * FIRST cell of its row, so the time column's rules reach it (see the note
+ * above the NULL rule) — hence (0,4,3): the wrapper and `tbody` in front. It
+ * wraps, it is not clipped, it is not a thing to press (a clickable table's
+ * pointer and hover stop at it), and its content does not set the columns'
+ * widths (`contain: inline-size`, and it is out of the measuring pass). */
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-detail-row > td.twm-dt-detail-cell,
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-detail-row:not(.twm-dt-spacer):not(.data-table__empty-row):hover > td.twm-dt-detail-cell {
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    padding: 6px 10px 8px 28px;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    font-family: inherit;
+    font-weight: normal;
+    color: inherit;
+    cursor: auto;
+    background: var(--twm-dt-detail-bg, rgba(255, 255, 255, 0.025));
+}
+.twm-dt-detail {
+    contain: inline-size;
+    overflow: auto;
+    user-select: text;
+}
+.twm-preview-table.twm-dt-measuring tr.twm-dt-detail-row {
+    display: none !important;
+}
+/* `follow` / `refresh()` — a row the last answer did not have, for a moment. */
+@keyframes twm-dt-row-new {
+    from { background: var(--twm-dt-new-bg, rgba(0, 122, 204, 0.22)); }
+    to { background: transparent; }
+}
+.twm-preview-table tbody tr.twm-dt-row--new > td {
+    animation: twm-dt-row-new 1.6s ease-out;
+}
+/* `pagerLabels` — a pager button with its word beside its glyph. */
+.twm-pagination-btn .twm-pagination-btn__label {
+    margin-left: 2px;
+    font-size: 10px;
+    white-space: nowrap;
+}
+/* `filterKinds` — a filter cell holding a control rather than the text box,
+ * and the built-in chips. Wraps rather than clipping its control. */
+.twm-preview-table th.data-table__filter-cell--control {
+    white-space: normal;
+    overflow: visible;
+}
+.twm-dt-filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 3px;
+}
+.twm-dt-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 20px;
+    padding: 0 7px 0 5px;
+    border: 1px solid var(--border-default, #3a3a3a);
+    border-radius: 10px;
+    background: transparent;
+    color: #aaa;
+    font: inherit;
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-dt-filter-chip:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+.twm-dt-filter-chip:focus-visible {
+    outline: 1px solid var(--accent-bright, #007acc);
+}
+.twm-dt-filter-chip.twm-dt-filter-chip--on {
+    border-color: var(--accent-bright, #007acc);
+    background: rgba(0, 122, 204, 0.18);
+    color: #ddd;
+}
+.twm-dt-filter-chip.twm-dt-filter-chip--empty {
+    opacity: 0.5;
+}
+.twm-dt-filter-chip .twm-dt-filter-chip__icon {
+    font-size: 14px;
+    line-height: 1;
+}
+.twm-dt-filter-chip .twm-dt-filter-chip__count {
+    color: #888;
+    font-variant-numeric: tabular-nums;
+}
 /* Wizard mode: uniform column widths, no selection */
 .twm-preview-table-wrap--wizard .twm-preview-table {
     table-layout: auto;
@@ -7459,6 +7610,188 @@ tr:hover .twm-row-action { opacity: 1; }
 }
 
 
+/* ══ RECORD LIST & FACT SHEET (0.7.0) ══════════════════════════════════
+ * `createRecordList` (src/ui/components/record_list.js) and
+ * `createFactTable` (src/ui/components/fact_table.js). Neither has a height
+ * of its own: each is exactly as tall as its records, in any parent. */
+
+/* ── the record list ── */
+.twm-record-list { display: block; min-width: 0; }
+.twm-record-list__items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+/* A record is one flex row that WRAPS: on a narrow host the pills and verbs
+ * go under the name rather than squeezing it to nothing. */
+.twm-record {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 10px;
+    padding: 7px 6px;
+    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
+    min-width: 0;
+}
+.twm-record:last-child { border-bottom: none; }
+.twm-record__main {
+    flex: 1 1 14em;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.twm-record__name {
+    color: var(--text-primary, #e0e0e0);
+    overflow-wrap: anywhere;
+}
+.twm-record__name--mono { font-family: var(--font-family-mono, monospace); font-size: 0.95em; }
+/* The quiet line. It wraps by default; `facts: 'ellipsis'` keeps it to one
+ * line and puts the whole of it on the line's title. */
+.twm-record__facts {
+    color: var(--text-muted, #888);
+    font-size: var(--ea-font-body, 11px);
+    overflow-wrap: anywhere;
+}
+.twm-record-list--clip .twm-record__facts {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-record__error {
+    color: var(--color-danger, #c74e4e);
+    font-size: var(--ea-font-body, 11px);
+    overflow-wrap: anywhere;
+}
+/* A refused verb's reason, ON the screen — never only on a tooltip. */
+.twm-record__refusals { display: flex; flex-direction: column; gap: 1px; }
+.twm-record__refusal {
+    color: var(--color-warning, #ff9800);
+    font-size: var(--ea-font-small, 10px);
+    overflow-wrap: anywhere;
+}
+.twm-record__pills,
+.twm-record__verbs {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px 6px;
+    margin-left: auto;
+}
+.twm-record__pill {
+    display: inline-block;
+    padding: 1px 7px;
+    border-radius: var(--radius-pill, 999px);
+    background: var(--surface-3, #3c3c3c);
+    color: var(--text-muted, #888);
+    font-size: var(--ea-font-small, 10px);
+    line-height: 16px;
+    white-space: nowrap;
+}
+.twm-record__pill--info    { background: rgba(33, 150, 243, 0.16); color: var(--color-info, #2196f3); }
+.twm-record__pill--success { background: rgba(63, 185, 80, 0.16);  color: var(--color-success, #3fb950); }
+.twm-record__pill--warn    { background: rgba(255, 152, 0, 0.16);  color: var(--color-warning, #ff9800); }
+.twm-record__pill--danger  { background: rgba(199, 78, 78, 0.18);  color: var(--color-danger, #c74e4e); }
+.twm-record__pill--muted   { background: transparent; color: var(--text-dim, #666); box-shadow: inset 0 0 0 1px var(--border-strong, #383838); }
+.twm-record__verb-icon.material-symbols-outlined { font-size: 14px; line-height: 1; }
+/* States. A paused or switched-off record dims its words and pills and NOT
+ * its verbs: the verb that brings it back has to stay readable. A dead or
+ * failing one carries the danger colour on its left edge. */
+.twm-record--state-paused > .twm-record__main,
+.twm-record--state-paused > .twm-record__pills,
+.twm-record--state-off > .twm-record__main,
+.twm-record--state-off > .twm-record__pills,
+.twm-record--state-dead > .twm-record__main,
+.twm-record--state-dead > .twm-record__pills { opacity: 0.55; }
+.twm-record--state-dead,
+.twm-record--state-error { box-shadow: inset 2px 0 0 0 var(--color-danger, #c74e4e); }
+/* `activeKey` — the record that is OPEN: the accent on the left edge, as
+ * DataTable's `twm-dt-row--active`. It wins over a state's edge. */
+.twm-record.twm-record--active { box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc); }
+.twm-record-list--clickable .twm-record { cursor: pointer; }
+.twm-record-list--clickable .twm-record:hover { background: var(--state-hover, rgba(255, 255, 255, 0.05)); }
+.twm-record:focus { outline: none; }
+.twm-record:focus-visible {
+    outline: 1px solid var(--accent-bright, #007acc);
+    outline-offset: -1px;
+}
+.twm-record-list__empty {
+    margin: 0;
+    padding: 12px 6px;
+    color: var(--text-muted, #888);
+    font-size: var(--ea-font-body, 11px);
+}
+
+/* ── the fact sheet ── */
+.twm-facts {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    font-size: var(--font-size-sm, 12px);
+}
+.twm-facts thead th {
+    text-align: left;
+    font-size: var(--ea-font-small, 10px);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-dim, #666);
+    white-space: nowrap;
+    border-bottom: 1px solid var(--border-default, #303030);
+    padding: 0 12px 6px 0;
+}
+/* Every value WRAPS and keeps its own line breaks: nothing is cut off. */
+.twm-facts tbody td,
+.twm-facts tbody th {
+    text-align: left;
+    font-weight: normal;
+    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
+    padding: 6px 12px 6px 0;
+    color: var(--text-primary, #e0e0e0);
+    vertical-align: top;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+.twm-facts tbody tr:last-child > td,
+.twm-facts tbody tr:last-child > th { border-bottom: 0; }
+.twm-facts tbody th.twm-facts__label {
+    color: var(--text-muted, #888);
+    white-space: nowrap;
+}
+.twm-facts.twm-facts--wrap-labels tbody th.twm-facts__label { white-space: normal; }
+/* `wrap: 'words'` — a value wraps at spaces only, and a long word stays
+ * whole: the sheet grows wider and a sideways scroller around it scrolls.
+ * `wrap: 'none'` — a value keeps its own line breaks and no others. */
+.twm-facts.twm-facts--wrap-words tbody td,
+.twm-facts.twm-facts--wrap-words tbody th { overflow-wrap: normal; word-break: normal; }
+.twm-facts.twm-facts--wrap-none tbody td,
+.twm-facts.twm-facts--wrap-none tbody th { white-space: pre; overflow-wrap: normal; word-break: normal; }
+.twm-facts.twm-facts--mono tbody td.twm-facts__value,
+.twm-facts tbody td.twm-facts__mono { font-family: var(--font-family-mono, monospace); font-size: 0.95em; }
+.twm-facts .twm-facts__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.twm-facts tbody td.twm-facts__null,
+.twm-facts tbody td.twm-facts__missing { color: var(--text-dim, #666); font-style: italic; }
+.twm-facts tbody td.twm-facts__arrow {
+    color: var(--text-dim, #666);
+    white-space: nowrap;
+    width: 1%;
+}
+.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__before { color: var(--text-muted, #888); }
+.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__arrow { color: var(--color-warning, #ff9800); }
+.twm-facts tbody tr.twm-facts__row--same > td { color: var(--text-muted, #888); }
+.twm-facts tbody tr.twm-facts__row--added > td.twm-facts__after { color: var(--color-success, #3fb950); }
+.twm-facts tbody tr.twm-facts__row--removed > td.twm-facts__before { color: var(--color-danger, #c74e4e); }
+.twm-facts tbody td.twm-facts__empty {
+    padding: 12px 0;
+    color: var(--text-muted, #888);
+    white-space: normal;
+}
+/* ══ end RECORD LIST & FACT SHEET ══ */
+
 /* ══ FLOW · KIT ═══════════════════════════════════════════════════════ */
 /* The shared flow-editor kit (36 §3, §3.12): the settings panel and its
  * fields, the generic widgets, reference chips and the chip input, the two

package/dist/flow.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6NG7YVBG.js";
 import {
   DataTable
-} from "./chunk-WLASPRGP.js";
+} from "./chunk-JLCJWCRS.js";
 import "./chunk-6JSOVNID.js";
 import "./chunk-FL5KFNQH.js";
 import {
@@ -6487,7 +6487,7 @@ function createOutlineEditor(host, options = {}) {
     if (fs.length) row.appendChild(badge(fs));
     item.appendChild(row);
     item.setAttribute("aria-label", [map.startLabel(S), sum].filter(Boolean).join(", "));
-    row.addEventListener("click", () => select("flow", { focus: true }));
+    row.addEventListener("click", () => select("flow", { focus: true, picked: true }));
     if (filter) item.classList.add("twm-flow-outline__item--context");
     itemEls.set("flow", item);
     return item;
@@ -6614,7 +6614,7 @@ function createOutlineEditor(host, options = {}) {
         openMenu(item.id, menu);
       });
     }
-    row.addEventListener("click", () => select(item.id, { focus: true }));
+    row.addEventListener("click", () => select(item.id, { focus: true, picked: true }));
     return { row, label: [name, type?.label !== name ? type?.label : null, summary].filter(Boolean).join(", ") };
   }
   const offArm = /* @__PURE__ */ new Set();
@@ -6789,7 +6789,7 @@ function createOutlineEditor(host, options = {}) {
       b.tabIndex = current && b.closest('[role="treeitem"]') === current ? 0 : -1;
     }
   }
-  function select(id, { focus = false, silent = false } = {}) {
+  function select(id, { focus = false, silent = false, picked = false } = {}) {
     const next = id === null || id === void 0 ? "flow" : id;
     const changed = next !== selected;
     selected = next;
@@ -6800,8 +6800,19 @@ function createOutlineEditor(host, options = {}) {
     }
     void silent;
     if (focus) itemEls.get(selected)?.focus({ preventScroll: false });
+    if (picked) revealSettings();
     if (changed) onSelect?.({ kind: selected === "flow" ? "flow" : "step", id: selected === "flow" ? null : selected });
   }
+  function revealSettings() {
+    if (destroyed) return;
+    const box = body.getBoundingClientRect();
+    if (!box.height) return;
+    const r = settingsHost.getBoundingClientRect();
+    const inside = r.top >= box.top - 1 && r.bottom <= box.bottom + 1;
+    const covers = r.top <= box.top + 1 && r.bottom >= box.bottom - 1;
+    if (inside || covers) return;
+    settingsHost.scrollIntoView?.({ block: "nearest" });
+  }
   function focusSelected() {
     const li = itemEls.get(selected) ?? itemEls.get("flow");
     if (li) li.focus({ preventScroll: true });
@@ -7187,7 +7198,7 @@ function createOutlineEditor(host, options = {}) {
     return apply(r, "flow:step:remove");
   }
   function rename(id) {
-    select(id);
+    select(id, { picked: true });
     const input = settingsHost.querySelector("[data-twm-flow-title]");
     if (input) {
       input.focus({ preventScroll: true });
@@ -7203,7 +7214,7 @@ function createOutlineEditor(host, options = {}) {
   function goTo(f) {
     const id = f?.node_id && nodeOf(f.node_id) ? f.node_id : "flow";
     if (reveal(id)) render();
-    select(id, { focus: true });
+    select(id, { focus: true, picked: true });
     if (f?.field) panel.focusField(f.field);
   }
   function setFolds(ids) {
@@ -7240,6 +7251,7 @@ function createOutlineEditor(host, options = {}) {
     open: (ev) => {
       if (!inTree(ev) || ev.target.closest("button")) return false;
       const f = settingsHost.querySelector('.twm-flow-panel__fields input, .twm-flow-panel__fields select, .twm-flow-panel__fields textarea, .twm-flow-panel__fields [contenteditable="true"], .twm-flow-panel__fields button') || settingsHost.querySelector("[data-twm-flow-title]");
+      if (f) revealSettings();
       f?.focus({ preventScroll: false });
       return Boolean(f);
     },
@@ -7527,11 +7539,15 @@ function createOutlineEditor(host, options = {}) {
     setStatus(text) {
       statusEl.textContent = text ?? "";
     },
-    /** Select a step (unfolding the blocks around it, so it is on the screen), the flow, or nothing. */
+    /**
+     * Select a step (unfolding the blocks around it, so it is on the
+     * screen), the flow, or nothing — and, in a narrow editor whose panel
+     * is scrolled off, bring its settings on screen as a press does.
+     */
     select(id) {
       const want = id === null || id === void 0 ? "flow" : id;
       if (want !== "flow" && reveal(want)) render();
-      select(want);
+      select(want, { picked: true });
     },
     focus() {
       focusSelected();