@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/src/Resizable/resizablePane.ts

@@ -0,0 +1,179 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file resizablePane.ts
+ * @input A LayoutPanel's element, and the collapse state the ResizeHandle
+ *   beside it reports
+ * @output The internal channel through which a LayoutPanel at a region's size
+ *   lends its element to the ResizeHandle beside it, and the ResizeHandle a
+ *   collapsing panel hands focus to
+ * @position Internal to Resizable and Layout; no entry point exports it. No
+ *   React, and no DOM work on import
+ */
+
+/** What a LayoutPanel lends the ResizeHandle beside it. */
+export interface ResizablePane {
+  readonly element: HTMLElement;
+  /**
+   * The handle says whether its region is collapsed, and which handle focus
+   * inside the panel moves to as it collapses. The panel is then inert and
+   * hidden from assistive technology while it is collapsed.
+   */
+  setCollapsed(isCollapsed: boolean, focusTarget: HTMLElement | null): void;
+}
+
+const lent = new WeakMap<Element, ResizablePane>();
+const watchers = new Set<() => void>();
+// The elements ResizeHandle renders, for a panel beside one to find it.
+const resizeHandles = new WeakSet<Element>();
+
+/** ResizeHandle registers the element it renders; returns the unregister. */
+export function registerResizeHandle(element: Element): () => void {
+  resizeHandles.add(element);
+  return () => {
+    resizeHandles.delete(element);
+  };
+}
+
+function notifyWatchers(): void {
+  for (const watcher of [...watchers]) {
+    watcher();
+  }
+}
+
+/**
+ * Calls `listener` whenever a panel is lent beside a handle or taken back, so
+ * a handle looks for its pane again. Returns the function that stops it.
+ */
+export function watchResizablePanes(listener: () => void): () => void {
+  watchers.add(listener);
+  return () => {
+    watchers.delete(listener);
+  };
+}
+
+/**
+ * The pane a resize handle resizes: the lent LayoutPanel just before it, or
+ * just after it when the region is reversed.
+ */
+export function resizablePaneFor(
+  handle: Element,
+  isReversed: boolean,
+): ResizablePane | null {
+  const sibling = isReversed
+    ? handle.nextElementSibling
+    : handle.previousElementSibling;
+  return sibling == null ? null : (lent.get(sibling) ?? null);
+}
+
+/**
+ * Moves a handle's hold from `held` to `next`, and returns `next`. A pane the
+ * handle no longer holds opens. The held pane takes the region's collapse
+ * state, and focus inside it moves to `handle` as it collapses.
+ */
+export function handOverPane(
+  held: ResizablePane | null,
+  next: ResizablePane | null,
+  isCollapsed: boolean,
+  handle: HTMLElement | null,
+): ResizablePane | null {
+  if (next !== held) {
+    held?.setCollapsed(false, null);
+  }
+  next?.setCollapsed(isCollapsed, handle);
+  return next;
+}
+
+/**
+ * The ResizeHandle beside a panel, on the side that faces the content. It is
+ * after a start panel, before an end panel, and on either side elsewhere.
+ */
+export function resizeHandleBeside(
+  panel: Element,
+  area: string | null | undefined,
+): HTMLElement | null {
+  const candidates =
+    area === 'start'
+      ? [panel.nextElementSibling]
+      : area === 'end'
+        ? [panel.previousElementSibling]
+        : [panel.nextElementSibling, panel.previousElementSibling];
+  for (const candidate of candidates) {
+    if (candidate instanceof HTMLElement && resizeHandles.has(candidate)) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+/** LayoutPanel's side of the channel, one per panel. */
+export interface ResizablePaneLink {
+  /** For useSyncExternalStore: whether a handle holds the panel collapsed. */
+  readonly subscribe: (listener: () => void) => () => void;
+  readonly isCollapsed: () => boolean;
+  /** The handle that named itself for focus to move to, if any. */
+  focusTarget(): HTMLElement | null;
+  /**
+   * From the panel's callback ref: its element, lent beside its handle for
+   * the handle to find. Null takes it back.
+   */
+  attach(element: HTMLElement | null): void;
+}
+
+export function createResizablePaneLink(): ResizablePaneLink {
+  let isCollapsed = false;
+  let focusTarget: HTMLElement | null = null;
+  let attached: ResizablePane | null = null;
+  const listeners = new Set<() => void>();
+
+  const setCollapsed = (next: boolean) => {
+    if (next === isCollapsed) {
+      return;
+    }
+    isCollapsed = next;
+    for (const notify of [...listeners]) {
+      notify();
+    }
+  };
+
+  return {
+    subscribe(notify) {
+      listeners.add(notify);
+      return () => {
+        listeners.delete(notify);
+      };
+    },
+    isCollapsed: () => isCollapsed,
+    focusTarget: () => focusTarget,
+    attach(element) {
+      if (attached?.element === element) {
+        return;
+      }
+      const wasLent = attached != null;
+      if (attached != null && lent.get(attached.element) === attached) {
+        lent.delete(attached.element);
+      }
+      attached = null;
+      if (element == null) {
+        // Taken back: no handle holds it collapsed any more.
+        focusTarget = null;
+        setCollapsed(false);
+      } else {
+        const pane: ResizablePane = {
+          element,
+          setCollapsed(next, nextFocusTarget) {
+            if (attached === pane) {
+              focusTarget = nextFocusTarget;
+              setCollapsed(next);
+            }
+          },
+        };
+        attached = pane;
+        lent.set(element, pane);
+      }
+      if (wasLent || element != null) {
+        notifyWatchers();
+      }
+    },
+  };
+}

package/src/Resizable/useResizable.ts

@@ -338,6 +338,21 @@ const collapseControls = new WeakMap<ResizableProps, CollapseControls>();
  */
 const effectiveMaxima = new WeakMap<ResizableProps, number>();
 
+/**
+ * The props behind a component's `resizable` slot. It takes useResizable's
+ * output directly, and still takes that output's `props`.
+ */
+export function resizablePropsOf(
+  value: ResizableRegion | ResizableProps,
+): ResizableProps {
+  return 'props' in value ? value.props : value;
+}
+
+/** Whether a `resizable` value is useResizable's output for one region. */
+export function isResizableRegion(value: unknown): value is ResizableRegion {
+  return typeof value === 'object' && value !== null && 'props' in value;
+}
+
 /** The reported maximum for `props`, or `undefined` for a hand-built object. */
 export function getEffectiveMaxPx(props: ResizableProps): number | undefined {
   return effectiveMaxima.get(props);

package/src/SegmentedControl/useSegmentedSelectionMotion.ts

@@ -25,7 +25,7 @@ import {
   type RefObject,
 } from 'react';
 import {
-  createMotionAnimator,
+  createMotionEngine,
   type AnimateOptions,
   type Animator,
   type MotionCurve,
@@ -539,7 +539,7 @@ export class SegmentedSelectionMotion {
   private readonly after: Animator;
 
   constructor(
-    private readonly animator: Animator = createMotionAnimator(null, {
+    private readonly animator: Animator = createMotionEngine(null, {
       pseudoElement: '::before',
     }),
     options: SegmentedSelectionMotionOptions = {},
@@ -552,7 +552,7 @@ export class SegmentedSelectionMotion {
     this.now = options.now ?? defaultNow;
     this.after =
       options.afterAnimator ??
-      createMotionAnimator(null, {
+      createMotionEngine(null, {
         pseudoElement: '::after',
         initial: {opacity: 0},
       });

package/src/SelectableCard/SelectableCard.tsx

@@ -44,6 +44,7 @@ import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
 import {isImeKeyEvent, mergeProps} from '../utils';
+import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -398,6 +399,7 @@ export function SelectableCard({
   onChange,
   onClick: onClickProp,
   onMouseUp: onMouseUpProp,
+  onPointerDown: onPointerDownProp,
   isDisabled = false,
   children,
   padding,
@@ -458,7 +460,7 @@ export function SelectableCard({
     [isDisabled, requestChange],
   );
 
-  const {onClick, onMouseUp} = useClickableContainer({
+  const {onClick, onMouseUp, onPointerDown} = useClickableContainer({
     containerRef,
     interactiveRef,
     onClick: handleClick,
@@ -530,6 +532,11 @@ export function SelectableCard({
       }
       onClick={!isDisabled ? composedOnClick : undefined}
       onMouseUp={!isDisabled ? composedOnMouseUp : undefined}
+      onPointerDown={
+        !isDisabled
+          ? chainEventHandlers(onPointerDown, onPointerDownProp)
+          : onPointerDownProp
+      }
       {...props}
       onClickCapture={
         !isDisabled && handleLayerClickCapture

package/src/Selector/Selector.tsx

@@ -53,6 +53,7 @@ import {useKeepLayerOpenProps, type LayerPlacement} from '../Layer/useLayer';
 import {InternalInputClearButton} from '../Field/InputClearButton';
 import {Spinner} from '../Spinner';
 import {PanelSearchInput} from '../Field/PanelSearchInput';
+import {useKeyboardHighlight} from '../hooks/useKeyboardHighlight';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
 import {
@@ -66,6 +67,7 @@ import {
   fontWeightVars,
   typeScaleVars,
   borderVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import type {SelectorOptionType, SelectorOptionData} from './types';
 import {isOptionData, isDivider, isSection, normalizeOption} from './utils';
@@ -456,7 +458,7 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
     textAlign: 'start',
-    outline: 'none',
+    outlineStyle: 'none',
   },
   itemContent: {
     display: 'flex',
@@ -489,6 +491,15 @@ const styles = stylex.create({
   itemHighlighted: {
     backgroundColor: colorVars['--color-overlay-hover'],
   },
+  // The fill alone does not reach 3:1 against the listbox. After keyboard
+  // input, the active option also draws the standard focus ring, inside the
+  // row by its own width, as a focused menu row does.
+  itemKeyboardHighlighted: {
+    outlineWidth: focusVars['--focus-outline-width'],
+    outlineStyle: focusVars['--focus-outline-style'],
+    outlineColor: focusVars['--focus-outline-color'],
+    outlineOffset: `calc(-1 * ${focusVars['--focus-outline-width']})`,
+  },
   itemSelected: {
     fontWeight: fontWeightVars['--font-weight-medium'],
   },
@@ -920,13 +931,20 @@ interface SelectorOptionRowProps {
   flatIndex: number;
   id: string;
   isHighlighted: boolean;
+  /** The highlight came from keyboard input, so the row draws the focus ring. */
+  isKeyboardHighlighted: boolean;
   isSelected: boolean;
   size: SelectorSize;
   indicatorPosition: IndicatorPosition;
   renderOption: ((option: SelectorOptionData) => ReactNode) | undefined;
   SelectionMark: IndicatorComponent<IndicatorMap['check']>;
   onSelect: (item: SelectorOptionData) => void;
-  onHover: (item: SelectorOptionData, flatIndex: number) => void;
+  /** `isActive`: the option was already the highlighted one when entered. */
+  onHover: (
+    item: SelectorOptionData,
+    flatIndex: number,
+    isActive: boolean,
+  ) => void;
 }
 
 /**
@@ -938,6 +956,7 @@ const SelectorOptionRow = memo(function SelectorOptionRow({
   flatIndex,
   id,
   isHighlighted,
+  isKeyboardHighlighted,
   isSelected,
   size,
   indicatorPosition,
@@ -979,7 +998,7 @@ const SelectorOptionRow = memo(function SelectorOptionRow({
       aria-selected={isSelected}
       aria-disabled={item.disabled}
       onClick={() => onSelect(item)}
-      onMouseEnter={() => onHover(item, flatIndex)}
+      onMouseEnter={() => onHover(item, flatIndex, isHighlighted)}
       {...mergeProps(
         // Stable theme target on the option row itself, mirroring
         // `multi-selector-option`: it carries the row's size and runtime
@@ -998,6 +1017,7 @@ const SelectorOptionRow = memo(function SelectorOptionRow({
           styles.item,
           itemSizeStyles[size],
           isHighlighted && styles.itemHighlighted,
+          isKeyboardHighlighted && styles.itemKeyboardHighlighted,
           isSelected && styles.itemSelected,
           item.disabled && styles.itemDisabled,
         ),
@@ -1482,10 +1502,10 @@ export function Selector<T extends SelectorOptionType>(
     highlightedIndex,
     setHighlightedIndex,
     getItemId,
-    onTriggerClick,
-    onKeyDown,
+    onTriggerClick: comboboxTriggerClick,
+    onKeyDown: comboboxKeyDown,
     onItemSelect,
-    onItemMouseEnter,
+    onItemMouseEnter: comboboxItemMouseEnter,
   } = useCombobox({
     selectableItems: filteredItems,
     // The optimistic value, not the raw prop: with a pending changeAction the
@@ -1504,6 +1524,44 @@ export function Selector<T extends SelectorOptionType>(
     listboxId,
   });
 
+  // Only after keyboard input does the active option draw the focus ring; a
+  // pointer highlight keeps the fill alone, as a focused menu row does.
+  // Modality changes only on a key or a press, so a hover alone still reads
+  // as keyboard. The option the mouse enters therefore draws no ring until a
+  // key moves the highlight again. Entering the option that is already
+  // active, as when a key scrolls it under a still mouse, changes nothing.
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const keyDownAfterHover = useCallback(
+    (e: React.KeyboardEvent) => {
+      setHoveredIndex(null);
+      comboboxKeyDown(e);
+    },
+    [comboboxKeyDown],
+  );
+  const mouseEnterOption = useCallback(
+    (item: SelectorOptionData, index: number, isActive: boolean) => {
+      if (!isActive) {
+        setHoveredIndex(index);
+      }
+      comboboxItemMouseEnter(item, index);
+    },
+    [comboboxItemMouseEnter],
+  );
+  const {
+    isKeyboardHighlight: isHighlightFromKeyboard,
+    noteHighlightMove,
+    onKeyDown,
+    onItemMouseEnter,
+  } = useKeyboardHighlight(
+    triggerModality.readModality,
+    keyDownAfterHover,
+    mouseEnterOption,
+  );
+  const onTriggerClick = useCallback(() => {
+    comboboxTriggerClick();
+    noteHighlightMove();
+  }, [comboboxTriggerClick, noteHighlightMove]);
+
   // Type-to-select, shared with the other collections (menus, listboxes).
   // Open, it walks the highlight — aria-activedescendant announces each match.
   // Closed, it commits the match like a native select, which changes the value
@@ -1563,7 +1621,8 @@ export function Selector<T extends SelectorOptionType>(
       const index = optionIndexFromRow(row);
       const item = filteredItems[index];
       if (item != null) {
-        onItemMouseEnter(item, index);
+        // A press is pointer input, even on the active option.
+        onItemMouseEnter(item, index, false);
       }
     },
     onActivate: row => {
@@ -1580,6 +1639,8 @@ export function Selector<T extends SelectorOptionType>(
       if (isDisabled || isEffectivelyReadOnly) {
         return;
       }
+      noteHighlightMove();
+      setHoveredIndex(null);
       // With hasSearch the query input owns typing, so type-to-select is off.
       if (!hasSearch && typeahead.onKeyDown(e)) {
         e.preventDefault();
@@ -1587,7 +1648,14 @@ export function Selector<T extends SelectorOptionType>(
       }
       onKeyDown(e);
     },
-    [isDisabled, isEffectivelyReadOnly, hasSearch, typeahead, onKeyDown],
+    [
+      isDisabled,
+      isEffectivelyReadOnly,
+      hasSearch,
+      typeahead,
+      onKeyDown,
+      noteHighlightMove,
+    ],
   );
 
   // Highlight scrolling (and its hover/keyboard split) lives in useCombobox.
@@ -1729,6 +1797,11 @@ export function Selector<T extends SelectorOptionType>(
         flatIndex={flatIndex}
         id={getItemId(flatIndex)}
         isHighlighted={flatIndex === highlightedIndex}
+        isKeyboardHighlighted={
+          flatIndex === highlightedIndex &&
+          isHighlightFromKeyboard &&
+          flatIndex !== hoveredIndex
+        }
         isSelected={item.value === normalizedValue}
         size={size}
         indicatorPosition={indicatorPosition}
@@ -1742,6 +1815,8 @@ export function Selector<T extends SelectorOptionType>(
       renderOption,
       indicatorPosition,
       highlightedIndex,
+      isHighlightFromKeyboard,
+      hoveredIndex,
       size,
       normalizedValue,
       getItemId,

package/src/SideNav/SideNav.doc.mjs

@@ -104,8 +104,8 @@ export const docs = {
     },
     {
       name: 'resizable',
-      type: 'boolean | { defaultWidth?: number; minWidth?: number; maxWidth?: number; autoSaveId?: string; onWidthChange?: (width: number) => void; defaultIsCollapsed?: boolean; isCollapsed?: boolean; onCollapseChange?: (isCollapsed: boolean) => void }',
-      description: 'Enables a resize handle at the inline-end edge. true for defaults (260px initial, 180-480px range), or a ResizableConfig object (defaultWidth, minWidth, maxWidth, autoSaveId for localStorage persistence of width and collapse state, onWidthChange). It can also own collapse state (defaultIsCollapsed, isCollapsed + onCollapseChange); when both props carry collapse state, resizable wins and a dev warning names the conflicting keys. The handle is hidden while collapsed.',
+      type: 'boolean | { defaultWidth?: number; minWidth?: number; maxWidth?: number; autoSaveId?: string; onWidthChange?: (width: number) => void; defaultIsCollapsed?: boolean; isCollapsed?: boolean; onCollapseChange?: (isCollapsed: boolean) => void } | ResizableRegion',
+      description: 'Enables a resize handle at the inline-end edge. true for defaults (260px initial, 180-480px range), or a ResizableConfig object (defaultWidth, minWidth, maxWidth, autoSaveId for localStorage persistence of width and collapse state, onWidthChange). It can also own collapse state (defaultIsCollapsed, isCollapsed + onCollapseChange); when both props carry collapse state, resizable wins and a dev warning names the conflicting keys. It also takes the output of useResizable(), whose axis (\'horizontal\' | \'vertical\') must be \'horizontal\': that region then owns the width and the collapse state, so the rail follows its isCollapsed, the toggle calls its collapse and expand, and its autoSaveId saves the width. With the hook\'s output, the region\'s own collapsible option also decides whether the rail collapses; a collapsible prop that disagrees, or the collapse state it sets, is ignored, with a dev warning. The handle is hidden while collapsed.',
       default: 'false',
     },
     {

package/src/SideNav/SideNav.tsx

@@ -46,8 +46,12 @@ import {
 import {SideNavCollapseButton} from './SideNavCollapseButton';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {MobileNav} from '../MobileNav/MobileNav';
-import {useResizable} from '../Resizable/useResizable';
-import type {ResizableConfig} from '../Resizable/useResizable';
+import {
+  isResizableRegion,
+  useResizable,
+  type ResizableConfig,
+  type ResizableRegion,
+} from '../Resizable/useResizable';
 import {ResizeHandle} from '../Resizable/ResizeHandle';
 import {themeProps} from '../utils/themeProps';
 import {SizeProvider} from '../SizeContext/SizeContext';
@@ -170,6 +174,54 @@ function describeCollapseConflict(
   );
 }
 
+/**
+ * The collapse config when `resizable` is useResizable's output. The region
+ * owns the collapse state and decides whether the rail collapses. A
+ * `collapsible` prop that sets state or disagrees is ignored and named in a
+ * development warning.
+ */
+function resolveRegionCollapseConfig(
+  collapsible: boolean | SideNavCollapsibleConfig | undefined,
+  region: ResizableRegion,
+): ResolvedCollapseConfig {
+  const fromCollapsible = typeof collapsible === 'object' ? collapsible : {};
+  const ignoredKeys = [
+    fromCollapsible.defaultIsCollapsed !== undefined && 'defaultIsCollapsed',
+    fromCollapsible.isCollapsed !== undefined && 'isCollapsed',
+    fromCollapsible.onCollapsedChange !== undefined && 'onCollapsedChange',
+  ].filter((key): key is string => key !== false);
+  // The region's own `collapsible` option decides whether the rail collapses.
+  const isRegionCollapsible = region.props._collapsible ?? false;
+  const conflicts: string[] = [];
+  if (ignoredKeys.length > 0) {
+    conflicts.push(
+      `\`collapsible\` sets ${ignoredKeys.map(key => `\`${key}\``).join(', ')}, ` +
+        'which the rail ignores: it follows the region.',
+    );
+  }
+  if (
+    collapsible !== undefined &&
+    Boolean(collapsible) !== isRegionCollapsible
+  ) {
+    conflicts.push(
+      isRegionCollapsible
+        ? '`collapsible` is false, but the region is collapsible, so the rail still collapses.'
+        : '`collapsible` turns collapse on, but the region is not collapsible, so the rail never collapses.',
+    );
+  }
+  return {
+    isCollapsible: isRegionCollapsible,
+    defaultIsCollapsed: region.isCollapsed,
+    isCollapsed: undefined,
+    onCollapsedChange: undefined,
+    conflict:
+      conflicts.length === 0
+        ? null
+        : "`resizable` is useResizable's output, which owns the collapse " +
+          `state and decides whether the rail collapses. ${conflicts.join(' ')}`,
+  };
+}
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -397,12 +449,18 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
    *   - `defaultIsCollapsed` / `isCollapsed` / `onCollapseChange` — collapse
    *     state, when `resizable` should own it rather than `collapsible`
    *
+   * - `useResizable()`'s output — the caller's region owns the width and the
+   *   collapse state. The rail follows its `isCollapsed`, the toggle calls
+   *   its `collapse` and `expand`, and its `autoSaveId` saves the width.
+   *   The region's own `collapsible` option also decides whether the rail
+   *   collapses
+   *
    * When both props carry collapse state, `resizable` wins and a dev warning
    * names the conflicting keys.
    *
    * @default false
    */
-  resizable?: boolean | ResizableConfig;
+  resizable?: boolean | ResizableConfig | ResizableRegion;
 
   /**
    * Enables collapse behavior. The sidebar can be collapsed to a narrow
@@ -469,7 +527,7 @@ export function SideNav({
   children,
   footer,
   footerIcons,
-  collapsible = false,
+  collapsible: collapsibleProp,
   resizable = false,
   xstyle,
   className,
@@ -480,15 +538,29 @@ export function SideNav({
   ...props
 }: SideNavProps) {
   const t = useComponentTranslator();
+  // Only a left-out `collapsible` becomes false, as before; `??` would also
+  // turn null into false.
+  const collapsible = collapsibleProp === undefined ? false : collapsibleProp;
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
 
+  // useResizable's output: the caller's region owns the width and collapse.
+  const ownerRegion = isResizableRegion(resizable) ? resizable : null;
   // Resizable config
-  const resizableConfig = typeof resizable === 'object' ? resizable : {};
+  const resizableConfig: ResizableConfig =
+    typeof resizable === 'object' && !isResizableRegion(resizable)
+      ? resizable
+      : {};
   const isResizable = !!resizable;
 
-  const collapseConfig = resolveCollapseConfig(collapsible, resizable);
+  const collapseConfig =
+    ownerRegion == null
+      ? resolveCollapseConfig(
+          collapsible,
+          isResizableRegion(resizable) ? false : resizable,
+        )
+      : resolveRegionCollapseConfig(collapsibleProp, ownerRegion);
   const {isCollapsible, onCollapsedChange} = collapseConfig;
 
   useDevWarning(
@@ -534,6 +606,8 @@ export function SideNav({
 
   // useResizable is the sole collapse owner in every SideNav mode. Keeping that
   // owner mounted when resize is toggled preserves the current collapse state.
+  // Given the hook's output, the caller's region is the owner, and this one
+  // stays idle.
   const resizableHook = useResizable({
     defaultSize: resizableConfig.defaultWidth ?? 260,
     minSize: resizableConfig.minWidth ?? 180,
@@ -547,7 +621,8 @@ export function SideNav({
     onCollapseChange: onCollapsedChange,
   });
 
-  const collapsed = resizableHook.isCollapsed;
+  const region = ownerRegion ?? resizableHook;
+  const collapsed = region.isCollapsed;
 
   // A collapse or expand plays the rail's motion, except an app's change
   // before the rail's first paint. It is measured in the commit before the
@@ -752,11 +827,11 @@ export function SideNav({
     };
 
     if (next) {
-      resizableHook.collapse();
+      region.collapse();
     } else {
-      resizableHook.expand();
+      region.expand();
     }
-  }, [collapsed, resizableHook]);
+  }, [collapsed, region]);
 
   const showResizeHandle = isResizable && !collapsed;
 
@@ -875,7 +950,7 @@ export function SideNav({
 
   // When resizable, override the nav width via inline style
   const resizableNavStyle: React.CSSProperties | undefined = isResizable
-    ? {...(style ?? {}), width: collapsed ? undefined : resizableHook.size}
+    ? {...(style ?? {}), width: collapsed ? undefined : region.size}
     : style;
 
   const navElement = (
@@ -957,7 +1032,7 @@ export function SideNav({
           pillPlacement="end"
           isAlwaysVisible={false}
           xstyle={styles.resizableHandle}
-          resizable={resizableHook.props}
+          resizable={ownerRegion ?? resizableHook.props}
           label={t('@astryx.sideNav.resizeSidebar')}
           aria-controls={navId}
         />

package/src/Slider/sliderTouchController.ts

@@ -29,7 +29,7 @@ import {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
 import type {PointerKind} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
-  createMotionAnimator,
+  createMotionEngine,
   type Animator,
   type MotionCurve,
   type MotionHandle,
@@ -1186,7 +1186,7 @@ export class SliderTouchController {
   private animatorFor(element: HTMLElement): Animator {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createMotionAnimator(element);
+      animator = createMotionEngine(element);
       this.animators.set(element, animator);
     }
     return animator;