@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/SideNav/SideNavCollapseButton.tsx

@@ -17,7 +17,7 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
-import React, {useCallback, type ReactNode} from 'react';
+import React, {use, useCallback, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {durationVars, easeVars} from '../theme/tokens.stylex';
 import {Icon} from '../Icon';
@@ -31,8 +31,16 @@ import {
   type SideNavImperativeCollapseHandle,
 } from './SideNavCollapseContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
-import {useTranslator} from '../i18n';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {SideNavFocusTargetsContext} from './SideNavFocusTargetsContext';
 import type {ElementSize} from '../SizeContext/SizeContext';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/SideNav/SideNavCollapseButton.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
@@ -138,12 +146,26 @@ export function SideNavCollapseButton({
   onClick: onClickProp,
   ...props
 }: SideNavCollapseButtonProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {isCollapsed, toggle, isCollapsible} = useSideNavCollapseState(
     collapsible,
     handleRef,
   );
   const {isMobile} = useAppShellMobile();
+  // A toggle inside its SideNav registers there, so a collapse that removes
+  // the focused row can hand focus to it (`component:SideNav` AR3). One wired
+  // to state outside the SideNav (`collapsible`, `handleRef`) does not.
+  const focusTargets = use(SideNavFocusTargetsContext);
+  const isInSideNav =
+    focusTargets != null && collapsible == null && handleRef == null;
+  const registerToggle = useCallback(
+    (element: HTMLButtonElement | null) =>
+      element == null || !isInSideNav || focusTargets == null
+        ? undefined
+        : focusTargets.registerToggle(element),
+    [focusTargets, isInSideNav],
+  );
+  const mergedRef = useMergedRefs(ref, registerToggle);
 
   // Hide when not collapsible, or when in mobile mode (sidenav is in
   // the mobile drawer — collapse doesn't apply there)
@@ -153,7 +175,7 @@ export function SideNavCollapseButton({
 
   return (
     <Button
-      ref={ref}
+      ref={mergedRef}
       label={
         label ??
         (isCollapsed

package/src/SideNav/SideNavFocusTargetsContext.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SideNavFocusTargetsContext.ts
+ * @input The SideNav rail's rows and its collapse toggle, registered by their
+ *   callback refs
+ * @output Where focus goes when collapsing the rail removes the focused row
+ * @position Internal to SideNav: not exported from the SideNav entry. SideNav
+ *   provides it; SideNavItem registers its row and SideNavCollapseButton,
+ *   rendered inside the SideNav, registers itself (`component:SideNav` AR3).
+ */
+
+import {createContext} from 'react';
+
+export interface SideNavFocusTargets {
+  /**
+   * Registers a row's root element, and whether the collapsed rail renders
+   * the row (it has an icon and is not nested); returns its unregister.
+   */
+  registerRow: (element: HTMLElement, isKeptInRail: boolean) => () => void;
+  /** Registers a collapse toggle rendered inside the SideNav. */
+  registerToggle: (element: HTMLElement) => () => void;
+}
+
+export const SideNavFocusTargetsContext =
+  createContext<SideNavFocusTargets | null>(null);
+SideNavFocusTargetsContext.displayName = 'SideNavFocusTargetsContext';

package/src/SideNav/SideNavHeading.tsx

@@ -56,7 +56,14 @@ import {
   NavHeadingDismissContext,
 } from '../NavMenu/NavMenuContext';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/SideNav/SideNavHeading.generated';
+import {isRenderable} from '../utils/isRenderable';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
@@ -393,7 +400,7 @@ export function SideNavHeading({
   ...props
 }: SideNavHeadingProps) {
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const LinkComponent = useLinkComponent(as);
   const {isCollapsed} = useSideNavCollapse();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -468,11 +475,13 @@ export function SideNavHeading({
     menu ? setTriggerEl : undefined,
   );
 
-  // In collapsed mode: hide if no icon, show icon-only if has icon
-  if (isCollapsed && !icon) {
+  // In collapsed mode: hide if no icon, show icon-only if has icon. Icon
+  // presence follows `isRenderable` (`architecture:react-component-runtime`
+  // INV16), so `0` is an icon like any other content.
+  if (isCollapsed && !isRenderable(icon)) {
     return null;
   }
-  if (isCollapsed && icon) {
+  if (isCollapsed) {
     const collapsedIcon = <span {...stylex.props(styles.icon)}>{icon}</span>;
 
     let collapsedElement: ReactNode;
@@ -534,7 +543,9 @@ export function SideNavHeading({
                 {...focusOutlineProps.focusVisible(styles.popoverHeading)}
                 // A close affordance, not the trigger: dismiss only.
                 onClick={closeMenu}>
-                {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+                {isRenderable(icon) && (
+                  <span {...stylex.props(styles.icon)}>{icon}</span>
+                )}
                 <span {...stylex.props(styles.textContainer)}>
                   {superheading && (
                     <span {...stylex.props(styles.superheading)}>
@@ -666,7 +677,7 @@ export function SideNavHeading({
     />
   );
 
-  const headerEndContentElement = headerEndContent && (
+  const headerEndContentElement = isRenderable(headerEndContent) && (
     <span {...stylex.props(styles.headerEndContent)}>{headerEndContent}</span>
   );
 
@@ -678,7 +689,7 @@ export function SideNavHeading({
       {...focusOutlineProps.focusVisible(styles.popoverHeading)}
       // A close affordance, not the trigger: dismiss only.
       onClick={closeMenu}>
-      {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+      {isRenderable(icon) && <span {...stylex.props(styles.icon)}>{icon}</span>}
       {renderTextContent(
         <Icon
           icon="chevronDown"
@@ -712,7 +723,9 @@ export function SideNavHeading({
             styles.menuTrigger,
           )}
           {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
-          {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+          {isRenderable(icon) && (
+            <span {...stylex.props(styles.icon)}>{icon}</span>
+          )}
           {renderTextContent()}
         </LinkComponent>
         {headerEndContentElement}
@@ -738,7 +751,9 @@ export function SideNavHeading({
           style,
         )}
         {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
-        {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+        {isRenderable(icon) && (
+          <span {...stylex.props(styles.icon)}>{icon}</span>
+        )}
         {renderTextContent()}
         {headerEndContentElement}
         {chevronElement}
@@ -760,12 +775,14 @@ export function SideNavHeading({
             className,
             style,
           )}>
-          {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+          {isRenderable(icon) && (
+            <span {...stylex.props(styles.icon)}>{icon}</span>
+          )}
           {renderTextContent(
             <button
               ref={setTriggerEl}
               type="button"
-              aria-label={t('@astryx.sideNav.heading.openMenu')}
+              aria-label={t('@astryx.sideNav.heading.openMenu', {heading})}
               onClick={e => {
                 e.stopPropagation();
                 triggerProps.onClick();
@@ -832,7 +849,7 @@ export function SideNavHeading({
             className,
             style,
           )}>
-          {icon &&
+          {isRenderable(icon) &&
             (headingHref ? (
               <LinkComponent
                 href={headingHref}
@@ -848,7 +865,7 @@ export function SideNavHeading({
               <button
                 ref={setTriggerEl}
                 type="button"
-                aria-label={t('@astryx.sideNav.heading.openMenu')}
+                aria-label={t('@astryx.sideNav.heading.openMenu', {heading})}
                 onClick={e => {
                   e.stopPropagation();
                   triggerProps.onClick();
@@ -913,7 +930,7 @@ export function SideNavHeading({
           style,
         )}
         {...props}>
-        {icon &&
+        {isRenderable(icon) &&
           (headingHref ? (
             <LinkComponent
               href={headingHref}
@@ -973,7 +990,7 @@ export function SideNavHeading({
         style,
       )}
       {...props}>
-      {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
+      {isRenderable(icon) && <span {...stylex.props(styles.icon)}>{icon}</span>}
       {renderTextContent()}
       {headerEndContentElement}
       {chevronElement}

package/src/SideNav/SideNavItem.tsx

@@ -75,9 +75,17 @@ import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
 import {disabledInteractionProps} from '../utils/disabledInteraction';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {SideNavFocusTargetsContext} from './SideNavFocusTargetsContext';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/SideNav/SideNavItem.generated';
+import {isRenderable} from '../utils/isRenderable';
+
+registerEnglishFallback(english);
 // =============================================================================
 // Styles
 // =============================================================================
@@ -524,7 +532,7 @@ export function SideNavItem({
   // The row (or, collapsed, the trigger/link/button) is the pressable; the
   // expand toggle inside it is its own.
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -559,6 +567,21 @@ export function SideNavItem({
   });
   const railLeafRef = useMergedRefs(ref, railTooltip.ref);
 
+  // The row's root registers with its SideNav, so a collapse that removes the
+  // focused row can hand focus to the toggle or the nearest row still in the
+  // rail (`component:SideNav` AR3).
+  const focusTargets = use(SideNavFocusTargetsContext);
+  // The collapsed rail renders a top-level row with an icon (FR2).
+  const isKeptInRail = !!icon && depth === 0;
+  const rowRef = useCallback(
+    (element: HTMLDivElement | null) =>
+      element == null || focusTargets == null
+        ? undefined
+        : focusTargets.registerRow(element, isKeptInRail),
+    [focusTargets, isKeptInRail],
+  );
+  const rowTooltipRef = useMergedRefs(rowRef, railTooltip.ref);
+
   // Collapse state for items with children
   const itemCollapsibleConfig = useMemo(
     () => (typeof itemCollapsible === 'object' ? itemCollapsible : {}),
@@ -684,7 +707,7 @@ export function SideNavItem({
     // Items with children: popover trigger + popover
     if (hasChildren) {
       return (
-        <div {...stylex.props(styles.root, xstyle)}>
+        <div ref={rowRef} {...stylex.props(styles.root, xstyle)}>
           <button
             ref={mergedTriggerRef}
             type="button"
@@ -749,7 +772,7 @@ export function SideNavItem({
 
     return (
       <div
-        ref={isRowTrigger ? railTooltip.ref : undefined}
+        ref={isRowTrigger ? rowTooltipRef : rowRef}
         {...stylex.props(styles.root, xstyle)}>
         {collapsedElement}
         {railTooltip.renderTooltip(label)}
@@ -766,7 +789,7 @@ export function SideNavItem({
           color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary',
         })}
       {!isCollapsed && <span {...stylex.props(styles.label)}>{label}</span>}
-      {!isCollapsed && endContent && (
+      {!isCollapsed && isRenderable(endContent) && (
         <span {...stylex.props(styles.endContent)}>{endContent}</span>
       )}
       {!isCollapsed && isItemCollapsible && !hasIndependentToggle && (
@@ -942,7 +965,7 @@ export function SideNavItem({
   }
 
   const item = (
-    <div {...stylex.props(styles.root, xstyle)}>
+    <div ref={rowRef} {...stylex.props(styles.root, xstyle)}>
       {itemElement}
       {hasChildren && !isCollapsed && (
         <div

package/src/SideNav/SideNavSection.tsx

@@ -31,6 +31,7 @@ import type {BaseProps} from '../BaseProps';
 import {useSideNavCollapse} from './SideNavCollapseContext';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
+import {isRenderable} from '../utils/isRenderable';
 // =============================================================================
 // Styles
 // =============================================================================
@@ -160,7 +161,7 @@ export function SideNavSection({
         </span>
         {subtitle && <span {...stylex.props(styles.subtitle)}>{subtitle}</span>}
       </span>
-      {endContent && (
+      {isRenderable(endContent) && (
         <span {...stylex.props(styles.endContent)}>{endContent}</span>
       )}
     </>

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};
+  };
 }