@astryxdesign/core 0.7.8 → 0.7.9-canary.048476f

package/dist/utils/flatTree.d.ts

@@ -1,11 +1,12 @@
 /**
  * @file flatTree.ts
  * @input A DOM node
- * @output Exports parentAcrossShadow, and containsAlongFlatTree, which walks it
+ * @output Exports parentAcrossShadow, containsAlongFlatTree, which walks it,
+ *   and deepActiveElement
  * @position The flat-tree parent the browser scrolls and dispatches
- *   through, shared by the gesture host's native-scroll probe and the
+ *   through, shared by the gesture host's native-scroll probe, the
  *   selection lock (which the press feedback controller uses without the
- *   gesture system)
+ *   gesture system) and the Layer module's input hold
  */
 /** The node's parent, crossing out of shadow roots. */
 export declare function parentAcrossShadow(node: Node): Node | null;
@@ -14,4 +15,6 @@ export declare function parentAcrossShadow(node: Node): Node | null;
  * shadow root to its host, which `Node.contains` does not follow.
  */
 export declare function containsAlongFlatTree(ancestor: Node, node: Node): boolean;
+/** The focused element of `doc`, inside open shadow roots too. */
+export declare function deepActiveElement(doc: Document | null | undefined): Element | null;
 //# sourceMappingURL=flatTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"flatTree.d.ts","sourceRoot":"","sources":["../../src/utils/flatTree.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,uDAAuD;AACvD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAa1D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAOzE"}
+{"version":3,"file":"flatTree.d.ts","sourceRoot":"","sources":["../../src/utils/flatTree.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,uDAAuD;AACvD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAa1D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAOzE;AAED,kEAAkE;AAClE,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS,GAC/B,OAAO,GAAG,IAAI,CAMhB"}

package/dist/utils/flatTree.js

@@ -3,11 +3,12 @@
 /**
  * @file flatTree.ts
  * @input A DOM node
- * @output Exports parentAcrossShadow, and containsAlongFlatTree, which walks it
+ * @output Exports parentAcrossShadow, containsAlongFlatTree, which walks it,
+ *   and deepActiveElement
  * @position The flat-tree parent the browser scrolls and dispatches
- *   through, shared by the gesture host's native-scroll probe and the
+ *   through, shared by the gesture host's native-scroll probe, the
  *   selection lock (which the press feedback controller uses without the
- *   gesture system)
+ *   gesture system) and the Layer module's input hold
  */
 
 /** The node's parent, crossing out of shadow roots. */
@@ -35,4 +36,13 @@ export function containsAlongFlatTree(ancestor, node) {
     }
   }
   return false;
+}
+
+/** The focused element of `doc`, inside open shadow roots too. */
+export function deepActiveElement(doc) {
+  let active = doc?.activeElement ?? null;
+  while (active?.shadowRoot?.activeElement != null) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"hitArea.d.ts","sourceRoot":"","sources":["../../src/utils/hitArea.ts"],"names":[],"mappings":"AA6BA,+BAA+B;AAC/B,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,SAAkD,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAmCX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,MAAyB,GACjC,SAAS,CA4CX;AAYD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7B,OAAO,GAAE,MAAyB,GACjC,MAAM,CAoBR;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,CAI5E;AAmdD,iCAAiC;AACjC,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,EACrC,EAAC,OAA0B,EAAC,GAAE,mBAAwB,GACrD,MAAM,IAAI,CAyDZ"}
+{"version":3,"file":"hitArea.d.ts","sourceRoot":"","sources":["../../src/utils/hitArea.ts"],"names":[],"mappings":"AAgCA,+BAA+B;AAC/B,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,SAAkD,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAmCX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,MAAyB,GACjC,SAAS,CA4CX;AAYD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7B,OAAO,GAAE,MAAyB,GACjC,MAAM,CAoBR;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,CAI5E;AAsjBD,iCAAiC;AACjC,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,EACrC,EAAC,OAA0B,EAAC,GAAE,mBAAwB,GACrD,MAAM,IAAI,CAyDZ"}

package/dist/utils/hitArea.js

@@ -24,6 +24,9 @@
 // live control measures: only under a coarse primary pointer (AST-094), only on
 // screen, and in one read pass per frame within a 4 ms budget. Until the first
 // pass the insets are 0, so first paint never overlaps anything.
+// The insets are lengths in the control's own box, so a pass measures in its
+// layout px. A layer that opens from a smaller scale then keeps the insets of
+// the size it settles at.
 import { observeContent } from "./sharedMutationObserver.js";
 
 /** A rect in client pixels. */
@@ -263,6 +266,74 @@ function plainRect(element) {
     bottom
   };
 }
+
+/** A box that the transforms around it leave at its layout size. */
+const UNSCALED = {
+  x: 1,
+  y: 1
+};
+
+/** One axis of a box's scale on screen: its client size over its layout size. */
+function axisScale(onScreen, layout) {
+  if (!(layout > 0) || !(onScreen > 0)) {
+    return 1;
+  }
+  const scale = onScreen / layout;
+  // Within rounding of 1 the box is at its layout size: no change to the rects.
+  return Math.abs(scale - 1) < 1e-3 ? 1 : scale;
+}
+
+/**
+ * How far the transforms around `element` scale its box on screen, per axis.
+ * A layer that opens from a smaller scale scales every rect inside it, while
+ * the layout box keeps the size the layer settles at. Only a scale is
+ * expected: a rotated or skewed box would read as a larger scale.
+ */
+function screenScale(element, onScreen) {
+  // The offset size is the layout size in whole pixels, unaffected by
+  // transforms, and costs no style resolution. A box with none, such as an SVG
+  // element or a jsdom box, reads as unscaled.
+  const box = element;
+  const offsetWidth = box.offsetWidth ?? 0;
+  const offsetHeight = box.offsetHeight ?? 0;
+  if (offsetWidth === 0 || offsetHeight === 0) {
+    return UNSCALED;
+  }
+  // Within a pixel of its layout size the box reads as unscaled, which bounds
+  // the inset error at about a pixel. Only a box that a transform shrinks or
+  // grows reads its exact size from the computed style.
+  if (Math.abs(onScreen.right - onScreen.left - offsetWidth) <= 1 && Math.abs(onScreen.bottom - onScreen.top - offsetHeight) <= 1) {
+    return UNSCALED;
+  }
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (style == null || !style.width.endsWith('px')) {
+    return UNSCALED;
+  }
+  const px = value => Number.parseFloat(value) || 0;
+  const isContentBox = style.boxSizing !== 'border-box';
+  const width = px(style.width) + (isContentBox ? px(style.paddingLeft) + px(style.paddingRight) + px(style.borderLeftWidth) + px(style.borderRightWidth) : 0);
+  const height = px(style.height) + (isContentBox ? px(style.paddingTop) + px(style.paddingBottom) + px(style.borderTopWidth) + px(style.borderBottomWidth) : 0);
+  return {
+    x: axisScale(onScreen.right - onScreen.left, width),
+    y: axisScale(onScreen.bottom - onScreen.top, height)
+  };
+}
+
+/**
+ * `rect` in the layout px of the box at `origin`: its offset from `origin`,
+ * divided by that box's scale on screen.
+ */
+function inLayout(rect, origin, scale) {
+  if (scale.x === 1 && scale.y === 1) {
+    return rect;
+  }
+  return {
+    left: origin.left + (rect.left - origin.left) / scale.x,
+    top: origin.top + (rect.top - origin.top) / scale.y,
+    right: origin.left + (rect.right - origin.left) / scale.x,
+    bottom: origin.top + (rect.bottom - origin.top) / scale.y
+  };
+}
 /** The watched element `element` belongs to, if any (itself included). */
 function watchedOwner(element) {
   for (let node = element; node != null; node = node.parentElement) {
@@ -297,14 +368,15 @@ function readCandidates(doc) {
 /** A control's rect and clamped insets, from candidates already read. */
 function measureOne(watch, candidates) {
   const target = plainRect(watch.element);
+  const scale = screenScale(watch.element, target);
   // Two targets each growing up to half the minimum reach each other from a
   // minimum apart.
   const reach = Math.max(0, watch.minSize);
   const band = grown(target, {
-    top: reach,
-    right: reach,
-    bottom: reach,
-    left: reach
+    top: reach * scale.y,
+    right: reach * scale.x,
+    bottom: reach * scale.y,
+    left: reach * scale.x
   });
   const neighbours = candidates.filter(({
     element,
@@ -314,7 +386,12 @@ function measureOne(watch, candidates) {
   }) => rect);
   return {
     target,
-    insets: clampedHitInsets(target, neighbours, watch.minSize),
+    // The insets are in the control's layout px. The returned rects stay in
+    // screen px for a touch's distance checks. A neighbour maps by the
+    // control's scale, as if it is in the same layer. A neighbour outside that
+    // layer then reads farther away. A touch compares screen distances, so it
+    // still counts that neighbour.
+    insets: clampedHitInsets(inLayout(target, target, scale), neighbours.map(rect => inLayout(rect, target, scale)), watch.minSize),
     neighbours
   };
 }

package/dist/utils/inputStream.d.ts

@@ -6,12 +6,25 @@ export interface InputSubscriptionOptions {
      * @default false
      */
     readonly cancels?: boolean;
+    /**
+     * The subscriber runs before every subscriber that is not first. When it
+     * returns `true`, no later subscriber hears the event.
+     * @default false
+     */
+    readonly first?: boolean;
 }
 /** The events a window's capture phase sees: its own, and the document's. */
 export type InputEventMap = WindowEventMap & DocumentEventMap;
+/**
+ * The type of the latest pointer event `view`'s stream delivered: `mouse`,
+ * `pen` or `touch`, or `null` before any. The stream hears a pointer event
+ * type only while a subscriber listens to it, as press feedback does on any
+ * page with a pressable. Reading it adds no listener.
+ */
+export declare function getLastPointerType(view: Window): string | null;
 /**
  * Listen to `type` on `view`'s capture phase through its shared native
  * listener. Returns the unsubscribe; calling it again does nothing.
  */
-export declare function subscribeInput<K extends keyof InputEventMap>(view: Window, type: K, listener: (event: InputEventMap[K]) => void, { cancels }?: InputSubscriptionOptions): () => void;
+export declare function subscribeInput<K extends keyof InputEventMap>(view: Window, type: K, listener: (event: InputEventMap[K]) => unknown, { cancels, first }?: InputSubscriptionOptions): () => void;
 //# sourceMappingURL=inputStream.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"inputStream.d.ts","sourceRoot":"","sources":["../../src/utils/inputStream.ts"],"names":[],"mappings":"AA4CA,0CAA0C;AAC1C,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1D,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,EAAC,OAAe,EAAC,GAAE,wBAA6B,GAC/C,MAAM,IAAI,CAoCZ"}
+{"version":3,"file":"inputStream.d.ts","sourceRoot":"","sources":["../../src/utils/inputStream.ts"],"names":[],"mappings":"AAgDA,0CAA0C;AAC1C,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAM9D;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAE9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1D,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,OAAO,EAC9C,EAAC,OAAe,EAAE,KAAa,EAAC,GAAE,wBAA6B,GAC9D,MAAM,IAAI,CA4CZ"}

package/dist/utils/inputStream.js

@@ -4,7 +4,8 @@
  * @file inputStream.ts
  * @input A window, and subscribers to its input events (the press feedback
  *   controller, the gesture host)
- * @output subscribeInput
+ * @output subscribeInput, and getLastPointerType: the type of the latest
+ *   pointer event the stream delivered
  * @position The one entry for document-wide input listeners in core: one
  *   native listener per event type on the window's capture phase, shared by
  *   every subscriber
@@ -22,8 +23,10 @@
 // `blur` or `focus`. A subscriber for the window's own event checks
 // `event.target`.
 //
-// Subscribers run in subscription order. One that throws is reported, and
-// the rest still run.
+// Subscribers run in subscription order, after the ones subscribed `first`.
+// A first subscriber that returns `true` ends the dispatch: no later
+// subscriber hears the event. One that throws is reported, and the rest still
+// run.
 //
 // A type's native listener is passive, so it blocks no scroll. It is
 // non-passive only while a subscriber that cancels the event
@@ -34,13 +37,26 @@
 /** The events a window's capture phase sees: its own, and the document's. */
 
 const streams = new WeakMap();
+/** The type of the latest pointer event each window's stream delivered. */
+const lastPointerTypes = new WeakMap();
+
+/**
+ * The type of the latest pointer event `view`'s stream delivered: `mouse`,
+ * `pen` or `touch`, or `null` before any. The stream hears a pointer event
+ * type only while a subscriber listens to it, as press feedback does on any
+ * page with a pressable. Reading it adds no listener.
+ */
+export function getLastPointerType(view) {
+  return lastPointerTypes.get(view) ?? null;
+}
 
 /**
  * Listen to `type` on `view`'s capture phase through its shared native
  * listener. Returns the unsubscribe; calling it again does nothing.
  */
 export function subscribeInput(view, type, listener, {
-  cancels = false
+  cancels = false,
+  first = false
 } = {}) {
   let channels = streams.get(view);
   if (channels == null) {
@@ -57,9 +73,15 @@ export function subscribeInput(view, type, listener, {
   }
   const subscriber = {
     listener: listener,
-    cancels
+    cancels,
+    isFirst: first
   };
-  channel.subscribers.push(subscriber);
+  const firstLater = first ? channel.subscribers.findIndex(other => !other.isFirst) : -1;
+  if (firstLater === -1) {
+    channel.subscribers.push(subscriber);
+  } else {
+    channel.subscribers.splice(firstLater, 0, subscriber);
+  }
   register(view, type, channel);
   let isSubscribed = true;
   return () => {
@@ -101,7 +123,7 @@ function register(view, type, channel) {
   if (wanted == null) {
     return;
   }
-  const listener = event => dispatch(channel, event);
+  const listener = event => dispatch(view, channel, event);
   view.addEventListener(type, listener, {
     capture: true,
     passive: !wanted
@@ -111,7 +133,14 @@ function register(view, type, channel) {
     cancels: wanted
   };
 }
-function dispatch(channel, event) {
+function dispatch(view, channel, event) {
+  // Recorded before any subscriber runs, so each reads the pointer at hand.
+  const {
+    pointerType
+  } = event;
+  if (typeof pointerType === 'string' && pointerType !== '') {
+    lastPointerTypes.set(view, pointerType);
+  }
   // A subscriber may subscribe or unsubscribe while the event runs; the
   // event goes to those subscribed when it arrived.
   for (const subscriber of [...channel.subscribers]) {
@@ -119,7 +148,9 @@ function dispatch(channel, event) {
       continue;
     }
     try {
-      subscriber.listener(event);
+      if (subscriber.listener(event) === true && subscriber.isFirst) {
+        return;
+      }
     } catch (error) {
       report(error);
     }

package/dist/utils/interactionOverlay.stylex.d.ts

@@ -3,7 +3,8 @@
  * @input StyleX and the semantic interaction-overlay color tokens
  * @output Reusable background-color and background-image state styles, the
  *   touch press's registered strength variable (`pressVars`) and its clocks
- *   (`pressConsts`)
+ *   (`pressConsts`). The list row's compositor press layer and its clocks
+ *   are internal (privateAttributes/press.stylex.ts, utils/rowPressLayer.stylex.ts)
  * @position Internal styling utility for interactive core surfaces
  *
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade

package/dist/utils/interactionOverlay.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;GAeG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AAkIH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}

package/dist/utils/interactionOverlay.stylex.js

@@ -9,7 +9,8 @@
  * @input StyleX and the semantic interaction-overlay color tokens
  * @output Reusable background-color and background-image state styles, the
  *   touch press's registered strength variable (`pressVars`) and its clocks
- *   (`pressConsts`)
+ *   (`pressConsts`). The list row's compositor press layer and its clocks
+ *   are internal (privateAttributes/press.stylex.ts, utils/rowPressLayer.stylex.ts)
  * @position Internal styling utility for interactive core surfaces
  *
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
@@ -142,7 +143,11 @@ const pressRelease = "x10jkm1t-B";
  * (strength ≈ 0.2 at the midpoint), which is what a deselect crossfade reads
  * as. Not the system's `--ease-standard`: that curve is for things that move,
  * and is so front-loaded (strength 0.05 at the midpoint) that the release
- * would read as half its clock.
+ * would read as half its clock. It is the constants table's
+ * `timing.press.highlightOutCurve`, which the list row's layer mirrors too
+ * (rowPressLayer.stylex.ts); interactionOverlay.cell.test.ts fails if either
+ * drifts. A copy, not an import: this module reaches nearly every component,
+ * and the row layer's constants stay with the rows.
  */
 const RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
 

package/dist/utils/pressFeedback.d.ts

@@ -29,6 +29,13 @@ export declare const PRESS_GESTURE_MEMORY_MS = 3000;
  * Reduce Motion a tempo may shorten the fade, never lengthen it past 200 ms.
  */
 export declare function pressFadeMs(element: Element): number;
+/**
+ * Ends the press the controller follows on `element`, and its paint, at once.
+ * A clickable container calls it when a press starts on an interactive
+ * element inside it: that press does not activate the container, so the
+ * container shows no press.
+ */
+export declare function cancelPress(element: Element): void;
 /**
  * Install the touch press controller on this document, once, however many
  * times it is called: the listeners exist while at least one caller holds it.

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

@@ -1 +1 @@
-{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AAkoBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}
+{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAuDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AA6ND;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAOlD;AA4aD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}

package/dist/utils/pressFeedback.js

@@ -3,10 +3,10 @@
 /**
  * @file pressFeedback.ts
  * @input The press state machine (pressGesture.ts), the menu-press and
- *   press-group markers and the document's pointer, keyboard, scroll and
+ *   press-group markers, the scroll-view test (scrollView.ts) and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps,
- *   pressFadeMs and installPressFeedback
+ *   pressFadeMs, installPressFeedback and cancelPress
  * @position The DOM half of the touch press model. usePressFeedback installs
  *   it, and the CSS arms live in interactionOverlay.stylex.ts.
  *
@@ -23,9 +23,13 @@
 // Where the primary pointer is fine, the controller ignores the mouse and the
 // keyboard, and CSS `:active` keeps their press. Under a coarse primary
 // pointer the CSS drops `:active`, so the controller paints every press. A
-// finger's press paints after the delay. A mouse, trackpad or Space press
-// paints at once. The controller reads the same query as the stylesheet, so
-// they agree.
+// mouse, trackpad or Space press paints at once. The controller reads the
+// same query as the stylesheet, so they agree.
+//
+// A finger waits only inside a scroller. Outside one, a surface highlights in
+// the frame the finger lands, as a UIControl does. Inside one, it waits the
+// content-touch delay, because the touch can become a scroll. Rows follow the
+// same rule.
 //
 // A surface's hold does nothing, so it keeps the browser's long-press text
 // selection (AST-094). Only an element whose hold does something suppresses
@@ -36,6 +40,7 @@ import { MENU_PRESS_MARKER } from "../hooks/menuPressMarker.js";
 import { idlePressGesture, PRESS_FADE_MS, PRESS_FLASH_MS, PRESS_ONSET_MS, PRESS_SCROLL_BRAKE_MS, pressGestureStep } from "./pressGesture.js";
 import { isCoarsePointer, watchCoarsePointer } from "./coarsePointer.js";
 import { subscribeInput } from "./inputStream.js";
+import { isInsideScrollView } from "./scrollView.js";
 import { TOUCH_QUERY } from "./touchPresentation.js";
 import { holdsPressThroughDrag } from "../privateAttributes/pressHoldsDrag.stylex.js";
 import { isTrackedByGroup } from "../privateAttributes/pressGroupItem.stylex.js";
@@ -208,7 +213,11 @@ function paintElement(element, paint) {
     element.removeAttribute(PRESSED_ATTRIBUTE);
     return;
   }
-  element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  // A step that keeps the paint writes nothing, so the element sees one
+  // change per paint.
+  if (element.getAttribute(PRESSED_ATTRIBUTE) !== paint) {
+    element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  }
 }
 function clearTimer(slot) {
   if (slot.live?.timer != null) {
@@ -334,6 +343,21 @@ function finish(slot) {
   }
 }
 
+/**
+ * Ends the press the controller follows on `element`, and its paint, at once.
+ * A clickable container calls it when a press starts on an interactive
+ * element inside it: that press does not activate the container, so the
+ * container shows no press.
+ */
+export function cancelPress(element) {
+  if (finger.live?.element === element) {
+    finish(finger);
+  }
+  if (button.live?.element === element) {
+    finish(button);
+  }
+}
+
 /** A new press on an element owns its paint: the other slot's gesture there ends. */
 function takeOver(other, element) {
   if (other.live?.element === element) {
@@ -466,7 +490,8 @@ function onPointerDown(event) {
   apply(finger, pressGestureStep(finger.live.gesture, {
     kind: 'down',
     x: event.clientX,
-    y: event.clientY
+    y: event.clientY,
+    delayed: isInsideScrollView(element)
   }));
 }
 function onPointerMove(event) {

package/dist/utils/pressGesture.d.ts

@@ -71,6 +71,12 @@ export type PressEvent = {
     kind: 'down';
     x: number;
     y: number;
+    /**
+     * Whether this touch waits {@link PRESS_ONSET_MS} before it paints:
+     * a surface inside a scroller. Defaults to
+     * `true`.
+     */
+    delayed?: boolean;
 }
 /**
  * A mouse button or the Space key went down on the surface. The

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

@@ -1 +1 @@
-{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AA4BA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC;AACtC;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CA6GX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}
+{"version":3,"file":"pressGesture.d.ts","sourceRoot":"","sources":["../../src/utils/pressGesture.ts"],"names":[],"mappings":"AAgCA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,MAA8B,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACH;;;;GAIG;GACD;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC;AACtB,0EAA0E;GACxE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,GACpC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAC;AACd,4FAA4F;GAC1F;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC;AAClB,iEAAiE;GAC/D;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC;AACjB,yDAAyD;GACvD;IAAC,IAAI,EAAE,UAAU,CAAA;CAAC;AACpB,wFAAwF;GACtF;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACnD;AAkBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,GAChB,SAAS,CAsHX;AAED,wBAAgB,gBAAgB,IAAI,YAAY,CAE/C"}

package/dist/utils/pressGesture.js

@@ -21,6 +21,10 @@
 // primary pointer, so a mouse, trackpad or Space press on such a device comes
 // here as `buttonDown`: painted at once and faded on release.
 //
+// Only a finger inside a scroller waits. The controller tells the machine
+// which touch waits (`down`'s `delayed`), and a touch that does not wait goes
+// straight to `pressed`. After that the machine is the same.
+//
 // The constants were measured against native apps. The machine knows nothing
 // of the DOM, so {@link pressGestureStep}'s cases are the state diagram.
 
@@ -123,6 +127,19 @@ function step(gesture, phase, paint, timer) {
  */
 export function pressGestureStep(gesture, event) {
   if (event.kind === 'down') {
+    // A surface with no scroller above it: nothing can turn this touch into a
+    // scroll, so it paints in the frame it lands, as a UIControl highlights.
+    if (event.delayed === false) {
+      return {
+        gesture: {
+          originX: event.x,
+          originY: event.y,
+          phase: 'pressed'
+        },
+        paint: 'on',
+        timer: null
+      };
+    }
     // A new touch always starts armed and painting nothing, whatever the last
     // gesture ended as. This is the only way out of `dead`.
     return {

package/dist/utils/rowPressLayer.stylex.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A list row's release (`rowPressLayerStyles.cell`), mirrored for the
+ * stylesheet. StyleX evaluates a style at build time and cannot read the
+ * constants table, so these are the table's press release values
+ * (`timing.press`, motion/uikit/timing.ts). interactionOverlay.cell.test.ts
+ * fails if they drift.
+ */
+export declare const cellPressConsts: {
+    /** `timing.press.highlightOutMs`, in ms. */
+    cellReleaseMs: number;
+    /** `timing.press.highlightOutCurve`, as CSS. */
+    cellReleaseEase: string;
+};
+//# sourceMappingURL=rowPressLayer.stylex.d.ts.map

package/dist/utils/rowPressLayer.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowPressLayer.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/rowPressLayer.stylex.ts"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;IAC1B,4CAA4C;;IAE5C,gDAAgD;;CAEhD,CAAC"}

package/dist/utils/rowPressLayer.stylex.js

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file rowPressLayer.stylex.ts
+ * @input StyleX
+ * @output The list row press layer's clocks (`cellPressConsts`)
+ * @position Internal to core: no package entry exports it. Only the row
+ *   layer (privateAttributes/press.stylex.ts) reads it, so a component
+ *   without a press row ships none of it; interactionOverlay.exports.test.ts
+ *   keeps it off the published paths.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * A list row's release (`rowPressLayerStyles.cell`), mirrored for the
+ * stylesheet. StyleX evaluates a style at build time and cannot read the
+ * constants table, so these are the table's press release values
+ * (`timing.press`, motion/uikit/timing.ts). interactionOverlay.cell.test.ts
+ * fails if they drift.
+ */
+export const cellPressConsts = {
+  cellReleaseMs: 200,
+  cellReleaseEase: "cubic-bezier(0, 0, 0.2, 1)"
+};

package/dist/utils/scrollView.d.ts

@@ -0,0 +1,25 @@
+/** Overflow values that let a box scroll. */
+export declare const SCROLLABLE_OVERFLOW: ReadonlySet<string>;
+export interface AllowedPans {
+    readonly x: boolean;
+    readonly y: boolean;
+}
+/** Which pans a `touch-action` value lets the browser perform. */
+export declare function parseTouchAction(value: string): AllowedPans;
+/**
+ * The viewport's overflow on an axis. It scrolls unless the root or the body
+ * clips it, as a scroll lock does with `overflow: hidden`.
+ */
+export declare function rootOverflow(doc: Document, axis: 'x' | 'y'): string;
+/**
+ * Whether a touch on `element` lands inside a scroll view, UIKit's question
+ * for a touch: a box above it, the page included, overflows on an axis it
+ * scrolls, and `touch-action` on the way up leaves that axis to the browser.
+ * A `position: fixed` box ends the walk, because it does not move with any
+ * scroller above it. A wheel scrolls whatever `touch-action` says, so a
+ * wheel's question passes `readsTouchAction: false`.
+ */
+export declare function isInsideScrollView(element: Element, { readsTouchAction }?: {
+    readsTouchAction?: boolean;
+}): boolean;
+//# sourceMappingURL=scrollView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollView.d.ts","sourceRoot":"","sources":["../../src/utils/scrollView.ts"],"names":[],"mappings":"AAgBA,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAIlD,CAAC;AAKH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAiB3D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAgBnE;AAQD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,OAAO,EAChB,EAAC,gBAAuB,EAAC,GAAE;IAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAAM,GAC3D,OAAO,CA4CT"}