flexdesk 0.18.0 → 0.18.2

package/src/ui/components/chat_shell.js

@@ -703,13 +703,18 @@ export function mountChatShell(host, {
         changed();
     }
 
-    /** Stops the reply: the chat can send again at once, and that send waits for `runEnding`. */
+    /**
+     * Stops the reply: the chat can send again at once. That send waits for
+     * `runEnding`, unless this turn was itself still waiting for it: the person
+     * has now said twice that they will not wait, so the next send goes out.
+     */
     function cancel() {
         if (!turn) return false;
         const { request, sent } = turn;
         closeReply('stopped');
         machine.cancel();
         if (sent) callCancel(request);
+        else runEnding = null;
         syncWelcome();
         changed();
         return true;
@@ -789,6 +794,7 @@ export function mountChatShell(host, {
     const modelBtn = el('button', 'twm-chat-shell__model-btn');
     modelBtn.type = 'button';
     modelBtn.setAttribute('aria-haspopup', 'menu');
+    modelBtn.setAttribute('aria-expanded', 'false');
     const modelDot = el('span', 'twm-chat-shell__status');
     const modelLabel = el('span', 'twm-chat-shell__model-label');
     modelBtn.append(modelDot, modelLabel, icon('expand_more', 'twm-chat-shell__model-chevron'));

package/src/ui/components/context_menu.js

@@ -37,6 +37,7 @@ import { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../utils/menu
 
 let _activeMenu = null;
 let _returnFocusTo = null;
+let _armTimer = null;
 
 export function showContextMenu(x, y, items, onAction) {
     hideContextMenu();
@@ -104,8 +105,11 @@ export function showContextMenu(x, y, items, onAction) {
 
     // Close on outside click / scroll / Escape. A scroll INSIDE the menu is
     // the menu being read, not the page moving under it.
-    setTimeout(() => {
-        document.addEventListener('mousedown', _outsideHandler, { once: true, capture: true });
+    // Armed a tick later, so the press that opened it is not its first outside
+    // press, and held until the menu closes: a press inside (a separator, the
+    // padding, a disabled row) closes nothing and must leave the next one heard.
+    _armTimer = setTimeout(() => {
+        document.addEventListener('mousedown', _outsideHandler, { capture: true });
     }, 0);
     document.addEventListener('keydown', _keyHandler);
     window.addEventListener('scroll', _scrollHandler, { capture: true });
@@ -122,6 +126,8 @@ export function hideContextMenu() {
     _activeMenu.remove();
     _activeMenu = null;
     _returnFocusTo = null;
+    clearTimeout(_armTimer);
+    document.removeEventListener('mousedown', _outsideHandler, { capture: true });
     document.removeEventListener('keydown', _keyHandler);
     window.removeEventListener('scroll', _scrollHandler, { capture: true });
     // Only take focus back if the menu still had it. A click elsewhere has

package/src/ui/components/filter_builder.js

@@ -12,9 +12,9 @@
  * the node and redraws nothing, so the caret survives.
  *
  * WHAT IT DOES NOT REWRITE. A condition on a field the catalogue does not know, an
- * operator it does not know and a node it cannot read stay exactly as they are
- * until someone changes or removes them: the selects show them as their own marked
- * entry and the value is read-only.
+ * operator it does not know or its field does not offer, and a node it cannot read
+ * stay exactly as they are until someone changes or removes them: the selects show
+ * them as their own entry and the value is read-only.
  */
 
 import { cloneFilter, coerceFilterValue, emptyFilter, filterOptions } from './filter_model.js';
@@ -215,21 +215,25 @@ export function createFilterBuilder(host, { model, value = null, onChange = null
     function operatorChoices(clause) {
         const offered = model.operatorsFor(clause.field);
         const held = model.operatorById(clause.op);
-        const list = held && model.fieldByKey(clause.field) && !offered.includes(held)
-            ? [...offered, held] : offered;
+        const list = held && !offered.includes(held) ? [...offered, held] : offered;
         return list.map((op) => ({ value: op.id, label: op.label }));
     }
 
     function clauseEl(clause) {
         const row = el('div', 'twm-filter-builder__row');
+        const known = !!model.fieldByKey(clause.field);
+        const unknownWords = `⚠ unknown field “${model.unknownName(String(clause.field ?? ''))}”`;
 
         const fieldSelect = selectBox(fieldChoices(clause.field), clause.field, {
             label: 'Field',
-            className: `${SELECT_CLASS} twm-filter-builder__select--field`,
-            notFound: () => `⚠ unknown field “${model.unknownName(String(clause.field ?? ''))}”`,
+            className: `${SELECT_CLASS} twm-filter-builder__select--field${known ? '' : ' twm-filter-builder__select--unknown'}`,
+            notFound: () => unknownWords,
         });
+        // Its width follows the words, and when the row cannot spare that the
+        // tooltip still says the whole name.
+        if (!known) fieldSelect.box.title = unknownWords;
         fieldSelect.box.addEventListener('change', () => {
-            const next = model.newClause(fieldSelect.valueOf());
+            const next = model.moveClause(clause, fieldSelect.valueOf());
             for (const key of ['op', 'value']) delete clause[key];
             Object.assign(clause, next);
             restructure(clause, 'field');
@@ -269,7 +273,9 @@ export function createFilterBuilder(host, { model, value = null, onChange = null
     function drawValue(clause, cellEl, cell, drawCell) {
         const field = model.fieldByKey(clause.field);
         const op = model.operatorById(clause.op);
-        if (!field || !op) {
+        // A box drawn for an operator it was not made for would show nothing, or
+        // a field's own type, over a value that is still what Apply returns.
+        if (!field || !op || (op.arity && !model.operatorsFor(clause.field).includes(op))) {
             if (clause.value !== undefined) {
                 cellEl.appendChild(el('span', 'twm-filter-builder__carried', JSON.stringify(clause.value)));
             }
@@ -327,6 +333,7 @@ export function createFilterBuilder(host, { model, value = null, onChange = null
         if (numeric) {
             input.type = 'number';
             input.step = 'any';
+            if (op.input === 'days') input.min = '0';
         } else if (field.type === 'date') {
             input.type = field.time ? 'datetime-local' : 'date';
         } else {
@@ -508,12 +515,13 @@ function createIconPicker({ value, options, onChange }) {
  * @param {object}   options.model      from `createFilterModel`
  * @param {object}   [options.value]    the expression to edit (copied; Cancel is lossless)
  * @param {string}   [options.seedField]  a field key: a new empty condition on it is
- *   added, so "filter by this" lands on a form about that field
+ *   added, so "filter by this" lands on a form about that field. Beside a negated
+ *   root, not inside it: a new condition narrows what the filter already says.
  * @param {string}   [options.title]
  * @param {string}   [options.icon]     the window's icon
  * @param {HTMLElement} [options.head]  drawn above the conditions
  * @param {{value?: string, label?: string, placeholder?: string, required?: boolean}} [options.name]
- *   adds a name box; the result carries `name`
+ *   adds a name box, which opens with its text selected; the result carries `name`
  * @param {{value?: string, options: string[]}} [options.iconChoice]
  *   adds an icon picker over those Material Symbols names; the result carries `icon`
  * @param {(host: HTMLElement, state: {expr: object, sentence: string, signal: AbortSignal}) => void} [options.preview]
@@ -521,10 +529,13 @@ function createIconPicker({ value, options, onChange }) {
  *   while the expression can be submitted. `signal` aborts when this drawing is
  *   superseded or the dialog closes, for a preview that asks a server.
  * @param {boolean}  [options.requireValid]  submit only a valid expression (default
- *   true); its errors are listed. False lets one with an unknown field through.
+ *   true); its errors are listed. False lets one with an unknown field through. A
+ *   range with one end filled is refused either way (`model.partialRanges`).
  * @param {boolean}  [options.prune]    drop half-built rows from what is validated,
  *   previewed and submitted (`model.pruneFilter`); `expr` is null when nothing is left
  * @param {boolean}  [options.confirmDiscard]  ask before closing with unsaved changes
+ * @param {boolean}  [options.dismissOnBackdrop]  a click on the dimmed page beside the
+ *   dialog dismisses it, as Esc does (`confirmDiscard` still asks)
  * @param {string}   [options.submitLabel]
  * @param {(result: object) => any} [options.onSubmit]  may be async: until it settles
  *   every button is off and Esc and the X do nothing, so the answer is what happened.
@@ -532,8 +543,9 @@ function createIconPicker({ value, options, onChange }) {
  * @param {string}   [options.clearLabel]  adds a button answering `{ action: 'clear', expr: null }`
  * @param {Array<{label: string, value: string, danger?: boolean, icon?: string,
  *   confirm?: object, run?: (result: object) => any}>} [options.actions]
- *   more buttons, before Cancel. `confirm` is `openConfirm`'s options, asked first;
- *   `run` is like `onSubmit`.
+ *   more buttons, before Cancel. `confirm` is `openConfirm`'s options, asked first; its
+ *   `message` may be `(result) => string`, computed when it is asked, so it can quote
+ *   what was typed. `run` is like `onSubmit`.
  * @param {number}   [options.width]
  * @param {number}   [options.height]
  * @returns {Promise<{action: string, expr: object|null, name?: string, icon?: string}|null>}
@@ -542,16 +554,17 @@ function createIconPicker({ value, options, onChange }) {
 export async function openFilterDialog({
     model, value = null, seedField = null, title = 'Filter', icon = 'filter_alt', head = null,
     name = null, iconChoice = null, preview = null,
-    requireValid = true, prune = false, confirmDiscard = false,
+    requireValid = true, prune = false, confirmDiscard = false, dismissOnBackdrop = false,
     submitLabel = 'Apply', onSubmit = null, clearLabel = null, actions = [],
     width = preview ? 920 : 760, height = 560,
 } = {}) {
     if (!model) throw new Error('[FilterDialog] needs a filter model');
 
-    const start = asRoot(value);
-    if (seedField) {
-        const seeded = model.newClause(seedField);
-        if (seeded) start.children.push(seeded);
+    let start = asRoot(value);
+    const seeded = seedField ? model.newClause(seedField) : null;
+    if (seeded) {
+        if (start.negate) start = { kind: 'group', op: 'AND', children: [start, seeded] };
+        else start.children.push(seeded);
     }
 
     const content = el('div', 'twm-filter-dialog');
@@ -630,10 +643,14 @@ export async function openFilterDialog({
         const expr = builder.getValue();
         return prune ? model.pruneFilter(expr) : expr;
     }
-    const checkOf = (expr) => (expr ? model.validateFilter(expr) : { ok: true, errors: [] });
+    /** Why `expr` may not be submitted. */
+    const refusals = (expr) => {
+        if (!expr) return [];
+        return requireValid ? model.validateFilter(expr).errors : model.partialRanges(expr);
+    };
 
     const nameMissing = () => !!nameInput && name.required !== false && !nameInput.value.trim();
-    const canSubmit = () => !busy && !nameMissing() && (!requireValid || checkOf(current()).ok);
+    const canSubmit = () => !busy && !nameMissing() && !refusals(current()).length;
 
     function refresh() {
         if (!controls) return;
@@ -653,11 +670,11 @@ export async function openFilterDialog({
 
     function drawPreview() {
         const expr = current();
-        const { ok, errors } = checkOf(expr);
+        const errors = refusals(expr);
         previewRun?.abort();
         previewRun = null;
-        const blocked = requireValid && !ok;
-        showErrors(blocked ? errors : []);
+        const blocked = errors.length > 0;
+        showErrors(errors);
         if (!preview) return;
         slot.hidden = blocked;
         if (blocked) {
@@ -702,13 +719,17 @@ export async function openFilterDialog({
         showFailure('');
         busy = true;
         try {
-            // Its question stacks over this window, so the buttons stay as they
-            // are until it is answered and focus has a button to come back to.
-            if (action.confirm && !await openConfirm(action.confirm)) return;
-            refresh();
             const result = { action: action.value, expr: action.value === CLEAR ? null : current() };
             if (nameInput) result.name = nameInput.value.trim();
             if (picker) result.icon = picker.value();
+            // Its question stacks over this window, so the buttons stay as they
+            // are until it is answered and focus has a button to come back to.
+            if (action.confirm) {
+                const { message } = action.confirm;
+                const asked = typeof message === 'function' ? { ...action.confirm, message: message(result) } : action.confirm;
+                if (!await openConfirm(asked)) return;
+            }
+            refresh();
             await action.run?.(result);
             close(result);
         } catch (err) {
@@ -749,9 +770,13 @@ export async function openFilterDialog({
         height,
         maximizable: true,
         beforeClose: mayDiscard,
+        dismissOnBackdrop,
         onMount: (_body, modalControls) => {
             controls = modalControls;
             refresh();
+            // Editing a name usually means replacing it, and " (copy)" always does.
+            nameInput?.focus();
+            nameInput?.select();
         },
     });
     drawPreview();

package/src/ui/components/filter_model.js

@@ -319,6 +319,34 @@ export function createFilterModel({
         return clause;
     }
 
+    /** Does `clause`'s value still mean something on `field`, under `op`? */
+    function valueFits(field, op, value) {
+        const errors = [];
+        validateClause({ field: field.key, op: op.id, value }, errors, '');
+        if (errors.length) return false;
+        // A list the editor offers: a text field's single value is typed freely.
+        const options = op.multi || field.type === 'enum' ? filterOptions(field) : [];
+        return !options.length || arr(value).every((v) => options.some((o) => o.value === v));
+    }
+
+    /**
+     * `clause` moved to the field `key`: its operator stays when that field offers
+     * it, and its value when the value still fits; otherwise they start as
+     * `newClause(key)`'s do. Null when the catalogue has no such field.
+     */
+    function moveClause(clause, key) {
+        const next = newClause(key);
+        if (!next) return null;
+        const field = byKey.get(key);
+        const op = operatorsFor(key).find((o) => o.id === clause.op);
+        if (!op) return next;
+        next.op = op.id;
+        delete next.value;
+        const value = op.arity && valueFits(field, op, clause.value) ? clause.value : defaultValue(field, op);
+        if (value !== undefined) next.value = value;
+        return next;
+    }
+
     /* Compiled per type so a clause does its type dispatch ONCE, not on every row. */
     function compileClause(clause) {
         const field = byKey.get(clause?.field);
@@ -475,35 +503,50 @@ export function createFilterModel({
             const [a, b] = arr(value);
             return `${shown(a)} and ${shown(b)}`;
         }
-        return shown(first(value));
+        // Every value of a list, even under an operator that takes one: a saved
+        // or foreign condition may hold several, and the sentence must not hide them.
+        return Array.isArray(value) ? value.map(shown).join(', ') : shown(value);
     }
 
-    function describeNode(node, depth, format) {
+    function describeNode(node, depth, opts) {
         if (!node) return '';
         if (node.kind === 'clause') {
             const field = byKey.get(node.field);
+            const op = catalogue.get(node.op) ?? { label: node.op ?? '', arity: 1 };
             // A field that has gone is SAID, so a filter matching nothing reads
-            // as broken, not as empty.
-            if (!field) return `⚠ unknown field “${unknownName(String(node.field ?? ''))}”`;
-            const op = catalogue.get(node.op);
-            if (!op) return `${field.label} ${node.op ?? ''}`.trim();
-            const val = describeValue(field, op, node.value, format);
-            return val ? `${field.label} ${op.label} ${val}` : `${field.label} ${op.label}`;
+            // as broken, not as empty, and what it asked stays readable.
+            const subject = field ? field.label : `⚠ unknown field “${unknownName(String(node.field ?? ''))}”`;
+            const value = describeValue(field, op, node.value, field ? opts.formatValue : null);
+            return [subject, op.label, value].filter(Boolean).join(' ');
         }
         if (node.kind !== 'group') return `⚠ ${JSON.stringify(node.node ?? node)}`;
         const parts = (Array.isArray(node.children) ? node.children : [])
-            .map((c) => describeNode(c, depth + 1, format)).filter(Boolean);
+            .map((c) => describeNode(c, depth + 1, opts)).filter(Boolean);
         if (!parts.length) return emptyMatches(node) !== !!node.negate ? 'everything' : 'nothing';
         const joined = parts.join(String(node.op || 'AND').toUpperCase() === 'OR' ? ' OR ' : ' AND ');
+        const many = parts.length > 1;
+        if (opts.groupBrackets) {
+            const group = many ? `(${joined})` : joined;
+            return node.negate ? `NOT ${group}` : group;
+        }
         if (node.negate) return `NOT (${joined})`;
-        return depth > 0 && parts.length > 1 ? `(${joined})` : joined;
+        return depth > 0 && many ? `(${joined})` : joined;
     }
 
     /**
      * One line of words. `formatValue(value, field)` names each value (a key shown
-     * as a person's name, say); without it a value is shown as itself.
+     * as a person's name, say); without it a value is shown as itself. A condition
+     * on a field the catalogue does not know says so, with its operator and value,
+     * and its value is shown as itself.
+     *
+     * Brackets go where the sentence would misread without them: a nested group of
+     * two or more, and whatever a NOT covers. `groupBrackets` brackets every group of
+     * two or more, the root too, and leaves a NOT of one thing unbracketed: `(A AND B)`,
+     * `NOT A`, for a surface that reads a group by its brackets.
      */
-    const describeFilter = (expr, { formatValue = null } = {}) => describeNode(expr, 0, formatValue);
+    const describeFilter = (expr, { formatValue = null, groupBrackets = false } = {}) => (
+        describeNode(expr, 0, { formatValue, groupBrackets })
+    );
 
     /** The field keys an expression names that the catalogue does not know. */
     function unknownFields(expr) {
@@ -535,13 +578,13 @@ export function createFilterModel({
         }
         if (op.arity === 0) return;
         const say = (what) => errors.push(`${field.label} ${op.label}: ${what}`);
-        if (op.multi) {
-            if (!Array.isArray(node.value) || node.value.length === 0) say('pick at least one value');
+        if (op.multi && (!Array.isArray(node.value) || node.value.length === 0)) {
+            say('pick at least one value');
             return;
         }
-        const values = op.arity === 2 ? arr(node.value).slice(0, 2) : [first(node.value)];
+        const values = op.multi ? node.value : op.arity === 2 ? arr(node.value).slice(0, 2) : [first(node.value)];
         const needed = op.arity === 2 ? 2 : 1;
-        if (values.length < needed || values.some(isBlank)) {
+        if (!op.multi && (values.length < needed || values.some(isBlank))) {
             say(needed === 2 ? 'needs two values' : 'needs a value');
             return;
         }
@@ -581,6 +624,29 @@ export function createFilterModel({
         return { ok: errors.length === 0, errors };
     }
 
+    /**
+     * What is said of each range in `expr` with one end filled: it is not blank, so
+     * `pruneFilter` keeps it, and what it asks (between 5 and nothing) matches nothing.
+     */
+    function partialRanges(expr) {
+        const said = [];
+        const walk = (node) => {
+            if (node?.kind === 'group') {
+                (Array.isArray(node.children) ? node.children : []).forEach(walk);
+                return;
+            }
+            if (node?.kind !== 'clause') return;
+            const field = byKey.get(node.field);
+            const op = catalogue.get(node.op);
+            if (!field || op?.arity !== 2 || op.multi) return;
+            const ends = arr(node.value).slice(0, 2);
+            const filled = ends.filter((v) => !isBlank(v)).length;
+            if (filled === 1) said.push(`${field.label} ${op.label}: needs two values`);
+        };
+        walk(expr);
+        return said;
+    }
+
     /* ── prune: what is left once half-built rows are dropped ───────────── */
 
     function prune(node) {
@@ -603,12 +669,14 @@ export function createFilterModel({
     /**
      * A copy with empty groups and conditions with nothing to compare against
      * dropped, or null when nothing is left. A condition this catalogue cannot
-     * read, and a carried node, are kept: they were not built here.
+     * read, and a carried node, are kept: they were not built here. So is a range
+     * with one end filled, which `partialRanges` names: someone meant that.
      */
     const pruneFilter = (expr) => prune(cloneFilter(expr));
 
     return Object.freeze({
-        fields, noun, fieldByKey, operatorsFor, operatorById, defaultValue, newClause, emptyMatches,
+        fields, noun, fieldByKey, operatorsFor, operatorById, defaultValue, newClause, moveClause, emptyMatches,
         unknownName, matcherFor, evaluateFilter, describeFilter, validateFilter, unknownFields, pruneFilter,
+        partialRanges,
     });
 }

package/src/ui/components/inline_renamer.js

@@ -32,11 +32,12 @@ export function attachInlineRenamer(options = {}) {
     let originalText = label.textContent || '';
 
     const cleanup = () => {
-        if (input && input.parentNode === label) {
-            input.remove();
-        }
+        // `input` goes first: taking a focused field off the page fires its blur,
+        // and a blur with the field still held would commit an edit that just ended.
+        const gone = input;
         input = null;
         editing = false;
+        if (gone && gone.parentNode === label) gone.remove();
     };
 
     const cancel = () => {
@@ -68,8 +69,8 @@ export function attachInlineRenamer(options = {}) {
                 return;
             }
             const finalValue = result.newValue ?? next ?? '';
-            label.textContent = finalValue;
             cleanup();
+            label.textContent = finalValue;
             options.onFinish?.({ value: finalValue });
         } catch (err) {
             window.logger?.warn('inline-renamer', 'onCommit failed', err);
@@ -89,6 +90,11 @@ export function attachInlineRenamer(options = {}) {
         input.addEventListener('mousedown', stopEvents);
         input.addEventListener('click', stopEvents);
 
+        // Before the renamer's own keys, so that what it attaches to the input
+        // hears them first: `attachInputOptions` takes Enter on a highlighted row
+        // and Esc with its list open, and the renamer never sees either.
+        options.onStart?.({ value: originalText, triggerEvent, input });
+
         input.addEventListener('keydown', (ev) => {
             if (ev.key === 'Enter') {
                 ev.preventDefault();
@@ -101,7 +107,6 @@ export function attachInlineRenamer(options = {}) {
 
         input.addEventListener('blur', () => commit('blur'));
 
-        options.onStart?.({ value: originalText, triggerEvent });
         setTimeout(() => {
             input?.focus();
             input?.select?.();

package/src/ui/components/modal.js

@@ -444,7 +444,7 @@ export function openForm({ title, fields = [], defaults = {}, submitLabel = 'OK'
 
 /**
  * `openConfirm` — a yes/no modal. Resolves `true` on confirm, `false` on
- * cancel, Esc, X or backdrop.
+ * cancel, Esc or X.
  *
  * `message`, `confirmLabel` and `cancelLabel` are TEXT, never markup: callers
  * put user-named things in them ("Delete flow "<name>"?"), so they are set
@@ -531,7 +531,8 @@ export function openConfirm({
  *                 omitted, defaults to a single `[Close]` action that
  *                 resolves with `null`. The first action with
  *                 `primary: true` is the rightmost; otherwise the
- *                 last action wins. Esc / X / backdrop resolve with
+ *                 last action wins. Esc / X (and, with
+ *                 `dismissOnBackdrop`, a click on the backdrop) resolve with
  *                 `null` regardless of what's in `actions`. `icon` is
  *                 an optional material-symbols-outlined ligature drawn
  *                 BEFORE the label; when it is given the label lives in
@@ -558,6 +559,9 @@ export function openConfirm({
  *   - `beforeClose`      `() => boolean | Promise<boolean>`: asked when Esc or
  *                 the X would dismiss; answering false keeps the modal open. An
  *                 action button does not ask it.
+ *   - `dismissOnBackdrop` a click on the dimmed page beside the modal dismisses
+ *                 it, as Esc does, so `beforeClose` is asked. Default `false`:
+ *                 the backdrop only blocks.
  *
  * ══ C29. WHY A DIALOG'S MAXIMISE IS THE GEOMETRIC ONE ═══════════════════
  *
@@ -600,6 +604,7 @@ export function openModal({
     maximizable      = false,
     onMaximizeChange = null,
     beforeClose      = null,
+    dismissOnBackdrop = false,
 } = {}) {
     return new Promise((resolve) => {
         const body = document.createElement('div');
@@ -610,8 +615,8 @@ export function openModal({
         if (content instanceof HTMLElement) bodyInner.appendChild(content);
         body.appendChild(bodyInner);
 
-        // Actions row — default = single Close button. Esc / backdrop /
-        // X all bypass this and resolve with null.
+        // Actions row — default = single Close button. Esc and X (and an
+        // opted-in backdrop) bypass this and resolve with null.
         const acts = Array.isArray(actions) && actions.length > 0
             ? actions
             : [{ label: 'Close', value: null }];
@@ -706,16 +711,24 @@ export function openModal({
             defaultWidth:  width,
             defaultHeight: height,
             beforeClose,
-            // Esc, the X and the backdrop all land here without passing through
-            // `close`, so the listener is dropped here as well as there — the
-            // three dismissals a user reaches for most are exactly the ones
-            // that would otherwise leak it.
+            // Esc, the X and an opted-in backdrop all land here without passing
+            // through `close`, so the listener is dropped here as well as there —
+            // the dismissals a user reaches for most are exactly the ones that
+            // would otherwise leak it.
             onClose: () => {
                 _dropMaxListener();
                 if (!_resolved) { _resolved = true; resolve(null); }
             },
         });
         win.show();
+        // A click, not a press: a drag that starts in the window and ends on the
+        // page (selecting text, resizing) has no click on the backdrop.
+        // The press takes no focus from the window: `beforeClose` may refuse, and
+        // the person goes on typing where they were.
+        if (dismissOnBackdrop) {
+            win.backdropElement.addEventListener('mousedown', (e) => e.preventDefault());
+            win.backdropElement.addEventListener('click', () => win.close());
+        }
 
         // C29. THE STATE, FOR A CALLER WHOSE LAYOUT DEPENDS ON IT.
         //
@@ -818,7 +831,11 @@ export function openModal({
         // whose first control is a read-only statement panel (C27's disabled
         // primary is the sibling case) would swallow the caret into a box that
         // cannot take it.
+        //
+        // AN `onMount` THAT PLACED FOCUS KEEPS IT, with its selection: it ran in
+        // the frame before this one, and it knows the field better than "the first".
         requestAnimationFrame(() => {
+            if (bodyInner.contains(document.activeElement)) return;
             const field = bodyInner.querySelector(
                 'input:not([type="hidden"]):not([disabled]):not([readonly]),'
               + ' textarea:not([disabled]):not([readonly]),'