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

package/src/Layout/LayoutPanel.doc.mjs

@@ -53,7 +53,8 @@ export const docs = {
     {
       name: 'label',
       type: 'string',
-      description: 'Accessible label for the landmark element.',
+      description:
+        'Accessible label for the landmark element. While the region scrolls, it also names the scrolling region, which otherwise takes a translated "Content".',
     },
     {
       name: 'role',
@@ -64,13 +65,13 @@ export const docs = {
       name: 'width',
       type: 'number | string',
       description:
-        'Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width.',
+        "Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width. Beside a ResizeHandle given a useResizable region's props, a panel at width={region.size} is inert while the region is collapsed, and focus inside it moves to the handle as it collapses.",
     },
     {
       name: 'resizable',
-      type: 'ResizableProps',
+      type: 'ResizableRegion | ResizableProps',
       description:
-        "Resize props from useResizable(). When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel. Carries the region's axis ('horizontal' | 'vertical'), which must match the adjacent ResizeHandle's direction.",
+        "The output of useResizable(), or its props. When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel. Carries the region's axis ('horizontal' | 'vertical'), which must match the adjacent ResizeHandle's direction. Focus inside the panel moves to its ResizeHandle as it collapses, and the panel is inert while collapsed.",
     },
   ],
 };
@@ -106,7 +107,8 @@ export const docsZh = {
     {
       name: 'label',
       type: 'string',
-      description: '地标元素的无障碍标签。',
+      description:
+        '地标元素的无障碍标签。区域滚动时，它也为滚动区域命名；未提供时使用已翻译的“Content”（内容）。',
     },
     {
       name: 'role',
@@ -117,13 +119,13 @@ export const docsZh = {
       name: 'width',
       type: 'number | string',
       description:
-        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。',
+        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。放在接收 useResizable 区域 props 的 ResizeHandle 旁边、以 width={region.size} 渲染时，区域折叠期间面板为 inert，折叠时面板内的焦点移到手柄上。',
     },
     {
       name: 'resizable',
-      type: 'ResizableProps',
+      type: 'ResizableRegion | ResizableProps',
       description:
-        "来自 useResizable() 的调整大小属性。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。其中携带区域的轴向（'horizontal' | 'vertical'），必须与相邻 ResizeHandle 的 direction 一致。",
+        "useResizable() 的返回值或其 props。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。其中携带区域的轴向（'horizontal' | 'vertical'），必须与相邻 ResizeHandle 的 direction 一致。折叠时面板内的焦点会移到其 ResizeHandle 上，折叠期间面板为 inert。",
     },
   ],
 };
@@ -139,11 +141,12 @@ export const docsDense = {
     padding:
       'Internal padding on spacing scale. Overrides layout container default.',
     isScrollable: 'Enable scrollable overflow.',
-    label: 'Accessible label for landmark element.',
+    label:
+      'Accessible label for landmark element; also names the region while it scrolls (default "Content").',
     role: 'ARIA landmark role.',
     width:
-      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width.',
+      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width. width={region.size} beside a ResizeHandle given the region props: inert while collapsed; focus inside moves to the handle on collapse.',
     resizable:
-      'Resize props from useResizable(). Hook drives panel width; place ResizeHandle adjacent.',
+      'useResizable() output or its props. Hook drives panel width; place ResizeHandle adjacent. Focus inside moves to the handle on collapse; inert while collapsed.',
   },
 };

package/src/Layout/LayoutPanel.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file LayoutPanel.tsx
- * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
+ * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
+ *   useScrollRegionProps, resizablePane.ts
  * @output Exports LayoutPanel component and LayoutPanelProps
  * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
  *   settings sidebars, detail panels, or any fixed-width side content.
@@ -17,14 +18,28 @@
 
 import type {AriaRole, ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
-import {use} from 'react';
+import {use, useCallback, useRef, useState, useSyncExternalStore} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {LayoutAreaContext} from './LayoutAreaContext';
 import {LayoutSlotsContext} from './LayoutSlotsContext';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useScrollRegionProps} from '../hooks/useScrollRegionProps';
 import {mergeProps} from '../utils';
 import type {SizeValue, SpacingStep} from '../utils/types';
-import type {ResizableProps} from '../Resizable/useResizable';
+import {
+  resizablePropsOf,
+  type ResizableProps,
+  type ResizableRegion,
+} from '../Resizable/useResizable';
+import {
+  createResizablePaneLink,
+  resizeHandleBeside,
+} from '../Resizable/resizablePane';
+import {LayoutChangeSnapshot} from '../motion/LayoutChangeSnapshot';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {moveFocusLeftBehind, noteFocusWithin} from '../utils/focusReturn';
+import {useFocusLeavingChange} from '../utils/useFocusLeavingChange';
 import {themeProps} from '../utils/themeProps';
 import {
   paddingStyles,
@@ -77,6 +92,12 @@ const styles = stylex.create({
   scrollable: {
     overflow: 'auto',
   },
+  // At width 0 the padding box is 0 too, so the clip hides every child.
+  zeroWidth: {
+    paddingInlineStart: 0,
+    paddingInlineEnd: 0,
+    overflow: 'clip',
+  },
   // For start panel: divider on end edge
   dividerEnd: {
     borderInlineEndWidth: 1,
@@ -100,6 +121,8 @@ const styles = stylex.create({
   },
 });
 
+const returnFalse = () => false;
+
 // Dynamic styles for sizing props
 const dynamicStyles = stylex.create({
   sizing: (width: SizeValue | null) => ({
@@ -144,6 +167,8 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
   /**
    * Accessible label for the landmark.
    * Required when role is set and multiple landmarks of the same type exist.
+   * While the panel scrolls, it also names the scrolling region, which
+   * otherwise takes a translated "Content".
    */
   label?: string;
 
@@ -161,20 +186,20 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
   width?: SizeValue;
 
   /**
-   * Resize props from `useResizable()`. When provided, the panel width
-   * is driven by the hook and a resize handle should be placed adjacent
-   * to this panel.
+   * The output of `useResizable()`, or its `props`. When provided, the panel
+   * width is driven by the hook and a resize handle should be placed
+   * adjacent to this panel.
    *
    * @example
    * ```
-   * const sidebar = useResizable({ defaultSize: 250, minSize: 200 });
-   * <LayoutPanel resizable={sidebar.props}>
+   * const resizable = useResizable({ defaultSize: 250, minSize: 200 });
+   * <LayoutPanel resizable={resizable}>
    *   <Navigation />
    * </LayoutPanel>
-   * <ResizeHandle resizable={sidebar.props} />
+   * <ResizeHandle resizable={resizable} />
    * ```
    */
-  resizable?: ResizableProps;
+  resizable?: ResizableRegion | ResizableProps;
 }
 
 /**
@@ -213,28 +238,94 @@ export function LayoutPanel({
   padding,
   role,
   width,
-  resizable,
+  resizable: resizableValue,
   xstyle,
   className,
   style,
   ref,
   ...props
 }: LayoutPanelProps) {
+  const resizable =
+    resizableValue == null ? undefined : resizablePropsOf(resizableValue);
   const area = use(LayoutAreaContext);
   const {hasHeader, hasFooter} = use(LayoutSlotsContext);
 
   // When resizable props are provided, use the hook-driven size
   const effectiveWidth = resizable ? resizable._size : width;
 
+  // With no `resizable`, a ResizeHandle beside the panel that has a region's
+  // props finds the panel and holds it collapsed with the region. The panel
+  // lends its element in its callback ref for that.
+  const [paneLink] = useState(createResizablePaneLink);
+  const isHeldCollapsed = useSyncExternalStore(
+    paneLink.subscribe,
+    paneLink.isCollapsed,
+    returnFalse,
+  );
+  const isLentBeside = resizable == null;
+  const lendRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      paneLink.attach(isLentBeside ? element : null);
+    },
+    [paneLink, isLentBeside],
+  );
+
+  // A collapsing panel moves focus inside it to its ResizeHandle, through the
+  // focus-leaving sequence that disclosures share. It goes inert and hidden
+  // from assistive technology a commit later, so inert never drops that focus
+  // to the page. Opening drops both at once. The ResizeHandle beside it holds
+  // the region's collapse state, or else the `resizable` props hold it.
+  const elementRef = useRef<HTMLDivElement>(null);
+  const isRegionCollapsed =
+    resizable == null ? isHeldCollapsed : resizable._isCollapsed;
+  const noteFocusBeforeCollapse = useFocusLeavingChange(
+    isRegionCollapsed,
+    (wasCollapsed: boolean) =>
+      wasCollapsed ? null : noteFocusWithin(elementRef.current),
+    (noted, isCollapsed) => {
+      const panel = elementRef.current;
+      if (isCollapsed && panel != null) {
+        moveFocusLeftBehind(
+          noted,
+          paneLink.focusTarget() ?? resizeHandleBeside(panel, area),
+          panel,
+        );
+      }
+    },
+  );
+  const [isSettledCollapsed, setIsSettledCollapsed] =
+    useState(isRegionCollapsed);
+  if (!isRegionCollapsed && isSettledCollapsed) {
+    setIsSettledCollapsed(false);
+  }
+  // Syncs `inert` with the browser's focus: the panel goes inert only after
+  // this commit's focus move.
+  useIsomorphicLayoutEffect(() => {
+    if (isRegionCollapsed && !isSettledCollapsed) {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- the panel goes inert only after the focus-leaving move above ran in this commit; inert in the collapsing commit would drop that focus to the page first
+      setIsSettledCollapsed(true);
+    }
+  }, [isRegionCollapsed, isSettledCollapsed]);
+  const isConcealed = isRegionCollapsed && isSettledCollapsed;
+
   // Determine panel position
   const isStartPanel = area === 'start';
   const isEndPanel = area === 'end';
 
   const isZeroPadding = padding === 0;
+  // A collapsed region sizes its panel to 0.
+  const isZeroWidth = effectiveWidth === 0;
 
   // When no divider, collapse spacing for seamless visual flow
   const shouldCollapseSpacing =
-    !hasDivider && !isZeroPadding && padding == null;
+    !hasDivider && !isZeroPadding && padding == null && !isZeroWidth;
+  // At width 0 the panel clips its content, so it does not scroll.
+  const region = useScrollRegionProps({
+    isScrollable: isScrollable && !isZeroWidth,
+    role,
+    label,
+  });
+  const mergedRef = useMergedRefs(ref, region.ref, elementRef, lendRef);
 
   // Select divider style based on position
   const dividerStyle = isStartPanel
@@ -252,9 +343,9 @@ export function LayoutPanel({
 
   return (
     <div
-      ref={ref}
-      role={role}
-      aria-label={label}
+      ref={mergedRef}
+      role={region.role}
+      aria-label={region['aria-label']}
       {...mergeProps(
         themeProps('layout-panel'),
         stylex.props(
@@ -276,12 +367,18 @@ export function LayoutPanel({
           padding != null && containerPaddingBlockEndVarStyles[padding],
           hasDivider && dividerStyle,
           shouldCollapseSpacing && collapseStyle,
+          isZeroWidth && styles.zeroWidth,
           xstyle,
         ),
         className,
         style,
       )}
-      {...props}>
+      {...props}
+      {...(isConcealed ? {inert: true, 'aria-hidden': true} : {})}>
+      <LayoutChangeSnapshot
+        value={isRegionCollapsed}
+        onBeforeChange={noteFocusBeforeCollapse}
+      />
       {children}
     </div>
   );

package/src/Lightbox/Lightbox.tsx

@@ -46,6 +46,7 @@ import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {overlayPaddingReset} from '../Layout/overlayPaddingReset.stylex';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
+import {useFocusRegionContainment} from '../hooks/useFocusTrap';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {isRtlElement} from '../hooks/isRtlElement';
@@ -341,6 +342,9 @@ export function Lightbox({
   const t = useComponentTranslator();
   const dialogRef = useRef<HTMLDialogElement>(null);
   const mergedDialogRef = useMergedRefs(ref, dialogRef);
+  // Native showModal() lets Tab leave for the browser's own UI, so the shared
+  // module wraps it.
+  useFocusRegionContainment(dialogRef, isOpen);
   const containerRef = useRef<HTMLDivElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const triggerElementRef = useRef<Element | null>(null);

package/src/List/List.doc.mjs

@@ -13,6 +13,15 @@ export const docs = {
       {className: 'astryx-list', visualProps: ['density', 'listStyle']},
       {className: 'astryx-list-item'},
     ],
+    vars: [
+      {
+        name: '--_hit-border-bottom',
+        description:
+          "Width of the divider below a divided row, 0 on the last row. The row's touch hit layer adds it to its offset, so its band starts past the divider. ListItem sets it on the row's own ::after from --border-width under hasDividers, so content inside the row never inherits it, and a theme changes the divider through that token.",
+        default: '0px',
+        private: true,
+      },
+    ],
   },
   description: 'List container with density, dividers, and header support.',
   props: [
@@ -32,7 +41,7 @@ export const docs = {
     {
       name: 'density',
       type: "'compact' | 'balanced' | 'spacious'",
-      description: 'Spacing density for items.',
+      description: "Spacing density for items. Under a finger, an interactive row's hit target reaches 44px where its neighbors leave room, with no change to how rows look or lay out.",
       default: "'balanced'",
     },
     {

package/src/List/List.tsx

@@ -148,6 +148,11 @@ const styles = stylex.create({
     // `hidden`: hidden makes a scroll container, which fights the list's
     // vertical scroller. (StyleX emits the physical longhand of this axis.)
     overflowInline: 'clip',
+    // Under a finger, the isolation boundary for what rises inside the list.
+    // A row's touch band and a swipeable row order above the rows after them.
+    // They stay below a page-level sticky header at the same z-index. With a
+    // mouse nothing rises, so the list keeps its stacking.
+    isolation: {default: null, '@media (pointer: coarse)': 'isolate'},
   },
   // Subgridded numbered rows contribute their marker's intrinsic width to
   // one column, so text and nested lists never move with an individual number.

package/src/List/ListItem.tsx

@@ -4,10 +4,11 @@
 
 /**
  * @file ListItem.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, the List row edge
- *   treatment, CheckboxInput, and the marker or task checkbox a
- *   ListMarkerScope sets (Markdown's nested lists and the task items of mixed
- *   lists), and Item's private exact-marker formatting scope for numbered
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens and the List row
+ *   edge treatment. It also uses the touch hit area (utils/touchHitArea.ts and
+ *   its layer) and CheckboxInput. It reads the marker or task checkbox a
+ *   ListMarkerScope sets, for Markdown's nested lists and the task items of mixed
+ *   lists. It also reads Item's private exact-marker formatting scope for numbered
  *   rows. Number markers stay on one line in the List's shared column,
  *   keeping every sibling's text and nested list on the same start line;
  *   they end on one line too, right-aligned with tabular figures, and hang
@@ -41,10 +42,14 @@ import type {BaseProps} from '../BaseProps';
 import {ListContext, type ListMarker} from './ListContext';
 import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import {mergeProps} from '../utils/mergeProps';
-import {Item} from '../Item/Item';
+import {Item, servesSwipeActions} from '../Item/Item';
+import {ItemListRowContext} from '../Item/ItemListRowContext';
 import {ItemMarkerColumnsContext} from '../Item/ItemMarkerColumnsContext';
 import type {ItemAlign, ItemSwipeActions, ItemSwipeBehavior} from '../Item';
 import {themeProps} from '../utils/themeProps';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useTouchHitArea} from '../utils/touchHitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 
 // =============================================================================
 // Types
@@ -198,6 +203,21 @@ const styles = stylex.create({
       'max(var(--container-padding-inline-end, 0px), var(--_item-inset-inline))',
     borderRadius: 0,
   },
+  // Under a finger, the row's touch band rises above the rows after it. A
+  // later row is positioned with no z-index, so it would paint and hit-test
+  // over the band. Only inside a List (isInList).
+  bandRaised: {
+    '::after': {
+      zIndex: {default: null, '@media (pointer: coarse)': 1},
+    },
+  },
+  // A swipeable row is a stacking context at rest, since Item translates its
+  // swipe root. So its band's own z-index orders only inside it. Under a
+  // finger the row itself rises above the rows after it, whose boxes its band
+  // reaches into. The list isolates, so the row stays below a sticky header.
+  swipeRaised: {
+    zIndex: {default: null, '@media (pointer: coarse)': 1},
+  },
   withDivider: {
     borderBlockEndWidth: borderVars['--border-width'],
     borderBlockEndStyle: 'solid',
@@ -209,6 +229,15 @@ const styles = stylex.create({
     ':last-child': {
       borderBlockEndWidth: 0,
     },
+    // The touch hit layer's band starts past the divider, the edge of the box
+    // its insets are measured from (utils/touchHitArea.stylex.ts). The width
+    // sits on the layer itself, so content inside the row never inherits it.
+    '::after': {
+      '--_hit-border-bottom': {
+        default: borderVars['--border-width'],
+        ':last-child': '0px',
+      },
+    },
   },
 });
 
@@ -378,6 +407,28 @@ export function ListItem({
   ...restProps
 }: ListItemProps) {
   const ctx = use(ListContext);
+  // A List isolates its rows, so what a row raises stays below a page-level
+  // sticky header. Outside a List nothing bounds a raise, so a row raises
+  // nothing there.
+  const isInList = ctx != null;
+  // Under a finger, the row's hit target grows where its neighbors leave room.
+  const isTouchTarget =
+    (onClick != null || href != null || interactiveRef != null) && !isDisabled;
+  const hitAreaRef = useTouchHitArea(isTouchTarget);
+  const mergedRef = useMergedRefs(ref, hitAreaRef);
+  // A row that Item serves swipe actions on is a stacking context at rest. So
+  // its band's own z-index orders only inside it, and under a finger the row
+  // raises itself. Its root is its `<li>`, never a link.
+  const isRaisedSwipeRow =
+    isInList &&
+    isTouchTarget &&
+    servesSwipeActions({
+      swipeActions: restProps.swipeActions,
+      isDisabled,
+      isDelegate: interactiveRef != null,
+      isLinkRoot: false,
+      role: restProps.role,
+    });
   const density = ctx?.density ?? 'balanced';
   const hasDividers = ctx?.hasDividers ?? false;
   const edge = ctx?.edge ?? 'padded';
@@ -432,7 +483,7 @@ export function ListItem({
   const item = (
     <Item
       as="li"
-      ref={ref}
+      ref={mergedRef}
       marker={marker}
       startContent={startContent}
       label={label}
@@ -453,6 +504,9 @@ export function ListItem({
           hasMarkers && styles.withCounter,
           hasDividers && styles.withDivider,
           hasDividers && embeddedStyles.noRadius,
+          isTouchTarget && touchHitAreaStyles.layer,
+          isTouchTarget && isInList && styles.bandRaised,
+          isRaisedSwipeRow && styles.swipeRaised,
           edge === 'flush' && styles.edgeFlush,
           edge === 'outset' && styles.edgeOutset,
           edge === 'bleed' && styles.edgeBleed,
@@ -463,12 +517,13 @@ export function ListItem({
       {...restProps}
     />
   );
+  const row = <ItemListRowContext value>{item}</ItemListRowContext>;
   // Only numbered rows contribute two cells to List's shared counter grid.
   // Passing the marker identity keeps this request off unrelated Items in slots.
   return listStyle === 'decimal' ? (
-    <ItemMarkerColumnsContext value={marker}>{item}</ItemMarkerColumnsContext>
+    <ItemMarkerColumnsContext value={marker}>{row}</ItemMarkerColumnsContext>
   ) : (
-    item
+    row
   );
 }
 

package/src/Markdown/parser.ts

@@ -2748,11 +2748,12 @@ const URL_LITERAL_RE = new RegExp(
 /** Bare www. URL. Resulting href gets `http://` prepended. */
 const WWW_LITERAL_RE = new RegExp(`www\\.${ANY_NON_WHITESPACE_OR_ANGLE}`, 'g');
 
-/** Bare email: local-part@domain (at least one dot in domain). */
-const EMAIL_LITERAL_RE = new RegExp(
-  `${EMAIL_LOCAL_PART}@${DOMAIN_WITH_DOT}`,
-  'g',
-);
+/**
+ * The domain of a bare email, with at least one dot. The scan matches it after
+ * each `@`. A pattern that starts at every character rereads a long run each
+ * time, so its cost grows with the square of the run.
+ */
+const EMAIL_DOMAIN_RE = new RegExp(DOMAIN_WITH_DOT, 'y');
 
 /** Angle-bracket autolink: `<scheme:url>` (CommonMark §6.5). */
 const ANGLE_URL_RE = new RegExp(`<(${ANGLE_SCHEME}:${ANGLE_URL_BODY})>`, 'g');
@@ -2771,6 +2772,11 @@ const EMAIL_LOCAL_CHARS = new Set(
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789._%+-@',
 );
 
+/** The characters `EMAIL_LOCAL_PART` allows. */
+const EMAIL_LOCAL_PART_CHARS = new Set(
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789._%+-',
+);
+
 interface AutolinkMatch {
   start: number;
   end: number;
@@ -2786,35 +2792,30 @@ interface AutolinkMatch {
  * `https://example.com/Foo_(bar)` keeps the inner pair).
  */
 function peelTrailingPunctAndParens(url: string): string {
-  let s = url;
-  while (s.length > 0) {
-    // Peel trailing punctuation characters in one pass.
-    if (TRAILING_PUNCT_CHARS.has(s[s.length - 1])) {
-      let end = s.length - 1;
-      while (end > 0 && TRAILING_PUNCT_CHARS.has(s[end - 1])) {
-        end--;
-      }
-      s = s.slice(0, end);
-      continue;
-    }
-    if (s.endsWith(')')) {
-      let open = 0;
-      let close = 0;
-      for (let idx = 0; idx < s.length; idx++) {
-        if (s[idx] === '(') {
-          open++;
-        } else if (s[idx] === ')') {
-          close++;
-        }
-      }
-      if (close > open) {
-        s = s.slice(0, -1);
-        continue;
-      }
+  // Each peeled `)` lowers the close count instead of a recount, so a long
+  // run of `)` costs one pass.
+  let open = 0;
+  let close = 0;
+  for (let idx = 0; idx < url.length; idx++) {
+    if (url[idx] === '(') {
+      open++;
+    } else if (url[idx] === ')') {
+      close++;
+    }
+  }
+  let end = url.length;
+  while (end > 0) {
+    const ch = url[end - 1];
+    if (TRAILING_PUNCT_CHARS.has(ch)) {
+      end--;
+    } else if (ch === ')' && close > open) {
+      close--;
+      end--;
+    } else {
+      break;
     }
-    break;
   }
-  return s;
+  return url.slice(0, end);
 }
 
 /** Characters that, when preceding a URL, indicate it's part of a larger token. */
@@ -2922,26 +2923,48 @@ function scanAutolinksInText(text: string): AutolinkMatch[] {
     }
   }
 
-  // bare email
+  // bare email: local-part@domain, found from each `@`
   {
-    const re = new RegExp(EMAIL_LITERAL_RE.source, 'g');
-    let m: RegExpExecArray | null;
-    while ((m = re.exec(text)) !== null) {
-      const prev = text[m.index - 1];
+    // A match, accepted or not, ends where the next one may start.
+    let consumedTo = 0;
+    for (
+      let at = text.indexOf('@');
+      at !== -1;
+      at = text.indexOf('@', at + 1)
+    ) {
+      let start = at;
+      while (
+        start > consumedTo &&
+        EMAIL_LOCAL_PART_CHARS.has(text[start - 1])
+      ) {
+        start--;
+      }
+      if (start === at) {
+        continue;
+      }
+      EMAIL_DOMAIN_RE.lastIndex = at + 1;
+      const domain = EMAIL_DOMAIN_RE.exec(text);
+      if (domain === null) {
+        continue;
+      }
+      const end = at + 1 + domain[0].length;
+      consumedTo = end;
+      const prev = text[start - 1];
       // Reject if previous char could be part of the local part or sits in
       // a position that would make this match continuation of something
       // bigger (`name@x.y@host`, `foo+bar@x`, `mailto:user@host`).
       if (prev != null && EMAIL_LOCAL_CHARS.has(prev)) {
         continue;
       }
-      if (text.slice(Math.max(0, m.index - 7), m.index) === 'mailto:') {
+      if (text.slice(Math.max(0, start - 7), start) === 'mailto:') {
         continue;
       }
+      const email = text.slice(start, end);
       matches.push({
-        start: m.index,
-        end: m.index + m[0].length,
-        href: `mailto:${m[0]}`,
-        display: m[0],
+        start,
+        end,
+        href: `mailto:${email}`,
+        display: email,
       });
     }
   }

package/src/MetadataList/MetadataList.tsx

@@ -158,7 +158,7 @@ const styles = stylex.create({
       default: 'pointer',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    color: colorVars['--color-accent'],
+    color: colorVars['--color-text-accent'],
     fontSize: typeScaleVars['--text-body-size'],
     lineHeight: typeScaleVars['--text-body-leading'],
     fontWeight: fontWeightVars['--font-weight-medium'],