@uniflowed/ui 0.2.0 → 0.4.0

package/range-calendar.js

@@ -7,11 +7,11 @@ import { useControlled } from "./internal/controlled-state.js";
 import type { Rest } from "./internal/merge-props.js";
 import type { DateRange } from "./internal/date-range.js";
 import { validateRange, unavailableInRange } from "./internal/date-range.js";
-import { CalendarRoot, CalendarMonth } from "./calendar.js";
+import { Root as CalendarRoot, Month as CalendarMonth } from "./calendar.js";
 import { visuallyHiddenStyle } from "./internal/visually-hidden-style.js";
 export type { DateRange } from "./internal/date-range.js";
 
-export component RangeCalendarRoot(
+component RangeCalendarRoot(
   children?: React.Node = <CalendarMonth />,
   value?: DateRange | null,
   defaultValue?: DateRange | null = null,
@@ -77,3 +77,21 @@ export component RangeCalendarRoot(
     </div>
   );
 }
+
+/**
+ * The parts, under the names the `RangeCalendar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as RangeCalendar from "./range-calendar.js"` —
+ * so a caller writes `<RangeCalendar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `RangeCalendarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { RangeCalendarRoot as Root };
+
+/**
+ * The parts `RangeCalendar` shares with `Calendar`, re-exported so the `RangeCalendar`
+ * namespace is complete on its own: `<RangeCalendar.Month>` is `Calendar`'s part,
+ * not a copy of it.
+ */
+export { Month, Day, Previous, Next } from "./calendar.js";

package/resizable.js

@@ -165,7 +165,7 @@ hook useResizable(part: string): ResizableState {
  * `Enter` collapses the pane entirely; a group whose primary pane should never
  * disappear gives it a floor.
  */
-export component ResizablePanelGroup(
+component ResizablePanelGroup(
   children: React.Node,
   value?: number,
   defaultValue?: number = 50,
@@ -225,7 +225,7 @@ export component ResizablePanelGroup(
  * caller renders a pane conditionally, and a handle pointing at the wrong pane
  * is a handle that announces someone else's size.
  */
-export component ResizablePanel(children: React.Node, primary?: boolean = false, ...rest: Rest) {
+component ResizablePanel(children: React.Node, primary?: boolean = false, ...rest: Rest) {
   const group = useResizable("Resizable.Panel");
   const passed = withoutComposed(rest, ["style"]);
   const register = group.registerPrimary;
@@ -260,7 +260,7 @@ export component ResizablePanel(children: React.Node, primary?: boolean = false,
  * name is announced as "separator", which tells a reader there is a control
  * here and nothing about what it does.
  */
-export component ResizableHandle(label?: string = "Resize", ...rest: Rest) {
+component ResizableHandle(label?: string = "Resize", ...rest: Rest) {
   const group = useResizable("Resizable.Handle");
   const passed = withoutComposed(rest, [
     "onKeyDown",
@@ -451,3 +451,14 @@ function stepFor(
     _ => null,
   };
 }
+
+/**
+ * The parts, under the names the `Resizable` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Resizable from "./resizable.js"` —
+ * so a caller writes `<Resizable.PanelGroup>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ResizablePanelGroup`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `PanelGroup`s.
+ */
+export { ResizablePanelGroup as PanelGroup, ResizablePanel as Panel, ResizableHandle as Handle };

package/scroll-area.js

@@ -103,7 +103,7 @@ hook useScrollArea(part: string): ScrollAreaState {
  * lands them in it, and a scroll area that has to be scrolled to be read and is
  * announced as "region" has told them nothing.
  */
-export component ScrollAreaRoot(children: React.Node, label: string, ...rest: Rest) {
+component ScrollAreaRoot(children: React.Node, label: string, ...rest: Rest) {
   const base = useId();
   const viewportRef = useRef<HTMLElement | null>(null);
   const rememberedRef = useRef<Offset>({ x: 0, y: 0 });
@@ -143,7 +143,7 @@ export component ScrollAreaRoot(children: React.Node, label: string, ...rest: Re
  * scrolls a native overflow container scrolls this one because it is one, and
  * the component's contribution is the tab stop that lets those keys arrive.
  */
-export component ScrollAreaViewport(children: React.Node, ...rest: Rest) {
+component ScrollAreaViewport(children: React.Node, ...rest: Rest) {
   const area = useScrollArea("ScrollArea.Viewport");
   const { rememberedRef, report, viewportRef } = area;
   const passed = withoutComposed(rest, ["ref"]);
@@ -207,7 +207,7 @@ export component ScrollAreaViewport(children: React.Node, ...rest: Rest) {
  * measure nothing. `aria-hidden`, because the region it belongs to is already
  * the thing a reader operates.
  */
-export component ScrollAreaScrollbar(
+component ScrollAreaScrollbar(
   children?: React.Node,
   orientation?: Orientation = "vertical",
   ...rest: Rest
@@ -281,3 +281,14 @@ function fraction(part: number, whole: number): number {
   }
   return Math.min(1, Math.max(0, part / whole));
 }
+
+/**
+ * The parts, under the names the `ScrollArea` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as ScrollArea from "./scroll-area.js"` —
+ * so a caller writes `<ScrollArea.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ScrollAreaRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { ScrollAreaRoot as Root, ScrollAreaViewport as Viewport, ScrollAreaScrollbar as Scrollbar };

package/select.js

@@ -252,7 +252,7 @@ const SelectGroupContext: React.Context<SelectGroupState | null> = createContext
  * `onValueChange`, which is exactly the pair of props below. Neither package
  * imports the other and neither needs to.
  */
-export component SelectRoot(
+component SelectRoot(
   children: React.Node,
   value?: string | null,
   defaultValue?: string | null = null,
@@ -365,7 +365,7 @@ export component SelectRoot(
  * shadcn's single `SelectLabel`, which is the group's, has no name for the
  * field's.
  */
-export component SelectLabel(children: React.Node, ...rest: Rest) {
+component SelectLabel(children: React.Node, ...rest: Rest) {
   const select = useSelect("Select.Label");
   const register = select.registerFieldLabel;
   useEffect(() => {
@@ -392,7 +392,7 @@ export component SelectLabel(children: React.Node, ...rest: Rest) {
  * forms, and a `<button>` inside a `<form>` submits it by default. A select
  * that posted the form every time it was opened would be a memorable bug.
  */
-export component SelectTrigger(children: React.Node, ...rest: Rest) {
+component SelectTrigger(children: React.Node, ...rest: Rest) {
   const select = useSelect("Select.Trigger");
   const passed = withoutComposed(rest, ["onClick", "onKeyDown", "ref"]);
 
@@ -550,7 +550,6 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
           event.preventDefault();
           // The options are not in the document yet, so the keystroke travels
           // to the commit that renders them.
-          // uf-lint-disable-next-line react-compiler/immutability
           select.pendingLandingRef.current = { kind: "typed", key: event.key };
           select.setOpen(true);
           return;
@@ -603,7 +602,7 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
  *
  * Case 3 is a real edge and the way out of it is case 1.
  */
-export component SelectValue(children?: React.Node, placeholder?: React.Node, ...rest: Rest) {
+component SelectValue(children?: React.Node, placeholder?: React.Node, ...rest: Rest) {
   const select = useSelect("Select.Value");
   const chosen = select.value;
 
@@ -626,7 +625,7 @@ export component SelectValue(children?: React.Node, placeholder?: React.Node, ..
  * The effect below keeps the one invariant this pattern rests on:
  * `aria-activedescendant` never names an option that is not in the document.
  */
-export component SelectList(
+component SelectList(
   children: renders* (SelectOption | SelectGroup | SelectSeparator),
   align?: Align = "start",
   alignOffset?: number = 0,
@@ -666,8 +665,6 @@ export component SelectList(
   // render — a change to `children` that no dependency list can describe. Every
   // write is guarded by a comparison, so it 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) {
@@ -677,7 +674,6 @@ export component SelectList(
 
     const wanted = pendingLandingRef.current;
     if (wanted != null) {
-      // uf-lint-disable-next-line react-compiler/immutability
       pendingLandingRef.current = null;
       // An `if` rather than a `match` on `wanted.kind`, because matching on a
       // property does not refine the object that property came from: inside
@@ -751,7 +747,7 @@ export component SelectList(
  * finds the option in the document rather than in a registry that could
  * disagree with the page — the reason `internal/roving-focus.js` gives.
  */
-export component SelectOption(
+component SelectOption(
   value: string,
   children: React.Node,
   label?: string,
@@ -840,7 +836,7 @@ export component SelectOption(
  * fix is to hand the options to the group directly; a wrapper had no effect on
  * what this renders, because the group's element is the one below.
  */
-export component SelectGroup(children: renders* (SelectOption | SelectGroupLabel), ...rest: Rest) {
+component SelectGroup(children: renders* (SelectOption | SelectGroupLabel), ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 
@@ -862,7 +858,7 @@ export component SelectGroup(children: renders* (SelectOption | SelectGroupLabel
  * ordinary content a reader would hear the heading once as the group's name and
  * again as a stray line of text among the options.
  */
-export component SelectGroupLabel(children: React.Node, ...rest: Rest) {
+component SelectGroupLabel(children: React.Node, ...rest: Rest) {
   const group = useContext(SelectGroupContext);
   const register = group?.registerLabel;
 
@@ -891,7 +887,7 @@ export component SelectGroupLabel(children: React.Node, ...rest: Rest) {
  * the software rather than the specification. The rule between two groups is
  * decoration, so it says so and stays out of the tree.
  */
-export component SelectSeparator(...rest: Rest) {
+component SelectSeparator(...rest: Rest) {
   return <div {...rest} aria-hidden="true" />;
 }
 
@@ -899,3 +895,24 @@ export component SelectSeparator(...rest: Rest) {
 function textOf(element: HTMLElement | null): string {
   return (element?.textContent ?? "").replace(/\s+/g, " ").trim();
 }
+
+/**
+ * The parts, under the names the `Select` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Select from "./select.js"` —
+ * so a caller writes `<Select.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `SelectRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  SelectRoot as Root,
+  SelectLabel as Label,
+  SelectTrigger as Trigger,
+  SelectValue as Value,
+  SelectList as List,
+  SelectOption as Option,
+  SelectGroup as Group,
+  SelectGroupLabel as GroupLabel,
+  SelectSeparator as Separator,
+};

package/sheet.js

@@ -46,15 +46,15 @@ import { createContext, useContext, useMemo } from "@uniflowed/react";
 import type { RenderProp, Rest } from "./internal/merge-props.js";
 import { forwarded } from "./internal/merge-props.js";
 import {
-  DialogBody,
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
+  Body as DialogBody,
+  Close as DialogClose,
+  Description as DialogDescription,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Overlay as DialogOverlay,
+  Root as DialogRoot,
+  Title as DialogTitle,
+  Trigger as DialogTrigger,
 } from "./dialog.js";
 
 /**
@@ -91,7 +91,7 @@ hook useSheet(part: string): SheetState {
 }
 
 /** The sheet, open or closed. Uncontrolled unless `open` is given. */
-export component SheetRoot(
+component SheetRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   onOpenChange?: (open: boolean) => void,
@@ -110,7 +110,7 @@ export component SheetRoot(
 }
 
 /** What opens it, and what focus comes back to when it closes. */
-export component SheetTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogTrigger {...forwarded(rest)} render={render}>
       {children}
@@ -122,7 +122,7 @@ export component SheetTrigger(children: React.Node, render?: RenderProp, ...rest
  * The backdrop, which knows the edge so a stylesheet does not have to be told
  * twice.
  */
-export component SheetOverlay(render?: RenderProp, ...rest: Rest) {
+component SheetOverlay(render?: RenderProp, ...rest: Rest) {
   const sheet = useSheet("Sheet.Overlay");
   return <DialogOverlay {...forwarded(rest)} data-side={sheet.side} render={render} />;
 }
@@ -133,7 +133,7 @@ export component SheetOverlay(render?: RenderProp, ...rest: Rest) {
  * Every modal promise `dialog.js` makes is made here, unchanged. This part adds
  * `data-side` and nothing else, which is the honest size of the difference.
  */
-export component SheetBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const sheet = useSheet("Sheet.Body");
 
   return (
@@ -144,7 +144,7 @@ export component SheetBody(children: React.Node, render?: RenderProp, ...rest: R
 }
 
 /** The top of the sheet. See `Dialog.Header` for why it is not a `<header>`. */
-export component SheetHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogHeader {...forwarded(rest)} render={render}>
       {children}
@@ -153,7 +153,7 @@ export component SheetHeader(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** The bottom of the sheet, where the actions go. */
-export component SheetFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogFooter {...forwarded(rest)} render={render}>
       {children}
@@ -162,7 +162,7 @@ export component SheetFooter(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** The sheet's accessible name. A modal without one is announced as "dialog". */
-export component SheetTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogTitle {...forwarded(rest)} render={render}>
       {children}
@@ -171,7 +171,7 @@ export component SheetTitle(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** What the sheet is for, announced after its name. */
-export component SheetDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogDescription {...forwarded(rest)} render={render}>
       {children}
@@ -180,10 +180,31 @@ export component SheetDescription(children: React.Node, render?: RenderProp, ...
 }
 
 /** A button that closes the sheet. */
-export component SheetClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SheetClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogClose {...forwarded(rest)} render={render}>
       {children}
     </DialogClose>
   );
 }
+
+/**
+ * The parts, under the names the `Sheet` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Sheet from "./sheet.js"` —
+ * so a caller writes `<Sheet.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `SheetRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  SheetRoot as Root,
+  SheetTrigger as Trigger,
+  SheetOverlay as Overlay,
+  SheetBody as Body,
+  SheetHeader as Header,
+  SheetFooter as Footer,
+  SheetTitle as Title,
+  SheetDescription as Description,
+  SheetClose as Close,
+};

package/sidebar.js

@@ -57,8 +57,13 @@ import { useMediaQuery } from "@uniflowed/hooks/browser";
 
 import type { RenderProp, Rest } from "./internal/merge-props.js";
 import { composeHandlers, forwarded, withProps, withoutComposed } from "./internal/merge-props.js";
-import { SheetBody, SheetOverlay, SheetRoot, SheetTrigger } from "./sheet.js";
-import { TooltipBody, TooltipRoot, TooltipTrigger } from "./tooltip.js";
+import {
+  Body as SheetBody,
+  Overlay as SheetOverlay,
+  Root as SheetRoot,
+  Trigger as SheetTrigger,
+} from "./sheet.js";
+import { Body as TooltipBody, Root as TooltipRoot, Trigger as TooltipTrigger } from "./tooltip.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 /**
@@ -115,7 +120,7 @@ hook useSidebar(part: string): SidebarState {
  * is the sheet's trigger and focus goes back to it — which is the half of the
  * transition a wrapper around only the navigation could not do.
  */
-export component SidebarRoot(
+component SidebarRoot(
   children: React.Node,
   defaultOpen?: boolean = true,
   narrowQuery?: string = NARROW,
@@ -167,7 +172,7 @@ export component SidebarRoot(
  * id nothing has tells a reader there is somewhere to go and has nowhere to
  * send them.
  */
-export component SidebarTrigger(children: React.Node, ...rest: Rest) {
+component SidebarTrigger(children: React.Node, ...rest: Rest) {
   const sidebar = useSidebar("Sidebar.Trigger");
   const passed = withoutComposed(rest, ["onClick"]);
   const named = sidebar.present ? `${sidebar.base}-nav` : undefined;
@@ -208,12 +213,7 @@ export component SidebarTrigger(children: React.Node, ...rest: Rest) {
  * announced as "navigation" — and a page with two of those has told the reader
  * there are two and which is which is a guess.
  */
-export component SidebarBody(
-  children: React.Node,
-  label: string,
-  sheetProps?: Rest,
-  ...rest: Rest
-) {
+component SidebarBody(children: React.Node, label: string, sheetProps?: Rest, ...rest: Rest) {
   const sidebar = useSidebar("Sidebar.Body");
   const nav = (
     <nav
@@ -243,12 +243,12 @@ export component SidebarBody(
 }
 
 /** The top of the sidebar, as a place to put styles. See `Dialog.Header`. */
-export component SidebarHeader(children: React.Node, ...rest: Rest) {
+component SidebarHeader(children: React.Node, ...rest: Rest) {
   return <div {...rest}>{children}</div>;
 }
 
 /** The bottom of the sidebar. See `Sidebar.Header`. */
-export component SidebarFooter(children: React.Node, ...rest: Rest) {
+component SidebarFooter(children: React.Node, ...rest: Rest) {
   return <div {...rest}>{children}</div>;
 }
 
@@ -267,7 +267,7 @@ export component SidebarFooter(children: React.Node, ...rest: Rest) {
  * `navigation-menu.js`, which is the same argument at the scale of a whole
  * menu.
  */
-export component SidebarItem(
+component SidebarItem(
   children: React.Node,
   label: string,
   render?: RenderProp,
@@ -275,11 +275,8 @@ export component SidebarItem(
   ...rest: Rest
 ) {
   const sidebar = useSidebar("Sidebar.Item");
-  // This removes the caller's ref from rest props; it does not read a ref value.
-  // uf-lint-disable-next-line react-compiler/refs
   const passed = withoutComposed(rest, ["ref"]);
   // The forwarded ref is passed through to whichever entry wrapper renders.
-  // uf-lint-disable-next-line react-compiler/refs
   const forwardedRef = rest.ref;
   const mine: Rest = {
     "aria-label": sidebar.collapsed ? label : undefined,
@@ -318,3 +315,21 @@ export component SidebarItem(
     </TooltipRoot>
   );
 }
+
+/**
+ * The parts, under the names the `Sidebar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Sidebar from "./sidebar.js"` —
+ * so a caller writes `<Sidebar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `SidebarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  SidebarRoot as Root,
+  SidebarTrigger as Trigger,
+  SidebarHeader as Header,
+  SidebarBody as Body,
+  SidebarFooter as Footer,
+  SidebarItem as Item,
+};

package/skeleton.js

@@ -92,7 +92,7 @@ import { withProps } from "./internal/merge-props.js";
  * beside it, mounted by this component, because that timing is the accessibility
  * contract rather than markup the caller can safely recreate by sight.
  */
-export component SkeletonRoot(
+component SkeletonRoot(
   children: React.Node,
   busy?: boolean = true,
   label?: string = "Loading…",
@@ -114,7 +114,6 @@ export component SkeletonRoot(
       return;
     }
     // The live-region text changes after commit so assistive tech can announce it.
-    // uf-lint-disable-next-line react-compiler/set-state-in-effect
     setMessage(waited.current ? doneLabel : "");
   }, [busy, doneLabel, label]);
 
@@ -154,10 +153,21 @@ export component SkeletonRoot(
  * `render` changes the placeholder element, not the fact that it is hidden
  * from the accessibility tree.
  */
-export component SkeletonBox(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component SkeletonBox(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-hidden": "true", children });
   if (render != null) {
     return render(props);
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Skeleton` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Skeleton from "./skeleton.js"` —
+ * so a caller writes `<Skeleton.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `SkeletonRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { SkeletonRoot as Root, SkeletonBox as Box };

package/slider.js

@@ -121,7 +121,7 @@ hook useSlider(part: string): SliderState {
  * with two thumbs, and a `number | [number, number]` prop would make every
  * caller narrow a union to read their own value back.
  */
-export component SliderRoot(
+component SliderRoot(
   children: React.Node,
   value?: $ReadOnlyArray<number>,
   defaultValue?: $ReadOnlyArray<number> = [0],
@@ -209,7 +209,7 @@ export component SliderRoot(
  * wanders off the track — which every drag does — keeps arriving here instead
  * of being lost to whatever it wandered over.
  */
-export component SliderTrack(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component SliderTrack(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const slider = useSlider("Slider.Track");
   const passed = withoutComposed(rest, ["onPointerDown", "onPointerMove", "onPointerUp", "ref"]);
   const dragging = useRef<number | null>(null);
@@ -291,7 +291,7 @@ export component SliderTrack(children: React.Node, render?: RenderProp, ...rest:
  * is told the value by the thumb and telling them again here would be telling
  * them twice.
  */
-export component SliderRange(render?: RenderProp, ...rest: Rest) {
+component SliderRange(render?: RenderProp, ...rest: Rest) {
   const slider = useSlider("Slider.Range");
   const passed = withoutComposed(rest, ["style"]);
   const ends = [...slider.values].sort((first, second) => first - second);
@@ -323,7 +323,7 @@ export component SliderRange(render?: RenderProp, ...rest: Rest) {
  * "Maximum" told apart is the whole difference between a control a reader can
  * operate and two identical "slider"s.
  */
-export component SliderThumb(index?: number = 0, render?: RenderProp, ...rest: Rest) {
+component SliderThumb(index?: number = 0, render?: RenderProp, ...rest: Rest) {
   const slider = useSlider("Slider.Thumb");
   const passed = withoutComposed(rest, ["onKeyDown", "style"]);
   const value = slider.values[index] ?? slider.min;
@@ -409,3 +409,14 @@ function boundsOf(
   const above = index < values.length - 1 ? values[index + 1] : undefined;
   return [below ?? min, above ?? max];
 }
+
+/**
+ * The parts, under the names the `Slider` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Slider from "./slider.js"` —
+ * so a caller writes `<Slider.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `SliderRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { SliderRoot as Root, SliderTrack as Track, SliderRange as Range, SliderThumb as Thumb };