@uniflowed/ui 0.2.0 → 0.3.0

package/combobox.js

@@ -210,7 +210,7 @@ const ComboboxGroupContext: React.Context<ComboboxGroupState | null> = createCon
  * `internal/form-value.js` says why it is an `<input>` and why
  * `@uniflowed/form` does not need it.
  */
-export component ComboboxRoot(
+component ComboboxRoot(
   children: React.Node,
   value?: string | null,
   defaultValue?: string | null = null,
@@ -294,7 +294,7 @@ export component ComboboxRoot(
  * because the list names it, and naming a label that is not rendered is worse
  * than leaving the list unnamed.
  */
-export component ComboboxLabel(children: React.Node, ...rest: Rest) {
+component ComboboxLabel(children: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Label");
   const register = combobox.registerLabel;
   useEffect(() => {
@@ -310,7 +310,7 @@ export component ComboboxLabel(children: React.Node, ...rest: Rest) {
 }
 
 /** The text field, and every key the pattern defines. */
-export component ComboboxInput(...rest: Rest) {
+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
@@ -442,7 +442,7 @@ export component ComboboxInput(...rest: Rest) {
  * the count the live region announces, and the invariant that
  * `aria-activedescendant` never names an option that has left the list.
  */
-export component ComboboxList(
+component ComboboxList(
   children: renders* (ComboboxOption | ComboboxGroup),
   align?: Align = "start",
   alignOffset?: number = 0,
@@ -463,19 +463,13 @@ 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,
@@ -486,8 +480,6 @@ 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) {
@@ -505,7 +497,6 @@ export component ComboboxList(
 
     const wanted = pendingActiveRef.current;
     if (wanted != null) {
-      // uf-lint-disable-next-line react-compiler/immutability
       pendingActiveRef.current = null;
       setActiveId(moveTo(items, -1, wanted, false)?.id ?? null);
       return;
@@ -562,7 +553,7 @@ export component ComboboxList(
  * finds the active option in the document rather than in a registry that could
  * disagree with it.
  */
-export component ComboboxOption(
+component ComboboxOption(
   value: string,
   children: React.Node,
   label?: string,
@@ -629,10 +620,7 @@ export component ComboboxOption(
  * and nothing else. `Select.Group` says the same since ubugeeei-prod/uf#562 —
  * it is the same listbox, and it took a second breaking change to get there.
  */
-export component ComboboxGroup(
-  children: renders* (ComboboxOption | ComboboxGroupLabel),
-  ...rest: Rest
-) {
+component ComboboxGroup(children: renders* (ComboboxOption | ComboboxGroupLabel), ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 
@@ -657,7 +645,7 @@ export component ComboboxGroup(
  * This is not `Combobox.Label`. That one names the field; this one names a
  * group of options, and a combobox with groups has both.
  */
-export component ComboboxGroupLabel(children: React.Node, ...rest: Rest) {
+component ComboboxGroupLabel(children: React.Node, ...rest: Rest) {
   const group = useContext(ComboboxGroupContext);
   const register = group?.registerLabel;
 
@@ -683,7 +671,7 @@ export component ComboboxGroupLabel(children: React.Node, ...rest: Rest) {
  * contain options: an "no matches" row inside one is announced as an option a
  * reader can choose, and choosing it does nothing.
  */
-export component ComboboxEmpty(children: React.Node, ...rest: Rest) {
+component ComboboxEmpty(children: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Empty");
   if (!combobox.open || combobox.count > 0) {
     return null;
@@ -702,7 +690,7 @@ export component ComboboxEmpty(children: React.Node, ...rest: Rest) {
  * `children` overrides the wording — the default is English and a real
  * application has a translation table.
  */
-export component ComboboxStatus(children?: React.Node, ...rest: Rest) {
+component ComboboxStatus(children?: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Status");
   const message = children ?? defaultAnnouncement(combobox.open, combobox.count);
 
@@ -732,3 +720,24 @@ function labelOf(element: HTMLElement): string {
 function textOf(element: HTMLElement): string {
   return (element.textContent ?? "").replace(/\s+/g, " ").trim();
 }
+
+/**
+ * The parts, under the names the `Combobox` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Combobox from "./combobox.js"` —
+ * so a caller writes `<Combobox.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ComboboxRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  ComboboxRoot as Root,
+  ComboboxLabel as Label,
+  ComboboxInput as Input,
+  ComboboxList as List,
+  ComboboxOption as Option,
+  ComboboxGroup as Group,
+  ComboboxGroupLabel as GroupLabel,
+  ComboboxEmpty as Empty,
+  ComboboxStatus as Status,
+};

package/context-menu.js

@@ -91,7 +91,7 @@ function pointAt(x: number, y: number): Rect {
  * Renders no element of its own, for the reason `Menu.Root` gives: the trigger
  * and the body are siblings in whatever layout the caller wrote.
  */
-export component ContextMenuRoot(
+component ContextMenuRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -131,7 +131,7 @@ hook usePoint(part: string): PointState {
  * region of the page. The module header says why it is in the tab order and
  * when a caller should take it out again.
  */
-export component ContextMenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component ContextMenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const menu = useMenu("ContextMenu.Trigger");
   const { openAt } = usePoint("ContextMenu.Trigger");
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -213,3 +213,32 @@ export component ContextMenuTrigger(children: React.Node, render?: RenderProp, .
 }
 
 export type { MenuSelect } from "./menu.js";
+
+/**
+ * The parts, under the names the `ContextMenu` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as ContextMenu from "./context-menu.js"` —
+ * so a caller writes `<ContextMenu.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ContextMenuRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { ContextMenuRoot as Root, ContextMenuTrigger as Trigger };
+
+/**
+ * The parts `ContextMenu` shares with `Menu`, re-exported so the `ContextMenu`
+ * namespace is complete on its own: `<ContextMenu.Body>` is `Menu`'s part,
+ * not a copy of it.
+ */
+export {
+  Body,
+  Item,
+  CheckboxItem,
+  RadioGroup,
+  RadioItem,
+  Separator,
+  Group,
+  Label,
+  Sub,
+  SubTrigger,
+} from "./menu.js";

package/date-picker.js

@@ -51,17 +51,17 @@ import type { PlainDate } from "@uniflowed/core/temporal";
 import { Temporal } from "@uniflowed/core/temporal";
 
 import type { DateValue } from "./calendar.js";
-import { CalendarRoot } from "./calendar.js";
+import { Root as CalendarRoot } from "./calendar.js";
 import { useControlled } from "./internal/controlled-state.js";
 import type { Align, LogicalSide } from "./internal/anchor.js";
-import type { Rest } from "./internal/merge-props.js";
+import type { PartEvent, Rest } from "./internal/merge-props.js";
 import {
   composeHandlers,
   composeRefs,
   forwarded,
   withoutComposed,
 } from "./internal/merge-props.js";
-import { PopoverBody, PopoverRoot, PopoverTrigger } from "./popover.js";
+import { Body as PopoverBody, Root as PopoverRoot, Trigger as PopoverTrigger } from "./popover.js";
 
 type DatePickerState = {|
   /** The text in the field, which is the draft while one is being typed. */
@@ -118,7 +118,7 @@ function isoParse(text: string): PlainDate | null {
  * siblings in whatever layout the caller wrote, and a wrapper would put a
  * `<div>` between them that they then have to style around.
  */
-export component DatePickerRoot(
+component DatePickerRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   defaultValue?: DateValue | null = null,
@@ -251,7 +251,17 @@ const CalendarSettings: React.Context<CalendarSettingsValue> = createContext({
  * does not open the popover, the button beside it does, and telling a reader the
  * field expands something would be a promise the field does not keep.
  */
-export component DatePickerInput(...rest: Rest) {
+/**
+ * The text in the field an event came from.
+ *
+ * `currentTarget` is the `input` this part renders, so it is always an
+ * `HTMLInputElement`. Asked rather than cast, so that the check is the type.
+ */
+function typedText(target: mixed): string {
+  return target instanceof HTMLInputElement ? target.value : "";
+}
+
+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
@@ -264,12 +274,12 @@ export component DatePickerInput(...rest: Rest) {
       // 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);
+        picker.commit(typedText(event.currentTarget));
       })}
       // 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);
+        picker.setDraft(typedText(event.currentTarget));
       })}
       // Key events commit typed text while focus stays on the field ref.
       // uf-lint-disable-next-line react-compiler/refs
@@ -280,7 +290,7 @@ export component DatePickerInput(...rest: Rest) {
         // Claimed, so a date picker inside a form is not a control where
         // pressing Enter to confirm what you typed submits the page instead.
         event.preventDefault();
-        picker.commit((event.currentTarget: $FlowFixMe).value);
+        picker.commit(typedText(event.currentTarget));
       })}
       // React calls callback refs during commit; the calendar and picker read the field later.
       // uf-lint-disable-next-line react-compiler/refs
@@ -295,7 +305,7 @@ export component DatePickerInput(...rest: Rest) {
 }
 
 /** The button that opens the calendar. */
-export component DatePickerTrigger(children: React.Node, ...rest: Rest) {
+component DatePickerTrigger(children: React.Node, ...rest: Rest) {
   // `forwarded`, because this part renders another part rather than an
   // intrinsic; `internal/merge-props.js` says what that costs and why.
   return <PopoverTrigger {...forwarded(rest)}>{children}</PopoverTrigger>;
@@ -308,7 +318,7 @@ export component DatePickerTrigger(children: React.Node, ...rest: Rest) {
  * `Calendar.Month` — because where those sit is a design decision and there is
  * no arrangement of them this module could impose that would suit every one.
  */
-export component DatePickerCalendar(
+component DatePickerCalendar(
   children: React.Node,
   align?: Align = "start",
   side?: LogicalSide = "bottom",
@@ -327,7 +337,7 @@ export component DatePickerCalendar(
       // The date, not the first button in the popover. The APG's date picker
       // dialog puts focus on the grid for the same reason.
       initialFocus={dayRef}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
+      onKeyDown={composeHandlers(rest.onKeyDown, (event: PartEvent) => {
         if (event.key !== "Escape") {
           return;
         }
@@ -355,3 +365,19 @@ export component DatePickerCalendar(
     </PopoverBody>
   );
 }
+
+/**
+ * The parts, under the names the `DatePicker` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as DatePicker from "./date-picker.js"` —
+ * so a caller writes `<DatePicker.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `DatePickerRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  DatePickerRoot as Root,
+  DatePickerInput as Input,
+  DatePickerTrigger as Trigger,
+  DatePickerCalendar as Calendar,
+};

package/date-range-picker.js

@@ -8,10 +8,10 @@ import type { Rest } from "./internal/merge-props.js";
 import { forwarded } from "./internal/merge-props.js";
 import type { DateRange } from "./internal/date-range.js";
 import { validateRange, unavailableInRange } from "./internal/date-range.js";
-import { CalendarMonth } from "./calendar.js";
-import { RangeCalendarRoot } from "./range-calendar.js";
+import { Month as CalendarMonth } from "./calendar.js";
+import { Root as RangeCalendarRoot } from "./range-calendar.js";
 import { DateField } from "./date-field.js";
-import { PopoverRoot, PopoverBody, PopoverTrigger } from "./popover.js";
+import { Root as PopoverRoot, Body as PopoverBody, Trigger as PopoverTrigger } from "./popover.js";
 
 type Picker = {
   range: DateRange | null,
@@ -27,7 +27,7 @@ hook usePicker(): Picker {
   if (picker == null) throw new Error("DateRangePicker parts must be inside DateRangePicker.Root");
   return picker;
 }
-export component DateRangePickerRoot(
+component DateRangePickerRoot(
   children: React.Node,
   value?: DateRange | null,
   defaultValue?: DateRange | null = null,
@@ -58,7 +58,7 @@ export component DateRangePickerRoot(
     </PickerContext.Provider>
   );
 }
-export component DateRangePickerStartField(...rest: Rest) {
+component DateRangePickerStartField(...rest: Rest) {
   const picker = usePicker();
   return (
     <DateField
@@ -76,7 +76,7 @@ export component DateRangePickerStartField(...rest: Rest) {
     />
   );
 }
-export component DateRangePickerEndField(...rest: Rest) {
+component DateRangePickerEndField(...rest: Rest) {
   const picker = usePicker();
   return (
     <DateField
@@ -94,10 +94,10 @@ export component DateRangePickerEndField(...rest: Rest) {
     />
   );
 }
-export component DateRangePickerTrigger(children: React.Node, ...rest: Rest) {
+component DateRangePickerTrigger(children: React.Node, ...rest: Rest) {
   return <PopoverTrigger {...forwarded(rest)}>{children}</PopoverTrigger>;
 }
-export component DateRangePickerCalendar(children?: React.Node = <CalendarMonth />, ...rest: Rest) {
+component DateRangePickerCalendar(children?: React.Node = <CalendarMonth />, ...rest: Rest) {
   const picker = usePicker();
   const dayRef = useRef<HTMLElement | null>(null);
   return (
@@ -118,3 +118,20 @@ export component DateRangePickerCalendar(children?: React.Node = <CalendarMonth
     </PopoverBody>
   );
 }
+
+/**
+ * The parts, under the names the `DateRangePicker` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as DateRangePicker from "./date-range-picker.js"` —
+ * so a caller writes `<DateRangePicker.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `DateRangePickerRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  DateRangePickerRoot as Root,
+  DateRangePickerStartField as StartField,
+  DateRangePickerEndField as EndField,
+  DateRangePickerTrigger as Trigger,
+  DateRangePickerCalendar as Calendar,
+};

package/dialog.js

@@ -133,7 +133,7 @@ hook useDialog(part: string): DialogState {
 }
 
 /** The dialog, open or closed. Uncontrolled unless `open` is given. */
-export component DialogRoot(
+component DialogRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -170,7 +170,7 @@ export component DialogRoot(
  * else, which is what keeps "focus comes back here" true of whatever the
  * caller rendered.
  */
-export component DialogTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Trigger");
   const props = withProps(withoutComposed(rest, ["onClick", "ref"]), {
     // Only while it is open. An `aria-controls` naming an element that is not
@@ -203,7 +203,7 @@ export component DialogTrigger(children: React.Node, render?: RenderProp, ...res
  * their own backdrop or omits one entirely must still get it. That lives on
  * `Dialog.Body`, which is the part that knows where "outside" is.
  */
-export component DialogOverlay(render?: RenderProp, ...rest: Rest) {
+component DialogOverlay(render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Overlay");
   if (!dialog.open) {
     return null;
@@ -222,7 +222,7 @@ export component DialogOverlay(render?: RenderProp, ...rest: Rest) {
  * which is the half of "modal" that CSS cannot express; `inert` on everything
  * outside is the half the browser enforces.
  */
-export component DialogBody(
+component DialogBody(
   children: React.Node,
   dismissOnOutsidePress?: boolean = true,
   initialFocus?: { current: HTMLElement | null },
@@ -381,7 +381,7 @@ export component DialogBody(
  * rendered — a conditional title that is absent used to leave the dialog
  * pointing at an id nothing had.
  */
-export component DialogTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Title");
   const register = dialog.registerTitle;
   useEffect(() => {
@@ -407,7 +407,7 @@ export component DialogTitle(children: React.Node, render?: RenderProp, ...rest:
  * the one moment the reader has to decide whether they care — so this is where
  * "this cannot be undone" belongs, not in body text further down.
  */
-export component DialogDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Description");
   const register = dialog.registerDescription;
   useEffect(() => {
@@ -431,7 +431,7 @@ export component DialogDescription(children: React.Node, render?: RenderProp, ..
  * styling layer has a name to attach to, and contributes no semantics because
  * it has none to contribute.
  */
-export component DialogHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(props);
@@ -440,7 +440,7 @@ export component DialogHeader(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** The bottom of the dialog, where the actions go. See `Dialog.Header`. */
-export component DialogFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(props);
@@ -449,7 +449,7 @@ export component DialogFooter(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** A button that closes the dialog. */
-export component DialogClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DialogClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const dialog = useDialog("Dialog.Close");
   const props = withProps(withoutComposed(rest, ["onClick"]), {
     children,
@@ -500,7 +500,7 @@ function concealOutside(element: HTMLElement): () => void {
       }
       restore.push({
         element: sibling,
-        hidden: sibling.getAttribute("aria-hidden"),
+        hidden: sibling.getAttribute("aria-hidden") ?? null,
         inert: sibling.hasAttribute("inert"),
       });
       sibling.setAttribute("aria-hidden", "true");
@@ -525,3 +525,24 @@ function concealOutside(element: HTMLElement): () => void {
     }
   };
 }
+
+/**
+ * The parts, under the names the `Dialog` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Dialog from "./dialog.js"` —
+ * so a caller writes `<Dialog.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `DialogRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  DialogRoot as Root,
+  DialogTrigger as Trigger,
+  DialogOverlay as Overlay,
+  DialogBody as Body,
+  DialogHeader as Header,
+  DialogFooter as Footer,
+  DialogTitle as Title,
+  DialogDescription as Description,
+  DialogClose as Close,
+};

package/drawer.js

@@ -62,15 +62,15 @@ import {
   withoutComposed,
 } from "./internal/merge-props.js";
 import {
-  SheetBody,
-  SheetClose,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetRoot,
-  SheetTitle,
-  SheetTrigger,
+  Body as SheetBody,
+  Close as SheetClose,
+  Description as SheetDescription,
+  Footer as SheetFooter,
+  Header as SheetHeader,
+  Overlay as SheetOverlay,
+  Root as SheetRoot,
+  Title as SheetTitle,
+  Trigger as SheetTrigger,
 } from "./sheet.js";
 import { useControlled } from "./internal/controlled-state.js";
 
@@ -132,7 +132,7 @@ hook useDrawer(part: string): DrawerState {
  * `onOpenChange` behave exactly as they do everywhere else in this package,
  * because `internal/controlled-state.js` is what answers here too.
  */
-export component DrawerRoot(
+component DrawerRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   defaultSnapPoint?: number = 0,
@@ -173,7 +173,7 @@ export component DrawerRoot(
 }
 
 /** What opens it, and what focus comes back to when it closes. */
-export component DrawerTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetTrigger {...forwarded(rest)} render={render}>
       {children}
@@ -182,7 +182,7 @@ export component DrawerTrigger(children: React.Node, render?: RenderProp, ...res
 }
 
 /** The backdrop. It carries the edge, the same as a sheet's. */
-export component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
+component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
   return <SheetOverlay {...forwarded(rest)} render={render} />;
 }
 
@@ -194,7 +194,7 @@ export component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
  * no drag to provide an alternative to — and a drawer with a handle and no
  * `Drawer.Close` has a gesture that is the only way out.
  */
-export component DrawerBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Body");
   const { bodyRef, snapIndex, snapPoints } = drawer;
   const reducedMotion = usePrefersReducedMotion();
@@ -260,7 +260,7 @@ component RequireCloseForTheDrag() {
 }
 
 /** The top of the drawer, where the handle usually goes. */
-export component DrawerHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetHeader {...forwarded(rest)} render={render}>
       {children}
@@ -269,7 +269,7 @@ export component DrawerHeader(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** The bottom of the drawer, where the actions go. */
-export component DrawerFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetFooter {...forwarded(rest)} render={render}>
       {children}
@@ -278,7 +278,7 @@ export component DrawerFooter(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** The drawer's accessible name. */
-export component DrawerTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetTitle {...forwarded(rest)} render={render}>
       {children}
@@ -287,7 +287,7 @@ export component DrawerTitle(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** What the drawer is for, announced after its name. */
-export component DrawerDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetDescription {...forwarded(rest)} render={render}>
       {children}
@@ -301,7 +301,7 @@ export component DrawerDescription(children: React.Node, render?: RenderProp, ..
  *
  * It registers itself so `Drawer.Body` can tell whether the gesture has one.
  */
-export component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Close");
   const closeCountRef = drawer.closeCountRef;
 
@@ -336,11 +336,7 @@ export component DrawerClose(children: React.Node, render?: RenderProp, ...rest:
  * `label` because a slider with no accessible name is announced as "slider",
  * which is the same failure `Resizable.Handle` names.
  */
-export component DrawerHandle(
-  label?: string = "Resize the drawer",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component DrawerHandle(label?: string = "Resize the drawer", render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Handle");
   const { bodyRef, close, handleCountRef, setSnapIndex, side, snapIndex, snapPoints } = drawer;
   const passed = withoutComposed(rest, [
@@ -359,17 +355,12 @@ 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(
-    () => {
-      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],
-  );
+  useEffect(() => {
+    handleCountRef.current += 1;
+    return () => {
+      handleCountRef.current -= 1;
+    };
+  }, [handleCountRef]);
 
   /** Move by one snap point, or close when there is no smaller one. */
   const step = (towardsOpen: boolean) => {
@@ -502,3 +493,25 @@ const CLOSES_WITH: { readonly [Edge]: string } = {
   right: "ArrowRight",
   top: "ArrowUp",
 };
+
+/**
+ * The parts, under the names the `Drawer` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Drawer from "./drawer.js"` —
+ * so a caller writes `<Drawer.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `DrawerRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  DrawerRoot as Root,
+  DrawerTrigger as Trigger,
+  DrawerOverlay as Overlay,
+  DrawerBody as Body,
+  DrawerHandle as Handle,
+  DrawerHeader as Header,
+  DrawerFooter as Footer,
+  DrawerTitle as Title,
+  DrawerDescription as Description,
+  DrawerClose as Close,
+};