@uniflowed/ui 0.1.0 → 0.3.0

package/color-picker.js

@@ -26,7 +26,7 @@ hook useColor(): ColorState {
   if (color == null) throw new Error("ColorPicker parts must be inside ColorPicker.Root");
   return color;
 }
-export component ColorPickerRoot(
+component ColorPickerRoot(
   children: React.Node,
   value?: string,
   defaultValue?: string = "#000000",
@@ -53,7 +53,7 @@ export component ColorPickerRoot(
     </ColorContext.Provider>
   );
 }
-export component ColorPickerInput(render?: RenderProp, ...rest: Rest) {
+component ColorPickerInput(render?: RenderProp, ...rest: Rest) {
   const color = useColor();
   const props = withProps(rest, {
     type: "color",
@@ -65,7 +65,7 @@ export component ColorPickerInput(render?: RenderProp, ...rest: Rest) {
   });
   return render != null ? render(props) : <input {...props} />;
 }
-export component ColorPickerField(render?: RenderProp, ...rest: Rest) {
+component ColorPickerField(render?: RenderProp, ...rest: Rest) {
   const color = useColor();
   const [draft, setDraft] = useState<string | null>(null);
   const text = draft ?? color.value;
@@ -94,7 +94,7 @@ export component ColorPickerField(render?: RenderProp, ...rest: Rest) {
   });
   return render != null ? render(props) : <input {...props} />;
 }
-export component ColorPickerChannel(
+component ColorPickerChannel(
   channel: "red" | "green" | "blue" | "alpha",
   render?: RenderProp,
   ...rest: Rest
@@ -161,7 +161,7 @@ export component ColorPickerChannel(
   });
   return render != null ? render(props) : <input {...props} />;
 }
-export component ColorPickerSwatch(render?: RenderProp, ...rest: Rest) {
+component ColorPickerSwatch(render?: RenderProp, ...rest: Rest) {
   const color = useColor();
   const props = withProps(rest, {
     "aria-hidden": "true",
@@ -170,3 +170,20 @@ export component ColorPickerSwatch(render?: RenderProp, ...rest: Rest) {
   });
   return render != null ? render(props) : <span {...props} />;
 }
+
+/**
+ * The parts, under the names the `ColorPicker` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as ColorPicker from "./color-picker.js"` —
+ * so a caller writes `<ColorPicker.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ColorPickerRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  ColorPickerRoot as Root,
+  ColorPickerInput as Input,
+  ColorPickerField as Field,
+  ColorPickerChannel as Channel,
+  ColorPickerSwatch as Swatch,
+};

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,
@@ -471,6 +471,11 @@ export component DialogClose(children: React.Node, render?: RenderProp, ...rest:
  * hiding body's children would hide nothing new and the outer dialog's own
  * content would stay readable behind the inner one.
  *
+ * The one sibling left alone is the live announcer `visually-hidden.js`
+ * creates, which lives in `<body>` and would otherwise go silent for as long as
+ * any dialog is open. React Aria's `ariaHideOutside` keeps its announcer for the
+ * same reason.
+ *
  * Both attributes, because they address different audiences. `aria-hidden`
  * removes the subtree from the accessibility tree; `inert` also stops clicks
  * and takes it out of the tab order, which is the browser's own enforcement of
@@ -488,12 +493,14 @@ function concealOutside(element: HTMLElement): () => void {
       break;
     }
     for (const sibling of Array.from(parent.children)) {
-      if (sibling === node) {
+      // `announce()`'s regions stay readable: a message about what the dialog
+      // just did ("Saved", "3 results") is exactly what a modal needs to say.
+      if (sibling === node || sibling.hasAttribute("data-uf-live-announcer")) {
         continue;
       }
       restore.push({
         element: sibling,
-        hidden: sibling.getAttribute("aria-hidden"),
+        hidden: sibling.getAttribute("aria-hidden") ?? null,
         inert: sibling.hasAttribute("inert"),
       });
       sibling.setAttribute("aria-hidden", "true");
@@ -518,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,
+};