@astryxdesign/core 0.7.7-canary.36f8ea1 → 0.7.7-canary.550ff21

package/dist/motion/uikit/scroll.d.ts

@@ -59,25 +59,6 @@ export declare const scroll: {
         readonly duration: 0.5;
         readonly bounce: 0;
     };
-    readonly paging: {
-        /**
-         * Deceleration rate a paging release is projected with to pick the next
-         * page.
-         * @source GUESS — UIScrollView paging behaves like a fast scroll view;
-         *   the rate it uses internally is not documented
-         * @measure M-PG1
-         */
-        readonly projectionRate: 0.99;
-        /**
-         * The spring that carries a paging scroll view onto its page.
-         * @source GUESS — SwiftUI `.smooth` default until measured
-         * @measure M-PG1
-         */
-        readonly snap: {
-            readonly duration: 0.5;
-            readonly bounce: 0;
-        };
-    };
     /**
      * `delaysContentTouches`: how long a scroll view holds a touch-down from
      * its content while it decides whether the touch is a scroll (no highlight

package/dist/motion/uikit/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/scroll.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,eAAO,MAAM,MAAM;;QAEf;;;;;;;;;;;;;;;;WAgBG;;QAEH;;;;;;;WAOG;;;;QAIH;;;;;;;;;;;WAWG;;;IAGL;;;;;;;;;;OAUG;;;;;;QAGD;;;;;;WAMG;;QAEH;;;;WAIG;;;;;;IAGL;;;;;;;;;;OAUG;;IAEH;;;;;;;;;;;;;;OAcG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAK1C"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/scroll.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C,eAAO,MAAM,MAAM;;QAEf;;;;;;;;;;;;;;;;WAgBG;;QAEH;;;;;;;WAOG;;;;QAIH;;;;;;;;;;;WAWG;;;IAGL;;;;;;;;;;OAUG;;;;;IAEH;;;;;;;;;;OAUG;;IAEH;;;;;;;;;;;;;;OAcG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAK1C"}

package/dist/motion/uikit/scroll.js

@@ -4,8 +4,8 @@
  * @file scroll.ts
  * @input Nothing; data only
  * @output Exports `scroll`, the UIScrollView constants: deceleration rates,
- *   the rubber-band coefficient, the bounce-back spring, paging and the
- *   content-touch delay
+ *   the rubber-band coefficient, the bounce-back spring and the content-touch
+ *   delay
  * @position The scroll domain of the UIKit constants table (motion/uikit);
  *   read by the motion math and components
  *
@@ -84,25 +84,6 @@ export const scroll = {
     duration: 0.5,
     bounce: 0
   },
-  paging: {
-    /**
-     * Deceleration rate a paging release is projected with to pick the next
-     * page.
-     * @source GUESS — UIScrollView paging behaves like a fast scroll view;
-     *   the rate it uses internally is not documented
-     * @measure M-PG1
-     */
-    projectionRate: 0.99,
-    /**
-     * The spring that carries a paging scroll view onto its page.
-     * @source GUESS — SwiftUI `.smooth` default until measured
-     * @measure M-PG1
-     */
-    snap: {
-      duration: 0.5,
-      bounce: 0
-    }
-  },
   /**
    * `delaysContentTouches`: how long a scroll view holds a touch-down from
    * its content while it decides whether the touch is a scroll (no highlight

package/dist/utils/selectionLock.d.ts

@@ -10,4 +10,47 @@ export declare function locksSelectionFor(pointerType: string): boolean;
  * any holder holds. Idempotent release.
  */
 export declare function lockSelection(elements: Iterable<Element>, target: EventTarget | null): () => void;
+/** How a drag's selection hold ends: at a lift, or at a cancel. */
+export interface DragSelectionReleaseOptions {
+    /**
+     * The press was cancelled (a pointercancel, a blur, a detach), so no
+     * mouseup or click follows: the hold ends at once. Called again after a
+     * lift, it ends the hold's last task at once too.
+     */
+    isCancel?: boolean;
+}
+/**
+ * Refuse a new selection while a mouse or pen drag that a recognizer claimed
+ * runs, until the returned function runs. `kept` is the page's selection
+ * when the press began, and it stays. Anything that replaces it while the
+ * drag runs is put back to it. That includes the press's own collapse and a
+ * selection the drag started before its claim. So the drag takes no new
+ * selection and never clears an existing one. `elements` refuse a
+ * selection with inline styles, on every engine. The document refuses one
+ * too, because WebKit extends a drag's selection over text outside the
+ * elements without another `selectstart`. So a `selectstart` anywhere is
+ * refused, and the selection is put back. A `selectstart` does not leave its
+ * shadow tree. So the document refuses only one that starts outside every
+ * shadow tree, and a claiming element inside one refuses its own. The
+ * press's own `mouseup` and `click` come after its `pointerup` in the same
+ * task, and WebKit settles the drag's selection there. So the document's
+ * hold ends a task after a lift. A cancel ends it at once, because nothing
+ * follows a cancel. `onReleased` runs once the document's hold has ended.
+ * The page listeners exist only during a press. Idempotent.
+ */
+export declare function lockDragSelection(elements: Iterable<Element>, view: Window | null | undefined, kept: ReadonlyArray<AbstractRange>, onReleased?: () => void): (options?: DragSelectionReleaseOptions) => void;
+/**
+ * The page's selection now, its ranges copied; none for a collapsed or empty
+ * one. A drag's hold keeps what this read when the press began.
+ */
+export declare function selectionRangesOf(view: Window | null | undefined): ReadonlyArray<AbstractRange>;
+/**
+ * Whether a press at (`x`, `y`) lands on text a drag would select. That is a
+ * text field, or a character of non-empty text whose element allows a
+ * selection. A native button's label, slotted or not, is not selectable text,
+ * because the engine starts no selection from a drag inside a button. A point
+ * beside text, which a caret query snaps to the nearest character, lands on
+ * none. Where the engine has no caret query, nothing is selectable text.
+ */
+export declare function startsOnSelectableText(doc: Document, x: number, y: number, target: EventTarget | null): boolean;
 //# sourceMappingURL=selectionLock.d.ts.map

package/dist/utils/selectionLock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAkDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CAyEZ"}
+{"version":3,"file":"selectionLock.d.ts","sourceRoot":"","sources":["../../src/utils/selectionLock.ts"],"names":[],"mappings":"AAoDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE9D;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,IAAI,CA4BZ;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,CAAC,OAAO,CAAC,EAAE,2BAA2B,KAAK,IAAI,CA+EjD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,aAAa,CAAC,aAAa,CAAC,CAiB9B;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,QAAQ,EACb,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CA+CT"}

package/dist/utils/selectionLock.js

@@ -3,11 +3,12 @@
 /**
  * @file selectionLock.ts
  * @input The elements a held touch contact presses, and the touch's target
- * @output lockSelection: no text selection and no touch callout under the
- *   held finger until the release runs; and locksSelectionFor: which contacts
- *   take it
- * @position Brought by the recognizers whose hold does something. The gesture
- *   host calls it and never imports it.
+ * @output lockSelection and locksSelectionFor give a held finger's lock.
+ *   lockDragSelection gives a claimed mouse or pen drag's hold, which keeps
+ *   the page's selection. startsOnSelectableText and selectionRangesOf are
+ *   what a mouse or pen press reads.
+ * @position Recognizers whose hold does something bring lockSelection; the
+ *   gesture host imports the drag hold and the press reads.
  *
  * SYNC: When modified, update GestureHost.ts and utils/pressFeedback.ts; the
  * iOS query matches utils/touchPresentation.ts.
@@ -27,7 +28,8 @@
 //
 // A mouse never takes the lock, so its released behavior stays (AST-017).
 
-import { containsAlongFlatTree } from "./flatTree.js";
+import { containsAlongFlatTree, parentAcrossShadow } from "./flatTree.js";
+import { subscribeInput } from "./inputStream.js";
 import { isIosWebKit } from "./touchQueries.js";
 
 /** What a held finger must not start on a control or a cell. */
@@ -77,6 +79,392 @@ export function lockSelection(elements, target) {
       }
     };
   }
+  return lockStyles(set);
+}
+
+/** How a drag's selection hold ends: at a lift, or at a cancel. */
+
+/**
+ * Refuse a new selection while a mouse or pen drag that a recognizer claimed
+ * runs, until the returned function runs. `kept` is the page's selection
+ * when the press began, and it stays. Anything that replaces it while the
+ * drag runs is put back to it. That includes the press's own collapse and a
+ * selection the drag started before its claim. So the drag takes no new
+ * selection and never clears an existing one. `elements` refuse a
+ * selection with inline styles, on every engine. The document refuses one
+ * too, because WebKit extends a drag's selection over text outside the
+ * elements without another `selectstart`. So a `selectstart` anywhere is
+ * refused, and the selection is put back. A `selectstart` does not leave its
+ * shadow tree. So the document refuses only one that starts outside every
+ * shadow tree, and a claiming element inside one refuses its own. The
+ * press's own `mouseup` and `click` come after its `pointerup` in the same
+ * task, and WebKit settles the drag's selection there. So the document's
+ * hold ends a task after a lift. A cancel ends it at once, because nothing
+ * follows a cancel. `onReleased` runs once the document's hold has ended.
+ * The page listeners exist only during a press. Idempotent.
+ */
+export function lockDragSelection(elements, view, kept, onReleased) {
+  const doc = view?.document ?? null;
+  const roots = shadowRootsOfRanges(kept);
+  const restore = () => {
+    const selection = view?.getSelection();
+    // The focused field keeps its own selection (a drag never starts in one).
+    if (selection == null || isTextEntry(deepActiveElement(doc))) {
+      return;
+    }
+    const held = heldRanges(selection, roots);
+    if (kept.length === 0) {
+      if (held.some(range => !range.collapsed)) {
+        selection.removeAllRanges();
+      }
+      return;
+    }
+    // A render can remove what the kept selection held: then there is
+    // nothing to put back.
+    if (sameRanges(held, kept) || !kept.every(isValidRange)) {
+      return;
+    }
+    selectRanges(selection, kept);
+  };
+  restore();
+  const set = new Set(elements);
+  const refuse = event => {
+    if (!isTextEntry(event.target)) {
+      event.preventDefault();
+    }
+  };
+  for (const element of set) {
+    element.addEventListener('selectstart', refuse);
+  }
+  const stopDocument = view == null ? [] : [subscribeInput(view, 'selectstart', refuse, {
+    cancels: true
+  }), subscribeInput(view, 'selectionchange', restore)];
+  const unlockStyles = lockStyles(set);
+  let stage = 'held';
+  let timer = null;
+  const releaseDocument = () => {
+    if (stage === 'done') {
+      return;
+    }
+    stage = 'done';
+    if (timer != null) {
+      view?.clearTimeout(timer);
+      timer = null;
+    }
+    try {
+      restore();
+    } finally {
+      for (const stop of stopDocument) {
+        stop();
+      }
+      onReleased?.();
+    }
+  };
+  return ({
+    isCancel = false
+  } = {}) => {
+    if (stage === 'held') {
+      stage = 'lifted';
+      for (const element of set) {
+        element.removeEventListener('selectstart', refuse);
+      }
+      unlockStyles();
+      // A lift's own mouseup and click follow in its task and must still
+      // meet the hold; nothing follows a cancel, which ends it at once.
+      if (view == null || isCancel) {
+        releaseDocument();
+      } else {
+        timer = view.setTimeout(releaseDocument, 0);
+      }
+    } else if (stage === 'lifted' && isCancel) {
+      releaseDocument();
+    }
+  };
+}
+
+/**
+ * The page's selection now, its ranges copied; none for a collapsed or empty
+ * one. A drag's hold keeps what this read when the press began.
+ */
+export function selectionRangesOf(view) {
+  const selection = view?.getSelection();
+  if (selection == null) {
+    return [];
+  }
+  const composed = composedRangesOf(selection, []);
+  if (composed != null) {
+    return composed.filter(range => !range.collapsed).map(liveWhereItCan);
+  }
+  if (selection.isCollapsed) {
+    return [];
+  }
+  const ranges = [];
+  for (let index = 0; index < selection.rangeCount; index++) {
+    ranges.push(selection.getRangeAt(index).cloneRange());
+  }
+  return ranges;
+}
+
+/**
+ * Whether a press at (`x`, `y`) lands on text a drag would select. That is a
+ * text field, or a character of non-empty text whose element allows a
+ * selection. A native button's label, slotted or not, is not selectable text,
+ * because the engine starts no selection from a drag inside a button. A point
+ * beside text, which a caret query snaps to the nearest character, lands on
+ * none. Where the engine has no caret query, nothing is selectable text.
+ */
+export function startsOnSelectableText(doc, x, y, target) {
+  if (isTextEntry(target)) {
+    return true;
+  }
+  const caret = caretAt(doc, x, y, [...ownShadowRoot(target), ...openShadowRootsOf(target)]);
+  if (caret == null) {
+    return false;
+  }
+  const {
+    node,
+    offset
+  } = caret;
+  if (node.nodeType !== 3 || (node.textContent ?? '').trim() === '') {
+    return false;
+  }
+  // Text directly under a shadow root takes its host's style.
+  const element = node.parentElement ?? (node.parentNode?.nodeType === 11 ? node.parentNode.host : null);
+  if (element == null || !allowsSelection(element) || isInButton(node)) {
+    return false;
+  }
+  const length = (node.textContent ?? '').length;
+  const range = doc.createRange();
+  if (typeof range.getClientRects !== 'function') {
+    return false;
+  }
+  for (const start of [offset - 1, offset]) {
+    if (start < 0 || start >= length) {
+      continue;
+    }
+    range.setStart(node, start);
+    range.setEnd(node, start + 1);
+    for (const rect of Array.from(range.getClientRects())) {
+      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/** Whether `node` is inside a native button, along the flat tree. */
+function isInButton(node) {
+  for (let at = node; at != null; at = parentAcrossShadow(at)) {
+    if (at.nodeType === 1 && at.localName === 'button') {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** The caret position the engine puts at a point, by either query. */
+function caretAt(doc, x, y, shadowRoots) {
+  const queries = doc;
+  if (typeof queries.caretPositionFromPoint === 'function') {
+    // Without the roots, a point over shadow text answers at its host.
+    const position = shadowRoots.length > 0 ? queries.caretPositionFromPoint(x, y, {
+      shadowRoots: [...shadowRoots]
+    }) : queries.caretPositionFromPoint(x, y);
+    return position == null ? null : {
+      node: position.offsetNode,
+      offset: position.offset
+    };
+  }
+  if (typeof queries.caretRangeFromPoint === 'function') {
+    const range = queries.caretRangeFromPoint(x, y);
+    return range == null ? null : {
+      node: range.startContainer,
+      offset: range.startOffset
+    };
+  }
+  return null;
+}
+
+/** Whether an element's text can be selected (`user-select` is not none). */
+function allowsSelection(element) {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (style == null) {
+    return false;
+  }
+  return style.getPropertyValue('user-select') !== 'none' && style.getPropertyValue('-webkit-user-select') !== 'none';
+}
+
+/**
+ * The ranges `selection` holds, with boundaries inside `shadowRoots` where the
+ * engine reads composed ranges.
+ */
+function heldRanges(selection, shadowRoots) {
+  const composed = composedRangesOf(selection, shadowRoots);
+  if (composed != null) {
+    return composed;
+  }
+  const ranges = [];
+  for (let index = 0; index < selection.rangeCount; index++) {
+    ranges.push(selection.getRangeAt(index));
+  }
+  return ranges;
+}
+
+/**
+ * A live copy of `range` when both boundaries share a root, so it follows
+ * DOM changes. A range across roots stays static: no live range holds it.
+ */
+function liveWhereItCan(range) {
+  const live = range.startContainer.ownerDocument?.createRange();
+  if (live == null || range.startContainer.getRootNode() !== range.endContainer.getRootNode()) {
+    return range;
+  }
+  live.setStart(range.startContainer, range.startOffset);
+  live.setEnd(range.endContainer, range.endOffset);
+  return live;
+}
+
+/** Whether both of `range`'s boundaries still exist in the document. */
+function isValidRange(range) {
+  return isValidBoundary(range.startContainer, range.startOffset) && isValidBoundary(range.endContainer, range.endOffset);
+}
+function isValidBoundary(node, offset) {
+  const length = node.nodeType === 3 || node.nodeType === 4 || node.nodeType === 8 ? node.length : node.childNodes.length;
+  return node.isConnected && offset >= 0 && offset <= length;
+}
+
+/** Whether two range lists have the same boundaries, in order. */
+function sameRanges(held, kept) {
+  return held.length === kept.length && kept.every((range, index) => {
+    const other = held[index];
+    return other.startContainer === range.startContainer && other.startOffset === range.startOffset && other.endContainer === range.endContainer && other.endOffset === range.endOffset;
+  });
+}
+
+/**
+ * Put `ranges` back as the selection. One range goes through
+ * `setBaseAndExtent`, which also reaches inside a shadow root.
+ */
+function selectRanges(selection, ranges) {
+  const [only] = ranges;
+  if (ranges.length === 1 && typeof selection.setBaseAndExtent === 'function') {
+    selection.setBaseAndExtent(only.startContainer, only.startOffset, only.endContainer, only.endOffset);
+    return;
+  }
+  selection.removeAllRanges();
+  for (const range of ranges) {
+    const copy = range.startContainer.ownerDocument?.createRange();
+    if (copy == null) {
+      continue;
+    }
+    copy.setStart(range.startContainer, range.startOffset);
+    copy.setEnd(range.endContainer, range.endOffset);
+    selection.addRange(copy);
+  }
+}
+
+/**
+ * The selection's composed ranges, reaching into each open shadow root a
+ * boundary lands on; null where the engine has no `getComposedRanges`.
+ * Without the roots, a selection inside a shadow root reads as one around
+ * its host.
+ */
+function composedRangesOf(selection, known) {
+  const query = selection.getComposedRanges;
+  if (typeof query !== 'function') {
+    return null;
+  }
+  // Engines take the roots as a dictionary, or, in older releases, as
+  // arguments.
+  const read = roots => {
+    try {
+      return query.call(selection, {
+        shadowRoots: roots
+      });
+    } catch {
+      try {
+        return query.call(selection, ...roots);
+      } catch {
+        return null;
+      }
+    }
+  };
+  const roots = [...known];
+  for (;;) {
+    const ranges = read([...roots]);
+    if (ranges == null) {
+      return null;
+    }
+    const found = new Set();
+    for (const range of ranges) {
+      for (const [node, offset] of [[range.startContainer, range.startOffset], [range.endContainer, range.endOffset]]) {
+        for (const child of [node.childNodes[offset], node.childNodes[offset - 1]]) {
+          const root = child?.nodeType === 1 ? child.shadowRoot : null;
+          if (root != null && !roots.includes(root)) {
+            found.add(root);
+          }
+        }
+      }
+    }
+    if (found.size === 0) {
+      return ranges;
+    }
+    roots.push(...found);
+  }
+}
+
+/** The open shadow roots on the root chains of `ranges`' boundaries. */
+function shadowRootsOfRanges(ranges) {
+  const roots = new Set();
+  for (const range of ranges) {
+    for (const root of [...openShadowRootsOf(range.startContainer), ...openShadowRootsOf(range.endContainer)]) {
+      roots.add(root);
+    }
+  }
+  return [...roots];
+}
+
+/**
+ * The open shadow root `target` hosts, if any. A press on text directly under
+ * a shadow root targets its host.
+ */
+function ownShadowRoot(target) {
+  const root = target?.nodeType === 1 ? target.shadowRoot : null;
+  return root == null ? [] : [root];
+}
+
+/** The open shadow roots on `target`'s root chain, innermost first. */
+function openShadowRootsOf(target) {
+  const roots = [];
+  let root = target != null && typeof target.nodeType === 'number' ? target.getRootNode() : null;
+  while (root != null && root.nodeType === 11) {
+    const host = root.host;
+    if (host == null) {
+      break;
+    }
+    if (root.mode === 'open') {
+      roots.push(root);
+    }
+    root = host.getRootNode();
+  }
+  return roots;
+}
+
+/** The focused element, inside open shadow roots too. */
+function deepActiveElement(doc) {
+  let active = doc?.activeElement ?? null;
+  while (active?.shadowRoot?.activeElement != null) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+}
+
+/**
+ * The selection-lock styles on `set`, refcounted per element; idempotent
+ * release.
+ */
+function lockStyles(set) {
   const locked = [];
   for (const element of set) {
     const style = styleOf(element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.36f8ea1",
+  "version": "0.7.7-canary.550ff21",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -860,9 +860,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.36f8ea1",
-    "@astryxdesign/cli": "0.7.7-canary.36f8ea1",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.36f8ea1",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.550ff21",
+    "@astryxdesign/cli": "0.7.7-canary.550ff21",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.550ff21",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -46,6 +46,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/CommandPalette/CommandPaletteInput.generated';
+import {textEntryTraitAttributes} from '../Field/textEntryTraits';
 
 registerEnglishFallback(english);
 const styles = stylex.create({
@@ -320,6 +321,11 @@ export function CommandPaletteInput({
           ? focusOutlineProps.focusVisible(styles.input)
           : focusOutlineProps.suppressed(styles.input))}
         type="text"
+        // Autocorrect would rewrite names and identifiers.
+        {...textEntryTraitAttributes({
+          enterKeyHint: 'search',
+          hasAutoCorrect: false,
+        })}
         role={ctx ? 'combobox' : standaloneRole}
         aria-expanded={
           ctx

package/src/DateInput/MonthScroller.tsx

@@ -62,6 +62,7 @@ import {
   plainDateToISO,
   DATE_FORMAT_WITH_WEEKDAY,
 } from '../utils';
+import {reducedMotionFade} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {useScrollSettle} from './useScrollSettle';
@@ -431,8 +432,26 @@ export function MonthScroller({
     );
   }, [paneSize, initialMonthIndex, minMonthIndex, isRTL]);
 
+  // The Reduced Motion dip of a step on a touch screen, owned here so a
+  // second step or the unmount clears it.
+  const dipRef = useRef<{animation: Animation; timer: number} | null>(null);
+  const stopDip = useCallback(() => {
+    const dip = dipRef.current;
+    if (dip != null) {
+      window.clearTimeout(dip.timer);
+      dip.animation.cancel();
+      dipRef.current = null;
+    }
+  }, []);
+  // Synchronizes with the dip's timer and animation: neither outlives the
+  // scroller.
+  useEffect(() => stopDip, [stopDip]);
+
   const scrollToMonth = useCallback(
     (monthIndex: number, behavior: ScrollBehavior = 'smooth') => {
+      // Every step replaces a running dip, whichever way it moves. Otherwise
+      // the dip's landing would undo a jump or an immediate step made after it.
+      stopDip();
       const scroller = scrollerRef.current;
       if (scroller == null || paneSize === 0) {
         return;
@@ -458,13 +477,52 @@ export function MonthScroller({
         recenter(scroller, row);
         return;
       }
+      const left = scrollOffsetForRow(row, paneSize, isRTL);
+      // Under reduced motion the month changes without travel: at once on a fine
+      // primary pointer, under an opacity dip on a coarse one (reducedMotionFade).
+      const fade = behavior === 'smooth' ? reducedMotionFade(scroller) : null;
+      if (fade != null) {
+        // The window mounts around the target first, and the scroll lands in
+        // the layout effect below, as a far jump does. So nothing moves the
+        // window after the jump. If the window followed the jump, WebKit would
+        // re-snap it one pane further on every frame. A scroll that lands on
+        // the centre row reports nothing.
+        const land = () => {
+          // The landing is the newest steer. An earlier steer whose scroll
+          // never arrived would otherwise hide every scroll after it, a
+          // trackpad's included. Closing the wheels makes such a steer: it
+          // re-asserts the month already in view.
+          steeredRowRef.current = null;
+          if (row === centerRowRef.current) {
+            scroller.scrollTo({left, behavior: 'auto'});
+            return;
+          }
+          pendingScrollRef.current = row;
+          centerRowRef.current = row;
+          setCenterRow(row);
+        };
+        if (fade.duration === 0) {
+          land();
+          return;
+        }
+        // A second step within the dip has replaced the first (above): only
+        // its scroll lands, at its own dip's middle.
+        dipRef.current = {
+          animation: scroller.animate(
+            [{opacity: 1}, {opacity: 0}, {opacity: 1}],
+            {duration: fade.duration, easing: fade.easing},
+          ),
+          timer: window.setTimeout(() => {
+            dipRef.current = null;
+            land();
+          }, fade.duration / 2),
+        };
+        return;
+      }
       steeredRowRef.current = row;
-      scroller.scrollTo({
-        left: scrollOffsetForRow(row, paneSize, isRTL),
-        behavior,
-      });
+      scroller.scrollTo({left, behavior});
     },
-    [paneSize, minMonthIndex, rowCount, isRTL, recenter],
+    [paneSize, minMonthIndex, rowCount, isRTL, recenter, stopDip],
   );
 
   // Deliberately un-keyed: it runs after every render, costs a null check, and