flexdesk 0.16.0 → 0.17.0

package/src/ui/components/column_groups.js

@@ -0,0 +1,314 @@
+/**
+ * column_groups.js — STORY-0066. DataTable's COLUMN GROUPS (`columnGroups`).
+ * INTERNAL to the table: imported by `data_table.js` (and its span helpers by
+ * `crosstab.js`) only, and not part of the widgets barrel — it reads the
+ * table's private fields.
+ *
+ * A group is `{key, label?, columns: number[]}` (data column indices). The
+ * groups draw a second header row above the column headers, one cell a run of
+ * shown columns of the same group spanning them, a blank cell over the row
+ * number / select column and over any run of columns in no group.
+ *
+ * ── WHY A TABLE OF ITS OWN ────────────────────────────────────────────────
+ *
+ * The group row is a separate `<table class="twm-dt-groups">` in the header
+ * wrap, above the header table, rather than a first row of the header's
+ * `<thead>`. Every width pass of the table (`_measureNaturalWidths`,
+ * `_syncHeaderWidths`, the resize drag, `_applyTableWidth`) reads and writes
+ * the header rows CELL BY CELL at the column's index, and under
+ * `table-layout: fixed` the first row decides the track — a row of spanning
+ * cells in either place would misalign every column. So the group table has a
+ * `<colgroup>` of its own, one `<col>` a drawn column, and `align()` copies the
+ * header's widths, table width, layout and sideways scroll onto it after every
+ * pass that changes them (DataTable `_syncHeaderScroll`). The header wrap
+ * scrolls both tables together.
+ *
+ * ── AN EMPTY GROUP KEEPS A PLACEHOLDER COLUMN ─────────────────────────────
+ *
+ * A group with no columns would have no cell to draw, so it gets one drawn
+ * column of its own: a header cell `th.twm-dt-col--placeholder` (holding the
+ * group's add control under `onColumnAdd`), an empty filter cell, and an
+ * empty `td.twm-dt-cell--placeholder` in every body row. It is NO DATA
+ * column: `_dataIdxOfDom` answers null for it, it is not in a copy, the CSV,
+ * `ctx.colIdx` or the cell mode. It stands after the shown columns of the
+ * groups listed before it.
+ *
+ * A table without `columnGroups` never builds this.
+ */
+
+import { callOption, headerActionButton } from './header_actions.js';
+
+/**
+ * A row of spanning cells, cleaned (shared with STORY-0091's crosstab header
+ * rows): the data columns that exist, each column in the first cell that lists
+ * it, `key`, a label, and `index`, the cell's place in `spec` (the consumer's
+ * object is looked up there when drawing, never kept). Under `requireKey` a
+ * cell without a key is dropped; a cell without a label is labelled
+ * `defaultLabel(cell)`.
+ */
+export function normalizeSpans(spec, n, { requireKey = false, defaultLabel = () => '' } = {}) {
+    const taken = new Set();
+    const out = [];
+    (Array.isArray(spec) ? spec : []).forEach((g, index) => {
+        if (!g || (requireKey && g.key == null)) return;
+        const columns = [];
+        for (const c of Array.isArray(g.columns) ? g.columns : []) {
+            const i = Number(c);
+            if (!Number.isInteger(i) || i < 0 || i >= n || taken.has(i)) continue;
+            taken.add(i);
+            columns.push(i);
+        }
+        out.push({ key: g.key, label: g.label == null ? defaultLabel(g) : String(g.label), columns, index });
+    });
+    return out;
+}
+
+/** The groups the table was given, cleaned: a key each, the key as the label
+ *  when none is given. */
+function normalize(spec, n) {
+    return normalizeSpans(spec, n, { requireKey: true, defaultLabel: (g) => String(g.key) });
+}
+
+/** A spanning header cell over a run of columns in no group (or no cell). */
+export function blankSpanCell(span) {
+    const th = document.createElement('th');
+    th.className = 'twm-dt-group twm-dt-group--none';
+    th.colSpan = span;
+    return th;
+}
+
+/** A spanning header cell holding a label, its tooltip `title`. */
+export function labelSpanCell(span, label, title = label) {
+    const th = document.createElement('th');
+    th.className = 'twm-dt-group';
+    th.colSpan = span;
+    th.title = title;
+    const el = document.createElement('span');
+    el.className = 'twm-dt-group__label';
+    el.textContent = label;
+    th.appendChild(el);
+    return th;
+}
+
+export class ColumnGroups {
+    /** @param {import('./data_table.js').DataTable} table */
+    constructor(table) {
+        this.table = table;
+        this._memoKey = null;
+        this._memo = null;
+        this._el = null;
+    }
+
+    _cfg() {
+        return this.table.config;
+    }
+
+    /**
+     * The drawn columns after the lead, in order: `{col, group}` for a shown
+     * data column (`group` the index in `groups`, or null) and
+     * `{placeholder: true, group}` for an empty group's column. The data
+     * columns come in the order the table draws them (STORY-0086's
+     * `columnOrder`, hidden ones left out). Memoised on the groups' content,
+     * the column count and the drawn columns.
+     */
+    layout() {
+        const cfg = this._cfg();
+        const n = cfg.headers?.length || 0;
+        const shown = this.table._shownColumns();
+        const spec = Array.isArray(cfg.columnGroups) ? cfg.columnGroups : [];
+        const key = `${n}|${shown.join(',')}|${spec.map((g) => (g ? `${g.key}\x01${g.label}\x01${(g.columns || []).join(',')}` : '')).join('\x02')}`;
+        if (key === this._memoKey) return this._memo;
+
+        const groups = normalize(spec, n);
+        const groupOf = new Array(n).fill(null);
+        groups.forEach((g, gi) => { for (const c of g.columns) groupOf[c] = gi; });
+        const empty = groups.map((g) => g.columns.length === 0);
+        const placed = new Set();
+        const slots = [];
+        const placeEmptyBefore = (gi) => {
+            for (let e = 0; e < gi; e++) {
+                if (empty[e] && !placed.has(e)) { placed.add(e); slots.push({ placeholder: true, group: e }); }
+            }
+        };
+        for (const c of shown) {
+            const gi = groupOf[c];
+            if (gi !== null) placeEmptyBefore(gi);
+            slots.push({ col: c, group: gi });
+        }
+        placeEmptyBefore(groups.length);
+
+        const slotOfCol = new Map();
+        slots.forEach((s, i) => { if (!s.placeholder) slotOfCol.set(s.col, i); });
+        const placeholders = slots.filter((s) => s.placeholder).length;
+        this._memoKey = key;
+        this._memo = { groups, slots, slotOfCol, placeholders };
+        return this._memo;
+    }
+
+    /** How many placeholder columns are drawn. */
+    placeholderCount() {
+        return this.layout().placeholders;
+    }
+
+    /** A shown data column's place after the lead, or -1 when the layout
+     *  has no placeholder (the table's own arithmetic then holds). */
+    slotOf(colIdx) {
+        const l = this.layout();
+        if (!l.placeholders) return -1;
+        return l.slotOfCol.has(colIdx) ? l.slotOfCol.get(colIdx) : -1;
+    }
+
+    /** What the drawn column `i` after the lead is: the data column, null for
+     *  a placeholder or past the end, `undefined` when the layout has no
+     *  placeholder (the table's own arithmetic then holds). */
+    slotAt(i) {
+        const l = this.layout();
+        if (!l.placeholders) return undefined;
+        const s = l.slots[i];
+        return s && !s.placeholder ? s.col : null;
+    }
+
+    /** Part of the table's column signature: where the placeholders stand. */
+    sig() {
+        const l = this.layout();
+        if (!l.placeholders) return '';
+        return `|g${l.slots.map((s, i) => (s.placeholder ? i : '')).filter((x) => x !== '').join(',')}`;
+    }
+
+    /** The drawn positions (after the lead) of the placeholders, ascending,
+     *  with their groups. */
+    _placeholderSlots() {
+        const out = [];
+        this.layout().slots.forEach((s, i) => { if (s.placeholder) out.push({ at: i, group: s.group }); });
+        return out;
+    }
+
+    /** Put the placeholders' cells into a drawn row whose cells are the lead
+     *  and the shown data columns, in order. */
+    _insert(tr, make) {
+        const lead = this.table._lead().all;
+        for (const { at, group } of this._placeholderSlots()) {
+            const ref = tr.children[lead + at] || null;
+            tr.insertBefore(make(this.layout().groups[group]), ref);
+        }
+    }
+
+    /** STORY-0066. A body row gets an empty cell under each placeholder. */
+    fillRow(tr) {
+        if (!this.placeholderCount()) return;
+        this._insert(tr, () => {
+            const td = document.createElement('td');
+            td.className = 'twm-dt-cell--placeholder';
+            return td;
+        });
+    }
+
+    /**
+     * After the header is built and in the header table: the placeholders'
+     * header and filter cells, and the group table above the header table.
+     */
+    decorate(headerWrap, headerTable) {
+        this._el = null;
+        if (!headerWrap || !headerTable) return;
+        const thead = headerTable.querySelector('thead');
+        const labelRow = thead?.querySelector('tr');
+        if (!labelRow) return;
+        if (this.placeholderCount()) {
+            this._insert(labelRow, (g) => this._placeholderHead(g));
+            for (const tr of thead.querySelectorAll('tr.twm-data-table__filter-row')) {
+                this._insert(tr, () => {
+                    const th = document.createElement('th');
+                    th.className = 'data-table__filter-cell data-table__filter-cell--empty twm-dt-col--placeholder';
+                    return th;
+                });
+            }
+        }
+        const groupTable = this._buildGroupTable(headerTable);
+        headerWrap.insertBefore(groupTable, headerTable);
+        this._el = groupTable;
+        this.align();
+    }
+
+    _placeholderHead(group) {
+        const th = document.createElement('th');
+        th.className = 'text twm-dt-col--placeholder';
+        if (typeof this._cfg().onColumnAdd === 'function') {
+            th.appendChild(this._addButton(group));
+        }
+        return th;
+    }
+
+    _addButton(group) {
+        return headerActionButton('twm-dt-group__add', { icon: 'add', title: `Add column to ${group.label}` },
+                                  () => callOption(this._cfg(), 'onColumnAdd', group.key));
+    }
+
+    _buildGroupTable(headerTable) {
+        const { groups, slots } = this.layout();
+        const lead = this.table._lead().all;
+        const table = document.createElement('table');
+        table.className = `${headerTable.className} twm-dt-groups`;
+        const colgroup = document.createElement('colgroup');
+        for (let i = 0; i < lead + slots.length; i++) colgroup.appendChild(document.createElement('col'));
+        table.appendChild(colgroup);
+        const thead = document.createElement('thead');
+        const tr = document.createElement('tr');
+        tr.className = 'twm-dt-group-row';
+        if (lead) {
+            const th = document.createElement('th');
+            th.className = 'twm-dt-group twm-dt-group--lead';
+            th.colSpan = lead;
+            tr.appendChild(th);
+        }
+        // Runs of the same group (or of no group) are one cell.
+        let i = 0;
+        while (i < slots.length) {
+            const gi = slots[i].group;
+            let j = i + 1;
+            while (j < slots.length && slots[j].group === gi) j++;
+            tr.appendChild(gi === null ? blankSpanCell(j - i) : this._groupCell(groups[gi], j - i, slots[i].placeholder));
+            i = j;
+        }
+        thead.appendChild(tr);
+        table.appendChild(thead);
+        return table;
+    }
+
+    _groupCell(group, span, empty) {
+        const th = labelSpanCell(span, group.label);
+        if (empty) th.classList.add('twm-dt-group--empty');
+
+        const actions = document.createElement('span');
+        actions.className = 'twm-dt-group__actions';
+        const cfg = this._cfg();
+        // The consumer's group object from the live config: the layout is
+        // memoised on key, label and columns, so a group whose other fields
+        // changed is still asked about with its current object.
+        const items = callOption(cfg, 'groupActions', cfg.columnGroups[group.index], { key: group.key, columns: group.columns.slice(), table: this.table });
+        for (const item of Array.isArray(items) ? items.filter(Boolean) : []) {
+            actions.appendChild(headerActionButton('twm-dt-group__action', item,
+                                                   () => callOption(cfg, 'onGroupAction', item.action, group.key)));
+        }
+        if (typeof cfg.onColumnAdd === 'function') actions.appendChild(this._addButton(group));
+        if (actions.childNodes.length) th.appendChild(actions);
+        return th;
+    }
+
+    /** The group table follows the header table: the same column widths,
+     *  table width, layout and sideways offset. */
+    align() {
+        const groupTable = this._el;
+        const headerTable = this.table._headerTableEl;
+        if (!groupTable || !headerTable) return;
+        const labelRow = headerTable.querySelector('thead > tr');
+        const cols = groupTable.querySelector('colgroup')?.children || [];
+        for (let i = 0; i < cols.length; i++) {
+            const th = labelRow?.children[i];
+            const w = th ? parseFloat(th.style.width) : NaN;
+            cols[i].style.width = Number.isFinite(w) ? `${w}px` : '';
+        }
+        groupTable.style.width = headerTable.style.width;
+        groupTable.style.tableLayout = headerTable.style.tableLayout;
+        groupTable.style.transform = headerTable.style.transform;
+    }
+}

package/src/ui/components/column_order.js

@@ -0,0 +1,142 @@
+/**
+ * column_order.js — STORY-0086. The order DataTable draws its data columns in
+ * (`reorderable`, `columnOrder`, `moveColumn`, `getColumnOrder`), and the drag
+ * on the header that changes it. Internal to the table, like `cell_grid.js`.
+ *
+ * ══ AN ORDER IS A LIST OF DATA INDICES ══════════════════════════════════
+ *
+ * The order is every data column's index (hidden ones included), in the order
+ * shown: `[0, 3, 1, 2]` draws column 3 second. Everything else the table keeps
+ * by column — `hiddenColumns`, the sort, the filters, `renderCell`'s `colIdx`,
+ * the cell mode's `col` — stays a data index and so stays on its column. Only
+ * what is BY DRAWN POSITION (the cells of a row, the widths) follows the order.
+ *
+ * A table with no order asked for (`null`) draws 0, 1, 2, … as in 0.16. An
+ * order that is not a permutation of today's columns — a saved one from when
+ * the table had a different number of columns — is no order: the natural one
+ * is drawn.
+ */
+
+/** Whether `order` is a permutation of `0..n-1`. */
+export function isColumnOrder(order, n) {
+    if (!Array.isArray(order) || order.length !== n) return false;
+    const seen = new Set();
+    for (const c of order) {
+        if (!Number.isInteger(c) || c < 0 || c >= n || seen.has(c)) return false;
+        seen.add(c);
+    }
+    return true;
+}
+
+/** `0..n-1`. */
+export function naturalOrder(n) {
+    return Array.from({ length: Math.max(0, n) }, (_, i) => i);
+}
+
+/**
+ * The data indices of a row of `count` cells in the order drawn: `order`
+ * where it holds, and any cell past the headers (a row longer than them) after
+ * it, as 0.16 drew them.
+ */
+export function cellOrder(order, count) {
+    if (!order) return naturalOrder(count);
+    const out = order.filter((c) => c < count);
+    for (let c = order.length; c < count; c++) out.push(c);
+    return out;
+}
+
+/** `order` with the column at position `from` taken out and put back at
+ *  position `to` (positions in `order`). A copy; `order` is not changed. */
+export function moveInOrder(order, from, to) {
+    const next = order.slice();
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}
+
+/**
+ * The header drag. Every data column's header cell is draggable; dropping one
+ * on another data column's header moves it to that column's place. A press
+ * that starts on a resize grip is the resize's, never a drag. The row-number
+ * and select columns are no data columns: they do not drag and take no drop,
+ * so nothing lands in front of them.
+ */
+export class ColumnReorder {
+    /** @param {import('./data_table.js').DataTable} table */
+    constructor(table) {
+        this.table = table;
+        /** The data column being dragged, or null. */
+        this.dragging = null;
+        /** Whether the last press on a header cell was on its resize grip. */
+        this.onGrip = false;
+    }
+
+    /** Wire the header row of a fresh render. Its cells are new each render,
+     *  so nothing needs taking off. */
+    install(headRow) {
+        if (!headRow) return;
+        [...headRow.children].forEach((th, domIdx) => {
+            const col = this.table._dataIdxOfDom(domIdx);
+            if (col === null) return;
+            th.draggable = true;
+            th.classList.add('twm-dt-col--movable');
+            // Capture: the grip stops its own mousedown, so a listener on the
+            // way up would never hear it.
+            th.addEventListener('mousedown', (ev) => {
+                this.onGrip = !!ev.target?.closest?.('.twm-dt-col-resizer');
+            }, true);
+            th.addEventListener('dragstart', (ev) => {
+                if (this.onGrip || ev.target?.closest?.('.twm-dt-col-resizer')) {
+                    ev.preventDefault();
+                    return;
+                }
+                this.dragging = col;
+                try {
+                    ev.dataTransfer?.setData('text/plain', String(col));
+                    if (ev.dataTransfer) ev.dataTransfer.effectAllowed = 'move';
+                } catch (_) { /* a drag with no data transfer */ }
+                th.classList.add('twm-dt-col--dragging');
+            });
+            th.addEventListener('dragover', (ev) => {
+                if (this.dragging === null || this.dragging === col) return;
+                ev.preventDefault();               // a drop is welcome here
+                if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+                // Moved right it lands AFTER the column it is dropped on.
+                const order = this.table.getColumnOrder();
+                th.classList.add('twm-dt-col--drop');
+                th.classList.toggle('twm-dt-col--drop-after', order.indexOf(col) > order.indexOf(this.dragging));
+            });
+            th.addEventListener('dragleave', () => th.classList.remove('twm-dt-col--drop', 'twm-dt-col--drop-after'));
+            th.addEventListener('drop', (ev) => {
+                th.classList.remove('twm-dt-col--drop', 'twm-dt-col--drop-after');
+                const from = this.dragging;
+                this.dragging = null;
+                if (from === null || from === col) return;
+                ev.preventDefault();
+                const order = this.table.getColumnOrder();
+                this.table.moveColumn(order.indexOf(from), order.indexOf(col));
+            });
+            th.addEventListener('dragend', () => {
+                th.classList.remove('twm-dt-col--dragging');
+                this.dragging = null;
+            });
+        });
+    }
+
+    /** "Move left" / "Move right" for the header menu of data column `col`:
+     *  past the shown column next to it. */
+    menuItems(col) {
+        const shown = this.table._shownColumns();
+        const at = shown.indexOf(col);
+        if (at < 0) return [];
+        const order = this.table.getColumnOrder();
+        const step = (to) => () => this.table.moveColumn(order.indexOf(col), order.indexOf(to));
+        return [
+            { label: 'Move left', icon: 'arrow_back', action: 'move-left', disabled: at === 0,
+              onChoose: at === 0 ? undefined : step(shown[at - 1]) },
+            { label: 'Move right', icon: 'arrow_forward', action: 'move-right',
+              disabled: at === shown.length - 1,
+              onChoose: at === shown.length - 1 ? undefined : step(shown[at + 1]) },
+        ];
+    }
+}

package/src/ui/components/computing_status_window.js

@@ -1,53 +1,102 @@
 /**
  * Computing Status Window
  *
- * Lightweight ManagedWindow that shows a spinner and status message
- * while a long-running computation is in progress. Returns a handle
- * with update() and close() methods.
+ * Lightweight ManagedWindow that shows a spinner (or a progress bar) and a
+ * status message while a long-running computation is in progress. Returns a
+ * handle with update(), setProgress(), setStep(), complete(), cancelled(),
+ * close() and a `result` promise.
  *
  * Optionally shows a Cancel button when an onCancel callback is provided.
+ * Only one is open at a time: opening another closes the first, which then
+ * settles as cancelled (its onCancel is not called).
  */
 
 import { ManagedWindow } from './managed_window.js';
+import { mountJobProgress } from './job_progress.js';
 
 let _activeWindow = null;
 
 /**
  * Show a computing status window.
+ *
+ * `result` settles once: `complete({ok, message})` gives `done` or `error`
+ * (the window stays, with a Close button, until closed), `cancelled()` gives
+ * `cancelled`, and so does closing the window while it runs (by its ×,
+ * Escape, `close()` or opening another). Closing never calls `onCancel`: only
+ * the Cancel button does. `progress` and `steps` are fixed when the window
+ * opens: `setProgress` throws if it was opened without `progress`, and
+ * `setStep` if it was opened without `steps`.
+ *
  * @param {Object} options
  * @param {string} [options.title='Computing...'] - Window title
- * @param {string} [options.message=''] - Status message below spinner
+ * @param {string} [options.message=''] - Status message below spinner (markup; `update` takes text)
  * @param {string} [options.icon='hourglass_top'] - Material icon name
  * @param {Function} [options.onCancel] - If provided, shows a Cancel button. Called once when clicked.
- * @returns {{ update(msg: string): void, close(): void }}
+ * @param {boolean|Object} [options.progress] - A ProgressBar in place of the spinner: `true` or its options.
+ * @param {Array} [options.steps] - StepProgress steps, shown above the message.
+ * @returns {{ update(msg: string): void, setProgress(next: number|Object): void,
+ *   setStep(which: string|number, opts?: {pass?: number, passes?: number}): void,
+ *   complete(result: {ok: boolean, message?: string}): void, cancelled(msg?: string): void,
+ *   close(): void, result: Promise<{status: 'done'|'error'|'cancelled', message: string}> }}
  */
-export function showComputingWindow({ title = 'Computing...', message = '', icon = 'hourglass_top', onCancel } = {}) {
+export function showComputingWindow({
+    title = 'Computing...', message = '', icon = 'hourglass_top', onCancel,
+    progress = null, steps = null,
+} = {}) {
     if (_activeWindow) {
         _activeWindow.close();
         _activeWindow = null;
     }
 
+    let finished = false;
+    let settle;
+    const result = new Promise((resolve) => { settle = resolve; });
+
     const content = document.createElement('div');
     content.className = 'twm-computing-status';
-    content.innerHTML = `
-        <div class="twm-computing-status__spinner"></div>
-        <div class="twm-computing-status__message">${message}</div>
-    `;
+    const spinnerEl = document.createElement('div');
+    spinnerEl.className = 'twm-computing-status__spinner';
+    const msgEl = document.createElement('div');
+    msgEl.className = 'twm-computing-status__message';
+    // The opening message is markup, as it always was; every later one is text.
+    msgEl.innerHTML = message;
+    content.appendChild(spinnerEl);
+    const job = mountJobProgress(content, { progress, steps, spinner: spinnerEl });
+    content.appendChild(msgEl);
 
+    let cancelBtn = null;
     if (typeof onCancel === 'function') {
-        const btn = document.createElement('button');
-        btn.className = 'twm-computing-status__cancel-btn';
-        btn.textContent = 'Cancel';
-        btn.addEventListener('click', () => {
-            btn.disabled = true;
-            const msgEl = content.querySelector('.twm-computing-status__message');
-            if (msgEl) msgEl.textContent = 'Cancelling...';
+        cancelBtn = document.createElement('button');
+        cancelBtn.className = 'twm-computing-status__cancel-btn';
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.addEventListener('click', () => {
+            cancelBtn.disabled = true;
+            msgEl.textContent = 'Cancelling...';
             onCancel();
         }, { once: true });
-        content.appendChild(btn);
+        content.appendChild(cancelBtn);
     }
 
-    _activeWindow = new ManagedWindow({
+    const closeBtn = document.createElement('button');
+    closeBtn.type = 'button';
+    closeBtn.className = 'twm-computing-status__cancel-btn twm-computing-status__close-btn';
+    closeBtn.textContent = 'Close';
+    closeBtn.hidden = true;
+    content.appendChild(closeBtn);
+
+    const finish = (status, text) => {
+        finished = true;
+        spinnerEl.hidden = true;
+        if (cancelBtn) cancelBtn.hidden = true;
+        msgEl.textContent = text;
+        msgEl.classList.toggle('is-ok', status === 'done');
+        msgEl.classList.toggle('is-err', status === 'error');
+        msgEl.classList.toggle('is-cancelled', status === 'cancelled');
+        job.finish(status);
+        settle({ status, message: text });
+    };
+
+    const win = new ManagedWindow({
         id: 'computing-status-window',
         title,
         icon,
@@ -55,21 +104,45 @@ export function showComputingWindow({ title = 'Computing...', message = '', icon
         minWidth: 320,
         minHeight: 140,
         defaultWidth: 380,
-        defaultHeight: onCancel ? 190 : 160,
+        defaultHeight: (onCancel ? 190 : 160) + (job.bar ? 30 : 0) + (job.steps ? 40 : 0),
         canMinimize: true,
         canMaximize: false,
         canResize: false,
         canDrag: true,
         modal: false,
-        onClose: () => { _activeWindow = null; },
+        onClose: () => {
+            if (_activeWindow === win) _activeWindow = null;
+            if (finished) return;
+            finish('cancelled', 'Cancelled.');
+        },
     });
-
-    _activeWindow.show();
+    closeBtn.addEventListener('click', () => win.close());
+    _activeWindow = win;
+    win.show();
 
     return {
+        result,
         update(msg) {
-            const el = content.querySelector('.twm-computing-status__message');
-            if (el) el.textContent = msg;
+            if (finished) return;
+            msgEl.textContent = msg;
+        },
+        setProgress(next) {
+            if (finished) return;
+            job.setProgress(next);
+        },
+        setStep(which, opts) {
+            if (finished) return;
+            job.setStep(which, opts);
+        },
+        complete(res) {
+            if (finished) return;
+            finish(res?.ok ? 'done' : 'error', res?.message || '');
+            closeBtn.hidden = false;
+        },
+        cancelled(msg) {
+            if (finished) return;
+            finish('cancelled', msg || 'Cancelled.');
+            closeBtn.hidden = false;
         },
         close() {
             if (_activeWindow) {