@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/SideNav/railMotion.ts

@@ -5,7 +5,7 @@
 /**
  * @file railMotion.ts
  * @input The rail's outer element, the animated-layout module's handle,
- *   motion and in-place swap (motion/animatedLayout.ts)
+ *   motion and two-state edge reveal (motion/animatedLayout.ts)
  * @output Exports `SideNavShellContext` (what AppShell lends its SideNav),
  *   `createRailLayout`, `snapshotRail` and `playRail`: the rail's collapse
  *   motion
@@ -14,28 +14,30 @@
  *
  * Collapsing or expanding the rail plays one motion on one clock, the
  * `springs.settle` role the animated-layout module reads (`spec:AST-105`
- * FR4):
- * - Layout snaps to the final rail width at once; nothing animates a width.
- * - A collapse covers the old rail by a clip: the module's in-place swap
- *   (`spec:AST-105` FR8) holds the old, expanded rail as one transient copy
- *   and the clip closes it to the new width. The copy's text fades over the
- *   first 40%; the real collapsed rail, raised above the copy, fades in over
- *   the last 30%, so the real rail, icons only, is all that remains.
- * - An expand reveals the real rail by a clip from the old width, its text
- *   fading in over the last 60% so no label shows at the collapsed width,
- *   under the old, collapsed rail held by the same swap, which fades over the
- *   first 60%: the first frame is the frame before the click.
- * - In AppShell the rail's edge rides the content column's glide, frame by
- *   frame, so the two never part, also when a change interrupts a running
- *   one; the copy is laid in the row that holds both.
+ * FR4). The rail is FR9's edge reveal in its inline two-state form, which
+ * the module produces (`architecture:react-component-runtime` INV12): layout
+ * snaps to the final rail width at once, nothing animates a width, and the
+ * module clips the rail's inline-end edge from the width it shows to the new
+ * one. A collapse covers the old, expanded rail, held as one transient copy,
+ * with the real collapsed rail raised above it; an expand reveals the real
+ * rail under the old, collapsed one. In AppShell that edge rides the content
+ * column's glide, frame by frame, so the two never part, also when a change
+ * interrupts a running one. Every starting clip applies in the commit's
+ * layout effect, before the first frame paints. Under Reduce Motion it
+ * follows `design:reduced-motion`: opacity only under a coarse primary
+ * pointer (DR2), an immediate change otherwise (DR3). Without Web
+ * Animations, the change lands at once.
+ *
+ * What this file adds is the rail's own fades, on the same progress:
+ * - A collapse fades the copy's text over the first 40% and the copy over
+ *   the last 30%, while the real collapsed rail, its icons, fades in over the
+ *   last 30%, so the real rail, icons only, is all that remains.
+ * - An expand fades the real rail's text in over the last 60%, so no label
+ *   shows at the collapsed width, while the old, collapsed rail fades over
+ *   the first 60%: the first frame is the frame before the click.
  * - A change made during a running motion starts from what the rail shows:
  *   its width, its labels' opacity and its collapsed icons' opacity, so the
  *   rail stays continuous.
- * - Every starting clip applies in the commit's layout effect, before the
- *   first frame paints.
- * - Under Reduce Motion it follows `design:reduced-motion`: opacity only
- *   under a coarse primary pointer (DR2), an immediate change otherwise
- *   (DR3). Without Web Animations, the change lands at once.
  *
  * SYNC: When modified, update SideNav.tsx, AppShell.tsx and
  * SideNavRailMotion.test.tsx.
@@ -44,11 +46,10 @@
 import {createContext} from 'react';
 import {
   createAnimatedLayout,
-  holdLayoutSwap,
-  layoutMotionFor,
-  playLayoutFrames,
-  playLayoutSwap,
+  holdLayoutEdge,
+  playLayoutEdge,
   type AnimatedLayout,
+  type LayoutEdgeHold,
   type LayoutSwap,
 } from '../motion/animatedLayout';
 
@@ -88,12 +89,12 @@ export interface RailShown {
 }
 
 export interface RailSnapshot {
-  readonly rail: HTMLElement;
-  readonly railRect: DOMRect;
+  /** The old rail, held for the module's edge reveal. */
+  readonly hold: LayoutEdgeHold;
+  /** The old rail as one transient copy, or null when it cannot be held. */
+  readonly swap: LayoutSwap | null;
   /** What the rail shows when the change lands. */
   readonly shown: RailShown;
-  /** The old rail, held by the swap. */
-  readonly swap: LayoutSwap | null;
 }
 
 /** A playing rail motion. */
@@ -114,19 +115,22 @@ export function snapshotRail(
   running: RailShown | null,
   isCollapsed: boolean,
 ): RailSnapshot | null {
-  if (rail == null || typeof rail.animate !== 'function') {
+  // The rail's edge is the one beside the content, its inline end.
+  const hold = holdLayoutEdge(handle, rail, {
+    edge: 'inline-end',
+    shown: running?.width ?? null,
+  });
+  if (hold == null) {
     return null;
   }
-  const railRect = rail.getBoundingClientRect();
   return {
-    rail,
-    railRect,
+    hold,
+    swap: hold.swap,
     shown: running ?? {
-      width: railRect.width,
+      width: hold.extent,
       labels: isCollapsed ? 0 : 1,
       collapsed: isCollapsed ? 1 : 0,
     },
-    swap: holdLayoutSwap(handle, rail),
   };
 }
 
@@ -141,17 +145,6 @@ function textElements(rail: HTMLElement): Element[] {
   );
 }
 
-/** `element`'s ancestor (or itself) that sits directly in `host`. */
-function childOf(host: Element, element: HTMLElement): HTMLElement | null {
-  let node: HTMLElement | null = element;
-  while (node != null && node.parentElement !== host) {
-    node = node.parentElement;
-  }
-  return node;
-}
-
-const AT_REST: RailMotion = {end: () => {}, shown: () => null};
-
 /**
  * After the change commits, before paint: play the rail's motion from the
  * snapshot, on the module's motion. With a `column` (in AppShell), the rail's
@@ -163,19 +156,8 @@ export function playRail(
   handle: AnimatedLayout,
   column: HTMLElement | null = null,
 ): RailMotion {
-  const {railRect, swap, shown: from} = snapshot;
-  // The rail as it is now: a resizable rail's nav remounts when its resize
-  // wrapper comes and goes with the collapse.
-  const rail = current?.isConnected === true ? current : snapshot.rail;
-  if (!rail.isConnected) {
-    return AT_REST;
-  }
-  const motion = layoutMotionFor(rail);
-  const next = rail.getBoundingClientRect();
-  if (motion.kind === 'instant' || Math.abs(next.width - from.width) < 0.5) {
-    return AT_REST;
-  }
-  const isCollapse = next.width < from.width;
+  const {shown: from} = snapshot;
+  let isCollapse = false;
   // The labels and the collapsed icons over the motion's progress, from what
   // the rail showed.
   const labelsAt = (p: number) =>
@@ -186,130 +168,42 @@ export function playRail(
     isCollapse
       ? from.collapsed + (1 - from.collapsed) * clamp((p - 0.7) / 0.3)
       : from.collapsed * (1 - clamp(p / 0.6));
-  const rtl = getComputedStyle(rail).direction === 'rtl';
-  const sign = rtl ? -1 : 1;
-  const inset = (px: number) =>
-    rtl ? `inset(0px 0px 0px ${px}px)` : `inset(0px ${px}px 0px 0px)`;
-  // The row that holds the rail and the column, or the rail's parent.
-  const host =
-    column?.parentElement != null && column.parentElement.contains(rail)
-      ? column.parentElement
-      : rail.parentElement;
-  // Riding needs the swap: its frames carry the column's travel. Without one
-  // (old content that cannot be copied) the clip follows the motion's curve.
-  const rides = host != null && column?.parentElement === host && swap != null;
-  // The width the rail shows over the motion: on the column's glide (its
-  // travel so far added to where it started), or on the motion's curve.
-  const widthAt = (p: number, ride: {x: number}) =>
-    rides
-      ? from.width + sign * ride.x
-      : from.width + (next.width - from.width) * p;
-  const now = () => Number(rail.ownerDocument.timeline?.currentTime ?? 0);
-  const startedAt = now();
-  const durationMs =
-    motion.kind === 'spring' ? motion.progress.durationMs : motion.durationMs;
-  const shown = (): RailShown | null => {
-    const elapsed = now() - startedAt;
-    if (elapsed >= durationMs) {
-      return null;
-    }
-    const p =
-      motion.kind === 'spring' ? 1 - motion.progress.remaining(elapsed) : 0;
-    let width = from.width + (next.width - from.width) * p;
-    if (rides && column != null) {
-      // The rail's edge is the column's: read it where it shows.
-      const edge = column.getBoundingClientRect();
-      const own = rail.getBoundingClientRect();
-      width = rtl ? own.right - edge.right : edge.left - own.left;
-    }
-    return {width, labels: labelsAt(p), collapsed: collapsedAt(p)};
-  };
-  const rideWith =
-    rides && column != null
-      ? {
-          element: column,
-          travel: {x: sign * (from.width - next.width), y: 0},
-          isCopyMoved: false,
-        }
-      : undefined;
-  // The copy keeps the rail's inline-start edge where the rail is now, so it
-  // meets the real rail wherever SideNav sits (a centered rail moves).
-  const at = DOMRect.fromRect({
-    x: rtl ? next.right - railRect.width : next.left,
-    y: next.top,
-    width: railRect.width,
-    height: railRect.height,
+  const motion = playLayoutEdge(snapshot.hold, current, handle, {
+    edge: 'inline-end',
+    rideWith: column,
+    parts: (isConceal, rail) => {
+      isCollapse = isConceal;
+      return isConceal
+        ? {
+            // The old rail's text fades early, the copy late, as the real
+            // collapsed rail, raised above it, fades in.
+            copyOpacity: p => 1 - clamp((p - 0.7) / 0.3),
+            copyText: labelsAt,
+            incoming: [
+              {element: rail, frames: p => ({opacity: collapsedAt(p)})},
+            ],
+          }
+        : {
+            // The old, collapsed rail fades early; the real rail's text, late.
+            copyOpacity: collapsedAt,
+            incoming: textElements(rail).map(element => ({
+              element,
+              frames: (p: number) => ({opacity: labelsAt(p)}),
+            })),
+          };
+    },
   });
-
-  if (isCollapse) {
-    // A collapse covers the old rail, held by the swap, from the width it
-    // shows down to the new one; the real, collapsed rail fades in above it.
-    if (swap == null || host == null) {
-      return AT_REST;
-    }
-    const raised = childOf(host, rail);
-    const restore =
-      raised == null
+  return {
+    end: motion.end,
+    shown: () => {
+      const now = motion.shown();
+      return now == null
         ? null
         : {
-            position: raised.style.position,
-            zIndex: raised.style.zIndex,
+            width: now.extent,
+            labels: labelsAt(now.progress),
+            collapsed: collapsedAt(now.progress),
           };
-    if (raised != null) {
-      if (getComputedStyle(raised).position === 'static') {
-        raised.style.position = 'relative';
-      }
-      raised.style.zIndex = '2';
-    }
-    const end = playLayoutSwap(
-      {...swap, rect: at},
-      {
-        host,
-        isOpaque: true,
-        copy: (p, ride) => ({
-          clipPath: inset(railRect.width - widthAt(p, ride)),
-          opacity: 1 - clamp((p - 0.7) / 0.3),
-        }),
-        copyText: labelsAt,
-        rideWith,
-        onEnd: () => {
-          if (raised != null && restore != null) {
-            raised.style.position = restore.position;
-            raised.style.zIndex = restore.zIndex;
-          }
-        },
-        incoming: [{element: rail, frames: p => ({opacity: collapsedAt(p)})}],
-      },
-    );
-    return {end, shown};
-  }
-
-  // An expand reveals the real rail from the width it showed, its text fading
-  // in late, under the old, collapsed rail fading early.
-  const incoming = [
-    {
-      element: rail,
-      frames: (p: number, ride: {x: number}) => ({
-        clipPath: inset(next.width - widthAt(p, ride)),
-      }),
     },
-    ...textElements(rail).map(element => ({
-      element,
-      frames: (p: number) => ({opacity: labelsAt(p)}),
-    })),
-  ];
-  const end =
-    swap != null && host != null
-      ? playLayoutSwap(
-          {...swap, rect: at},
-          {
-            host,
-            isOpaque: true,
-            copy: p => ({opacity: collapsedAt(p)}),
-            rideWith,
-            incoming,
-          },
-        )
-      : playLayoutFrames(handle, incoming);
-  return {end, shown};
+  };
 }

package/src/Slider/Slider.tsx

@@ -5,7 +5,7 @@
 /**
  * @file Slider.tsx
  * @input Uses React, useId, useRef, useCallback, useEffect, Field, Tooltip, useTooltip, VisuallyHidden
- * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it
+ * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it; two coincident range thumbs separate toward the press or the first movement
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -45,10 +45,7 @@ import type {InputStatus} from '../Field/types';
 import {mergeProps, rtlStyles} from '../utils';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {joinAriaIDs} from '../utils/inputAria';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
   type FieldInputBaseProps,
@@ -560,16 +557,14 @@ export function Slider({ref, ...props}: SliderProps) {
     null,
   );
 
-  useInteractionModalityTracking();
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
 
   const handleThumbFocus = useCallback(
     (thumbIndex: number, _e: FocusEvent<HTMLDivElement>) => {
       // A focused disabled thumb still shows the ring (spec:AST-085 FR6).
-      setKeyboardFocusThumb(
-        getInteractionModality() === 'keyboard' ? thumbIndex : null,
-      );
+      setKeyboardFocusThumb(readModality() === 'keyboard' ? thumbIndex : null);
     },
-    [],
+    [readModality],
   );
 
   const handleThumbBlur = useCallback((_e: FocusEvent<HTMLDivElement>) => {
@@ -672,8 +667,24 @@ export function Slider({ref, ...props}: SliderProps) {
     [isRange, values],
   );
 
+  // The pointer's value at a press on two coincident thumbs, while no
+  // movement has said which way the drag goes; the first value off it picks
+  // the thumb that can travel that way (see handlePointerMove).
+  const coincidentDragRef = useRef<number | null>(null);
+  // Whether the drag in progress began on two coincident thumbs: such a drag
+  // can always follow the pointer, so when the dragged thumb is held against
+  // the other one and the pointer passes it, the other thumb takes the drag.
+  const coincidentOriginRef = useRef(false);
+
   const updateValue = useCallback(
-    (thumbIndex: number, newVal: number, snap = true) => {
+    (
+      thumbIndex: number,
+      newVal: number,
+      snap = true,
+      // The other thumb's values to start from, when one event moves both
+      // (a drag handed from one coincident thumb to the other).
+      from: ReadonlyArray<number> = values,
+    ) => {
       if (isDisabled) {
         return;
       }
@@ -687,7 +698,7 @@ export function Slider({ref, ...props}: SliderProps) {
       );
 
       if (isRange) {
-        const currentValues = [...values] as [number, number];
+        const currentValues = [...from] as [number, number];
         currentValues[thumbIndex] = clamped;
 
         // Enforce minStepsBetweenThumbs
@@ -765,6 +776,8 @@ export function Slider({ref, ...props}: SliderProps) {
         detachLostCaptureRef.current = null;
         draggingThumbRef.current = null;
         dragPointerRef.current = null;
+        coincidentDragRef.current = null;
+        coincidentOriginRef.current = false;
         setDraggingThumb(null);
         fireChangeEnd();
       }
@@ -804,13 +817,41 @@ export function Slider({ref, ...props}: SliderProps) {
         pressedThumb == null || thumbs == null
           ? -1
           : Array.from(thumbs).indexOf(pressedThumb);
-      // A direct thumb press owns that thumb even when range values coincide.
-      // Track and mark presses still choose the nearest value.
-      const thumbIndex =
+      // A direct thumb press owns that thumb; track and mark presses choose
+      // the nearest value. Two thumbs on one value are the exception: only
+      // one of them can travel toward where the pointer goes. A track press
+      // beside them picks the thumb on its side. A press on the thumbs
+      // themselves (or on their shared value) moves nothing: the pressed
+      // thumb holds the press until the pointer moves, and the direction of
+      // that first movement from the press picks the thumb.
+      const isCoincident = isRange && values[0] === values[1];
+      let thumbIndex =
         pressedThumbIndex >= 0 ? pressedThumbIndex : getClosestThumb(newVal);
+      const parks =
+        isCoincident && (pressedThumbIndex >= 0 || newVal === values[0]);
+      // Until the first movement, a parked press is held by the upper thumb,
+      // the one drawn over the lower one, wherever it landed: on the thumbs
+      // (which the upper thumb covers) or on their shared value elsewhere,
+      // such as its mark label. So its pressed paint shows, and a press that
+      // never moves leaves focus on the same thumb.
+      if (parks && pressedThumbIndex < 0) {
+        thumbIndex = 1;
+      }
+      // The first movement is measured from the pointer itself, not from a
+      // mark it pressed (a wide label sits away from its mark's value).
+      coincidentDragRef.current = parks
+        ? getValueFromPosition(e.clientX, e.clientY)
+        : null;
+      // Only a drag that began on the shared thumbs, the press that waited for
+      // the first movement, hands itself to the other thumb (FR6); a track
+      // press beside them already picked its thumb.
+      coincidentOriginRef.current = parks;
+      if (isCoincident && !parks) {
+        thumbIndex = newVal > values[0] ? 1 : 0;
+      }
       draggingThumbRef.current = thumbIndex;
       setDraggingThumb(thumbIndex);
-      updateValue(thumbIndex, newVal);
+      updateValue(thumbIndex, parks ? values[thumbIndex] : newVal);
 
       // Focus the thumb that owns this drag.
       thumbs?.[thumbIndex]?.focus();
@@ -839,7 +880,15 @@ export function Slider({ref, ...props}: SliderProps) {
         (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
       }
     },
-    [isDisabled, getValueFromPosition, getClosestThumb, updateValue, endDrag],
+    [
+      isDisabled,
+      isRange,
+      values,
+      getValueFromPosition,
+      getClosestThumb,
+      updateValue,
+      endDrag,
+    ],
   );
 
   const handlePointerMove = useCallback(
@@ -852,6 +901,48 @@ export function Slider({ref, ...props}: SliderProps) {
         return;
       }
       const newVal = getValueFromPosition(e.clientX, e.clientY);
+      // Hands the drag to a thumb, with its focus and pressed paint.
+      const handTo = (thumbIndex: number) => {
+        if (thumbIndex === draggingThumbRef.current) {
+          return;
+        }
+        draggingThumbRef.current = thumbIndex;
+        setDraggingThumb(thumbIndex);
+        const thumbs =
+          trackRef.current?.querySelectorAll<HTMLElement>('[role="slider"]');
+        thumbs?.[thumbIndex]?.focus();
+        setKeyboardFocusThumb(null);
+      };
+      const pressValue = coincidentDragRef.current;
+      if (pressValue !== null) {
+        if (newVal === pressValue) {
+          return;
+        }
+        // The first movement from a press on coincident thumbs hands the
+        // drag to the thumb that can travel that way.
+        coincidentDragRef.current = null;
+        handTo(newVal > pressValue ? 1 : 0);
+      } else if (coincidentOriginRef.current) {
+        // A drag that began on coincident thumbs follows the pointer either
+        // way: once the pointer passes the other thumb, the dragged one stops
+        // against it and the other takes the drag (a first step that drifted
+        // the wrong way never sticks the drag).
+        const current = valuesRef.current;
+        const dragging = draggingThumbRef.current;
+        const other = dragging === 0 ? 1 : 0;
+        if (
+          (dragging === 0 && newVal > current[1]) ||
+          (dragging === 1 && newVal < current[0])
+        ) {
+          // The dragged thumb ends against the other one, as if it had
+          // followed the pointer there, and the other follows the pointer on.
+          const from = [...current];
+          from[dragging] = current[other];
+          handTo(other);
+          updateValue(other, newVal, true, from);
+          return;
+        }
+      }
       updateValue(draggingThumbRef.current, newVal);
     },
     [isDisabled, getValueFromPosition, updateValue],
@@ -879,7 +970,7 @@ export function Slider({ref, ...props}: SliderProps) {
         !e.metaKey &&
         !e.altKey &&
         !e.ctrlKey &&
-        getInteractionModality() === 'keyboard'
+        readModality() === 'keyboard'
       ) {
         setKeyboardFocusThumb(thumbIndex);
       }
@@ -959,6 +1050,7 @@ export function Slider({ref, ...props}: SliderProps) {
       minStepsBetweenThumbs,
       updateValue,
       fireChangeEnd,
+      readModality,
     ],
   );
 
@@ -1070,7 +1162,11 @@ export function Slider({ref, ...props}: SliderProps) {
           placement={tooltipPlacement}
           delay={0}
           focusTrigger="always"
-          isOpen={draggingThumb === thumbIndex ? true : undefined}>
+          // A drag keeps its own thumb's value showing and closes the other
+          // thumb's, which a drag handed over from it may have forced open.
+          isOpen={
+            draggingThumb === null ? undefined : draggingThumb === thumbIndex
+          }>
           {thumbElement}
         </Tooltip>
       );
@@ -1174,6 +1270,7 @@ export function Slider({ref, ...props}: SliderProps) {
           ref={useMergedRefs(
             isRange ? ref : undefined,
             trackRef,
+            modalityRef,
             disabledMessageTooltip.ref,
           )}
           {...(isRange

package/src/Table/BaseTable.tsx

@@ -15,6 +15,7 @@
  */
 
 import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
+import {isRenderable} from '../utils/isRenderable';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import type {
@@ -265,10 +266,10 @@ function TableRowInner<T extends Record<string, unknown>>({
  * Compares TableRowProps to determine if re-render is needed.
  * Shallow compares the item object and checks if columns/plugins references changed.
  *
- * Includes rowIndex in the comparison so that plugins using the index
- * (e.g. for row numbering or conditional formatting) get correct values
- * after insertions/deletions. This also future-proofs for tree grid
- * index paths where structural position matters.
+ * The row index reaches a row's output only through a plugin's
+ * `transformBodyRow` (cells get no index), so it is compared only when some
+ * plugin has one: a re-sort that moves rows then re-renders none of them
+ * unless a plugin can show the index (row numbering, conditional formatting).
  */
 function areRowPropsEqual<T extends Record<string, unknown>>(
   prevProps: TableRowProps<T>,
@@ -277,7 +278,10 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
   if (prevProps.rowKey !== nextProps.rowKey) {
     return false;
   }
-  if (prevProps.rowIndex !== nextProps.rowIndex) {
+  if (
+    prevProps.rowIndex !== nextProps.rowIndex &&
+    nextProps.plugins.some(plugin => plugin.transformBodyRow != null)
+  ) {
     return false;
   }
   if (prevProps.ariaRowIndex !== nextProps.ariaRowIndex) {
@@ -470,7 +474,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
     const headerInner = hasSlots ? (
       <>
         {before}
-        {after != null ? (
+        {isRenderable(after) ? (
           <div {...stylex.props(styles.headerLabelRow)}>
             {resolvedContent}
             {after}

package/src/Table/glidingDivider.ts

@@ -6,7 +6,8 @@
  *   computed borders, StyleX
  * @output Exports `glidingDividerStyles` (a row's stand-in divider while it
  *   glides), `markGlidingRows` (marks the moving rows for that glide and
- *   carries each row's own border onto the stand-in) and `rowEdge`
+ *   carries each row's own border onto the stand-in), `rowEdge`, and the
+ *   row and pinned-cell attribute names plugins/stickyColumns reads
  * @position Table internals. With collapsed borders the table paints every
  *   border at its cell's static place, so a row that moves leaves its divider
  *   behind. For the glide only, the moving row's cells are marked: their
@@ -37,8 +38,12 @@ const CELL_ATTRIBUTE = 'data-astryx-cell-gliding';
 const CELL_GLIDING = '[data-astryx-cell-gliding]';
 const CELL_LINE = '[data-astryx-cell-gliding="line"]';
 
-/** On a pinned (sticky) cell: plugins/stickyColumns. */
-const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
+/**
+ * On a pinned (sticky) cell, written by plugins/stickyColumns. Named here
+ * because that plugin already imports this module; naming it there would make
+ * the two import each other.
+ */
+export const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
 
 /**
  * A row's divider, carried on the row for its glide. Names no cell sets, so

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -303,12 +303,14 @@ function SortHeaderButton<T extends Record<string, unknown>>({
             color={direction != null ? 'accent' : 'secondary'}
           />
         </span>
+        {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `rank` is the column's sort position, a number */}
         {rank != null && (
           <span {...stylex.props(sortStyles.rank)} aria-hidden="true">
             {rank}
           </span>
         )}
       </button>
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `rank` is the column's sort position, a number */}
       {rank != null && (
         // Hidden, so it adds nothing to the button's or the header's name;
         // aria-describedby still reads it.

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -33,7 +33,7 @@ import type {
 } from '../../types';
 import {resolveColumnFloorWidths} from '../../columnUtils';
 import {collapsedBottom} from '../../rowDivider';
-import {GLIDING_ATTRIBUTE} from '../../glidingDivider';
+import {GLIDING_ATTRIBUTE, PINNED_ATTRIBUTE} from '../../glidingDivider';
 import {useTheme, useThemeName} from '../../../theme/useTheme';
 
 // =============================================================================
@@ -183,7 +183,6 @@ const SHADOW_VAR_END = '--table-sticky-shadow-end';
 // border on the row, or the next row's top border), it is read after each
 // commit and on resize and carried as the cell's `carry` state
 // (syncPinnedDividers).
-const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
 /** Spread into a pinned cell's props: the attribute the divider sync finds. */
 const PINNED_PROPS: Record<string, string> = {[PINNED_ATTRIBUTE]: ''};
 const CARRY = 'carry';