@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/dist/utils/interactionModality.js

@@ -6,7 +6,9 @@
  * @file interactionModality.ts
  * @input Global pointerdown/keydown events
  * @output `useInteractionModalityTracking()` activates document-lifetime tracking;
- *   `getInteractionModality()` reads how the user last interacted
+ *   `getInteractionModality()` reads how the user last interacted;
+ *   `trackInteractionModalityIn(doc)` and `getInteractionModality(doc)` do the
+ *   same for a second document
  * @position Internal document-wide singleton; used where `:focus-visible` alone
  *   is too broad
  *
@@ -26,8 +28,12 @@
  * The store lives on `document`, so duplicate Astryx bundles share one state
  * value and one listener pair. The first mounted consumer activates tracking;
  * the listeners then remain for the document lifetime so input during a gap
- * between consumers is not lost. Importing this module has no DOM side effects,
- * and server rendering keeps the keyboard-safe default.
+ * between consumers is not lost. A second document (a same-origin iframe, a
+ * Document Picture-in-Picture window) gets its own store when a component
+ * tracks it, since input there never reaches the page's listeners; its
+ * listeners stay only while a consumer there is mounted. Importing this module
+ * has no DOM side effects, and server rendering keeps the keyboard-safe
+ * default.
  */
 import { useEffect } from 'react';
 const interactionModalityStoreKey = Symbol.for('@astryxdesign/core/interaction-modality/v1');
@@ -89,8 +95,55 @@ export function useInteractionModalityTracking() {
   useEffect(() => trackInteractionModality(), []);
 }
 
-/** How the user last interacted with the page. */
-export function getInteractionModality() {
+/**
+ * Track a second document while a consumer there is mounted: a component an
+ * app renders into a same-origin iframe or a Document Picture-in-Picture
+ * window gets input there that never reaches the page's listeners. The first
+ * consumer installs the document's listener pair and the last one's cleanup
+ * removes it. Read the value with `getInteractionModality(doc)`. The page's
+ * own document keeps its document-lifetime listeners.
+ */
+export function trackInteractionModalityIn(targetDocument) {
+  if (typeof document !== 'undefined' && targetDocument === document) {
+    return trackInteractionModality();
+  }
+  const store = getStore(targetDocument);
+  store.consumers = (store.consumers ?? 0) + 1;
+  if (store.consumers === 1) {
+    store.isListening = true;
+    targetDocument.addEventListener('pointerdown', store.onPointerDown, {
+      capture: true,
+      passive: true
+    });
+    targetDocument.addEventListener('keydown', store.onKeyDown, {
+      capture: true,
+      passive: true
+    });
+  }
+  let isReleased = false;
+  return () => {
+    if (isReleased) {
+      return;
+    }
+    isReleased = true;
+    store.consumers = (store.consumers ?? 1) - 1;
+    if (store.consumers === 0) {
+      store.isListening = false;
+      targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
+        capture: true
+      });
+      targetDocument.removeEventListener('keydown', store.onKeyDown, {
+        capture: true
+      });
+    }
+  };
+}
+
+/** How the user last interacted with the page, or with `targetDocument`. */
+export function getInteractionModality(targetDocument) {
+  if (targetDocument != null) {
+    return getStore(targetDocument).modality;
+  }
   return typeof document === 'undefined' ? 'keyboard' : getStore(document).modality;
 }
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AAoGH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA6GH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}

package/dist/utils/interactionOverlay.stylex.js

@@ -117,8 +117,14 @@ export const pressConsts = {
   releaseMs: 200
 };
 
-/** The release's clock as CSS. */
-const PRESS_RELEASE_DURATION = `${pressConsts.releaseMs}ms`;
+/**
+ * The release's clock as CSS, scaled by the theme's `--_astryx-motion-tempo`
+ * (`spec:AST-108` FR4, `component:Button` FR15) up to 1.5, its maximum. The
+ * controller's timer reads the same property.
+ */
+const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
+/** The same clock under Reduce Motion: a tempo may shorten it, never lengthen it. */
+const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
 const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
 const HOVER_HOVER = '@media (hover: hover)';
 const COARSE = '@media (pointer: coarse)';
@@ -199,7 +205,10 @@ const pressReleaseAnimation = {
   },
   animationDuration: {
     default: null,
-    '[data-astryx-press="fading"]': PRESS_RELEASE_DURATION
+    '[data-astryx-press="fading"]': {
+      default: PRESS_RELEASE_DURATION,
+      '@media (prefers-reduced-motion: reduce)': PRESS_RELEASE_DURATION_REDUCED
+    }
   },
   animationTimingFunction: {
     default: null,
@@ -214,7 +223,7 @@ export const interactionOverlayStyles = {
   backgroundColor: {
     "--astryx-press-alpha": "x11z29ks xli5ek3",
     kKVMdj: "x14e4jsf",
-    k44tkh: "x8s9nux",
+    k44tkh: "x1heh2iz x1sgdaq5",
     kyAemX: "xwkbtvz",
     kWV6AL: "xziyay6",
     "--_press-paint": "xz2mauf",
@@ -226,7 +235,7 @@ export const interactionOverlayStyles = {
   backgroundImage: {
     "--astryx-press-alpha": "x11z29ks xli5ek3",
     kKVMdj: "x14e4jsf",
-    k44tkh: "x8s9nux",
+    k44tkh: "x1heh2iz x1sgdaq5",
     kyAemX: "xwkbtvz",
     kWV6AL: "xziyay6",
     "--_press-paint": "xz2mauf",
@@ -237,7 +246,7 @@ export const interactionOverlayStyles = {
   backgroundImageOnNeutral: {
     "--astryx-press-alpha": "x11z29ks xli5ek3",
     kKVMdj: "x14e4jsf",
-    k44tkh: "x8s9nux",
+    k44tkh: "x1heh2iz x1sgdaq5",
     kyAemX: "xwkbtvz",
     kWV6AL: "xziyay6",
     "--_press-paint": "xz2mauf",
@@ -248,7 +257,7 @@ export const interactionOverlayStyles = {
   pressedBackgroundColor: {
     "--astryx-press-alpha": "x11z29ks xli5ek3",
     kKVMdj: "x14e4jsf",
-    k44tkh: "x8s9nux",
+    k44tkh: "x1heh2iz x1sgdaq5",
     kyAemX: "xwkbtvz",
     kWV6AL: "xziyay6",
     "--_press-paint": "xz2mauf",
@@ -260,7 +269,7 @@ export const interactionOverlayStyles = {
   pressedAlpha: {
     "--astryx-press-alpha": "x11z29ks xli5ek3",
     kKVMdj: "x14e4jsf",
-    k44tkh: "x8s9nux",
+    k44tkh: "x1heh2iz x1sgdaq5",
     kyAemX: "xwkbtvz",
     kWV6AL: "xziyay6",
     "--_press-paint": "xz2mauf",

package/dist/utils/plainDate.d.ts

@@ -72,6 +72,8 @@ export declare const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions;
  * serialization, or any Astryx component's calendar semantics.
  */
 export declare function plainDateFormat(pd: PlainDate, options: Intl.DateTimeFormatOptions, locale?: Locale): string;
+/** @internal plainDateFormat's formatter cache; not part of the public API. */
+export declare function dateTimeFormatFor(locale: Locale, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
 /**
  * The locale's name for the "week of year" date field ("week", "Woche", "週"),
  * from CLDR through `Intl.DisplayNames`. Calendar names its week-number

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

@@ -1 +1 @@
-{"version":3,"file":"plainDate.d.ts","sourceRoot":"","sources":["../../src/utils/plainDate.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"plainDate.d.ts","sourceRoot":"","sources":["../../src/utils/plainDate.ts"],"names":[],"mappings":"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"}

package/dist/utils/plainDate.js

@@ -290,10 +290,53 @@ export const DATE_FORMAT_SHORT_WITH_YEAR = {
  * serialization, or any Astryx component's calendar semantics.
  */
 export function plainDateFormat(pd, options, locale = 'en') {
-  return new Intl.DateTimeFormat(locale, {
+  const calendar = options.calendar ?? 'gregory';
+  if (options.timeZone != null) {
+    return dateTimeFormatFor(locale, {
+      ...options,
+      calendar
+    }).format(plainDateToDate(pd));
+  }
+  if (TIME_OF_DAY_FIELDS.some(field => options[field] != null)) {
+    // A zone name or a time of day reads local midnight in the zone current
+    // at the call. A cached formatter would keep the zone it was built in,
+    // so this one is built for the call.
+    return new Intl.DateTimeFormat(locale, {
+      ...options,
+      calendar
+    }).format(plainDateToDate(pd));
+  }
+  // Date fields alone: UTC midnight formatted in UTC, so neither the cached
+  // formatter nor the date depends on the host's zone, which can change while
+  // a page is open.
+  return dateTimeFormatFor(locale, {
     ...options,
-    calendar: options.calendar ?? 'gregory'
-  }).format(plainDateToDate(pd));
+    calendar,
+    timeZone: 'UTC'
+  }).format(utcTime(pd.year, pd.month - 1, pd.day));
+}
+
+/** Options that print a time of day or a zone, which a PlainDate lacks. */
+const TIME_OF_DAY_FIELDS = ['timeZoneName', 'hour', 'minute', 'second', 'fractionalSecondDigits', 'dayPeriod', 'timeStyle'];
+
+/**
+ * One `Intl.DateTimeFormat` per locale and options, built on first use.
+ * Building a formatter costs far more than formatting with it, and a calendar
+ * formats each of a month's 42 day labels with the same options on every
+ * render. The options are keyed in a fixed order, so the same options written
+ * in another order share a formatter.
+ */
+const dateTimeFormats = new Map();
+
+/** @internal plainDateFormat's formatter cache; not part of the public API. */
+export function dateTimeFormatFor(locale, options) {
+  const key = JSON.stringify([locale, Object.entries(options).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0)]);
+  let format = dateTimeFormats.get(key);
+  if (format == null) {
+    format = new Intl.DateTimeFormat(locale, options);
+    dateTimeFormats.set(key, format);
+  }
+  return format;
 }
 
 /**

package/dist/utils/presentation.d.ts

@@ -0,0 +1,50 @@
+import type { AdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
+import type { CompactDefinition } from '../theme/themeAdaptations.js';
+import { type TouchPresentation } from './touchPresentation.js';
+/** What a component does when the caller omits `presentation`. */
+export type PresentationDefault = 'popover' | 'touch';
+export interface ResolvedPresentation {
+    /** The surface to render. */
+    readonly surface: 'popover' | 'bottom-sheet';
+    /**
+     * The component's touch input modes apply: a finger, and `presentation`
+     * not pinned to `'popover'`.
+     */
+    readonly touchModes: boolean;
+}
+export interface PresentationOptions {
+    /** What an omitted `presentation` means. @default 'popover' */
+    readonly whenOmitted?: PresentationDefault;
+}
+/**
+ * usePresentation's options. There is no server hint: the server and
+ * hydrating render never present touch modes (`spec:AST-094` FR13).
+ */
+export type UsePresentationOptions = PresentationOptions;
+export interface ReadPresentationOptions extends PresentationOptions {
+    /** The window to read; the global one by default. */
+    readonly view?: Window | null;
+    /**
+     * The active theme's compact definition (`useCompactDefinition()`, read
+     * while rendering), so a theme that moves `md` moves the sheet too
+     * (`spec:AST-012` FR9).
+     */
+    readonly compact: CompactDefinition;
+}
+/** The decision, from a presentation request and a touch presentation. */
+export declare function resolvePresentation(presentation: AdaptivePresentation | undefined, touch: TouchPresentation, whenOmitted?: PresentationDefault): ResolvedPresentation;
+/**
+ * The presentation now, following the pointer and the size as they change
+ * (a tablet docking a trackpad). SSR-safe: renders the server default (not
+ * touch, not compact) until hydrated (`spec:AST-094` FR13). It subscribes
+ * only to what the request reads: a pinned `'popover'` to neither query,
+ * `'bottom-sheet'` and the omitted `'touch'` default to the pointer, and
+ * `'adaptive'` to the pointer and the compact size.
+ */
+export declare function usePresentation(presentation: AdaptivePresentation | undefined, { whenOmitted }?: UsePresentationOptions): ResolvedPresentation;
+/**
+ * The presentation at this moment, for a decision taken once (a menu
+ * deciding how it follows the finger that opened it).
+ */
+export declare function readPresentation(presentation: AdaptivePresentation | undefined, { whenOmitted, view, compact }: ReadPresentationOptions): ResolvedPresentation;
+//# sourceMappingURL=presentation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation.d.ts","sourceRoot":"","sources":["../../src/utils/presentation.ts"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,kEAAkE;AAClE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,QAAQ,CAAC,WAAW,CAAC,EAAE,mBAAmB,CAAC;CAC5C;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAEzD,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE,qDAAqD;IACrD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;CACrC;AAED,0EAA0E;AAC1E,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,oBAAoB,GAAG,SAAS,EAC9C,KAAK,EAAE,iBAAiB,EACxB,WAAW,GAAE,mBAA+B,GAC3C,oBAAoB,CAStB;AA8BD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,oBAAoB,GAAG,SAAS,EAC9C,EAAC,WAAuB,EAAC,GAAE,sBAA2B,GACrD,oBAAoB,CAWtB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,oBAAoB,GAAG,SAAS,EAC9C,EAAC,WAAuB,EAAE,IAAI,EAAE,OAAO,EAAC,EAAE,uBAAuB,GAChE,oBAAoB,CAQtB"}

package/dist/utils/presentation.js

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file presentation.ts
+ * @input A component's `presentation` prop (a caller's value, or omitted),
+ *   what the component does when it is omitted, and the touch presentation
+ *   (utils/touchPresentation.ts)
+ * @output usePresentation and readPresentation (and the pure
+ *   resolvePresentation): the surface to render and whether the component's
+ *   touch input modes apply
+ * @position Internal resolver for stable components that, under a finger,
+ *   present a different surface or switch how an open surface follows input
+ *   (architecture:public-component-api INV16)
+ *
+ * A caller's explicit `presentation` always wins over the touch default:
+ *
+ * - `'popover'`: the fine-pointer surface AND input modes, on every device;
+ * - `'bottom-sheet'`: the sheet everywhere, with touch input modes under a
+ *   finger;
+ * - `'adaptive'`: the sheet on a compact touch screen and the popover
+ *   elsewhere, with touch input modes under a finger;
+ * - omitted: the component's default. `whenOmitted: 'popover'` answers as
+ *   `'popover'` (today's components). `whenOmitted: 'touch'` keeps the
+ *   popover surface and turns the component's touch input modes on under a
+ *   finger, as UIMenu tracks a finger in an anchored menu. Making `'touch'`
+ *   a released component's default is a functional default change
+ *   (`spec:AST-017` FR3) whose Changeset names `presentation="popover"`.
+ *
+ * One touch model on every touch device: the modes depend on the pointer,
+ * never on the platform. Touch styling (press paint, the text-size floor)
+ * and touch-only behavior that a component's own record defines (a row
+ * swipe, a slider's thumb) do not read this: they keep the touch
+ * presentation.
+ *
+ * CSS: a style that implements a touch surface or input mode is applied with
+ * `touchModes` (`stylex.props(touchModes && styles.touchMode)`), never as a
+ * bare media key on a base style, so a pinned `'popover'` keeps none of it.
+ * A rule inside it that needs the touch query uses the touch presentation's
+ * touch key; the iOS `@supports` gate is only for the one style iOS WebKit
+ * itself requires (the 16px text-size floor), never for a touch mode. On the
+ * server and while hydrating, `touchModes` is false and `'adaptive'` is the
+ * popover: a touch surface or mode opens only after hydration
+ * (`spec:AST-094` FR13), and no hint changes that. usePresentation listens
+ * only to the queries a request reads (`architecture:react-component-runtime`
+ * INV5): none for a pinned `'popover'`.
+ *
+ * SYNC: When modified, update presentation.test.ts.
+ */
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import { readTouchPresentation, TOUCH_QUERY, useCompactDefinition } from "./touchPresentation.js";
+
+/** What a component does when the caller omits `presentation`. */
+
+/**
+ * usePresentation's options. There is no server hint: the server and
+ * hydrating render never present touch modes (`spec:AST-094` FR13).
+ */
+
+/** The decision, from a presentation request and a touch presentation. */
+export function resolvePresentation(presentation, touch, whenOmitted = 'popover') {
+  const request = presentation ?? whenOmitted;
+  const surface = request === 'bottom-sheet' || request === 'adaptive' && touch.isTouch && touch.isCompact ? 'bottom-sheet' : 'popover';
+  const touchModes = request !== 'popover' && touch.isTouch;
+  return {
+    surface,
+    touchModes
+  };
+}
+const noSubscription = () => () => {};
+/** The server and hydrating render match no query (`spec:AST-094` FR13). */
+const matchesNothing = () => false;
+
+/**
+ * A media query's match, subscribed only while `query` is given
+ * (`architecture:react-component-runtime` INV5); false on the server and
+ * while hydrating (`spec:AST-094` FR13).
+ */
+function useMatchWhileRead(query) {
+  const subscribe = useCallback(onStoreChange => {
+    if (query == null) {
+      return noSubscription();
+    }
+    const mql = window.matchMedia(query);
+    mql.addEventListener('change', onStoreChange);
+    return () => mql.removeEventListener('change', onStoreChange);
+  }, [query]);
+  const getSnapshot = useCallback(() => query != null && window.matchMedia(query).matches, [query]);
+  return useSyncExternalStore(subscribe, getSnapshot, matchesNothing);
+}
+
+/**
+ * The presentation now, following the pointer and the size as they change
+ * (a tablet docking a trackpad). SSR-safe: renders the server default (not
+ * touch, not compact) until hydrated (`spec:AST-094` FR13). It subscribes
+ * only to what the request reads: a pinned `'popover'` to neither query,
+ * `'bottom-sheet'` and the omitted `'touch'` default to the pointer, and
+ * `'adaptive'` to the pointer and the compact size.
+ */
+export function usePresentation(presentation, {
+  whenOmitted = 'popover'
+} = {}) {
+  const request = presentation ?? whenOmitted;
+  const compact = useCompactDefinition();
+  const isTouch = useMatchWhileRead(request === 'popover' ? null : TOUCH_QUERY);
+  const isCompact = useMatchWhileRead(request === 'adaptive' ? compact.query : null);
+  return useMemo(() => resolvePresentation(presentation, {
+    isTouch,
+    isCompact
+  }, whenOmitted), [presentation, isTouch, isCompact, whenOmitted]);
+}
+
+/**
+ * The presentation at this moment, for a decision taken once (a menu
+ * deciding how it follows the finger that opened it).
+ */
+export function readPresentation(presentation, {
+  whenOmitted = 'popover',
+  view,
+  compact
+}) {
+  const target = view === undefined ? typeof window === 'undefined' ? null : window : view;
+  return resolvePresentation(presentation, readTouchPresentation(target, compact), whenOmitted);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAyDA;;;;;;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;AA6kB5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}
+{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAyDA;;;;;;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;AAomB5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}

package/dist/utils/pressFeedback.js

@@ -131,6 +131,22 @@ const TIMER_MS = {
   flash: PRESS_FLASH_MS,
   onset: PRESS_ONSET_MS
 };
+
+/**
+ * The release fade's clock on `element`, read once, at the release, from the
+ * property its stylesheet reads: the theme's `--_astryx-motion-tempo`
+ * (`spec:AST-108` FR4, `component:Button` FR15). Under Reduce Motion a tempo
+ * may shorten the fade, never lengthen it past 200 ms.
+ */
+function fadeMs(element) {
+  const style = getComputedStyle(element);
+  const value = style.getPropertyValue('--_astryx-motion-tempo').trim();
+  const read = value === '' ? Number.NaN : Number(value);
+  const tempo = Number.isFinite(read) && read > 0 ? read : 1;
+  const scaled = PRESS_FADE_MS * tempo;
+  const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
+}
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -197,7 +213,10 @@ function apply(slot, step) {
       apply(slot, pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
         kind: TIMER_EVENT[kind]
       }));
-    }, TIMER_MS[kind]);
+    },
+    // The release fade follows the theme's tempo (`spec:AST-108` FR4,
+    // `component:Button` FR15); the onset delay and the tap flash do not.
+    kind === 'fade' ? fadeMs(live.element) : TIMER_MS[kind]);
   }
 }
 

package/dist/utils/primaryClick.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether a button press is a primary click: the main button, and not a
+ * ctrl-click on macOS or iPadOS, which is that platform's context click
+ * (`spec:AST-094` FR43). A right click, a pen's barrel button and a macOS
+ * ctrl-click start no press.
+ */
+export declare function isPrimaryClick(event: {
+    readonly button: number;
+    readonly ctrlKey: boolean;
+}): boolean;
+//# sourceMappingURL=primaryClick.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"primaryClick.d.ts","sourceRoot":"","sources":["../../src/utils/primaryClick.ts"],"names":[],"mappings":"AAgBA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B,GAAG,OAAO,CAEV"}

package/dist/utils/primaryClick.js

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file primaryClick.ts
+ * @input A mouse or pen button press: its `button` and `ctrlKey`
+ * @output Exports isPrimaryClick
+ * @position Internal util, the one primary-click rule: the gesture host
+ *   starts a press only for one, and the press controller paints only one;
+ *   platform detection is utils/isApplePlatform.ts
+ *
+ * Deliberately absent from utils/index.ts: packages/core/src/index.ts does
+ * `export * from './utils'`, so naming it there would publish it as API.
+ */
+
+import { isApplePlatform } from "./isApplePlatform.js";
+
+/**
+ * Whether a button press is a primary click: the main button, and not a
+ * ctrl-click on macOS or iPadOS, which is that platform's context click
+ * (`spec:AST-094` FR43). A right click, a pen's barrel button and a macOS
+ * ctrl-click start no press.
+ */
+export function isPrimaryClick(event) {
+  return event.button === 0 && !(event.ctrlKey && isApplePlatform());
+}

package/dist/utils/sharedMutationObserver.d.ts

@@ -1,21 +1,29 @@
 /**
  * @file sharedMutationObserver.ts
  * @input MutationObserver API
- * @output Exports observeContent for shared content-change observation
- * @position Internal utility; consumed by useTruncation. The content-change
- *   counterpart of sharedResizeObserver: one observer for every element, so a
- *   repeated cell or row path does not create one observer per instance.
+ * @output Exports observeMutations (one shared observer per set of options)
+ *   and observeContent, its text-and-children form
+ * @position Internal utility; consumed by useTruncation, hitArea and AppShell's
+ *   main-overflow observer. The mutation counterpart of sharedResizeObserver:
+ *   one observer for every element observed with the same options, so a
+ *   repeated cell, row or region does not create one observer per instance.
  */
-type ContentCallback = () => void;
+type MutationCallback = () => void;
 /**
- * Call `callback` when the element's text or children change (including
- * descendants). Returns an unsubscribe that removes only this registration.
+ * Call `callback` for mutations of `element` matching `options`, through the
+ * one observer shared by every registration with the same options. Returns an
+ * unsubscribe that removes only this registration.
  *
  * MutationObserver has no per-target unobserve, so a released element stays
- * registered with the shared observer until no element remains; its records
- * match no callback and are ignored. The observer disconnects and is released
- * when the last registration goes.
+ * registered with its shared observer until no element remains; its records
+ * match no callback and are ignored. An observer disconnects and is released
+ * when its last registration goes.
+ */
+export declare function observeMutations(element: Node, options: MutationObserverInit, callback: MutationCallback): () => void;
+/**
+ * Call `callback` when the element's text or children change (including
+ * descendants). Returns an unsubscribe that removes only this registration.
  */
-export declare function observeContent(element: Element, callback: ContentCallback): () => void;
+export declare function observeContent(element: Element, callback: MutationCallback): () => void;
 export {};
 //# sourceMappingURL=sharedMutationObserver.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sharedMutationObserver.d.ts","sourceRoot":"","sources":["../../src/utils/sharedMutationObserver.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,KAAK,eAAe,GAAG,MAAM,IAAI,CAAC;AAuBlC;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,eAAe,GACxB,MAAM,IAAI,CA6BZ"}
+{"version":3,"file":"sharedMutationObserver.d.ts","sourceRoot":"","sources":["../../src/utils/sharedMutationObserver.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,KAAK,gBAAgB,GAAG,MAAM,IAAI,CAAC;AA4DnC;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,oBAAoB,EAC7B,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAmCZ;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,GACzB,MAAM,IAAI,CAEZ"}