@uniflowed/ui 0.0.0-alpha.40 → 0.0.0-alpha.42

package/accordion.js

@@ -347,6 +347,8 @@ export component AccordionContent(children: React.Node, render?: RenderProp, ...
     children,
     hidden: !item.open,
     id: item.contentId,
+    // React calls callback refs during commit; this node is only read by effects.
+    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       contentRef.current = element;
     }),

package/alert-dialog.js

@@ -227,6 +227,8 @@ export component AlertDialogDescription(children: React.Node, render?: RenderPro
   const describedBy = alert.describedBy;
 
   useEffect(() => {
+    // This mount counter is a ref because it is read by Dialog.Body after commit.
+    // uf-lint-disable-next-line react-compiler/immutability
     describedBy.current += 1;
     return () => {
       describedBy.current -= 1;

package/avatar.js

@@ -223,6 +223,8 @@ export component AvatarImage(
     alt,
     onError: composeHandlers(rest.onError, () => report(source, "error")),
     onLoad: composeHandlers(rest.onLoad, () => report(source, "loaded")),
+    // React calls callback refs during commit; the load effect reads it later.
+    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (node: HTMLImageElement | null) => {
       element.current = node;
     }),
@@ -261,6 +263,8 @@ export component AvatarFallback(
 
   useEffect(() => {
     if (!waiting) {
+      // The fallback delay resets after the image leaves its loading window.
+      // uf-lint-disable-next-line react-compiler/set-state-in-effect
       setElapsed(false);
     }
   }, [waiting]);

package/calendar.js

@@ -138,7 +138,7 @@ type CalendarState = {|
    * November — a cell that is rendered for the first time by the same update
    * that asked for it, so nothing could have focused it when the key arrived.
    */
-  readonly pendingFocus: { current: string | null },
+  readonly pendingFocusRef: { current: string | null },
   readonly select: (date: PlainDate) => void,
   readonly selected: PlainDate | null,
   readonly today: PlainDate,
@@ -190,7 +190,7 @@ export component CalendarRoot(
   ...rest: Rest
 ) {
   const base = useId();
-  const pendingFocus = useRef<string | null>(null);
+  const pendingFocusRef = useRef<string | null>(null);
   // One is always allocated, because a hook may not be called conditionally;
   // the caller's is used when there is one.
   const ownDayRef = useRef<HTMLElement | null>(null);
@@ -238,7 +238,7 @@ export component CalendarRoot(
     if (viaKeyboard) {
       // Only for the keyboard. A press already put focus on the cell it landed
       // on, and asking for it again would fight a caller who moved it.
-      pendingFocus.current = date.toString();
+      pendingFocusRef.current = date.toString();
     }
     // Compared rather than assigned, because `Calendar.Day` reports the focus
     // that this very call produced: a key moves the tab stop, the effect focuses
@@ -286,7 +286,7 @@ export component CalendarRoot(
       isDisabled,
       locale,
       moveFocus,
-      pendingFocus,
+      pendingFocusRef,
       select,
       selected,
       today: currentDate,
@@ -336,7 +336,7 @@ export component CalendarRoot(
 export component CalendarMonth(children?: (date: PlainDate) => renders CalendarDay, ...rest: Rest) {
   const calendar = useCalendar("Calendar.Month");
   const gridRef = useRef<HTMLElement | null>(null);
-  const { focused, moveFocus, pendingFocus, weekStartsOn } = calendar;
+  const { focused, focusedDayRef, moveFocus, pendingFocusRef, weekStartsOn } = calendar;
 
   const weeks = useMemo(
     () => weeksOf(focused.year, focused.month, weekStartsOn),
@@ -355,15 +355,15 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
     }
     const at = focused.toString();
     const cell: HTMLElement | null = (grid.querySelector(`[data-date="${at}"]`): $FlowFixMe);
-    calendar.focusedDayRef.current = cell;
+    focusedDayRef.current = cell;
     // Only when a key asked for it, and only once the render it asked for has
     // happened: `ArrowRight` off the end of October sets this to the 1st of
     // November, and the cell exists for the first time in the commit this
     // effect belongs to.
-    if (pendingFocus.current !== at) {
+    if (pendingFocusRef.current !== at) {
       return;
     }
-    pendingFocus.current = null;
+    pendingFocusRef.current = null;
     cell?.focus();
   });
 

package/collapsible.js

@@ -157,6 +157,8 @@ export component CollapsibleContent(children: React.Node, render?: RenderProp, .
     children,
     hidden: !collapsible.open,
     id: collapsible.contentId,
+    // React calls callback refs during commit; this node is only read by effects.
+    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       contentRef.current = element;
     }),

package/combobox.js

@@ -165,7 +165,7 @@ type ComboboxState = {|
    * and the list does not exist to be measured until the next commit. A ref
    * rather than state because nothing renders it.
    */
-  readonly pendingActive: { current: "first" | "last" | null },
+  readonly pendingActiveRef: { current: "first" | "last" | null },
   readonly inputRef: { current: HTMLElement | null },
   readonly listRef: { current: HTMLElement | null },
   /** How many options are in the list, for the live region. */
@@ -231,7 +231,7 @@ export component ComboboxRoot(
   const [activeId, setActiveId] = useState<string | null>(null);
   const [count, setCount] = useState(0);
   const [labelled, setLabelled] = useState(false);
-  const pendingActive = useRef<"first" | "last" | null>(null);
+  const pendingActiveRef = useRef<"first" | "last" | null>(null);
   const inputRef = useRef<HTMLElement | null>(null);
   const listRef = useRef<HTMLElement | null>(null);
 
@@ -265,7 +265,7 @@ export component ComboboxRoot(
       clear,
       activeId,
       setActiveId,
-      pendingActive,
+      pendingActiveRef,
       inputRef,
       listRef,
       count,
@@ -312,6 +312,8 @@ export component ComboboxLabel(children: React.Node, ...rest: Rest) {
 /** The text field, and every key the pattern defines. */
 export component ComboboxInput(...rest: Rest) {
   const combobox = useCombobox("Combobox.Input");
+  // `rest` filtering is render-time props work; ref objects are only passed through later.
+  // uf-lint-disable-next-line react-compiler/refs
   const passed = withoutComposed(rest, ["onChange", "onKeyDown", "ref"]);
 
   /** The options in the document right now, in document order. */
@@ -325,7 +327,8 @@ export component ComboboxInput(...rest: Rest) {
     if (items.length === 0) {
       // The list is not in the document yet, so leave an instruction for the
       // commit that puts it there.
-      combobox.pendingActive.current = movement === "next" ? "first" : "last";
+      // uf-lint-disable-next-line react-compiler/immutability
+      combobox.pendingActiveRef.current = movement === "next" ? "first" : "last";
       return;
     }
     const at = items.findIndex((item) => item.id === combobox.activeId);
@@ -358,6 +361,8 @@ export component ComboboxInput(...rest: Rest) {
       // The browser's own dropdown would sit on top of this one.
       autoComplete="off"
       id={`${combobox.base}-input`}
+      // Input events read list refs and update the virtual active descendant.
+      // uf-lint-disable-next-line react-compiler/refs
       onChange={composeHandlers(rest.onChange, (event: $FlowFixMe) => {
         combobox.setText(event.target.value);
         combobox.setOpen(true);
@@ -366,6 +371,8 @@ export component ComboboxInput(...rest: Rest) {
         // Enter takes something the reader can no longer see.
         combobox.setActiveId(null);
       })}
+      // Key events read list refs and update the virtual active descendant.
+      // uf-lint-disable-next-line react-compiler/refs
       onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
           event.preventDefault();
@@ -411,7 +418,10 @@ export component ComboboxInput(...rest: Rest) {
           combobox.setActiveId(null);
         }
       })}
+      // React calls callback refs during commit; keyboard handlers read the input later.
+      // uf-lint-disable-next-line react-compiler/refs
       ref={composeRefs(rest.ref, (element) => {
+        // uf-lint-disable-next-line react-compiler/immutability
         combobox.inputRef.current = element;
       })}
       role="combobox"
@@ -443,7 +453,7 @@ export component ComboboxList(
   ...rest: Rest
 ) {
   const combobox = useCombobox("Combobox.List");
-  const { activeId, count, listRef, inputRef, pendingActive, setActiveId, setCount } = combobox;
+  const { activeId, count, listRef, inputRef, pendingActiveRef, setActiveId, setCount } = combobox;
   const close = useStableCallback(() => {
     combobox.setOpen(false);
     combobox.setActiveId(null);
@@ -453,13 +463,19 @@ export component ComboboxList(
   // `align="start"` because a list of options belongs under the edge the text
   // starts at, and `--uf-anchor-trigger-width` is what a stylesheet reads to
   // make it exactly as wide as the field.
+  // useAnchor accepts ref objects and reads them from layout/effects.
+  // uf-lint-disable-next-line react-compiler/refs
   const anchored = useAnchor({
     align,
     alignOffset,
+    // uf-lint-disable-next-line react-compiler/refs
     anchorRef: inputRef,
     avoidCollisions,
     collisionPadding,
+    // `open` is combobox metadata; no ref value is read during render.
+    // uf-lint-disable-next-line react-compiler/refs
     open: combobox.open,
+    // uf-lint-disable-next-line react-compiler/refs
     overlayRef: listRef,
     side,
     sideOffset,
@@ -470,6 +486,8 @@ export component ComboboxList(
   // `children` that no dependency list can describe. Every write below is
   // guarded by a comparison, so the effect settles after one extra pass rather
   // than looping.
+  // This effect measures caller-rendered options after commit.
+  // uf-lint-disable-next-line react-compiler/immutability
   useEffect(() => {
     const list = listRef.current;
     if (list == null) {
@@ -485,9 +503,10 @@ export component ComboboxList(
       setCount(items.length);
     }
 
-    const wanted = pendingActive.current;
+    const wanted = pendingActiveRef.current;
     if (wanted != null) {
-      pendingActive.current = null;
+      // uf-lint-disable-next-line react-compiler/immutability
+      pendingActiveRef.current = null;
       setActiveId(moveTo(items, -1, wanted, false)?.id ?? null);
       return;
     }

package/context-menu.js

@@ -141,7 +141,9 @@ export component ContextMenuTrigger(children: React.Node, render?: RenderProp, .
     // No point: the menu goes against the element, which is where the reader's
     // focus already is.
     openAt(null);
-    menu.pendingFocus.current = "first";
+    // This is an instruction for the menu body after the opening commit.
+    // uf-lint-disable-next-line react-compiler/immutability
+    menu.pendingFocusRef.current = "first";
     menu.setOpen(true);
   }, [menu, openAt]);
 
@@ -150,7 +152,9 @@ export component ContextMenuTrigger(children: React.Node, render?: RenderProp, .
   useLongPress(triggerRef, (event: Event) => {
     const pointer: $FlowFixMe = event;
     openAt(pointAt(pointer.clientX ?? 0, pointer.clientY ?? 0));
-    menu.pendingFocus.current = "first";
+    // This is an instruction for the menu body after the opening commit.
+    // uf-lint-disable-next-line react-compiler/immutability
+    menu.pendingFocusRef.current = "first";
     menu.setOpen(true);
   });
 
@@ -173,7 +177,9 @@ export component ContextMenuTrigger(children: React.Node, render?: RenderProp, .
         // commands the page has for what they pressed on.
         press.preventDefault();
         openAt(pointAt(press.clientX ?? 0, press.clientY ?? 0));
-        menu.pendingFocus.current = "first";
+        // This is an instruction for the menu body after the opening commit.
+        // uf-lint-disable-next-line react-compiler/immutability
+        menu.pendingFocusRef.current = "first";
         menu.setOpen(true);
       }),
       onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
@@ -188,10 +194,13 @@ export component ContextMenuTrigger(children: React.Node, render?: RenderProp, .
         event.preventDefault();
         openHere();
       }),
+      // React calls callback refs during commit; focus restoration reads these later.
+      // uf-lint-disable-next-line react-compiler/refs
       ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
         triggerRef.current = element;
         // What focus goes back to when the menu closes. It is deliberately not
         // registered as the menu's *name*; see the module header.
+        // uf-lint-disable-next-line react-compiler/immutability
         menu.triggerRef.current = element;
       }),
     },

package/date-picker.js

@@ -253,18 +253,26 @@ const CalendarSettings: React.Context<CalendarSettingsValue> = createContext({
  */
 export component DatePickerInput(...rest: Rest) {
   const picker = useDatePicker("DatePicker.Input");
+  // `rest` filtering is render-time props work; ref objects are only passed through later.
+  // uf-lint-disable-next-line react-compiler/refs
   const passed = withoutComposed(rest, ["onBlur", "onChange", "onKeyDown", "ref"]);
 
   return (
     <input
       {...passed}
       aria-invalid={picker.invalid ? "true" : undefined}
+      // Input events commit typed text while focus stays on the field ref.
+      // uf-lint-disable-next-line react-compiler/refs
       onBlur={composeHandlers(rest.onBlur, (event) => {
         picker.commit((event.currentTarget: $FlowFixMe).value);
       })}
+      // Input events commit typed text while focus stays on the field ref.
+      // uf-lint-disable-next-line react-compiler/refs
       onChange={composeHandlers(rest.onChange, (event) => {
         picker.setDraft((event.currentTarget: $FlowFixMe).value);
       })}
+      // Key events commit typed text while focus stays on the field ref.
+      // uf-lint-disable-next-line react-compiler/refs
       onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
         if (event.key !== "Enter") {
           return;
@@ -274,7 +282,10 @@ export component DatePickerInput(...rest: Rest) {
         event.preventDefault();
         picker.commit((event.currentTarget: $FlowFixMe).value);
       })}
+      // React calls callback refs during commit; the calendar and picker read the field later.
+      // uf-lint-disable-next-line react-compiler/refs
       ref={composeRefs(rest.ref, (element) => {
+        // uf-lint-disable-next-line react-compiler/immutability
         picker.fieldRef.current = element;
       })}
       type="text"

package/dialog.js

@@ -182,6 +182,8 @@ export component DialogTrigger(children: React.Node, render?: RenderProp, ...res
     children,
     onClick: composeHandlers(rest.onClick, () => dialog.setOpen(true)),
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      // React calls callback refs during commit; focus restoration reads it later.
+      // uf-lint-disable-next-line react-compiler/immutability
       dialog.triggerRef.current = element;
     }),
   });
@@ -315,6 +317,8 @@ export component DialogBody(
     "aria-modal": "true",
     children,
     id: `${dialog.base}-body`,
+    // Key handling closes the mounted dialog and restores focus after events.
+    // uf-lint-disable-next-line react-compiler/refs
     onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -353,6 +357,8 @@ export component DialogBody(
         first.focus();
       }
     }),
+    // React calls callback refs during commit; focus effects and traps read it later.
+    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       bodyRef.current = element;
     }),

package/drawer.js

@@ -102,8 +102,8 @@ type DrawerState = {|
    * child's effect runs before its parent's, so `Drawer.Body` can ask about
    * both on the commit that mounted them, and nothing renders either number.
    */
-  readonly closes: { current: number },
-  readonly handles: { current: number },
+  readonly closeCountRef: { current: number },
+  readonly handleCountRef: { current: number },
 |};
 
 const DrawerContext: React.Context<DrawerState | null> = createContext(null);
@@ -146,15 +146,15 @@ export component DrawerRoot(
   const [isOpen, setOpen] = useControlled(open, defaultOpen, onOpenChange);
   const [snapIndex, setSnapIndex] = useControlled(snapPoint, defaultSnapPoint, onSnapPointChange);
   const bodyRef = useRef<HTMLElement | null>(null);
-  const closes = useRef(0);
-  const handles = useRef(0);
+  const closeCountRef = useRef(0);
+  const handleCountRef = useRef(0);
 
   const state = useMemo(
     () => ({
       bodyRef,
       close: () => setOpen(false),
-      closes,
-      handles,
+      closeCountRef,
+      handleCountRef,
       setSnapIndex,
       side,
       snapIndex,
@@ -243,10 +243,10 @@ export component DrawerBody(children: React.Node, render?: RenderProp, ...rest:
  */
 component RequireCloseForTheDrag() {
   const drawer = useDrawer("Drawer.Body");
-  const { closes, handles } = drawer;
+  const { closeCountRef, handleCountRef } = drawer;
 
   useEffect(() => {
-    if (handles.current > 0 && closes.current === 0) {
+    if (handleCountRef.current > 0 && closeCountRef.current === 0) {
       throw new Error(
         "Drawer.Body has a Drawer.Handle and no Drawer.Close: WCAG 2.2 SC 2.5.7 " +
           "requires anything achievable by dragging to be achievable without a " +
@@ -254,7 +254,7 @@ component RequireCloseForTheDrag() {
           "replacement for one.",
       );
     }
-  }, [closes, handles]);
+  }, [closeCountRef, handleCountRef]);
 
   return null;
 }
@@ -303,14 +303,19 @@ export component DrawerDescription(children: React.Node, render?: RenderProp, ..
  */
 export component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Close");
-  const closes = drawer.closes;
-
-  useEffect(() => {
-    closes.current += 1;
-    return () => {
-      closes.current -= 1;
-    };
-  }, [closes]);
+  const closeCountRef = drawer.closeCountRef;
+
+  useEffect(
+    () => {
+      closeCountRef.current += 1;
+      return () => {
+        closeCountRef.current -= 1;
+      };
+    },
+    // The context ref object is stable; the effect registers this part's mount.
+    // uf-lint-disable-next-line react-compiler/refs
+    [closeCountRef],
+  );
 
   return (
     <SheetClose {...forwarded(rest)} render={render}>
@@ -337,7 +342,7 @@ export component DrawerHandle(
   ...rest: Rest
 ) {
   const drawer = useDrawer("Drawer.Handle");
-  const { bodyRef, close, handles, setSnapIndex, side, snapIndex, snapPoints } = drawer;
+  const { bodyRef, close, handleCountRef, setSnapIndex, side, snapIndex, snapPoints } = drawer;
   const passed = withoutComposed(rest, [
     "onKeyDown",
     "onPointerDown",
@@ -354,12 +359,17 @@ export component DrawerHandle(
   // So `Drawer.Body` knows there is a drag to provide an alternative to. A
   // drawer with no handle has no gesture, and requiring a close button of one
   // would be this component inventing a rule WCAG did not write.
-  useEffect(() => {
-    handles.current += 1;
-    return () => {
-      handles.current -= 1;
-    };
-  }, [handles]);
+  useEffect(
+    () => {
+      handleCountRef.current += 1;
+      return () => {
+        handleCountRef.current -= 1;
+      };
+    },
+    // The context ref object is stable; the effect registers this part's mount.
+    // uf-lint-disable-next-line react-compiler/refs
+    [handleCountRef],
+  );
 
   /** Move by one snap point, or close when there is no smaller one. */
   const step = (towardsOpen: boolean) => {
@@ -420,6 +430,8 @@ export component DrawerHandle(
         step(false);
       }
     }),
+    // Pointer handlers keep drag coordinates in refs between events.
+    // uf-lint-disable-next-line react-compiler/refs
     onPointerDown: composeHandlers(rest.onPointerDown, (event: $FlowFixMe) => {
       dragFrom.current = vertical ? event.clientY : event.clientX;
       setDragging(true);
@@ -427,6 +439,7 @@ export component DrawerHandle(
       // immediately: the handle moves with the drawer.
       event.currentTarget?.setPointerCapture?.(event.pointerId);
     }),
+    // uf-lint-disable-next-line react-compiler/refs
     onPointerMove: composeHandlers(rest.onPointerMove, (event: $FlowFixMe) => {
       const body = bodyRef.current;
       if (dragFrom.current == null || body == null) {
@@ -436,6 +449,7 @@ export component DrawerHandle(
       // otherwise lift it off the edge it is attached to.
       body.style.setProperty("--uf-drawer-drag", `${String(Math.max(0, travelled(event)))}px`);
     }),
+    // uf-lint-disable-next-line react-compiler/refs
     onPointerUp: composeHandlers(rest.onPointerUp, (event: $FlowFixMe) => {
       const body = bodyRef.current;
       const moved = travelled(event);

package/hover-card.js

@@ -68,7 +68,7 @@ type HoverCardState = {|
   readonly openDelay: number,
   readonly closeDelay: number,
   /** Whether `Escape` has dismissed it; see `tooltip.js`, which shares the rule. */
-  readonly dismissed: { current: boolean },
+  readonly dismissedRef: { current: boolean },
 |};
 
 const HoverCardContext: React.Context<HoverCardState | null> = createContext(null);
@@ -99,14 +99,14 @@ export component HoverCardRoot(
   const base = useId();
   const [isOpen, setOpen] = useControlled(open, defaultOpen, onOpenChange);
   const triggerRef = useRef<HTMLElement | null>(null);
-  const dismissed = useRef(false);
+  const dismissedRef = useRef(false);
   const intent = useHoverIntent(setOpen);
 
   const state = useMemo(
     () => ({
       base,
       closeDelay,
-      dismissed,
+      dismissedRef,
       intent,
       open: isOpen,
       openDelay,
@@ -129,36 +129,36 @@ export component HoverCardRoot(
  */
 export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const card = useHoverCard("HoverCard.Trigger");
-  const { closeDelay, dismissed, intent, openDelay, triggerRef } = card;
+  const { closeDelay, dismissedRef, intent, openDelay, triggerRef } = card;
   useFocusableTrigger(triggerRef, "HoverCard.Trigger");
 
   // A press focuses the trigger, and a card opening under the reader's own
   // click would cover what they just went to. See `tooltip.js`.
-  const pressed = useRef(false);
+  const pressedRef = useRef(false);
 
   useEventListener(triggerRef, "pointerenter", (event: $FlowFixMe) => {
-    if (event.pointerType === "touch" || dismissed.current) {
+    if (event.pointerType === "touch" || dismissedRef.current) {
       return;
     }
     intent.openAfter(openDelay);
   });
   useEventListener(triggerRef, "pointerleave", () => {
-    dismissed.current = false;
+    dismissedRef.current = false;
     intent.closeAfter(closeDelay);
   });
   useEventListener(triggerRef, "pointerdown", () => {
-    pressed.current = true;
+    pressedRef.current = true;
     intent.cancel();
   });
   useEventListener(triggerRef, "focusin", () => {
-    if (pressed.current) {
-      pressed.current = false;
+    if (pressedRef.current) {
+      pressedRef.current = false;
       return;
     }
     // The focus a dismissed card hands *back* to this trigger must not reopen
     // it, which is the whole reason the flag exists: without it `Escape` closes
     // the card, focus returns here, and the card comes straight back.
-    if (dismissed.current) {
+    if (dismissedRef.current) {
       return;
     }
     // A reader who tabbed here has said what they want; only the pointer is
@@ -166,8 +166,8 @@ export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ..
     intent.openAfter(0);
   });
   useEventListener(triggerRef, "focusout", () => {
-    pressed.current = false;
-    dismissed.current = false;
+    pressedRef.current = false;
+    dismissedRef.current = false;
     // `closeAfter` rather than a close, and this is where the delay earns its
     // keep a second time: `Tab` from the trigger *into* the card is a leave
     // followed immediately by an arrival, and the card's own `focusin` calls
@@ -179,6 +179,8 @@ export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ..
 
   // Annotated because this one is not written inside a `ref={...}`, and there
   // is nothing else here for Flow to infer the element's type from.
+  // React calls callback refs during commit; pointer and focus handlers read it later.
+  // uf-lint-disable-next-line react-compiler/refs
   const attach = composeRefs(rest.ref, (element: HTMLElement | null) => {
     triggerRef.current = element;
   });
@@ -212,16 +214,16 @@ export component HoverCardBody(
   ...rest: Rest
 ) {
   const card = useHoverCard("HoverCard.Body");
-  const { closeDelay, intent, open, triggerRef } = card;
+  const { closeDelay, dismissedRef, intent, open, triggerRef } = card;
   const bodyRef = useRef<HTMLElement | null>(null);
   // Whether the reader is *in* the card, as opposed to over it. It decides one
   // thing and it cannot be asked afterwards: a card closed while it held focus
   // has to hand focus back, and by the time the effect below is cleaned up the
   // element is gone from the document and `activeElement` has already fallen to
   // `<body>` — so the answer is kept while it is still true.
-  const held = useRef(false);
+  const heldRef = useRef(false);
   const close = useStableCallback(() => {
-    card.dismissed.current = true;
+    dismissedRef.current = true;
     intent.cancel();
     card.setOpen(false);
   });
@@ -250,11 +252,11 @@ export component HoverCardBody(
     const stay = () => intent.cancel();
     const go = () => intent.closeAfter(closeDelay);
     const arrived = () => {
-      held.current = true;
+      heldRef.current = true;
       stay();
     };
     const gone = () => {
-      held.current = false;
+      heldRef.current = false;
       go();
     };
     body.addEventListener("pointerenter", stay);
@@ -289,8 +291,8 @@ export component HoverCardBody(
     if (open) {
       return;
     }
-    if (held.current) {
-      held.current = false;
+    if (heldRef.current) {
+      heldRef.current = false;
       triggerRef.current?.focus?.();
     }
   }, [open, triggerRef]);
@@ -299,8 +301,8 @@ export component HoverCardBody(
   // the reader is inside it leaves focus on a node that is gone.
   useEffect(
     () => () => {
-      if (held.current) {
-        held.current = false;
+      if (heldRef.current) {
+        heldRef.current = false;
         triggerRef.current?.focus?.();
       }
     },
@@ -317,6 +319,8 @@ export component HoverCardBody(
     "data-side": anchored.side,
     "data-state": "open",
     id: `${card.base}-body`,
+    // React calls callback refs during commit; placement effects read it later.
+    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       bodyRef.current = element;
     }),

package/interactions.js

@@ -1776,6 +1776,8 @@ hook useDescription(text: string | void): string | void {
     const host: $FlowFixMe = globalThis;
     const body: HTMLElement | null = host.document?.body ?? null;
     if (text == null || text === "" || body == null) {
+      // The id is state because it must render only after the shared DOM node exists.
+      // uf-lint-disable-next-line react-compiler/set-state-in-effect
       setId(undefined);
       return;
     }
@@ -1795,6 +1797,8 @@ hook useDescription(text: string | void): string | void {
     }
     const entry: SharedDescription = shared;
     entry.users += 1;
+    // The id is state because it must render only after the shared DOM node exists.
+    // uf-lint-disable-next-line react-compiler/set-state-in-effect
     setId(entry.node.id);
     return () => {
       entry.users -= 1;