@uniflowed/ui 0.1.0 → 0.3.0

package/internal/segmented-field.js

@@ -9,6 +9,7 @@ import { composeHandlers, withProps } from "./merge-props.js";
 import type { RenderProp, Rest } from "./merge-props.js";
 import { directionOf } from "./roving-focus.js";
 import { useLocale } from "../i18n-provider.js";
+import { visuallyHiddenStyle } from "./visually-hidden-style.js";
 
 type Segment = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod";
 type Fields = { [string]: string };
@@ -306,7 +307,7 @@ export component SegmentedField(time: boolean, options: DateFieldProps) {
     children: (
       <>
         {segments}
-        <span role="status" aria-live="polite">
+        <span role="status" aria-live="polite" style={visuallyHiddenStyle}>
           {announcement}
         </span>
       </>

package/internal/selection.js

@@ -0,0 +1,171 @@
+// @flow
+//
+// What a collection's selection becomes after one gesture, as pure functions.
+//
+// `ListBox`, `GridList`, `Tree` and `TagGroup` all ask the same four questions
+// — toggle this key, make it the only one, extend to it, take everything — and
+// the answers depend on three settings rather than on which collection is
+// asking. Keeping them here, apart from React, is what lets every rule be
+// tested without rendering and lets all four collections agree by construction.
+//
+// The rules are React Aria's selection manager (`@react-stately/selection`),
+// which is itself the WAI-ARIA APG's listbox and grid selection models made
+// precise:
+//
+//   * `mode` is what may be chosen: nothing, one key, or any number.
+//   * `behavior` is what a plain gesture does. `"toggle"` flips the key — the
+//     checkbox model, right for touch and for lists whose rows carry a
+//     checkbox. `"replace"` makes the key the whole selection — the file
+//     manager model, where Ctrl/Cmd adds one and Shift adds a range.
+//   * `disallowEmpty` refuses the gesture that would leave nothing selected,
+//     rather than accepting it and then reselecting.
+//
+// Every function returns the *same* set it was given when nothing changes, so a
+// caller can compare by identity and skip `onSelectionChange` for a gesture
+// that did nothing — a controlled parent is not told about a change that is
+// not one.
+//
+// # Why this is `internal/`
+//
+// A public selection manager would be a second way to build a collection, and
+// the point of this package is that there is one. The collections are the
+// public surface; `packages/ui/index.js` says why the internals stay internal.
+
+export type SelectionMode = "none" | "single" | "multiple";
+export type SelectionBehavior = "toggle" | "replace";
+
+/** The three settings every answer below depends on. */
+export type SelectionPolicy = {|
+  readonly mode: SelectionMode,
+  readonly behavior: SelectionBehavior,
+  readonly disallowEmpty: boolean,
+|};
+
+/**
+ * The keys a range covers, in collection order, inclusive at both ends.
+ *
+ * `order` is the selectable keys only — disabled rows are not in it — so a range
+ * dragged across a disabled row does not pick it up, which is what React Aria
+ * and every native list do. An end that is not in `order` (a key filtered out
+ * since it was chosen) contributes nothing rather than stretching the range to
+ * the start of the list.
+ */
+export function keyRange(
+  order: $ReadOnlyArray<string>,
+  from: string,
+  to: string,
+): $ReadOnlyArray<string> {
+  const start = order.indexOf(from);
+  const end = order.indexOf(to);
+  if (start < 0 || end < 0) return end < 0 ? [] : [to];
+  return order.slice(Math.min(start, end), Math.max(start, end) + 1);
+}
+
+/** Flip one key, unless that would empty a selection that must not be empty. */
+export function toggleKey(
+  policy: SelectionPolicy,
+  selected: $ReadOnlySet<string>,
+  key: string,
+): $ReadOnlySet<string> {
+  if (policy.mode === "none") return selected;
+  if (selected.has(key)) {
+    if (policy.disallowEmpty && selected.size === 1) return selected;
+    if (policy.mode === "single") return new Set();
+    const next = new Set(selected);
+    next.delete(key);
+    return next;
+  }
+  if (policy.mode === "single") return new Set([key]);
+  const next = new Set(selected);
+  next.add(key);
+  return next;
+}
+
+/** Make one key the whole selection. */
+export function replaceWith(
+  policy: SelectionPolicy,
+  selected: $ReadOnlySet<string>,
+  key: string,
+): $ReadOnlySet<string> {
+  if (policy.mode === "none") return selected;
+  if (selected.size === 1 && selected.has(key)) return selected;
+  return new Set([key]);
+}
+
+/**
+ * Extend from `anchor` to `key`, replacing the range the previous extension made.
+ *
+ * `lead` is where the last extension ended. Shift+Down, Shift+Down, Shift+Up
+ * must end with two rows selected rather than three, so the old range
+ * (`anchor`…`lead`) comes out before the new one (`anchor`…`key`) goes in —
+ * while anything selected outside both ranges, by an earlier Ctrl/Cmd+click,
+ * stays. With no anchor the extension starts at `key`.
+ */
+export function extendTo(
+  policy: SelectionPolicy,
+  selected: $ReadOnlySet<string>,
+  order: $ReadOnlyArray<string>,
+  anchor: string | null,
+  lead: string | null,
+  key: string,
+): $ReadOnlySet<string> {
+  if (policy.mode === "none") return selected;
+  if (policy.mode === "single") return replaceWith(policy, selected, key);
+  const from = anchor ?? key;
+  const next = new Set(selected);
+  if (lead != null) for (const each of keyRange(order, from, lead)) next.delete(each);
+  for (const each of keyRange(order, from, key)) next.add(each);
+  if (next.size === 0 && policy.disallowEmpty) return selected;
+  return sameKeys(next, selected) ? selected : next;
+}
+
+/** Every selectable key, when more than one may be chosen. */
+export function selectAll(
+  policy: SelectionPolicy,
+  selected: $ReadOnlySet<string>,
+  order: $ReadOnlyArray<string>,
+): $ReadOnlySet<string> {
+  if (policy.mode !== "multiple" || order.length === 0) return selected;
+  const next = new Set(selected);
+  for (const key of order) next.add(key);
+  return sameKeys(next, selected) ? selected : next;
+}
+
+/** Nothing, unless nothing is not allowed. */
+export function clearAll(
+  policy: SelectionPolicy,
+  selected: $ReadOnlySet<string>,
+): $ReadOnlySet<string> {
+  if (policy.mode === "none" || policy.disallowEmpty || selected.size === 0) return selected;
+  return new Set();
+}
+
+/**
+ * A selection as the array `onSelectionChange` reports: collection order first,
+ * then any key the collection is not showing, in the order it was chosen.
+ *
+ * Keys the collection is not showing are real — a child of a collapsed tree
+ * row, a row a filter hid — and dropping them because they are out of sight
+ * would deselect something the reader chose and cannot see go.
+ */
+export function orderedKeys(
+  selected: $ReadOnlySet<string>,
+  order: $ReadOnlyArray<string>,
+): $ReadOnlyArray<string> {
+  const result = [];
+  const placed = new Set<string>();
+  for (const key of order) {
+    if (selected.has(key)) {
+      result.push(key);
+      placed.add(key);
+    }
+  }
+  for (const key of selected) if (!placed.has(key)) result.push(key);
+  return result;
+}
+
+function sameKeys(a: $ReadOnlySet<string>, b: $ReadOnlySet<string>): boolean {
+  if (a.size !== b.size) return false;
+  for (const key of a) if (!b.has(key)) return false;
+  return true;
+}

package/internal/visually-hidden-style.js

@@ -0,0 +1,41 @@
+// @flow
+//
+// The one inline style for "hidden from sight, present for a screen reader".
+//
+// Its own module, with no `"use client"`, so a part that renders on the server
+// can import it without importing `visually-hidden.js` — a client module whose
+// every export is a client reference to a Server Component. Internal for the
+// reason `packages/ui/index.js` gives about every module here: the public
+// answer is `VisuallyHidden`.
+
+/**
+ * The style that hides an element from sight and from nothing else.
+ *
+ * Shared by `VisuallyHidden` and by the parts that keep a live region of their
+ * own beside what they render — the table's sort announcement, the
+ * collections', the calendar's and the range calendar's, and the segmented
+ * fields'. Frozen, because every one of them holds the same object.
+ */
+export const visuallyHiddenStyle: {|
+  readonly border: number,
+  readonly clip: string,
+  readonly clipPath: string,
+  readonly height: number,
+  readonly margin: number,
+  readonly overflow: string,
+  readonly padding: number,
+  readonly position: string,
+  readonly whiteSpace: string,
+  readonly width: number,
+|} = Object.freeze({
+  border: 0,
+  clip: "rect(0, 0, 0, 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1,
+});

package/menu.js

@@ -180,7 +180,7 @@ const MenuRadioContext: React.Context<MenuRadioState | null> = createContext(nul
  * whatever layout the caller wrote, and a wrapper would put a `<div>` between
  * them that the caller then has to style around.
  */
-export component MenuRoot(
+component MenuRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -200,7 +200,7 @@ export component MenuRoot(
  * parent — and that difference is what `ArrowLeft`, `Escape` and "choosing an
  * item closes everything" are all defined in terms of.
  */
-export component MenuSub(
+component MenuSub(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -218,7 +218,7 @@ export component MenuSub(
 }
 
 /** The button that opens the menu. */
-export component MenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const menu = useMenu("Menu.Trigger");
   useTriggerRegistration(menu);
   const props = withProps(withoutComposed(rest, ["onClick", "onKeyDown", "ref"]), {
@@ -269,7 +269,7 @@ export component MenuTrigger(children: React.Node, render?: RenderProp, ...rest:
  * and only the container can answer it. Items still get their own `Enter` and
  * `Space` from being buttons.
  */
-export component MenuBody(
+component MenuBody(
   children: renders* (
     | MenuItem
     | MenuCheckboxItem
@@ -323,7 +323,6 @@ export component MenuBody(
     // `open` is menu-tree metadata; no ref value is read during render.
     // uf-lint-disable-next-line react-compiler/refs
     open: menu.open,
-    // uf-lint-disable-next-line react-compiler/refs
     overlayRef: bodyRef,
     side: placement,
     sideOffset,
@@ -551,7 +550,7 @@ hook useMenuItem(
  * tree. That combination is what shadcn's copy step is usually reached for, and
  * what this package offers instead of it.
  */
-export component MenuItem(
+component MenuItem(
   children: React.Node,
   disabled?: boolean = false,
   closeOnSelect?: boolean = true,
@@ -593,7 +592,7 @@ export component MenuItem(
  * summarises other checkboxes — `checkbox.js` has it, and a menu item is a
  * command rather than a summary of a table's rows.
  */
-export component MenuCheckboxItem(
+component MenuCheckboxItem(
   children: React.Node,
   checked?: boolean,
   defaultChecked?: boolean = false,
@@ -640,7 +639,7 @@ export component MenuCheckboxItem(
  * a state the group starts in and never an event it reports, because no gesture
  * inside it unchooses an answer.
  */
-export component MenuRadioGroup(
+component MenuRadioGroup(
   children: renders* (MenuRadioItem | MenuLabel | MenuSeparator),
   defaultValue?: string | null = null,
   value?: string | null,
@@ -688,7 +687,7 @@ export component MenuRadioGroup(
  * what a sort order or a zoom level in a native menu does; `closeOnSelect` is
  * the way to say otherwise for a choice that ends the visit.
  */
-export component MenuRadioItem(
+component MenuRadioItem(
   children: React.Node,
   value: string,
   disabled?: boolean = false,
@@ -728,7 +727,7 @@ export component MenuRadioItem(
  * is why it reads the list context of the menu around it and the menu context
  * of the one below it.
  */
-export component MenuSubTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuSubTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const menu = useMenu("Menu.SubTrigger");
   const list = useContext(MenuListContext);
   const setActiveId = list?.setActiveId;
@@ -785,7 +784,7 @@ export component MenuSubTrigger(children: React.Node, render?: RenderProp, ...re
  * moving through the menu is told the group changed. It is not focusable and
  * the arrow keys pass straight over it.
  */
-export component MenuSeparator(render?: RenderProp, ...rest: Rest) {
+component MenuSeparator(render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-orientation": "horizontal", role: "separator" });
   if (render != null) {
     return render(props);
@@ -801,7 +800,7 @@ export component MenuSeparator(render?: RenderProp, ...rest: Rest) {
  * that is not in the document makes a screen reader announce *nothing*, which
  * is worse than an unnamed group.
  */
-export component MenuGroup(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuGroup(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 
@@ -826,7 +825,7 @@ export component MenuGroup(children: React.Node, render?: RenderProp, ...rest: R
  * as ordinary content would have a reader hear the heading once as the group's
  * name and again as a stray line of text between the items.
  */
-export component MenuLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const group = useContext(MenuGroupContext);
   const register = group?.registerLabel;
 
@@ -844,3 +843,27 @@ export component MenuLabel(children: React.Node, render?: RenderProp, ...rest: R
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Menu` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Menu from "./menu.js"` —
+ * so a caller writes `<Menu.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `MenuRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  MenuRoot as Root,
+  MenuTrigger as Trigger,
+  MenuBody as Body,
+  MenuItem as Item,
+  MenuCheckboxItem as CheckboxItem,
+  MenuRadioGroup as RadioGroup,
+  MenuRadioItem as RadioItem,
+  MenuSeparator as Separator,
+  MenuGroup as Group,
+  MenuLabel as Label,
+  MenuSub as Sub,
+  MenuSubTrigger as SubTrigger,
+};

package/menubar.js

@@ -128,7 +128,7 @@ hook useMenubar(part: string): MenubarState {
  * a page with an application menubar and a formatting toolbar has two, and
  * "menu bar" twice tells a reader nothing about which is which.
  */
-export component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp, ...rest: Rest) {
+component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp, ...rest: Rest) {
   const barRef = useRef<HTMLElement | null>(null);
   const [open, setOpenValue] = useState<string | null>(null);
   const [active, setActive] = useState<string | null>(null);
@@ -208,7 +208,7 @@ export component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp
  * Renders no element of its own, for the reason `Menu.Root` gives: a trigger and
  * its body are siblings in whatever layout the caller wrote.
  */
-export component MenubarMenu(children: React.Node, value: string) {
+component MenubarMenu(children: React.Node, value: string) {
   const bar = useMenubar("Menubar.Menu");
   const setOpen = bar.setOpen;
   const onOpenChange = useCallback(
@@ -237,7 +237,7 @@ export component MenubarMenu(children: React.Node, value: string) {
  * menubar — a reader is told "File, menu item, has popup, 1 of 3" — and it is
  * what makes the bar's arrow keys agree with what they were told is in it.
  */
-export component MenubarTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenubarTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const bar = useMenubar("Menubar.Trigger");
   const menu = useMenu("Menubar.Trigger");
   const value = useContext(MenubarMenuContext);
@@ -278,8 +278,6 @@ export component MenubarTrigger(children: React.Node, render?: RenderProp, ...re
       menu.pendingFocusRef.current = end;
       bar.setOpen(value);
     }),
-    // React calls callback refs during commit; menu focus restoration reads it later.
-    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       // uf-lint-disable-next-line react-compiler/immutability
       menu.triggerRef.current = element;
@@ -293,3 +291,32 @@ export component MenubarTrigger(children: React.Node, render?: RenderProp, ...re
   }
   return <button {...props} type="button" />;
 }
+
+/**
+ * The parts, under the names the `Menubar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Menubar from "./menubar.js"` —
+ * so a caller writes `<Menubar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `MenubarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { MenubarRoot as Root, MenubarMenu as Menu, MenubarTrigger as Trigger };
+
+/**
+ * The parts `Menubar` shares with `Menu`, re-exported so the `Menubar`
+ * namespace is complete on its own: `<Menubar.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/navigation-menu.js

@@ -106,7 +106,7 @@ hook useNavigationMenuItem(part: string): NavigationMenuItemState {
  * trigger writing itself into a ref — is a registry that has to be kept in step
  * with a document that already knows the answer.
  */
-export component NavigationMenuRoot(
+component NavigationMenuRoot(
   children: renders* NavigationMenuList,
   defaultValue?: string | null = null,
   value?: string | null,
@@ -145,13 +145,13 @@ export component NavigationMenuRoot(
 }
 
 /** The list of entries. A `<ul>`, because a reader is told how many there are. */
-export component NavigationMenuList(children: renders* NavigationMenuItem, ...rest: Rest) {
+component NavigationMenuList(children: renders* NavigationMenuItem, ...rest: Rest) {
   useNavigationMenu("NavigationMenu.List");
   return <ul {...rest}>{children}</ul>;
 }
 
 /** One entry: a link on its own, or a button and the group it opens. */
-export component NavigationMenuItem(value: string, children: React.Node, ...rest: Rest) {
+component NavigationMenuItem(value: string, children: React.Node, ...rest: Rest) {
   const menu = useNavigationMenu("NavigationMenu.Item");
   const base = useId();
   const [present, setPresent] = useState(false);
@@ -179,7 +179,7 @@ export component NavigationMenuItem(value: string, children: React.Node, ...rest
 }
 
 /** The button that opens an entry's group. Not a `menuitem`; see the header. */
-export component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
+component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Trigger");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -203,7 +203,7 @@ export component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
  * Named after its trigger, so a reader who lands in it by `Tab` is told which
  * entry they are inside rather than hearing an unnamed list of four links.
  */
-export component NavigationMenuBody(children: renders* NavigationMenuLink, ...rest: Rest) {
+component NavigationMenuBody(children: renders* NavigationMenuLink, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Body");
   // Registered only while the group is actually in the document, which for this
   // component means only while it is open — see the module header for why a
@@ -237,7 +237,7 @@ export component NavigationMenuBody(children: renders* NavigationMenuLink, ...re
  * behind them so that coming back — or a router that never unmounted the page —
  * does not leave it hanging open.
  */
-export component NavigationMenuLink(children: React.Node, ...rest: Rest) {
+component NavigationMenuLink(children: React.Node, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Link");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -249,3 +249,21 @@ export component NavigationMenuLink(children: React.Node, ...rest: Rest) {
     </li>
   );
 }
+
+/**
+ * The parts, under the names the `NavigationMenu` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as NavigationMenu from "./navigation-menu.js"` —
+ * so a caller writes `<NavigationMenu.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `NavigationMenuRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  NavigationMenuRoot as Root,
+  NavigationMenuList as List,
+  NavigationMenuItem as Item,
+  NavigationMenuTrigger as Trigger,
+  NavigationMenuBody as Body,
+  NavigationMenuLink as Link,
+};

package/number-field.js

@@ -82,7 +82,7 @@ hook useNumber(): NumberState {
   return state;
 }
 
-export component NumberFieldRoot(
+component NumberFieldRoot(
   children: React.Node,
   value?: number | null,
   defaultValue?: number | null = null,
@@ -189,7 +189,7 @@ export component NumberFieldRoot(
 }
 
 /** Field.Control may render this input to supply the label, description and error ids. */
-export component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
+component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     type: "text",
@@ -225,11 +225,7 @@ export component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
   return render != null ? render(props) : <input {...props} />;
 }
 
-export component NumberFieldIncrement(
-  children?: React.Node = "+",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component NumberFieldIncrement(children?: React.Node = "+", render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     children,
@@ -243,11 +239,7 @@ export component NumberFieldIncrement(
   });
   return render != null ? render(props) : <button {...props} />;
 }
-export component NumberFieldDecrement(
-  children?: React.Node = "−",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component NumberFieldDecrement(children?: React.Node = "−", render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     children,
@@ -261,3 +253,19 @@ export component NumberFieldDecrement(
   });
   return render != null ? render(props) : <button {...props} />;
 }
+
+/**
+ * The parts, under the names the `NumberField` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as NumberField from "./number-field.js"` —
+ * so a caller writes `<NumberField.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `NumberFieldRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  NumberFieldRoot as Root,
+  NumberFieldInput as Input,
+  NumberFieldIncrement as Increment,
+  NumberFieldDecrement as Decrement,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.1.0",
-    "@uniflowed/hooks": "0.1.0",
-    "@uniflowed/react": "0.1.0",
-    "@uniflowed/state": "0.1.0"
+    "@uniflowed/core": "0.3.0",
+    "@uniflowed/hooks": "0.3.0",
+    "@uniflowed/react": "0.3.0",
+    "@uniflowed/state": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=19"

package/pagination.js

@@ -56,7 +56,7 @@ import { withProps, withoutComposed } from "./internal/merge-props.js";
  * links are on screen, and a component that showed five links out of
  * twenty-five would otherwise announce "page 4 of 5".
  */
-export component PaginationRoot(
+component PaginationRoot(
   children: React.Node,
   label?: string = "Pagination",
   page?: number | null = null,
@@ -91,7 +91,7 @@ export component PaginationRoot(
  * A real list, so a reader is told how many there are before walking them and
  * can skip the whole thing in one keystroke.
  */
-export component PaginationContent(
+component PaginationContent(
   children: renders* (PaginationItem | PaginationPrevious | PaginationNext),
   render?: RenderProp,
   ...rest: Rest
@@ -109,7 +109,7 @@ export component PaginationContent(
  * The `<li>` is structural and takes nothing; everything a caller passes goes
  * on the `<a>`, which is what they style and what a reader activates.
  */
-export component PaginationItem(
+component PaginationItem(
   children: React.Node,
   current?: boolean = false,
   disabled?: boolean = false,
@@ -131,7 +131,7 @@ export component PaginationItem(
  * is not something a reader can act on. Pass `label` to translate it; the
  * glyph stays whatever the caller rendered.
  */
-export component PaginationPrevious(
+component PaginationPrevious(
   children?: React.Node,
   label?: string = "Previous page",
   disabled?: boolean = false,
@@ -146,7 +146,7 @@ export component PaginationPrevious(
 }
 
 /** The link to the page after this one. See `Pagination.Previous`. */
-export component PaginationNext(
+component PaginationNext(
   children?: React.Node,
   label?: string = "Next page",
   disabled?: boolean = false,
@@ -207,3 +207,20 @@ component PageLink(
 function defaultAnnouncement(page: number, pageCount: number): string {
   return `Page ${String(page)} of ${String(pageCount)}.`;
 }
+
+/**
+ * The parts, under the names the `Pagination` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Pagination from "./pagination.js"` —
+ * so a caller writes `<Pagination.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `PaginationRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  PaginationRoot as Root,
+  PaginationContent as Content,
+  PaginationItem as Item,
+  PaginationPrevious as Previous,
+  PaginationNext as Next,
+};