@reticlehq/browser 3.8.2 → 3.10.0

package/dist/actions/actions-press.js

@@ -7,7 +7,21 @@ function asString(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
 }
 export function pressKey(args) {
-    return pressKeyFromArgs(args);
+    return splitChord(pressKeyFromArgs(args)).key;
+}
+function splitChord(raw) {
+    const at = raw.lastIndexOf('+', raw.length - 2);
+    const flags = 0 < at
+        ? raw
+            .slice(0, at)
+            .split('+')
+            .map((name) => MODIFIER_FLAG_ALIASES[name.toLowerCase()])
+        : [];
+    if (0 === flags.length || flags.some((flag) => flag === undefined)) {
+        return { key: CODE_KEYS[raw] ?? raw, flags: [] };
+    }
+    const key = raw.slice(at + 1);
+    return { key: CODE_KEYS[key] ?? key, flags: flags.filter((flag) => flag !== undefined) };
 }
 const MODIFIER_FLAG_KEYS = [
     'metaKey',
@@ -37,6 +51,9 @@ export function pressModifiers(args) {
         if (flag !== undefined)
             flags[flag] = true;
     }
+    for (const flag of splitChord(pressKeyFromArgs(args)).flags) {
+        flags[flag] = true;
+    }
     return flags;
 }
 function modifierFlagFor(key) {
@@ -53,7 +70,7 @@ export function pressCode(args, key) {
             return `Key${key.toUpperCase()}`;
         if (/[0-9]/.test(key))
             return `Digit${key}`;
-        return '';
+        return PUNCTUATION_CODES[key] ?? '';
     }
     return /^[A-Z][A-Za-z0-9]*$/.test(key) && KNOWN_NAMED_KEYS.has(key) ? key : '';
 }
@@ -74,6 +91,53 @@ export function dispatchKeypress(el, key, code, mods, repeat = false) {
     }
     asSyntheticInput(() => el.dispatchEvent(event));
 }
+const PUNCTUATION_CODES = {
+    '/': 'Slash',
+    '?': 'Slash',
+    '.': 'Period',
+    '>': 'Period',
+    ',': 'Comma',
+    '<': 'Comma',
+    ';': 'Semicolon',
+    ':': 'Semicolon',
+    "'": 'Quote',
+    '"': 'Quote',
+    '[': 'BracketLeft',
+    '{': 'BracketLeft',
+    ']': 'BracketRight',
+    '}': 'BracketRight',
+    '\\': 'Backslash',
+    '|': 'Backslash',
+    '-': 'Minus',
+    _: 'Minus',
+    '=': 'Equal',
+    '+': 'Equal',
+    '`': 'Backquote',
+    '~': 'Backquote',
+    '!': 'Digit1',
+    '@': 'Digit2',
+    '#': 'Digit3',
+    $: 'Digit4',
+    '%': 'Digit5',
+    '^': 'Digit6',
+    '&': 'Digit7',
+    '*': 'Digit8',
+    '(': 'Digit9',
+    ')': 'Digit0',
+};
+const CODE_KEYS = {
+    Slash: '/',
+    Period: '.',
+    Comma: ',',
+    Semicolon: ';',
+    Quote: "'",
+    BracketLeft: '[',
+    BracketRight: ']',
+    Backslash: '\\',
+    Minus: '-',
+    Equal: '=',
+    Backquote: '`',
+};
 const ENTER_KEY = 'Enter';
 const ENTER_CHAR_CODE = 13;
 const LEGACY_KEY_CODE_FIELDS = ['keyCode', 'charCode', 'which'];
@@ -233,3 +297,83 @@ export function closeModalOnEscape(el, key, keydownProceeded) {
         return;
     }
 }
+export const SPACE_KEY = ' ';
+const ENTER = 'Enter';
+const TAB = 'Tab';
+const ENTER_ACTIVATES = 'button, a[href], area[href], summary, input[type="submit"], input[type="button"], input[type="reset"], input[type="image"]';
+const SPACE_ACTIVATES = 'button, summary, input[type="submit"], input[type="button"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"]';
+const IMPLICIT_SUBMIT_TYPES = new Set([
+    'text',
+    'search',
+    'url',
+    'tel',
+    'email',
+    'password',
+    'date',
+    'month',
+    'week',
+    'time',
+    'datetime-local',
+    'number',
+]);
+const FOCUSABLE = 'a[href], area[href], button, input, select, textarea, summary, iframe, [tabindex], [contenteditable=""], [contenteditable="true"]';
+const shortcut = (held) => held.metaKey || held.ctrlKey || held.altKey;
+export function runKeydownDefault(el, key, held) {
+    if (shortcut(held)) {
+        return;
+    }
+    if (ENTER === key && !held.shiftKey) {
+        enterDefault(el);
+        return;
+    }
+    if (TAB === key) {
+        moveFocus(el, held.shiftKey ? -1 : 1);
+    }
+}
+export function runKeyupDefault(el, key, held) {
+    if (SPACE_KEY !== key || shortcut(held) || held.shiftKey) {
+        return;
+    }
+    if (el.matches(SPACE_ACTIVATES) && !isDisabled(el)) {
+        el.click();
+    }
+}
+function enterDefault(el) {
+    if (el.matches(ENTER_ACTIVATES)) {
+        if (!isDisabled(el)) {
+            el.click();
+        }
+        return;
+    }
+    const type = 'input' === el.localName ? (el.getAttribute('type') ?? 'text').toLowerCase() : '';
+    if (!IMPLICIT_SUBMIT_TYPES.has(type)) {
+        return;
+    }
+    const form = el.form;
+    form?.requestSubmit();
+}
+function isDisabled(el) {
+    return el.matches(':disabled');
+}
+function tabbable(el) {
+    if (isDisabled(el) || null !== el.closest('[inert], [hidden]')) {
+        return false;
+    }
+    const html = el;
+    if (html.tabIndex < 0) {
+        return false;
+    }
+    return 'hidden' !== el.type;
+}
+function moveFocus(from, step) {
+    const doc = from.ownerDocument;
+    const all = [...doc.querySelectorAll(FOCUSABLE)].filter(tabbable);
+    const positive = all.filter((el) => el.tabIndex > 0).sort((a, b) => a.tabIndex - b.tabIndex);
+    const order = [...positive, ...all.filter((el) => 0 === el.tabIndex)];
+    let at = order.indexOf(from);
+    if (at < 0) {
+        at = order.findIndex((el) => from.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+        at = at < 0 ? order.length : at - (1 === step ? 1 : 0);
+    }
+    order[at + step]?.focus();
+}

package/dist/actions/actions.js

@@ -1,10 +1,10 @@
-import { ActionType, ActionWarning, clampHoldMs, clickInputProblem, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, SettleReason, } from '@reticlehq/core';
+import { ACT_POINT_ARG, ActionType, ActionWarning, actPointProblem, boxFractionFromArgs, clampHoldMs, clickInputProblem, DRAG_TO_POINT_ARG, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, SettleReason, } from '@reticlehq/core';
 import { isHiddenNativeOption } from '../dom/query-finders.js';
-import { isReticleUi } from '../dom/dom-ignore.js';
+import { isReticleUi, isUnobserved } from '../dom/dom-ignore.js';
 import { asSyntheticInput } from './synthetic/synthetic-input.js';
 import { echoRef, refs } from '../dom/addressing/refs.js';
 import { requiresDangerousConfirmation, assertOutwardAllowed, assertPaymentEntryAllowed, submitControlFor, } from './danger-context.js';
-import { assertEditable, assertNotRichText, isAutofillSafeTarget, setNativeValue, } from './value-input.js';
+import { assertEditable, assertNotEditorTextArea, assertNotRichText, isAutofillSafeTarget, isRichText, setNativeValue, } from './value-input.js';
 import { getRole, getStates } from '../dom/a11y.js';
 import { isVisible } from '../dom/visibility.js';
 import { selectInCombobox } from './select-combobox.js';
@@ -14,7 +14,7 @@ import { asSettleBudget, nativeSetTimeout, settle } from '../timers/native/nativ
 import { publishSettledField, watchActedField } from '../observers/field.js';
 import { AppearedText } from './appeared-text.js';
 import { alreadyAtCheckedState, assertAriaToggleLanded, isAriaToggle } from './check-state.js';
-import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, dispatchKeypress, closeModalOnEscape, keyboardEvent, } from './actions-press.js';
+import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, dispatchKeypress, closeModalOnEscape, keyboardEvent, runKeydownDefault, runKeyupDefault, SPACE_KEY, } from './actions-press.js';
 import { anchorOf, result, visibleCanvases, } from './action-report.js';
 function asString(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
@@ -34,6 +34,7 @@ const FILL_LIKE = new Set([
     ActionType.TYPE,
     ActionType.CLEAR,
     ActionType.SELECT,
+    ActionType.INSERT_TEXT,
 ]);
 const isFillLike = (action) => FILL_LIKE.has(action);
 const CLICK_LIKE = new Set([
@@ -72,7 +73,7 @@ function assertActionAllowed(el, action, args) {
         action === ActionType.UNCHECK ||
         action === ActionType.DRAG ||
         action === ActionType.SUBMIT ||
-        (action === ActionType.PRESS && 'Enter' === pressKey(args));
+        (action === ActionType.PRESS && ('Enter' === pressKey(args) || SPACE_KEY === pressKey(args)));
     const dragTarget = action === ActionType.DRAG ? refs.resolve(dragTargetRef(args)) : null;
     const submitter = action === ActionType.PRESS && 'Enter' === pressKey(args) ? submitControlFor(el) : null;
     if (canTrigger) {
@@ -100,7 +101,7 @@ function optionValueFor(options, named) {
     const byLabel = options.filter((option) => option.label.trim() === named.trim());
     return 1 === byLabel.length ? (byLabel[0]?.value ?? named) : named;
 }
-import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, dragElement, mouseEventFor, assertNotLeaving, clickInputOf, } from './actions-dom.js';
+import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, leavePreviousHover, dragElement, mouseEventFor, assertNotLeaving, scrollIntoViewNow, clickInputOf, coordsIn, } from './actions-dom.js';
 import { scrollFrom } from './scroll.js';
 import { clickHitsNoControl } from './click-target.js';
 function enabledOf(el) {
@@ -110,6 +111,9 @@ function valueOf(el) {
     if (isInput(el) || isTextArea(el) || isSelect(el)) {
         return el.value;
     }
+    if (isRichText(el)) {
+        return el.textContent ?? '';
+    }
     return undefined;
 }
 function activeRef(el) {
@@ -122,11 +126,11 @@ function activeRef(el) {
 async function dispatchFor(el, action, args) {
     if (ActionType.CLICK === action) {
         const hold = clampHoldMs(args['holdMs']);
-        return await fireClickSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() }, undefined, clickInputOf(args));
+        return await fireClickSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() }, undefined, clickInputOf(args), boxFractionFromArgs(args, ACT_POINT_ARG));
     }
     if (ActionType.TAP === action) {
         const hold = clampHoldMs(args['holdMs']);
-        return await fireTapSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() });
+        return await fireTapSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() }, boxFractionFromArgs(args, ACT_POINT_ARG));
     }
     return { prevented: await dispatchOther(el, action, args), heldMs: 0 };
 }
@@ -145,24 +149,26 @@ async function dispatchOther(el, action, args) {
     switch (action) {
         case ActionType.DBLCLICK: {
             const input = clickInputOf(args);
-            await fireClickSequence(el, undefined, 1, input);
-            await fireClickSequence(el, undefined, 2, input);
+            const point = boxFractionFromArgs(args, ACT_POINT_ARG);
+            await fireClickSequence(el, undefined, 1, input, point);
+            await fireClickSequence(el, undefined, 2, input, point);
             return !asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'dblclick', {
                 bubbles: true,
                 cancelable: true,
                 detail: 2,
                 ...input.modifiers,
+                ...coordsIn(el, point),
             })));
         }
         case ActionType.HOVER: {
-            const doc = el.ownerDocument;
-            const from = doc.activeElement ?? doc.body;
-            firePointer(el, 'pointerover', from);
-            el.dispatchEvent(mouseEventFor(el, 'mouseover', { bubbles: true, relatedTarget: from }));
-            firePointerNonBubbling(el, 'pointerenter', from);
-            el.dispatchEvent(mouseEventFor(el, 'mouseenter', { relatedTarget: from }));
-            firePointer(el, 'pointermove', from);
-            const moved = el.dispatchEvent(mouseEventFor(el, 'mousemove', { bubbles: true, cancelable: true }));
+            const coords = coordsIn(el, boxFractionFromArgs(args, ACT_POINT_ARG));
+            const from = leavePreviousHover(el);
+            firePointer(el, 'pointerover', from, coords);
+            el.dispatchEvent(mouseEventFor(el, 'mouseover', { bubbles: true, relatedTarget: from, ...coords }));
+            firePointerNonBubbling(el, 'pointerenter', from, coords);
+            el.dispatchEvent(mouseEventFor(el, 'mouseenter', { relatedTarget: from, ...coords }));
+            firePointer(el, 'pointermove', from, coords);
+            const moved = el.dispatchEvent(mouseEventFor(el, 'mousemove', { bubbles: true, cancelable: true, ...coords }));
             const holdMs = clampHoldMs(args['holdMs']);
             if (holdMs > 0) {
                 await sleep(holdMs);
@@ -184,6 +190,7 @@ async function dispatchOther(el, action, args) {
             return false;
         }
         case ActionType.FILL:
+            assertNotEditorTextArea(el, 'fill');
             if (isInput(el) || isTextArea(el)) {
                 if (typeof args['value'] !== 'string') {
                     throw new Error("fill requires a string `value` — pass it nested, as args: { value: '…' }. " +
@@ -198,6 +205,7 @@ async function dispatchOther(el, action, args) {
             assertNotRichText(el, 'fill');
             throw new Error(`cannot fill a <${el.tagName.toLowerCase()}>`);
         case ActionType.TYPE:
+            assertNotEditorTextArea(el, 'type into');
             if (isInput(el) || isTextArea(el)) {
                 if (typeof args['text'] !== 'string') {
                     throw new Error("type requires a string `text` — pass it nested, as args: { text: '…' }.");
@@ -209,10 +217,15 @@ async function dispatchOther(el, action, args) {
             assertNotRichText(el, 'type into');
             throw new Error(`cannot type into a <${el.tagName.toLowerCase()}>`);
         case ActionType.CLEAR:
+            assertNotEditorTextArea(el, 'clear');
             if (isInput(el) || isTextArea(el)) {
                 return setNativeValue(el, '');
             }
             throw new Error(`cannot clear a <${el.tagName.toLowerCase()}>`);
+        case ActionType.INSERT_TEXT: {
+            const { insertText } = await import('./insert-text.js');
+            return insertText(el, args['text']);
+        }
         case ActionType.SELECT:
             if (isSelect(el)) {
                 if (typeof args['value'] !== 'string') {
@@ -281,16 +294,20 @@ async function dispatchOther(el, action, args) {
             closeModalOnEscape(el, key, down);
             if (down) {
                 dispatchKeypress(el, key, code, mods);
+                runKeydownDefault(el, key, mods);
             }
             const hold = clampHoldMs(args['holdMs']);
             if (hold > 0) {
                 await holdKey(el, key, code, mods, hold);
             }
             asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
+            if (down) {
+                runKeyupDefault(el, key, mods);
+            }
             return !down;
         }
         case ActionType.SCROLL_INTO_VIEW:
-            el.scrollIntoView();
+            scrollIntoViewNow(el);
             return false;
         case ActionType.ZOOM:
             throw new Error(ZOOM_NEEDS_REAL_BROWSER_MSG);
@@ -298,7 +315,7 @@ async function dispatchOther(el, action, args) {
             const dy = asFiniteNumber(args['dy']);
             const dx = asFiniteNumber(args['dx']);
             const fraction = asFiniteNumber(args['fraction']);
-            scrollFrom(el, dy, fraction, dx);
+            scrollFrom(el, dy, fraction, dx, true === args['wheel']);
             return false;
         }
         case ActionType.UPLOAD: {
@@ -328,22 +345,35 @@ async function dispatchOther(el, action, args) {
         }
         case ActionType.DRAG: {
             const toRef = dragTargetRef(args);
+            const points = {
+                at: boxFractionFromArgs(args, ACT_POINT_ARG),
+                to: boxFractionFromArgs(args, DRAG_TO_POINT_ARG),
+            };
             if ('' === toRef) {
-                return await dragElement(el, null, args['data']);
+                return await dragElement(el, null, args['data'], points, clickInputOf(args));
             }
             const resolved = refs.resolve(toRef);
             if (!isActionTarget(resolved)) {
                 throw new Error(`drag target '${echoRef(toRef)}' did not resolve to an element — pass a ref from ` +
                     'reticle_snapshot or reticle_query as args.toRef (alias: args.target)');
             }
-            return await dragElement(el, resolved, args['data']);
+            return await dragElement(el, resolved, args['data'], points, clickInputOf(args));
         }
         default:
             throw new Error(`unknown action '${action}'`);
     }
 }
+function isPageMutation(record) {
+    const target = record.target;
+    const el = target instanceof Element ? target : target.parentElement;
+    return null === el || !isUnobserved(el);
+}
 export async function executeAction(ref, action, args = {}) {
     const named = 0 < ref.length;
+    const pointProblem = actPointProblem(action, args);
+    if (pointProblem !== undefined) {
+        throw new Error(`cannot ${action}: ${pointProblem}`);
+    }
     if (ActionType.CLICK === action || ActionType.DBLCLICK === action) {
         const problem = clickInputProblem(action, args);
         if (problem !== undefined) {
@@ -358,9 +388,19 @@ export async function executeAction(ref, action, args = {}) {
         assertNotLeaving(el);
     }
     const anchor = named ? anchorOf(el) : {};
+    const prevFocus = activeRef(el);
+    if ((ActionType.CLICK === action || ActionType.DBLCLICK === action) && !enabledOf(el)) {
+        const active = el.ownerDocument.activeElement;
+        if (active !== null &&
+            active !== el &&
+            active !== el.ownerDocument.body &&
+            isActionTarget(active)) {
+            active.blur();
+            await Promise.resolve();
+        }
+    }
     const visible = isVisible(el);
     const enabled = enabledOf(el);
-    const prevFocus = activeRef(el);
     const valueBefore = valueOf(el);
     const actedField = watchActedField(el);
     const geometry = CLICK_LIKE.has(action) ? clickGeometry(el) : NO_GEOMETRY;
@@ -369,7 +409,7 @@ export async function executeAction(ref, action, args = {}) {
     let mutated = 0;
     const said = new AppearedText();
     const obs = new MutationObserver((records) => {
-        mutated += records.length;
+        mutated += records.filter(isPageMutation).length;
         said.collect(records);
     });
     obs.observe(el.ownerDocument.documentElement, {

package/dist/actions/insert-text.d.ts

@@ -0,0 +1,3 @@
+import type { ActionTarget } from '../dom/realm.js';
+export declare function insertText(el: ActionTarget, text: unknown): boolean;
+export declare function insertTextInto(el: ActionTarget, text: string): boolean;

package/dist/actions/insert-text.js

@@ -0,0 +1,90 @@
+import { isRichText } from './value-input.js';
+export function insertText(el, text) {
+    if (typeof text !== 'string') {
+        throw new Error("insertText requires a string `text` — pass it nested, as args: { text: '…' }.");
+    }
+    if (!isRichText(el)) {
+        throw new Error(`cannot insertText into a <${el.tagName.toLowerCase()}> — insertText needs a contenteditable rich-text editor (Tiptap, ProseMirror, Quill), not this surface`);
+    }
+    if (hasEditContext(el)) {
+        throw new Error('cannot insertText into an EditContext editor (Monaco, CodeMirror 6): code that calls updateText does not fire textupdate, so the editor model would keep the old text. Use press for a key.');
+    }
+    return insertTextInto(el, text);
+}
+function hasEditContext(el) {
+    if (!('editContext' in el)) {
+        return false;
+    }
+    const surface = el;
+    return null !== surface.editContext && undefined !== surface.editContext;
+}
+export function insertTextInto(el, text) {
+    el.focus();
+    const selection = window.getSelection();
+    if (selection !== null && !selectionInside(selection, el)) {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    const beforeInput = new InputEvent('beforeinput', {
+        inputType: 'insertText',
+        data: text,
+        bubbles: true,
+        cancelable: true,
+    });
+    if (!el.dispatchEvent(beforeInput)) {
+        return true;
+    }
+    if ('function' !== typeof el.ownerDocument.execCommand) {
+        insertAtCaret(el, text);
+        const input = new InputEvent('input', {
+            inputType: 'insertText',
+            data: text,
+            bubbles: true,
+            cancelable: true,
+        });
+        return !el.dispatchEvent(input);
+    }
+    let sawInput = false;
+    const recordInput = (event) => {
+        if ('input' === event.type) {
+            sawInput = true;
+        }
+    };
+    window.addEventListener('input', recordInput, false);
+    try {
+        if (el.ownerDocument.execCommand('insertText', false, text)) {
+            return false;
+        }
+    }
+    catch {
+    }
+    finally {
+        window.removeEventListener('input', recordInput, false);
+    }
+    if (sawInput) {
+        return false;
+    }
+    throw new Error('the editor did not accept the text: the native insertText command failed, so the editor model is unchanged. Check that the surface is editable and focused.');
+}
+function insertAtCaret(el, text) {
+    const selection = window.getSelection();
+    const range = selection !== null && 0 < selection.rangeCount ? selection.getRangeAt(0) : null;
+    if (range !== null && el.contains(range.commonAncestorContainer)) {
+        range.deleteContents();
+        const node = el.ownerDocument.createTextNode(text);
+        range.insertNode(node);
+        range.setStartAfter(node);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        return;
+    }
+    el.appendChild(el.ownerDocument.createTextNode(text));
+}
+function selectionInside(selection, el) {
+    const anchor = selection.anchorNode;
+    return anchor !== null && el.contains(anchor);
+}

package/dist/actions/scroll.d.ts

@@ -14,5 +14,5 @@ interface ScrollResult {
 export declare const SCROLL_FRACTION_RANGE_ERROR_PREFIX = "scroll fraction must be between 0 and 1, got ";
 export declare function fractionOutOfRangeMessage(fraction: number): string;
 export declare function scrollContainer(ref: string | undefined, dy: number | undefined, fraction?: number, dx?: number): ScrollResult;
-export declare function scrollFrom(base: Element | undefined, dy: number | undefined, fraction?: number, dx?: number): ScrollResult;
+export declare function scrollFrom(base: Element | undefined, dy: number | undefined, fraction?: number, dx?: number, wheel?: boolean): ScrollResult;
 export {};

package/dist/actions/scroll.js

@@ -2,6 +2,7 @@ import { refs } from '../dom/addressing/refs.js';
 const FALLBACK_STEP_PX = 400;
 const VIEWPORT_FRACTION = 0.8;
 export const SCROLL_FRACTION_RANGE_ERROR_PREFIX = 'scroll fraction must be between 0 and 1, got ';
+const SCROLL_WHEEL_FRACTION_ERROR = 'scroll with wheel: true cannot use fraction; pass dy or dx';
 export function fractionOutOfRangeMessage(fraction) {
     return `${SCROLL_FRACTION_RANGE_ERROR_PREFIX}${fraction}`;
 }
@@ -21,7 +22,7 @@ export function scrollContainer(ref, dy, fraction, dx) {
     const base = ref !== undefined ? refs.resolve(ref) : null;
     return scrollFrom(base instanceof Element ? base : undefined, dy, fraction, dx);
 }
-export function scrollFrom(base, dy, fraction, dx) {
+export function scrollFrom(base, dy, fraction, dx, wheel) {
     if (fraction !== undefined && (fraction < 0 || fraction > 1 || Number.isNaN(fraction))) {
         throw new RangeError(fractionOutOfRangeMessage(fraction));
     }
@@ -31,6 +32,26 @@ export function scrollFrom(base, dy, fraction, dx) {
         : (document.scrollingElement ?? document.documentElement);
     const before = target.scrollTop;
     const beforeLeft = target.scrollLeft;
+    if (true === wheel) {
+        if (fraction !== undefined) {
+            throw new RangeError(SCROLL_WHEEL_FRACTION_ERROR);
+        }
+        const deltaY = dy ?? (Math.round(target.clientHeight * VIEWPORT_FRACTION) || FALLBACK_STEP_PX);
+        const deltaX = dx ?? 0;
+        const wheelTarget = base ?? target;
+        const rect = wheelTarget.getBoundingClientRect();
+        wheelTarget.dispatchEvent(new WheelEvent('wheel', {
+            deltaX,
+            deltaY,
+            deltaMode: WheelEvent.DOM_DELTA_PIXEL,
+            clientX: rect.width > 0 ? rect.left + rect.width / 2 : 0,
+            clientY: rect.height > 0 ? rect.top + rect.height / 2 : 0,
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        }));
+        return scrollResult(target, before, beforeLeft);
+    }
     if (fraction !== undefined) {
         target.scrollTop = Math.round(target.scrollHeight * fraction);
     }
@@ -44,6 +65,9 @@ export function scrollFrom(base, dy, fraction, dx) {
         }
     }
     target.dispatchEvent(new Event('scroll', { bubbles: false }));
+    return scrollResult(target, before, beforeLeft);
+}
+function scrollResult(target, before, beforeLeft) {
     const after = target.scrollTop;
     const afterLeft = target.scrollLeft;
     return {

package/dist/actions/value-input.d.ts

@@ -1,5 +1,7 @@
 import { type ActionTarget } from '../dom/realm.js';
 export declare function isAutofillSafeTarget(el: Element, ua?: string): boolean;
 export declare function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string): boolean;
+export declare function isRichText(el: Element): boolean;
 export declare function assertNotRichText(el: ActionTarget, action: string): void;
+export declare function assertNotEditorTextArea(el: ActionTarget, action: string): void;
 export declare function assertEditable(el: HTMLInputElement | HTMLTextAreaElement, action: string): void;

package/dist/actions/value-input.js

@@ -1,14 +1,16 @@
 import { captureValueSetter } from '../patching/capture-method.js';
-import { isHtmlElement, valuePrototypeOf } from '../dom/realm.js';
+import { isHtmlElement, isTextArea, valuePrototypeOf } from '../dom/realm.js';
 const PASSWORD_AUTOCOMPLETE = /\b(current|new)-password\b/;
 const NOT_WEBKIT = /Chrome|Chromium|Edg\/|Firefox|Gecko\//;
 export function isAutofillSafeTarget(el, ua = navigator.userAgent) {
-    if (!(el instanceof HTMLInputElement))
+    if (!(el instanceof HTMLInputElement)) {
         return false;
+    }
     const password = 'password' === el.type.toLowerCase() ||
         PASSWORD_AUTOCOMPLETE.test(el.getAttribute('autocomplete') ?? '');
-    if (!password || NOT_WEBKIT.test(ua))
+    if (!password || NOT_WEBKIT.test(ua)) {
         return false;
+    }
     return 600 <= Number(/AppleWebKit\/(\d+)/.exec(ua)?.[1] ?? 0);
 }
 export function setNativeValue(el, value) {
@@ -24,21 +26,40 @@ export function setNativeValue(el, value) {
     el.dispatchEvent(new Event('change', { bubbles: true }));
     return !notPrevented;
 }
-function isRichText(el) {
+export function isRichText(el) {
     const flag = el.getAttribute('contenteditable');
-    if ((isHtmlElement(el) && el.isContentEditable) || (null !== flag && 'false' !== flag))
+    if ((isHtmlElement(el) && el.isContentEditable) || (null !== flag && 'false' !== flag)) {
         return true;
-    if ('textbox' === el.getAttribute('role'))
+    }
+    if ('textbox' === el.getAttribute('role')) {
         return true;
-    if (!('editContext' in el))
+    }
+    if (!('editContext' in el)) {
         return false;
+    }
     const surface = el;
     return null !== surface.editContext && undefined !== surface.editContext;
 }
+const EDITOR_ROOT = '.monaco-editor, .CodeMirror, .cm-editor';
+function isEditorTextArea(el) {
+    if (!isTextArea(el)) {
+        return false;
+    }
+    return 'textbox' === el.getAttribute('role') || null !== el.closest(EDITOR_ROOT);
+}
+function refuseEditor(action) {
+    throw new Error(`cannot ${action} a contenteditable or EditContext editor; use insertText, or press for a key`);
+}
 export function assertNotRichText(el, action) {
-    if (!isRichText(el))
+    if (!isRichText(el)) {
         return;
-    throw new Error(`cannot ${action} a contenteditable or EditContext editor; use press or an input`);
+    }
+    refuseEditor(action);
+}
+export function assertNotEditorTextArea(el, action) {
+    if (isEditorTextArea(el)) {
+        refuseEditor(action);
+    }
 }
 export function assertEditable(el, action) {
     if (el.disabled) {