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

package/src/Field/PanelSearchInput.tsx

@@ -57,6 +57,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
+import {textEntryTraitAttributes} from './textEntryTraits';
 
 const styles = stylex.create({
   // Gutter only. Matches the option list's own padding so the field below
@@ -273,6 +274,11 @@ export function PanelSearchInput({
         <input
           ref={mergedInputRef}
           type="text"
+          // Autocorrect would rewrite names and identifiers.
+          {...textEntryTraitAttributes({
+            enterKeyHint: 'search',
+            hasAutoCorrect: false,
+          })}
           aria-label={label}
           placeholder={placeholder}
           value={value}

package/src/Field/textEntryTraits.ts

@@ -3,16 +3,16 @@
 /**
  * @file textEntryTraits.ts
  * @input The keyboard-trait props a text field accepts
- * @output Exports the closed value unions EnterKeyHint, InputMode and
- *   AutoCapitalize (the package entry exports these three), the fields' prop
- *   mixin TextEntryTraitProps, and textEntryTraitAttributes, which maps the
- *   props onto the native attributes of the editable element
- * @position Shared by TextInput and TextArea: the one place that says how a
- *   field tells a touch keyboard what it holds
+ * @output EnterKeyHint, InputMode and AutoCapitalize (the package entry exports
+ *   these), TextEntryTraitProps and textEntryTraitAttributes
+ * @position Shared by TextInput, TextArea and the search inputs: the one place
+ *   that says how a field tells a touch keyboard what it holds
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
  * - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
+ * - /packages/core/src/Typeahead/BaseTypeahead.tsx, Field/PanelSearchInput.tsx
+ *   and CommandPalette/CommandPaletteInput.tsx (the search inputs)
  * - /packages/core/src/Field/index.ts (type exports)
  */
 

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -160,7 +160,7 @@ export const docs = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,
@@ -304,7 +304,7 @@ export const docsZh = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,
@@ -347,7 +347,7 @@ export const docsDense = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,

package/src/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file ProgressBar.tsx
- * @input Uses React, useId, stylex, color/spacing/radius/transition tokens
+ * @input Uses React, useId, stylex, tokens and ProgressBarTouch
  * @output Exports ProgressBar component, ProgressBarProps, ProgressBarVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -35,6 +35,7 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {ProgressBarVariantMap} from './index';
+import {useProgressBarTouch} from './ProgressBarTouch';
 
 // Every mark is wrapped in a Tooltip (marks always carry a label), so load it
 // lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
@@ -249,10 +250,26 @@ const styles = stylex.create({
   // no transform), as before: the track's clip would cut the CanvasText
   // outline's start cap off a slid fill, and that outline is what keeps the
   // fill's shape visible there (architecture:theme-tokens INV11).
+  //
+  // Under a finger (TOUCH_QUERY, on every touch device), the fill moves as
+  // UIProgressView's setProgress(_:animated: true) does. It moves linearly
+  // from wherever it is drawn. Its duration is the `progress.fillTrackMs` role
+  // times the share of the track the value moved (`--_progress-bar-move`).
+  // Its curve is the `progress.curves.fill` role (`--_progress-bar-curve`).
+  // The touch layer (ProgressBarTouch) writes both, and this rule scales the
+  // duration by the theme's tempo. Above zero, the fill never draws shorter
+  // than the touch minimum (`--_progress-bar-min`, 16px on the 8px track). At
+  // zero it paints nothing (`fillEmpty`). Under reduced motion it lands at
+  // once, as everywhere (below). A mouse or trackpad keeps the theme's timing.
   fill: {
     width: {
       default: '100%',
-      '@media (forced-colors: active)': 'var(--_progress-bar-fill, 0%)',
+      '@media (forced-colors: active)': {
+        default: 'var(--_progress-bar-fill, 0%)',
+        // Under a finger: the touch minimum and the flip offset (below).
+        '@media (pointer: coarse)':
+          'calc(max(var(--_progress-bar-fill, 0%), var(--_progress-bar-min, 0px)) + var(--_progress-bar-flip, 0) * 0.01px)',
+      },
     },
     height: '100%',
     // Forced colors replace status fills with Canvas; this boundary keeps the
@@ -271,6 +288,19 @@ const styles = stylex.create({
         default: 'translateX(calc(100% - var(--_progress-bar-fill, 0%)))',
         '@media (forced-colors: active)': 'none',
       },
+      '@media (pointer: coarse)': {
+        // `--_progress-bar-flip` steps 0, 1, 2, 0… on every change. It moves
+        // the fill by that many hundredths of a pixel. So a change back to the
+        // value it just left is never the running transition's own start
+        // value. CSS shortens a transition that reverses to its start, which
+        // would halve a return mid-flight (10 → 90 → 10). It takes three
+        // values because two would repeat on that return.
+        default:
+          'translateX(calc(max(var(--_progress-bar-fill, 0%), var(--_progress-bar-min, 0px)) - 100% + var(--_progress-bar-flip, 0) * 0.01px))',
+        ':dir(rtl)':
+          'translateX(calc(min(calc(100% - var(--_progress-bar-fill, 0%)), calc(100% - var(--_progress-bar-min, 0px))) - var(--_progress-bar-flip, 0) * 0.01px))',
+      },
+      // After the touch key, so StyleX negates that key under forced colors.
       '@media (forced-colors: active)': 'none',
     },
     willChange: {
@@ -281,17 +311,36 @@ const styles = stylex.create({
       default: 'transform',
       '@media (forced-colors: active)': 'width',
     },
-    // Under reduced motion a new value lands at once, on every pointer: the
-    // fill never travels (design:reduced-motion DR1). The keys are the shared
-    // reduced-motion queries, a fine pointer's and a coarse pointer's, spelled
-    // as the record's other transitions spell them.
+    // Under reduced motion a new value lands at once, with a mouse as with a
+    // finger: the fill never travels. The keys are the shared reduced-motion
+    // queries, as the other transitions spell them. The coarse key comes after
+    // the touch key, so it wins there.
     transitionDuration: {
       default: durationVars['--duration-medium'],
+      // The touch layer's move (the `progress.fillTrackMs` role times the
+      // share moved), scaled by the theme's tempo.
+      '@media (pointer: coarse)': {
+        default:
+          'calc(var(--_progress-bar-move, 0ms) * var(--_astryx-motion-tempo, 1))',
+        // Under forced colors the fill is sized by `width` instead. Touch
+        // motion never animates a layout property, so with a finger the new
+        // size lands at once there.
+        '@media (forced-colors: active)': '0s',
+      },
       '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
         '0s',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
     },
-    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionTimingFunction: {
+      default: easeVars['--ease-standard'],
+      '@media (pointer: coarse)': 'var(--_progress-bar-curve, linear)',
+    },
+  },
+  fillEmpty: {
+    opacity: {
+      default: null,
+      '@media (pointer: coarse)': 0,
+    },
   },
   indeterminateFill: {
     height: '100%',
@@ -428,7 +477,15 @@ const markOnTrackStyles = stylex.create({
 // `CSSProperties` has no index signature for custom properties, so the fill's
 // inline style — which publishes the filled share as the private
 // `--_progress-bar-fill` — needs this augmentation to typecheck.
-type FillStyle = CSSProperties & Record<'--_progress-bar-fill', string>;
+type FillStyle = CSSProperties &
+  Record<
+    | '--_progress-bar-fill'
+    | '--_progress-bar-move'
+    | '--_progress-bar-curve'
+    | '--_progress-bar-flip'
+    | '--_progress-bar-min',
+    string
+  >;
 
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
@@ -509,7 +566,16 @@ export function ProgressBar({
   const showValueLabel = hasValueLabel && !isIndeterminate;
 
   const fillVariant = isDisabled ? 'disabled' : variant;
-  const fillStyle: FillStyle = {'--_progress-bar-fill': `${percentage}%`};
+  // Under a finger the fill moves as UIProgressView's does and draws at least
+  // 16px; what that needs from script is the touch layer's (ProgressBarTouch).
+  const touch = useProgressBarTouch(
+    percentage,
+    !isIndeterminate && (marks?.length ?? 0) > 0,
+  );
+  const fillStyle: FillStyle = {
+    '--_progress-bar-fill': `${percentage}%`,
+    ...touch.fillVars,
+  };
 
   // Marks make no sense without a determinate value, so they are only drawn
   // in determinate mode. Non-finite mark values are dropped; the rest are
@@ -532,7 +598,7 @@ export function ProgressBar({
               value: mark.value,
               label: mark.label,
               pct,
-              isOnFill: percentage > 0 && pct <= percentage,
+              isOnFill: percentage > 0 && pct <= touch.drawnPercentage,
             };
           })
       : [];
@@ -582,6 +648,7 @@ export function ProgressBar({
           aria-valuemax={isIndeterminate ? undefined : safeMax}
           aria-labelledby={labelId}
           aria-valuetext={isIndeterminate ? undefined : valueText}
+          ref={touch.trackRef}
           {...mergeProps(
             themeProps('progress-bar-track'),
             stylex.props(styles.track),
@@ -600,7 +667,11 @@ export function ProgressBar({
             <div
               {...mergeProps(
                 themeProps('progress-bar-fill', {variant: fillVariant}),
-                stylex.props(styles.fill, variantStyles[fillVariant]),
+                stylex.props(
+                  styles.fill,
+                  percentage === 0 && styles.fillEmpty,
+                  variantStyles[fillVariant],
+                ),
               )}
               style={fillStyle}
             />

package/src/ProgressBar/ProgressBarTouch.ts

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBarTouch.ts
+ * @input Uses React, the touch presentation resolver, the shared resize
+ *   observer, and the progress table's roles (through resolveMotion)
+ * @output useProgressBarTouch: the fill's touch variables (move length,
+ *   curve, return offset, minimum length) and, under a finger with marks,
+ *   the share of the track the fill draws
+ * @position ProgressBar's touch layer, imported only by ProgressBar.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/ProgressBar/ProgressBar.tsx
+ * (its touch styles read these variables and the 16px minimum) and
+ * /packages/core/src/motion/uikit/progressBar.ts.
+ */
+
+import {useEffect, useRef, useState, type RefObject} from 'react';
+import {formatMotionRoleValue} from '../motion/roles';
+import {resolveMotion} from '../motion/resolveMotion';
+import {progressBar} from '../motion/uikit/progressBar';
+import {observeResize} from '../utils/sharedResizeObserver';
+import {useTouchPresentation} from '../utils/touchPresentation';
+
+/** The track's height. */
+const TRACK_HEIGHT_PX = 8;
+
+/**
+ * Under a finger the fill never draws shorter than this above zero:
+ * UIProgressView's minimum, two track heights, on ProgressBar's 8px track.
+ */
+export const TOUCH_MIN_FILL_PX =
+  progressBar.progressView.minimumFillHeights * TRACK_HEIGHT_PX;
+
+export interface ProgressBarTouch {
+  /** The fill's touch timing variables, set inline on the fill. */
+  fillVars: Record<
+    | '--_progress-bar-move'
+    | '--_progress-bar-curve'
+    | '--_progress-bar-flip'
+    | '--_progress-bar-min',
+    string
+  >;
+  /** The track, measured under a finger when the bar has marks. */
+  trackRef: RefObject<HTMLDivElement | null>;
+  /** The share of the track the fill draws (0–100), for placing marks. */
+  drawnPercentage: number;
+}
+
+export function useProgressBarTouch(
+  percentage: number,
+  hasMarks: boolean,
+): ProgressBarTouch {
+  // The touch fill's duration comes from how far the value moved since the
+  // last value, the model change that UIKit measures. It holds until the next
+  // change, so a re-render with the same value keeps it.
+  const [motion, setMotion] = useState({percentage, change: 0, flip: 0});
+  const isNewValue = motion.percentage !== percentage;
+  // The share of the track the value moved (0–1). `flip` steps through three
+  // values on every change (see the fill's touch transform).
+  const change = isNewValue
+    ? Math.abs(percentage - motion.percentage) / 100
+    : motion.change;
+  const flip = isNewValue ? (motion.flip + 1) % 3 : motion.flip;
+  if (isNewValue) {
+    setMotion({percentage, change, flip});
+  }
+
+  // Under a finger the fill draws at least TOUCH_MIN_FILL_PX long, so a mark
+  // it covers there sits on the fill. That length is a share of the track's
+  // width, which only layout knows. So the track is measured, but only under
+  // a finger and only when the bar has marks.
+  const {isTouch} = useTouchPresentation();
+  const watchesTrack = isTouch && hasMarks;
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  useEffect(() => {
+    const element = trackRef.current;
+    if (!watchesTrack || element == null) {
+      return;
+    }
+    // The shared observer; its first call (on registration) carries no
+    // contentRect, so that one reads the box.
+    return observeResize(element, entry => {
+      setTrackWidth(
+        entry.contentRect?.width ?? element.getBoundingClientRect().width,
+      );
+    });
+  }, [watchesTrack]);
+  const drawnPercentage =
+    watchesTrack && percentage > 0 && trackWidth > 0
+      ? Math.max(percentage, (TOUCH_MIN_FILL_PX / trackWidth) * 100)
+      : percentage;
+
+  // CSS applies the theme's tempo to this duration.
+  const fillTrackMs = resolveMotion(null, progressBar, 'fillTrackMs');
+  const curve = resolveMotion(null, progressBar.curves.fill);
+  return {
+    fillVars: {
+      '--_progress-bar-move': `${Math.round(change * fillTrackMs * 1000) / 1000}ms`,
+      '--_progress-bar-curve': formatMotionRoleValue('curve', curve),
+      '--_progress-bar-flip': String(flip),
+      '--_progress-bar-min': `${TOUCH_MIN_FILL_PX}px`,
+    },
+    trackRef,
+    drawnPercentage,
+  };
+}

package/src/Typeahead/BaseTypeahead.tsx

@@ -79,6 +79,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/Typeahead/BaseTypeahead.generated';
+import {textEntryTraitAttributes} from '../Field/textEntryTraits';
 
 registerEnglishFallback(english);
 // =============================================================================
@@ -1723,6 +1724,12 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         autoFocus={hasAutoFocus}
         data-autofocus={hasAutoFocus || undefined}
         autoComplete="off"
+        // Autocorrect would rewrite names and identifiers. The key is only a
+        // label: Enter still commits the highlighted option.
+        {...textEntryTraitAttributes({
+          enterKeyHint: 'search',
+          hasAutoCorrect: false,
+        })}
         {...mergeProps(
           stylex.props(
             styles.input,

package/src/gestures/GestureArena.ts

@@ -90,8 +90,18 @@ export interface ArenaBeganInput extends TouchBeganInput {
 export interface GestureArenaOptions {
   clock?: GestureClock;
   environment?: GestureEnvironment;
-  /** Touches a recognizer now owns: cancel the browser's default for them. */
-  onClaim?: (touchIds: ReadonlyArray<number>) => void;
+  /**
+   * Touches a recognizer now owns, and the recognizer that claimed them. A
+   * claim comes in any state: a recognizer that waits on another's failure
+   * claims while `possible`, and a swipe claims as `ended`. Each claim is
+   * reported once.
+   */
+  onClaim?: (
+    touchIds: ReadonlyArray<number>,
+    claimer: GestureRecognizer,
+  ) => void;
+  /** Claimed touches given back to the browser (releaseClaim). */
+  onRelease?: (touchIds: ReadonlyArray<number>) => void;
   /** A click deferred at touch end resolved: replay it, or drop it. */
   onDeferredClick?: (touch: GestureTouch, allowed: boolean) => void;
   /**
@@ -100,6 +110,13 @@ export interface GestureArenaOptions {
    * listening now (`spec:AST-094` FR24).
    */
   onIdle?: () => void;
+  /**
+   * Whether the browser keeps a contact for itself while it is down. Then no
+   * claiming recognizer recognizes with it before its lift. So a mouse or pen
+   * drag that starts on selectable text selects that text. A recognition at
+   * the lift, such as a tap's, is unaffected.
+   */
+  refusesClaim?: (touch: GestureTouch) => boolean;
   /** Every recognizer transition, for debugging and tests. */
   onTransition?: (
     recognizer: GestureRecognizer,
@@ -553,7 +570,8 @@ export class GestureArena {
   ): void {
     if (
       !internals(recognizer).shouldBegin() ||
-      this.isVetoedByConsumer(recognizer)
+      this.isVetoedByConsumer(recognizer) ||
+      this.isRefusedByBrowser(recognizer)
     ) {
       this.fail(recognizer);
       return;
@@ -635,6 +653,23 @@ export class GestureArena {
     return winner.canPrevent(other) && other.canBePrevented(winner);
   }
 
+  /**
+   * Whether a recognizer that claims touches would take a contact the
+   * browser keeps while it is down (`refusesClaim`).
+   */
+  private isRefusedByBrowser(recognizer: GestureRecognizer): boolean {
+    const refuses = this.options.refusesClaim;
+    if (refuses == null || !recognizer.claimsTouches) {
+      return false;
+    }
+    return recognizer.trackedTouches.some(
+      touch =>
+        touch.phase !== 'ended' &&
+        touch.phase !== 'cancelled' &&
+        refuses(touch),
+    );
+  }
+
   /** UIControl's rule: a control may veto an overlapping ancestor recognizer. */
   private isVetoedByConsumer(recognizer: GestureRecognizer): boolean {
     for (const id of internals(recognizer).seenTouchIds) {
@@ -674,6 +709,7 @@ export class GestureArena {
     recognizer: GestureRecognizer,
     keep: ReadonlySet<number> = new Set(),
   ): void {
+    const released: number[] = [];
     for (const touch of recognizer.trackedTouches) {
       const record = this.records.get(touch.id);
       if (record == null || !record.isClaimed || keep.has(touch.id)) {
@@ -692,8 +728,12 @@ export class GestureArena {
       );
       if (!isOwned) {
         record.isClaimed = false;
+        released.push(touch.id);
       }
     }
+    if (released.length > 0) {
+      this.options.onRelease?.(released);
+    }
   }
 
   private apply(recognizer: GestureRecognizer, next: GestureState): void {
@@ -768,7 +808,7 @@ export class GestureArena {
       }
     }
     if (claimed.length > 0) {
-      this.options.onClaim?.(claimed);
+      this.options.onClaim?.(claimed, recognizer);
     }
   }